Falconer
Well-Known Member
- Jun 23, 2006
- 65,534
(note: I hope I'm not dumb. Some of these other questions that I see people asking are super smart questions... I feel like this is something anyone would understand but I'm dumb for some reason
)
So on the advice of OT I decided to try and learn CSS so I could make a tableless layout.
So far so good. By copying a template from an instructional site and slowly changing stuff one thing at a time, I am finally starting to make some progress.
My page is divided into the following divs: wrapper (covers the whole thing; the website said to do this), header, nav, main, and footer (all self explanatory).
(code at the bottom)
Alright so when I start typing in the different sections, it pretty much looks how I figure it would:
The only thing I don't understand is why the nav options are pushing their way into the footer area, but that seems to go away when I add more main text.
1. Why are my "nav" area options appearing in the footer section? I would think that "footer" would be distinct and would automatically appear below whatever the lowest element in "nav" or "main" was. Why is this not the case?
Anyway, I type some more info in "main," and all is well. I think I'm kinda almost getting the hang of this, until I add more info into my main area. Look what happens:
Things I don't understand:
2: Why is the main area text pouring over into the other division area? (circled red part) Based on how it was acting before, I thought there was barrier where I drew the vertical yellow line that nothing would cross. That is how the text was behaving before it got lower than the text in the nav section. Why? I set the Nav div to be a width of 178 pixels (that's the width of the images I'm eventually going to use).
css:
html:
Last question:
Why does it look awesome in IE but in FF, it looks like this:
Is FF like super strict and I left off a close tag somewhere or something?
Thanks

So on the advice of OT I decided to try and learn CSS so I could make a tableless layout.
So far so good. By copying a template from an instructional site and slowly changing stuff one thing at a time, I am finally starting to make some progress.
My page is divided into the following divs: wrapper (covers the whole thing; the website said to do this), header, nav, main, and footer (all self explanatory).
(code at the bottom)
Alright so when I start typing in the different sections, it pretty much looks how I figure it would:

The only thing I don't understand is why the nav options are pushing their way into the footer area, but that seems to go away when I add more main text.
1. Why are my "nav" area options appearing in the footer section? I would think that "footer" would be distinct and would automatically appear below whatever the lowest element in "nav" or "main" was. Why is this not the case?
Anyway, I type some more info in "main," and all is well. I think I'm kinda almost getting the hang of this, until I add more info into my main area. Look what happens:

Things I don't understand:
2: Why is the main area text pouring over into the other division area? (circled red part) Based on how it was acting before, I thought there was barrier where I drew the vertical yellow line that nothing would cross. That is how the text was behaving before it got lower than the text in the nav section. Why? I set the Nav div to be a width of 178 pixels (that's the width of the images I'm eventually going to use).
css:
Code:
<style type="text/css">
<!--
body {
background-color: #999999;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 900px;
background-color:#00ccff;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
div#header {
background-color:#ffcccc;
padding: 0px;
margin: 0px;
text-align: center;
}
div#nav {
width: 178px;
padding: 0px;
margin-top: 0px;
float: left;
}
div#main {
margin-left: 25%;
margin-top: 0px;
padding: 0px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}
-->
</style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #FF0000;
}
a:active {
text-decoration: none;
}
div#footer ul li{
color : #000000;
background-color : transparent;
display: inline;
}
div#footer ul li a{
color : #115EAC;
background-color : transparent;
text-decoration : none;
}
div#footer ul li a:hover{
text-decoration : underline;
}
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<link rel="stylesheet" href="C:\Documents and Settings\Desktop\stylesheetold.css" type="text/css" />
<title>How to Build a Basic CSS Layout</title>
<meta name="Description" content="How to Build a Basic CSS Layout" />
<meta name="Keywords" content="css layout" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>How To Build a Basic CSS Layout</h1>
<p>hi anything I type up here will be in the header division</p>
</div>
<div id="nav">
<h2>Navigation</h2>
<p>this is navigation<br>menu 1<br>menu2<br>menu3<br>menu4</p>
</div>
<div id="main"></div><h2>Main Area</h2>
<p>This is the main area. All my main text will go here.<br/>CSS is pretty cool but I suck at it.<br/>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p>
<div id="footer">footer yo</div>
</div>
</body>
</html>
Why does it look awesome in IE but in FF, it looks like this:

Is FF like super strict and I left off a close tag somewhere or something?
Thanks