CSS Layout Questions [w/ example]
Posted: Fri Feb 24, 2006 8:30 am
Yo 
Right. I'm starting a new project. This time it's for the public eye, so I'm going to attempt a neat design. I almost jumped into Photoshop and knocked up a HTML table/jpg image template sort of thing, but I've seen a lot of nice CSS based layouts lately so I'm going to try for one of those.
I have v. little experience with CSS except for simple stuff, so I decided I should use an OpenSource CSS layout and modify it slightly. I've always liked the BlueRobot ones - so I used the 3 column BlueRobot one.
All is going well, but there's a few things I want to do and without everlong trial and error I'll never accomplish it.
My current layout is here: http://www.jaysfiles.co.uk and my CSS is below:
Most of it is the same as the CSS from BlueRobot: http://bluerobot.com/web/layouts/view_c ... ut=layout3
Anyway, a couple of things I want to achieve but have no clue where to start:
- I want a duplicate of the header, but at the bottom of the page, to act as a footer. You can see I've C&P'd the Header CSS and after thinking about how to alter it to make it appear at the bottom rather than the top I gave up
I don't really understand the position attribtute and it's use or if that's how I should accomplish it.
- I also want the blocks on the left and right to automatically position themselves 10px under the header, instead of me hard-coding the top attrribute like now. This is proabably related to my last problem.
- It would be nice if I could continually add blocks on the left and right and they appear under the existing left/right blocks, similar to how the content block works, I know I need position: relative for this, but I think I would need a class rather than the existing (id?) for this to work?
If someone can point me in the right direction of give me an example to look at it would be grand
Also, don't hesitate to comment on the design.
Thanks a million.
Right. I'm starting a new project. This time it's for the public eye, so I'm going to attempt a neat design. I almost jumped into Photoshop and knocked up a HTML table/jpg image template sort of thing, but I've seen a lot of nice CSS based layouts lately so I'm going to try for one of those.
I have v. little experience with CSS except for simple stuff, so I decided I should use an OpenSource CSS layout and modify it slightly. I've always liked the BlueRobot ones - so I used the 3 column BlueRobot one.
All is going well, but there's a few things I want to do and without everlong trial and error I'll never accomplish it.
My current layout is here: http://www.jaysfiles.co.uk and my CSS is below:
Code: Select all
body {
color: #333;
background-color: white;
margin: 20px;
padding: 0px;
font: 11px verdana, arial, helvetica, sans-serif;
background-image: url('dot.jpg');
}
h1 {
letter-spacing: 10px;
font-weight: bold;
font-size: 30px;
}
h2 {
margin: 0px 0px 15px 0px;
padding: 0px;
font-size: 28px;
font-weight: 900;
color: #ccc;
}
h3 {
font: bold 12px/14px verdana, arial, helvetica, sans-serif;
color: white;
margin: 0px 0px 5px 0px;
padding: 0px;
border: 1px solid black;
background-color: #00CC00;
padding: 3px;
}
p {
font: 11px/20px verdana, arial, helvetica, sans-serif;
margin: 0px 0px 16px 0px;
padding: 0px;
}
.Content>p {margin: 0px;}
.Content>p+p {text-indent: 30px;}
a {
color: #00CC00;
text-decoration: none;
}
a:link {color: #00CC00;}
a:visited {color: #00CC00;}
a:hover {color: #33FF00;}
/* All the content boxes belong to the content class. */
.content {
position: relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width: auto;
min-width: 120px;
margin: 0px 210px 20px 170px;
border: 1px solid black;
background-color: white;
padding: 10px;
z-index: 3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
#navAlpha {
position: absolute;
width: 150px;
top: 90px;
left: 20px;
border: 1px solid black;
background-color: #eee;
padding: 10px;
z-index: 2;
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http: //glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family: inherit;
width: 128px;
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct
length values to user agents that exhibit the parsing error exploited above yet get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#navAlpha {width: 128px;}
#navBeta {
position: absolute;
width: 190px;
top: 90px;
right: 20px;
border: 1px solid black;
background-color: #eee;
padding: 10px;
z-index: 1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family: inherit;
width: 168px;
}
/* Again, "be nice to Opera 5". */
body>#navBeta {width: 168px;}
#Header {
margin: 5px 0px 10px 0px;
padding: 17px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height: 33px; /* 14px + 17px + 2px = 33px */
border-style: solid;
border-color: black;
border-width: 1px 1px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height: 11px;
background-color: #eee;
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http: //glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family: inherit;
height: 14px; /* the correct height */
}
/* Again, "be nice to Opera 5". */
body>#Header {height: 14px;}
#Footer {
margin: 5px 0px 10px 0px;
padding: 17px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height: 33px; /* 14px + 17px + 2px = 33px */
border-style: solid;
border-color: black;
border-width: 1px 1px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height: 11px;
background-color: #eee;
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http: //glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family: inherit;
height: 14px; /* the correct height */
}
/* Again, "be nice to Opera 5". */
body>#Footer {height: 14px;}Anyway, a couple of things I want to achieve but have no clue where to start:
- I want a duplicate of the header, but at the bottom of the page, to act as a footer. You can see I've C&P'd the Header CSS and after thinking about how to alter it to make it appear at the bottom rather than the top I gave up
- I also want the blocks on the left and right to automatically position themselves 10px under the header, instead of me hard-coding the top attrribute like now. This is proabably related to my last problem.
- It would be nice if I could continually add blocks on the left and right and they appear under the existing left/right blocks, similar to how the content block works, I know I need position: relative for this, but I think I would need a class rather than the existing (id?) for this to work?
If someone can point me in the right direction of give me an example to look at it would be grand
Thanks a million.