clicky I can't work out why the centre column is not snugly sat at the top of the page, something has moved it down by about 20 pixels, usually its due to me missing a margin or padding tag but not this time. any ideas?
Hmm. I always suck with diagnosing this sort of issue. If it helps you/anyone else, this fixes the issue kind of: Code: .content{ position:relative; top:0px; width:800px; min-width:800px; margin:0px auto; height:100%; background-image:url('bg.jpg'); background-repeat:repeat-y; padding:0px; z-index:2; border: 1px solid black; } I say kind of since you shouldn't need to add a border. Not sure why this fixes the issue, but hopefully this post can help someone else with figuring out the actual cause.
that's bizarre, it does indeed sort of fix it, im just left with a border that i don't ideally want. Thanks for the reply anyway, just a shame adding a 0px border doesn't work hehe
just messing about with a layout and i just suppose its how i do things, wrongly by the sounds of it. *edit that may of sounded slightly ungrateful, any help/advice is hugely appreciated, im basically taught myself css so i am most likely doing it wrong.
Try this, and save yourself alot of work... Code: body { font-family: Arial; /* or whatever font you wanna use */ background: #000000; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000; /* font-color for all the text if not specified otherwise */ } #container { width: 1000px; margin: auto; /* the auto margins (in conjunction with a width) center the page */ text-align: left; /* this overrides the text-align: center on the body element. */ background: #FFFFFF; } #content { width: 800px; margin: 0px auto; height: 100%; background-image: url('bg.jpg'); background-repeat: repeat-y; padding: 0px; } h3{ text-align:center; } You don't need left and right, but only two containers. One inside the other. HTML would look like this then.... Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel='stylesheet' type="text/css" href='layout.css'/> <title></title> </head> <body> <div id="container"> <div id="content"> <h3></h3> </div> </div> </body> </html> Oh, and I'd work with IDs for the containers and classes only for other stuff like text-formats etc. Makes it easier to determine, what is what later on.
thanks for the reply. My plan was to eventually ditch the left and right and just use a background image in the body. i copied your code and tried it out, however it isn't working for me. No matter what i try the bg.jpg isn't showing, its just a black screen with whatever text i wrote it in. However after messing about with my own some more (removing 90% of the code that didn't need to be there.) it is now sorted, the h3 tag was causing the gap at the top. just quickly but is this more or less ideal for what i was trying to achieve? Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel='stylesheet' type="text/css" href='layout.css'/> <title></title> </head> <body> <div class="content"> </div> </body> </html> Code: html, body { margin: 0; padding: 0; height:100%; width:100%; background-color:black; } .content{ width:800px; margin:0px auto; height:100%; background-image:url('bg.jpg'); background-repeat:repeat-y; }
Im having the same problem again even with your code, as soon as i add a h3 tag or add a margin to the content div it screw things up the same.
linky the problem is that there shouldn't be the gap below the top of the page and the centre column. code is as follows: Code: html, body { margin: 0; padding: 0; height:100%; width:100%; background-color:gray; } .wrapper{ width:800px; margin:0px auto; height:100%; background-image:url('bg.jpg'); background-repeat:repeat-y; } #content{ } Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel='stylesheet' type="text/css" href='layout.css'/> <title></title> </head> <body> <div class="wrapper"> <div id="content"> <h3>Title</h3> </div> </div> </body> </html>
I can't really visual the problem without playing round with the code myself which I can't do at the moment but... Not sure if it will fix the problem, but surely the wrapper should be an ID and not a class. Also, I'm not sure you need any of that margin stuff in there surely? Try taking that out as well.
changing it from a class to an id doesn't help, as i have tried and forgot to turn it back by the looks of it. the margin stuff is indeed needed, removing it screws up the design but doesn't close the gap at the top.
The problem you have is, that you're putting the h3-tag into the same "box" as your background-image. That's why I gave you the advice to make a box in a box. The outer box contaiuns the background-image and the inner box contains the content including the h3-tags etc. CSS... Code: body { background: #000000; margin: 0; padding: 0; text-align: center; } #container { width: 800px; margin: auto; background: url(bg.jpg) repeat-y; height: 100%; } #content { margin: 0px auto; padding: 0px 10px; text-align: left; } h3{ text-align:center; } HTML... Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel='stylesheet' type="text/css" href='layout.css'/> <title></title> </head> <body> <div id="container"> <div id="content"> <h3></h3> </div> </div> </body> </html> I can't write the thing for you so that you only need to copy and paste it, you need to understand how this works. But try to copy the above and see what it does.
but thats what i have done isn't it? wrapper contains the image content contains the h3 tag I know you must be right and somewhere im going fatally wrong just for some reason i can't see it. Il insert the bits of the code provided that i haven't put in and see what changes what.
Get rid of the H3-tag and use your own... The H3-Tag has a padding you don't want. Change H3 to head1 in CSS and HTML and it worky fine. Sorry for not seeing this problem earlier. Don't use the standard-tags is what I'd recommend as they're preformatted and you can't change that.
but surely the h3 padding shouldn't move the whole image, just the h3 text? As its position should be based on the wrapper not on the body/html.
It would be logical yes, however these standard-formats override some things. Simply define all tags yourself and don't use the pre-formatted ones. That's what I do and the reason I didn't thiought of this problem in the first place.
all you have to do to remove the padding on a h3 tag is add the css Code: h3 { padding: 0px; margin: 0px; } You should ALWAYS use the Heading tags, it gives the page stucture and makes it more SEO friendly.
thanks both for the replies, this rather odd problem is now fixed. I can easily avoid adding any thing to the top margin.
Why do you just don't create your own headings, like: topic1, topic2, topic3 etc? Makes it just as structured and you don't need to add tons of formatting to redefine the standard ones Anyways. Glad we could help finding a solution for the problem.