Hi guys

Ive been trying to learn CSS layout making and ive decided to do this new site with it but im hitting a couple of minor hiccups. I'd appreciate any comment on the code if there are blatant bad uses of code etc.

Can anyone tell me why my page extends wider than the screen causing a horizontal scroll bar to appear?

Also, how can i make the box on the right stay at the top of the page when there is text in it, instead of it getting nudged down.

http://www.teamlines.net/Rotary

http://www.teamlines.net/Rotary/style.css


Any help would be gratefully recieved!

Stoot

You need to start over - more or less.
You do NOT need to have everything set to position: absolute or position: relative either. Use the normal document flow - top to bottom, left to right - and use floats for your layout. Use position: absolute only where absolutely (no pun intended) necessary.

I think the previous comment is good advice. But I personally like positioning layers sometimes. Anyway, I took a look at your style sheet and the "width:100%" for your titles layer (#titles) is what is causing the scrollbar. What you are doing is making this layer 100% of the screen and then shifting it left 15% - so you are always going to have a scroll bar for that extra 15% on the right side.

Good luck.

Thanks for the replies - i know can always rely on LadyNRed to stop me from doing stupid stuff...

Ive never really formally looked into the how to make up layouts with css which obviously has bitten me in the ***. I had a lok at this tutorial and its very useful if anyone else is interested (http://www.subcide.com/tutorials/csslayout/page7.aspx)

SO, ive redone it and it is approximately 500 times better, . However, a couple of problems have arisen.

First of all, for some reason the text within a couple of my DIVs doesnt appear in it but above it (Footer especially, Content seems to be fixed). Also im trying to get the two images that make the wheel up to align but there seems to be a gap between the bottom of the top part and the bottom of the DIV and the horizontal alignment isn't right either....

http://www.teamlines.net/Rotary/index2.php

http://www.teamlines.net/Rotary/style1.css

Cheers
Stoot

Ok, I'm not sure why you have that image sliced the way you do. I wouldn't slice it at all. I'd use the logo, with the stripe, all as one graphic, then position it so it sits where you want it to line up with the horizontal bars that goes all the way across.

I would make the blue brown stripe a background of the #wrapper. It's sort of a 'layering' technique that I've used a number of times. Then you position it like this:

#wrapper{
position: relative;
background: url(barMiddle.gif) repeat-x 0px 130px;

}

Like these:
http://www.southernkentuckyurology.com/
http://www.springshadowsfamily.com

That will eliminate the need for barleft, barright, etc. Slicing up graphics is an old habit from tables. You need to think about background graphics a bit differently.

I wish that putting 'clear:both' on an element worked correctly every time, but it does not. You've got 'float: left' and 'clear: both' together on #menus and that's just not going to work properly. Clear the float AFTER the floated element, not on it.

Excellent. I have done that and its working pretty well, just one more problem (....yes, another... ). My menu div doesnt expand with the content, what do i have to set/change to make it do so - probably a trivial thing to fix, but there you go....

Cheers again
Stoot

That is because the float has not been cleared.
I usually use this method to clear floats:
.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
Then in your HTML, you add <br class="brclear" /> - and it should go after the closing div tag just before your footer.

You will also get margin-doubling in the #menu div in IE because if it's doubled float margin bug - float:left and margin-left: 40px will be doubled to 80 in IE.

The fix is here;
http://www.positioniseverything.net/...ed-margin.html

At first i thought you were just ridiculously good at css and all that jazz but it seems you have mind-reading powers aswell! lol. I just came back to the thread to ask why in IE 6 the margin was doubling and shifting everything sideways but alas you have already covered it.

Ive applied that fix and its working great now apart from one tiny problem in IE6 where there is a 3/4pixel gap between the header div and the titles div which means that the horizontal bar doesnt join up. Is there a fix for this or am i destined to never get this looking right?

Thanks alot

Stoot