I'm creating a new layout for a non profit org, and they have asked me to give them a layout similar to:
I can do it in tables, but they want it in css, and it needs to be able to be dynamically updated with php, so the sizes of some things need to be fluid.
They also want it whole page, not squashed into the centre. And the menu is css rollover tabs up where the advert is.
I have been playing with CSS all day, and I can't get much past 3 columns with header and footer, I have NO idea how to make things within the header and columns to sit right.
I have googled till I'm brain dead looking for the right info, and I am getting really frustrated, I'm sure I'm missing something obvious here.
HTML code
CSS
a very basic picture of what I'm trying to acheive is here
pointers to tutorials or suggestions on how to start very appreciated, I've been trying to read Cascading Style Sheets by Meyers, but I'm finding it more confusing than helpful (probably because I don't have time to read it cover to cover enough times to actually remember what it says)
I'm feeling very dense, I wish I "got" css, I know I'm missing something fundimental! I've designed sites with it before, and they looked great, validated etc, but I still struggle everytime.
----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..
I can do it in tables, but they want it in css, and it needs to be able to be dynamically updated with php, so the sizes of some things need to be fluid.
They also want it whole page, not squashed into the centre. And the menu is css rollover tabs up where the advert is.
I have been playing with CSS all day, and I can't get much past 3 columns with header and footer, I have NO idea how to make things within the header and columns to sit right.
I have googled till I'm brain dead looking for the right info, and I am getting really frustrated, I'm sure I'm missing something obvious here.
HTML code
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="narked.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box"><!-- start of the outside box which will keep everything in place -->
<div id="top"><!-- start of top box -->
<div class="menu-box"><!-- start of menu box -->
<div id="topbox"><!-- start the side graphic -->
</div><!-- end the side graphic -->
<ul id="navigation">
<li><a href="/"><span>Home</span></a></li>
<li><a href="/"><span>About</span></a></li>
<li><a href="/"><span>Stuff</span></a></li>
<li><a href="/"><span>More Stuff</span></a></li>
<li><a href="/"><span>Forum</span></a></li>
<li><a href="/"><span>Contact us</span></a></li>
</ul>
</div><!-- end of menu box -->
</div><!-- end of top box -->
<!-- put three column layout in here -->
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div> <!-- end of the outside box which will keep everything in place -->
<br style="clear: both;" /><!-- clear everything to set footer at bottom -->
<div class="bottombox"><!-- start of the footer -->
<div id="footertext"><a href="#">Home</a> <a href="#">About</a> <a href="#">Stuff</a> <a href="#">More Stuff</a> <a href="#">Forum</a> <a href="#">Contact Us</a><br>
©2005 etc</div>
</div>
<!-- end of the footer -->
</body>
</html>CSS
Code:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000066;
background-color: #FFFFFF;
text-align: center;
font-size: 12px;
}
.box {
text-align: left; /* so that text is not centered anymore */
background-color: #FFFFFF;
border: 1px solid #000000;
width: 100%;
height: 100%;
position: static;
margin: 0 auto; /* meaning top and bottom margins are 0, left and right are auto, which centers the box in standard browsers */
}
#top {
margin: 5px 5px 0px 5px;
padding: 2px;
border: 5px solid #ccc;
background: #666;
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
html>body #top {
height: 70px; /* ie5win fudge ends */
}
#topbox
{
color: #FCFED3;
background: #000066 url(images/top_left.gif) no-repeat left top;
text-decoration: none;
padding-left: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#topbox span
{
background: url(images/top_right.gif) no-repeat right top;
padding-right: 10px
}
#topbox, #topbox span
{
display: block;
float: left;
height: 50px;
width: 100px;
position: relative;
left: 1px;
top: 5px;
right: 0px;
bottom: 0px;
}
/* Commented backslash hack hides rule from IE5-Mac \*/
#topbox, #topbox span
{
float: none
}
/* End IE5-Mac hack */
.menu-box {
text-align: left;
background-color: #FFFFFF;
border: 1px solid #000000;
width: 600px;
height: 24px;
position: static;
margin: 0 auto;
display: block;
vertical-align: middle;
padding: 2px 2px;
}
#navigation a
{
color: #FCFED3;
background: #000066 url("images/tab-blue-left.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
#navigation a span
{
background: url("images/tab-blue-right.gif") right top no-repeat;
padding-right: 10px
}
#navigation a, #navigation a span
{
display: block;
float: left
}
/* Commented backslash hack hides rule from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End IE5-Mac hack */
#navigation a:hover
{
color: #000066;
background: #FCFED3 url("images/tab-yellow-left.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
#navigation a:hover span
{
background: url("images/tab-yellow-right.gif") right top no-repeat;
padding-right: 10px
}
#navigation ul
{
list-style: none;
padding: 0;
margin: 0
}
#navigation li
{
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
#left {
position: absolute;
top: 120px;
left: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #left {
width: 120px; /* ie5win fudge ends */
}
#middle {
margin: 20px 190px 20px 190px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
}
#right {
position: absolute;
top: 120px;
right: 0px; /* Opera5.02 will show a space
at right when there is no scroll bar */
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #right {
width: 120px; /* ie5win fudge ends */
}
.bottombox {
width: 762px;
height: 100%;
position: static;
margin: 0 auto; /* meaning top and bottom margins are 0, left and right are auto, which centers the box in standard browsers */
}
#footertext a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000066;
text-decoration: none;
}
#footertext a:visited {
color: #000066;
text-decoration: none;
}
#footertext a:hover {
color: #FCFED3;
text-decoration: underline;
}
#footertext a:active {
color: #000000;
text-decoration: underline;
}a very basic picture of what I'm trying to acheive is here
pointers to tutorials or suggestions on how to start very appreciated, I've been trying to read Cascading Style Sheets by Meyers, but I'm finding it more confusing than helpful (probably because I don't have time to read it cover to cover enough times to actually remember what it says)
I'm feeling very dense, I wish I "got" css, I know I'm missing something fundimental! I've designed sites with it before, and they looked great, validated etc, but I still struggle everytime.
----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..