I am in the process of learning to design CSS Web Template/Layouts
Here is the Tutorial I am going through
http://www.subcide.com/tutorials/csslayout/index.aspx
However, I had run into a couple of issues, and only went half-way through it, and before I continue, I'd like to know what I had done wrong thus far:
On Page 7, they had me do the "Hidden" class, to make the navigational words "Disappear"
The navigation will be structured as a definition list (<dl>) with individual id's relevant to each navigation item on each definition term (<dt>). These Definition terms will have links to our major sections inside them. If that sounds confusing, just add this code to your main-nav div:
<div id="main-nav"> <dl> <dt id="about"><a href="#">About</a></dt> <dt id="services"><a href="#">Services</a></dt> <dt id="portfolio"><a href="#">Portfolio</a></dt> <dt id="contact"><a href="#">Contact Us</a></dt> </dl></div>Note: Most people use unordered lists for their navigation, but for these single level navs I use definition lists because I find them a lot easier to get working in IE. There are a few annoying css bugs with unordered lists in Internet Explorer. But with very little modification, an unordered list would do the same thing just fine. Its personal preference I guess.
In easy to understand terms, the <dl> acts as a container, the <dt>'s are unique identifiers for each navigation item, and the links are...links.
We use the unique id's later when we come to make this navigation look like it should, with its sexy image rollovers. But more on that later.
If you refresh, you'll notice it looks a bit ugly, so for now, we'll just hide the navigation we added, with the "hidden" class we made earlier.
<div id="main-nav"> <dl class="hidden"> <dt id="about"><a href="#">About</a></dt> <dt id="services"><a href="#">Services</a></dt> <dt id="portfolio"><a href="#">Portfolio</a></dt> <dt id="contact"><a href="#">Contact Us</a></dt> </dl></div>"And like *that*, it was gone..."
Thing is, it did disappear...but it left a "White Gap" in between the Red and Blue areas.
Also, at the bottom, there's a GAP under the dark green, it shouldn't be there, instead the LIGHT green should have a LARGE gap, and the dark green should have NO gap between itself and the FOOTER.
As you can see on the bottom of the Tutorial on Page 7, its not quite right.
Ever follow instructions on putting something together, and when you're done it always doesn't like the picture on the box? LOL
Here's an actual link to MY example
http://www.cfl-paintball.com/cssmain/index.htm
OH, here's the code to the *css file
/* CSS Document */
html, body {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
h1 {
margin: 0;
padding: 0;
}
#page-container {
width: 760px;
margin: auto;
}
#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}
#content {
background: green;
margin-right: 280px;
}
#content h2 {
margin: 0;
padding: 0;
}
#content p {
margin: 0;
padding: 0;
}
#footer {
clear: both;
background: orange;
height: 66px;
}
If we have any good de-buggers here, that'd be great.
Thank you
