Help with CSS layout

Dave!

Hey gang,

Just wondering if someone could take a look at the attached website for me

It's just a basic site with crazy colours so that I can distinguish between different div's, etc.

I'm just trying to get acquainted with CSS layouts. It's something I've always had trouble with, and no matter how many tutorials, etc., I look at, I can never build a layout from scratch :mad: So I have to rely on templates, and chop them up until they look how I want. I reckon it's a good idea to learn to do it from scratch.

Just on the site I posted, I'm just looking to have a layout that's like a blog, with each entry being in a div.

The layout I'm looking for is like:

------------------------------
          TOP    BANNER
------------------------------
[date]        ENTRY
------------------------------
[date]        ENTRY
etc             etc
------------------------------
[date]        ENTRY
------------------------------
[date]        ENTRY
------------------------------
              footer
------------------------------

But when I float the div for the date stamp to the left, all the rest of the layout ends up going underneath it. I know when you float things, it effectively takes them out of the flow of the document, but I don't know how to fix it so that the date remains in the top left of each of those divs.

Also the red background for the page-container should not be visible at all.


Thanks for any help folks


I'll probably end up posting here regularly as I encounter more problems...

Gordon

Until a pro comes in I'll take a stab.

I moved the clear bit to the actual entry div so that it clears any floats from prior divs, which should sort out the overlap. And I added a minimum height value for that div also to accomodate a minimum of 85px which is your date image plus 5+5px top and bottom.

Not sure if text-shadow is an attribute that all browsers see btw, FF Mac doesn't for sure. hth

html, body {
	padding: 0px;
	margin: 0px;	
}

body {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#page-container {
	width: 760px;
	background: red;
	margin: auto;
}

#header {
	margin-top: 15px;
	height: 100px;
	background: green;
}

#entry {
	padding: 0px;
/*	padding-bottom: 20px;  */
	margin: 0px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background: yellow;
	min-height: 85px;
	clear: both;
}

#footer {
	padding: 5px;
	background: brown;
	clear: both;
	text-align: center;
}

#entry div#date {
	text-shadow: 2px 3px 3px #000;
	font-size: 20px;
	float: left;
	padding: 0px;
	margin: 5px 5px 5px 5px;
	height: 75px;
	width: 75px;
	background: #fff url('stamp.png') no-repeat;
}

#entry div#date p {
	text-align: center;
}

Goodshape

I'd add an overflow : hidden on the #entry div. That will cause the div to expand to include the nested floating elements, and so you shouldn't need min-height or clear.

Unfortunately min-height doesn't work in IE6.

Dave!

Cheers lads, that sorted it

I'm sure I'll be on here pestering ye again soon enough, but this layout/site is looking reasonably good at the moment, so I reckon I'll call this one a success

Now I'm gonna have to look into the clear and overflow options so that I actually understand why those were the solutions

Much obliged

Goodshape

Dave! wrote: »

Cheers lads, that sorted it

Happy to help.

The overflow fix isn't really that properties intended purpose -- it's supposed to determine the visibility of text which is too long to fit in a fixed height div. You can set the div to hide the overflow, let it run outside the div bondries, or add scrollbars to the div.

But with no height specified, it's the best method I've come across for getting past this annoying floating div issue.


Clear works just as well in a lot of situations (including this one) but you can run into problems when you have numerous floating elements and you end up clearing more than you wanted.

Good luck with the layout.

Dave!

Cheers

Quick question -- how do you normally handle text overflowing from a div?

eg. I'm entering text for a blog entry on this site, and I want it to be laid out on the screen the way I type it in the file -- except, when it gets to the end of the div, it should go onto the next line.

Setting white-space to 'pre' makes it appear as typed -- but it doesn't make it go to the next line when it reaches the end of the div; it's just 'hidden' when it 'overflows'

Setting word-wrap to 'break-word' does handle the latter -- but it doesn't make it appear as typed :pac:

Unfortunately it doesn't appear that both can be applied simultaneously!

Thanks again


edit:

I uploaded the latest zip... Doesn't look too bad, the banner is only temporary! And I'll make sure it all validates once I get it how I want it

Goodshape

Dave! wrote: »

Quick question -- how do you normally handle text overflowing from a div?

eg. I'm entering text for a blog entry on this site, and I want it to be laid out on the screen the way I type it in the file -- except, when it gets to the end of the div, it should go onto the next line.

I'm not too sure what you mean here.

The text is inside the div, no? -- and the div (#entry) should be expanding to contain it. What over-flow are you talking about?

Dave!

But when the text reaches the end (horizontally) of the div, it keeps going, and it's no longer visible as it goes off the end of the div.

It expands vertically, yeah

Goodshape

Dave! wrote: »

But when the text reaches the end (horizontally) of the div, it keeps going, and it's no longer visible as it goes off the end of the div.

Hmm, I don't see that in either of the versions you posted up here.

The default white-space (white-space : normal;) should cause the text to wrap, well, normally.

Goodshape

Rather than using white-space : pre;, you should be using proper paragraph (<p>) tags to split up your text.

e.g.

<p>
My chest and arms were still in agony yesterday, so I opted to take the day off and recuperate! Was feeling better today, but not 100%, so I 
went to the gym again but left the weights. Another enjoyable session! Spent a good 40 minutes on the treadmill, alternating between brisk 
walking and jogging. Each time I've been doing more jogging and less walking, so I'll probably continue in that vein tomorrow. After the 
treadmill I just did 10 minutes on the bike, jayzus that takes it outa ya.  My thighs feel like they weigh a tonne after using that thing! I end
up walking like John Wayne for a while after!

Anyways, back to the weights tomorrow I reckon. Straight to the dumbells, and then see can I find that device for the preacher curls. I'll give 
a good bit of time to the weights tomorrow, and then probably do the treadmill with as much jogging as possible.

My t-shirt was wringing wet today with sweat, so I reckon that's a good thing! I'll weigh myself tomorrow I reckon, and do so once a week from 
now on. I'll do a little graph of my weight over time then :-)
</p>

should be :

<p>
My chest and arms were still in agony yesterday, so I opted to take the day off and recuperate! Was feeling better today, but not 100%, so I 
went to the gym again but left the weights. Another enjoyable session! Spent a good 40 minutes on the treadmill, alternating between brisk 
walking and jogging. Each time I've been doing more jogging and less walking, so I'll probably continue in that vein tomorrow. After the 
treadmill I just did 10 minutes on the bike, jayzus that takes it outa ya.  My thighs feel like they weigh a tonne after using that thing! I end
up walking like John Wayne for a while after!
</p>
<p>
Anyways, back to the weights tomorrow I reckon. Straight to the dumbells, and then see can I find that device for the preacher curls. I'll give 
a good bit of time to the weights tomorrow, and then probably do the treadmill with as much jogging as possible.
</p>
<p>
My t-shirt was wringing wet today with sweat, so I reckon that's a good thing! I'll weigh myself tomorrow I reckon, and do so once a week from 
now on. I'll do a little graph of my weight over time then :-)
</p>

<p> is for paragraphs. If you want to separate paragraphs, enclose each one in <p></p> tags.