Click to See Complete Forum and Search --> : Start of a CSS Layout, What Am I Doing Wrong?
JesseG
04-08-2008, 04:02 PM
Alright this is my first real shot at a big CSS layout as I was advised it was the best way to do what I want to do. I spent several hours going over the very basics of CSS, so this project is a bit out of my range, however it is something that needs to get done, no matter how much time it takes. So if it's extremely wrong, that would be why.
Im working on the very top of my layout with the Banner, two small column boxes on both sides and an ad in the middle of the two.
What I want to get is (this is a picture from the actual layout): http://www.intensesoldiers.com/v4/imgs/example_full.jpg
And what I got was: www.intensesoldiers.com/v4/intense_soldiers.htm
What exactly am I doing wrong? I know there is probably lots but cut me a little slack.
The code for the website is:
<body>
<div id="container">
<div id="bodycontainer">
<div id="headerbanner">
<img src="http://www.intensesoldiers.com/v4/imgs/header_bg.jpg" alt="" style="border: 0px" width="944" height="140" /></div>
<div id="login">LOL</div>
<div id="topad"></div>
<div id="rightcolumn">test
</div>
</div>
</div>
</body>
and the CSS file:
/* **---------------------------Body--------------------------------** */
body
{
margin: 0px;
padding: 0px;
background: #919191 url(http://www.intensesoldiers.com/v4/imgs/background.jpg) repeat;
color: #4C594E;
font: 8pt verdana
}
/* **------------------------Container--------------------------** */
#container
{
clear: both;
background: url(http://www.intensesoldiers.com/v4/imgs/base_bg.jpg) repeat-y;
width: 1004px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px
}
#bodycontainer
{
clear: both;
width: 944px;
margin-right: auto;
margin-left: auto;
padding: 0px
}
/* **--------------------------------Navigation--------------------------------** */
/* **---------------------------Login & Right Column------------------------------** */
#login
{
background: url(http://www.intensesoldiers.com/v4/imgs/login_bg.jpg) no-repeat top left;
float: left;
width: 177px;
height: 97px;
padding: 5px 5px 5px 5px;
color: #4C594E;
font: 8pt verdana
}
#rightcolumn
{
background: url(http://www.intensesoldiers.com/v4/imgs/login_bg.jpg) no-repeat top left;
float: right;
padding: 5px 5px 5px 5px;
width: 177px;
height: 97px;
font: 8pt Verdana
/* **---------------------------------Advertisements--------------------------------------** */
#topad
{
background: url(http://www.intensesoldiers.com/v4/imgs/topad_bg.jpg) repeat top left;
width: 590px;
height: 97px;
}
JesseG
04-08-2008, 06:05 PM
29 views and no replies?
WebJoel
04-08-2008, 06:21 PM
Patience there youngblood. :D -We have day-jobs too. :p
Right off the bat I see an error in your CSS code:
#rightcolumn
{
background: url(XXXXXXXXXXX.xxx) no-repeat top left;
float: right;
padding: 5px 5px 5px 5px;
width: 177px;
height: 97px;
font: 8pt Verdana
/* **---------------------------------Advertisements--------------------------------------** */
#topad
{
background: url(XXXXXXXX.xxx.... See it? There is no closing delimiter bracket " } " for #rightcolumn...
I assume that if this were corrected, a few more 'errors' will manifest themselves...
David Harrison
04-08-2008, 06:28 PM
You've got to clear the floats. When you float something you allow it to break out of it's parent container so that other elements can flow round it nicely.
To get the parent to completely encompass the columns again, you need to add in an addition element after the columns and apply clear:both; to it. The clear property stops things from floating on the left, right, or both sides of it, therefore since it comes after the columns, and things aren't allowed to float next to it, the parent element is forced to stretch down and contain them all.
If your layout calls for more tricks, such as making the columns equal length, even when they have unequal content, you may want to take a trip to A List Apart and read up all you can find about layouts.
Speficically:
Elastic Design (http://www.alistapart.com/articles/elastic)
Faux Columns (http://www.alistapart.com/articles/fauxcolumns)
Negative Margins (http://www.alistapart.com/articles/negativemargins)
Holy Grail (http://www.alistapart.com/articles/holygrail)
There are of course far more articles out there on the net about CSS column layouts, but these articles will certainly get you well on your way.
Centauri
04-08-2008, 06:33 PM
There are a few problems here so far. Firstly, the "clear" property is used to make sure the element in which it is set appears below any floated elements before it, rather than slide behind them - it does not have any effect on internal floats. If you want to force a container to enclose internal floats, then either make sure the last internal element is not floated and has clear set, or use the overflow property of the container (set to anything other than the default of "visible") :#container
{
overflow: hidden;
background: url(http://www.intensesoldiers.com/v4/imgs/base_bg.jpg) repeat-y;
width: 1004px;
height: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px
}
Next, the #bodycontainer div seems to do nothing except form a margin between the content and the edge of the layout - this div can actually be removed completely, and these margins done with padding on the #container div instead :#container
{
overflow: hidden;
background: url(http://www.intensesoldiers.com/v4/imgs/base_bg.jpg) repeat-y;
width: 944px;
height: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0 30px;
}Also note that 100% height will not work unless the parent element (in this case the body AND html elements) also have their height set, otherwise it defaults to "auto"
You must also take into account paddings when calculating the size of elements - padding (and borders) are ADDED to the size - your #login and #rightcolumn divs are actually 10px larger than the background due to the 5px padding all round - the set width and height should be 10px smaller than they are now.
If you are putting floated elements beside non-floated ones, the floats must come first in the html (ie #rightcolumn needs to come before #topad) - note that unless you specify a left margin on the non floated #topad, it will slide in behind #login.
Centauri
04-08-2008, 06:44 PM
Following on from what Dave said above, if you wanted full length columns either side (not sure as your example layout pic does not show that much), then consider changing the main background graphic to include these columns, something like the graphic attached (ala the faux column technique which Dave linked to).
JesseG
04-08-2008, 06:48 PM
Thanks for the help everyone. Ive fixed the dumb error (forgetting the closing bracket).
I took out the padding and it fixed the alignment issues. Im just a little unsure about the clears. Where exactly do I use them?
As of right now, I have the left column and the ad set in place properly, and the right column is lined up but its on the line below.
Update: http://www.intensesoldiers.com/v4/intense_soldiers.htm
Also Centauri, that idea is good however this is only the very top of the layout and theres whole other sections below it (which Im sure Ill be asking help for later).
Just a bit of confusion with the clear thing right now.
WebJoel
04-08-2008, 06:49 PM
Note at detailed as the excellent advices above, but here is a quickie redux that at least looks the same for IE7 and Firefox:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>intensesoldiers.com</title>
<meta http-equiv="Content-Language" content="en-ca" />
<!-- link rel="stylesheet" type="text/css" href="isv42.css" / -->
<style type="text/css">
* {margin:0; padding:0;}
html, body {height:100%; background-color:#000;}
body{background:#000 url(.....intensesoldiers .com/v4/imgs/background.jpg) repeat; color:#4C594E; font:8pt verdana;}
/* Container */
#container {position:relative; clear:both; background: url(....intensesoldiers .com/v4/imgs/base_bg.jpg) repeat-y;
width:945px; height:100%; margin:0 auto;}
#bodycontainer {clear:both; width:944px; margin:0 auto;}
/* Navigation */
/* Login & Right Column */
#login {background: url(....intensesoldiers .com/v4/imgs/login_bg.jpg) no-repeat top left;
float:left; margin-left:4px; width:177px; height:97px; padding:5px 5px 0 5px; color:#4C594E; font:8pt verdana}
#rightcolumn {background: url(....intensesoldiers .com/v4/imgs/login_bg.jpg) no-repeat top left;
position:absolute; right:-9px; top:140px; padding:5px 5px 0 5px; width:177px; height:97px; font:8pt Verdana;}
/* Advertisements */
#topad {background:url(....intensesoldiers .com/v4/imgs/topad_bg.jpg) repeat top left; width:590px; height:97px; margin:0 auto;}
</style>
</head>
<body>
<div id="container">
<div id="bodycontainer">
<div id="headerbanner">
<img src="....intensesoldiers .com/v4/imgs/header_bg.jpg" alt="" style="border: 0; width:944px; 140px;" /></div>
<div id="login">login section</div>
<div id="topad"></div>
<div id="rightcolumn">right column section</div>
</div>
</div>
</body>
</html> I/we assume that you'll want the "login" and "rightcolumn" be the height of the container... easily done but I'll leave that for another time..
Note that I 'commented out' your external CSS, and created a STYLE in-page. That is what is working here
JesseG
04-08-2008, 07:03 PM
Thanks for the help Joel.
The only issue I found with it was the background was not wide enough, and after changing it, it messed up a bunch of stuff. And you changed the CSS a bit and Im not sure what to work with to fix it.
Image: http://www.intensesoldiers.com/v4/imgs/compare.jpg
Also if youre wondering where the layout goes after this, heres a larger preview: http://www.intensesoldiers.com/v4/imgs/fulllaypreview.jpg
Centauri
04-08-2008, 07:38 PM
Note what I said above about the order of floats beside non-floats - #rightcolumn needs to come before #topad - and clears are not needed here.
html:<div id="container">
<div id="headerbanner">
<img src="http://www.intensesoldiers.com/v4/imgs/header_bg.jpg" alt="" style="border: 0px none ;" height="140" width="944"></div>
<div id="login">login section</div>
<div id="rightcolumn">right column section</div>
<div id="topad">advertisement</div>
</div>
css :/* **---------------------------Body--------------------------------** */
body
{
margin: 0px;
padding: 0px;
background: #919191 url(http://www.intensesoldiers.com/v4/imgs/background.jpg) repeat;
color: #4C594E;
font: 8pt verdana
}
/* **------------------------Container--------------------------** */
#container
{
overflow: hidden;
clear: both;
background: url(http://www.intensesoldiers.com/v4/imgs/base_bg.jpg) repeat-y;
width: 944px;
height: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0 30px;
}
/* **--------------------------------Navigation--------------------------------** */
/* **---------------------------Login & Right Column------------------------------** */
#login
{
background: url(http://www.intensesoldiers.com/v4/imgs/login_bg.jpg) no-repeat top left;
float: left;
width: 167px;
height: 87px;
color: #4C594E;
padding: 5px;
font: 8pt verdana
}
#rightcolumn
{
background: url(http://www.intensesoldiers.com/v4/imgs/login_bg.jpg) no-repeat top left;
float: right;
width: 167px;
height: 87px;
Padding: 5px;
font: 8pt Verdana
}
/* **---------------------------------Advertisements--------------------------------------** */
#topad
{
background: url(http://www.intensesoldiers.com/v4/imgs/topad_bg.jpg) repeat top left;
width: 590px;
height: 97px;
margin-left: 177px;
}
JesseG
04-08-2008, 07:49 PM
http://www.intensesoldiers.com/v4/intense_soldiers.htm
Looks great on the web. Thanks a lot. I took out the padding and left the sizes the same. However it doesn't display properly in Frontpage which is a bit annoying. Oh well.
Now to move onto the next part which I have no clue how to do, trial and error haha. Im sure I will be back for help soon.
Centauri
04-08-2008, 08:16 PM
I never trust the design view window of any WYSIWYG editor to display anything properly, always preview in browsers.
I notice that the #topad div doesn't work properly in IE6 though, due to that POS browser not handling floats properly - as the #topad div has a width set (and therefore "HasLayout" in IE), IE doesn't let it slide behind #login. Probably easier to remove the left margin from #topad and float it left as well.
JesseG
04-08-2008, 08:16 PM
I will give that a try.
WebJoel
04-08-2008, 09:19 PM
....Image: http://www.intensesoldiers.com/v4/imgs/compare.jpg .... (http://www.intensesoldiers.com/v4/imgs/compare.jpg)
ahhh... I see. I styled it to remove that 'padding', -thought that this was the desired effect.
I would almost want to re-patriate your images into one of several slimer templates that I use alot... there are redundancies here that I just styled to 'visually' remove..
JesseG
04-09-2008, 05:31 PM
Alright, Im stuck again on fixing this for IE. The code is still the same as above.
http://www.intensesoldiers.com/v4/intense_soldiers.htm
In Firefox, this displays properly but in IE6 the adbox is on the next line. How do I make it display in the right spot on both IE and FF?
Nevermind, turns out I was able to fix it but just floating the ad box left and removing the margin just as Centauri said haha.
On to the next half of the site, I may be back for more help haha
WebJoel
04-09-2008, 06:18 PM
Kluge, this, but no need for that second "</html>"
....<img src="intensesoldiers .com/v4/imgs/fnheader.jpg" alt="" style="border: 0px none ;" height="43" width="944">
</div>
</body>
</html>
</html>
JesseG
04-09-2008, 06:19 PM
Woops. Didn't even notice it. It wasn't intentional, just a dumb mistake. Thanks.
David Harrison
04-09-2008, 06:24 PM
That's why you should always validate your HTML (http://validator.w3.org/) and CSS (http://jigsaw.w3.org/css-validator/).
And even though you solved your problem, you should still read those articals I linked to, they will help you with your layout tremendously.
JesseG
04-09-2008, 08:10 PM
I will once I get closer to being done. If anyone is interested in how the layout is turning out:
http://www.intensesoldiers.com/v4/intense_soldiers.php
So far it`s going along good but I may run into some problems soon.
Centauri
04-09-2008, 08:36 PM
Not sure what you have done here, but you have multiple html, head and body tags in there, as well as an extra doctype....
As the page is php, are you using includes to bring various sections in? - if so, these sections should contain ONLY the html code, with no html, head or body tags, JUST the code.
JesseG
04-09-2008, 09:12 PM
Okay, ran into a problem.
http://www.intensesoldiers.com/v4/intense_soldiers.php
Open that page in IE, and it displays properly. Open it in FF, and it cuts off halfway. Can someone tell me why? I will post the stuff if needed. However, someone else is telling me it doesn`t display right in their IE, but it does in mine. Messed.
The PHP thing was non-intentional, was just a page I opened to quickly test stuff, by no means is it the finished menu. Fixed it though.
Centauri
04-09-2008, 09:53 PM
You have two instances of #navcontainer - an id can only be used once. Gat rid of the first one highlighted :<img src="http://www.intensesoldiers.com/v4/imgs/fnheader.jpg" alt="" style="border: 0px none ;" height="43" width="944" /><div id="navcontainer" style="width: 177px; height: 142px">
<div id="navcontainer">
and then, as I posted in post#5, you need #container to surround the floats :#container
{
overflow: hidden;
background: url(http://www.intensesoldiers.com/v4/imgs/base_bg.jpg) repeat-y;
width: 944px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0 30px;
}
JesseG
04-10-2008, 05:26 PM
Alright that problem seems to be fixed. Onto next section. Thank you for your help, I cant believe I overlooked something so stupid as to have an extra nav div.
JesseG
04-10-2008, 08:55 PM
Alright everything has been going pretty good. However my content area is a bit messed up:
http://www.intensesoldiers.com/v4/intense_soldiers.php
In FF and IE7 (apparantly, I dont have IE7) this displays fine. However in IE6 everything under the `Featured`section is positioned a bit to the right. I can`t seem to figure out why.
Centauri
04-10-2008, 09:16 PM
You have the width of .navlinks set to 177px and have a left padding of 15px, which makes the total width of .navlinks 192px wide (padding ADDS to width) - FF will allow the content to hang outside #menu, but IE will expand #menu to suit. Reduce the width setting of .navlinks to 162px.
Also, rather than all those divs, the navigation should semantically be a dual level nested unordered list.
JesseG
04-10-2008, 09:24 PM
Alright, fixed that problem.
Considering I didn`t know really any CSS about 4 days ago I think I`ve done okay. Not much more to do, its been a big learning process for me. Having said that, I think Ill stick to divs for the moment as it is what I know.
Also, since i took out the padding, how do I shift all the text over inside an element now.
Centauri
04-10-2008, 09:56 PM
No, don't take the padding out - account for it in the width :.navlinks
{
background: url(http://www.intensesoldiers.com/v4/imgs/nav_bg.jpg) no-repeat;
width: 162px;
height: 16px;
padding: 0px 0px 0px 15px;
}
JesseG
04-13-2008, 09:50 AM
Alright thank you.
It seems I have got most of my layout done. Right now I am just cleaning up the code a bit, working out some kinks and adding all of the font/link CSS and I should be ready to go.
If anyone is curious to see its: http://www.intensesoldiers.com/intense_soldiers.php
Thanks everyone for your help. Seeing as this was my first all CSS project I'm pretty happy. I plan to stick around and learn more and also help with what Ive learned. I appreciate the help a lot guys.
David Harrison
04-13-2008, 11:00 AM
It looks quite good. But please validate the code.
HTML (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.intensesoldiers.com%2Fintense_soldiers.php&charset=%28detect+automatically%29&doctype=Inline&group=0)and CSS (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.intensesoldiers.com%2Fintense_soldiers.php&profile=css21&usermedium=all&warning=1&lang=en).
Why have you included a single celled table for the footer though?
JesseG
04-13-2008, 07:53 PM
It just made it easier to align things the way I wanted. Its an include so it saved me a bit of time.