13 replies [Last post]
webopolis
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2008-07-24
Posts: 7
Points: 0

It's a constant, daily struggle to stay away from the old way (tables), but I'm resisting.

I think I'm close to accomplishing what I'm trying to do here, but I've run out of ideas. The content in the "copy" div is over flowing it's boundaries. I need to figure out how to make that stop, without having a scroll bar appear in that div. A scroll bar for the whole page is fine.

Any help is appreciated.

Here's the HTML and CSS:

http://www.joenobody.com/sample

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Your problems stem from

Your problems stem from attempting to layout this page using Absolute positioning. I'm afraid that you will need to rethink the whole page pretty much.

I also suspect that you are being led astray by some pernicious editor, this belief comes from the rather odd slicing of that graphic sitting in the content box, why on earth does that need to be twelve slices? It doesn't and shouldn't nor should the boxes corner graphics be set as inline foreground images.

Your box simply needs it's width set and for that outer box element to have auto margins on the horizontal plane this will center it to the viewport, as for height you must let content dictate height so that the rounded corner box can expand. You will need to set the corner graphic slices as background images of the outer box and of the inner box one set to top the other to the bottom, thus when your content increases so will your box while retaining it's look.

You might well need further help with this but have a go at re-working the layout and post back when and if further assistance is required and someone will take a look.

On a side note you must learn to validate your markup, to correct any little issues that may be creeping in, Firefox and the html-tidy plugin allow you to do this as you work.

Lastly if you are following the dictates of a well known editor, please be extremely wary of what it tries to do it's often wrong!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webopolis
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2008-07-24
Posts: 7
Points: 0

Nope, no editor...

I use TextPad, as I have for years. I hate WYSIWYG editors. I'm from the old school as far as layout, so I've been working on my CSS layout skills. As for the sliced images, I'm using that technique to "wrap" the copy around the images like you'd see in a magazine.

I'm cool with the suggestion I start from scratch, that's part of the learning process. However, can you offer some suggestions?

Thanks...

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 35 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

webopolis wrote:I'm using

webopolis wrote:

I'm using that technique to "wrap" the copy around the images like you'd see in a magazine.

Thing is, the web is not a magazine and it is not paper. Things that work well in such media do not necessarily work on the web, in fact they very often don't.

May I suggest you read this article to see what I mean.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

webopolis
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2008-07-24
Posts: 7
Points: 0

Irrelevant discussion...

This is an irrelevant philosophical discussion that has nothing to do with the original request for assistance.

I wouldn't use the method if it didn't work in the 2 browsers I develop for.

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 13 years 9 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Your page is working now in

Your page is working now in IE/6, IE/7, and compliant browsers with font-scaling-- and, not shooting the text out the bottom. No heights declared on text containing wrappers. No absolute positioning needed. The top rounded image flipped 180 degrees to make the bottom rounded image. The CSS and HTML are now valid. You're on your own as far as support for transparent png in IE/6.

On line example here:
http://www.chelseacreekstudio.com/ca/cssd/test-11.html

Markup and CSS for the forum archives below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="HTML Tidy for Linux/x86 (vers 1st November 2002), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>test-11</title>
 
<style type="text/css">
 
 
html, body {
background : #6599ff;
color : #000;
margin : 0;
padding : 0;
}
body {
font : 100%/1.4 Georgia, serif;
}
img {
display : block;
margin-left : 10px;
}
#page {
background : #6599ff url(<a href="http://www.joenobody.com/sample/assets/images/littlescribbles.jpg" rel="nofollow">http://www.joenobody.com/sample/assets/images/littlescribbles.jpg</a>) no-repeat;
width : 1000px;
margin : 0 auto;
overflow : hidden;
}
#header {
background : url(<a href="http://www.joenobody.com/sample/assets/images/logo.png" rel="nofollow">http://www.joenobody.com/sample/assets/images/logo.png</a>) no-repeat 50% 0%;
height : 200px;
}
#footer {
color : #fff;
margin : 0 auto;
width : 699px;
text-align : center;
}
.content {
background : #fff;
margin : 0 auto;
overflow : hidden;
padding : 15px 0;
width : 699px;
}
.row {
height : 12px;
margin : 0 auto;
width : 699px;
}
.top {
background : url(top.png) no-repeat;
}
.bottom {
background : url(bottom.png) no-repeat;
}
.main {
float : right;
width : 515px;
}
.main p {
margin : 0 20px 0 0;
}
.minor p {
clear : both;
margin : 0 20px;
padding : 20px 0;
}
.box {
display : table;
width : 180px;
height : 120px;
}
</style>
 
</head>
 
<body>
<div id="page">
<div id="header"><!-- --></div>
 
<div class="row top"><!-- --></div>
 
<div class="content">
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed libero dui, condimentum eu, fringilla vel, dapibus in, nisl. Mauris elementum faucibus mauris. Cras id arcu. Cras sollicitudin vulputate ante. Sed nec quam feugiat dolor varius interdum. Fusce non massa. Donec felis. In lectus. Aenean vestibulum sagittis lectus. Mauris velit. Aliquam at ligula. Proin sollicitudin nunc sit amet nunc. Fusce volutpat, lorem in accumsan rutrum, felis velit egestas felis, auctor molestie nulla risus imperdiet dui. Nulla facilisi. Sed nec nibh. Mauris sagittis. Praesent enim enim, pretium vel, interdum in, sollicitudin et, nulla. Donec bibendum.</p>
</div>
<div class="box c1">
      <img src="http://www.joenobody.com/sample/assets/images/boy01.png" alt="" />
      <img src="http://www.joenobody.com/sample/assets/images/boy02.png" alt="" />
      <img src="http://www.joenobody.com/sample/assets/images/boy03.png" alt="" />
      <img src="http://www.joenobody.com/sample/assets/images/boy04.png" alt="" />
      <img src="http://www.joenobody.com/sample/assets/images/boy05.png" alt="" />
      <img src="http://www.joenobody.com/sample/assets/images/boy06.png" alt="" />
      <img src="http://www.joenobody.com/sample/assets/images/boy07.png" alt="" />
      <img src="http://www.joenobody.com/sample/assets/images/boy08.png" alt="" />
      <img src="http://www.joenobody.com/sample/assets/images/boy09.png" alt="" />
      <img src="http://www.joenobody.com/sample/assets/images/boy10.png" alt="" />
      <img src="http://www.joenobody.com/sample/assets/images/boy11.png" alt="" />
      <img src="http://www.joenobody.com/sample/assets/images/boy12.png" alt="" />
      <img src="http://www.joenobody.com/sample/assets/images/boy13.png" alt="" />
</div>
</div>
 
<div class="content minor">
<p> Maecenas eget augue eget lectus auctor imperdiet. Proin quis metus ac neque semper tempus. Aliquam eleifend, purus at commodo ultrices, magna sem ultricies mi, eu posuere turpis ipsum non urna. Cras commodo libero eget ligula ullamcorper imperdiet. Suspendisse feugiat. Etiam adipiscing accumsan urna. Sed risus sapien, tempor imperdiet, lacinia interdum, volutpat sed, arcu. Nam auctor ante eu nulla. Integer vitae orci. Mauris sed sapien ut nibh vulputate scelerisque. Ut ullamcorper. Aliquam erat volutpat.</p>
</div>
 
<div class="content">
<div class="main">
<p>Praesent egestas facilisis elit. Morbi tincidunt. Donec porta eleifend quam. Vivamus rhoncus consequat est. Mauris tincidunt elementum arcu. Quisque aliquam purus luctus diam. Nam augue. Donec luctus vestibulum leo. Etiam magna libero, dictum eu, tincidunt sodales, sagittis sollicitudin, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec id enim facilisis neque pretium blandit. Mauris nec enim. Nulla viverra. Ut non massa a augue volutpat mollis. Phasellus felis turpis, cursus sed, tempor quis, vehicula a, purus.</p>
</div>
<div class="box c2">
      <img src="http://www.joenobody.com/sample/assets/images/blocks01.png" alt="" />
	  <img src="http://www.joenobody.com/sample/assets/images/blocks02.png" alt="" />
	  <img src="http://www.joenobody.com/sample/assets/images/blocks03.png" alt="" />
	  <img src="http://www.joenobody.com/sample/assets/images/blocks04.png" alt="" />
	  <img src="http://www.joenobody.com/sample/assets/images/blocks05.png" alt="" />
	  <img src="http://www.joenobody.com/sample/assets/images/blocks06.png" alt="" />
	  <img src="http://www.joenobody.com/sample/assets/images/blocks07.png" alt="" />
	  <img src="http://www.joenobody.com/sample/assets/images/blocks08.png" alt="" />
	  <img src="http://www.joenobody.com/sample/assets/images/blocks09.png" alt="" />
	  <img src="http://www.joenobody.com/sample/assets/images/blocks10.png" alt="" />
</div>
</div>
 
<div class="row bottom"><!-- --></div>
<div id="footer"><p>Design and Layout Copyright 2008, Little Scribblers Academy. All Rights Reserved.</p></div>
 
</div><!--/page-->
</body>
</html>

PS
Stop whinning.

webopolis
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2008-07-24
Posts: 7
Points: 0

Thank you very much

I appreciate your help tremendously.

PS
I wasn't whining. I was simply trying to keep the thread on task.

Thank you again for your help.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

So your good to go? Realise

So your good to go?

Realise you weren't whining Smile that was a little harsh.

I get what you were intending with the graphic sliced that way just wasn't seeing the intended affect and it can look good.

I hope that despite having had all the work done for you you grasped the principle and why your original layout wasn't working? Usually we prefer to walk people through the processes step by step as generally they will tend to learn more when they actually code the changes themselves, but it's a small point as long as you can appreciate the changes.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webopolis
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2008-07-24
Posts: 7
Points: 0

Good to go...

Yes. I do appreciate the guidance. I've been designing and developing Web sites since 1995 -- with about a 3 year hiatus after I started a sign business. A lot changed in the 3 years I was away. I typically learn pretty quick, but all the ins and outs of CSS have been a challenge.

The provided solution isn't exactly what I was looking for, but it's a start. I needed the main area to stretch to the full height of the page, whether it had sufficient content or not, but scroll the page when it went beyond the height of the viewport. Further help is greatly appreciated -- In the mean time, I'll read and experiment, and try to solve it myself as well.

Thanks again.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 35 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

webopolis wrote:This is an

webopolis wrote:

This is an irrelevant philosophical discussion that has nothing to do with the original request for assistance.

I'd say that understanding the medium you are working in is pure practicality myself, but then it's your choice. I charge the same thing for advice here as everyone else, namely nothing, so anyway you can be sure you are getting at least your money's worth.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 13 years 9 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

webopolis wrote: The

webopolis wrote:

The provided solution isn't exactly what I was looking for, but it's a start. I needed the main area to stretch to the full height of the page, whether it had sufficient content or not, but scroll the page when it went beyond the height of the viewport.

Yep. Your on your way to yet another control freak disaster. Let go. Personal opinion, of course.

webopolis
Offline
newbie
Last seen: 13 years 11 weeks ago
Joined: 2008-07-24
Posts: 7
Points: 0

Forgive me...

@David Laasko -- Not sure I understand your response. Sorry for being a dunce.

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 13 years 9 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

You might say, as you put it

You might say, as you put it earlier in the thread, that this is just another "irrelevant philosophical discussion." I simply mean things often go better for Web authors -- and much more important -- for Web users, when a page and its content is not restricted. The software is perfectly capable of giving the user a meaningful and enjoyable experience without your interference. Could you let it do so?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I think what people are

I think what people are trying to express is the belief that one doesn't try and control layouts in respect of height or try to treat the viewport as a graphic canvas.If you really need to center that object then it's quite easy with css and the use of the display table properties, naturally IE and it's dev team couldn't figure out how to the property worked? so decided to leave it out making life just that little bit harder Smile There is a technique that can be used to get around this which involves setting an outer element position relative and and a top value 50% then on the inner element you reverse the top offset

Have a look at Gary's example which shows this approach in action. There are other variations on this which use position absolute and you can also take the single cell table approach.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me