|
|
|
|
Thread title: Code Cleanup |
|
|
|
|
|
Thread tools
Search this thread
Display Modes
|
|
12-18-2004, 12:16 AM
|
#11
|
Status: I'm new around here
Join date: Dec 2004
Location:
Expertise:
Software:
Posts: 13
|
First of all, you have your <li> and <a> tags reversed.
It's <li><a>text</a></li>, not <a><li>...
You can't place a block-level element inside an inline element.
Secondly, clear: both; does nothing in this case, as you are not floating anything.
Here is what you are looking for (I think):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css" media="all">
#menu {
width:700px;
height: 25px;
background: #000;
text-align: center;
}
#menu ul {
margin: 0;
padding:0;
}
#menu ul li {
display: inline;
list-style: none;
padding: 2px 15px;
}
#menu ul li a {
color:#FFF;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
</ul>
</div>
</body>
</html>
Let me know if this is not what you are looking for.
|
|
12-18-2004, 04:06 AM
|
#12
|
Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:
Posts: 241
|
Originally Posted by lightofmind
First of all, you have your <li> and <a> tags reversed.
It's <li><a>text</a></li>, not <a><li>...
You can't place a block-level element inside an inline element.
Secondly, clear: both; does nothing in this case, as you are not floating anything.
Here is what you are looking for (I think):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css" media="all">
#menu {
width:700px;
height: 25px;
background: #000;
text-align: center;
}
#menu ul {
margin: 0;
padding:0;
}
#menu ul li {
display: inline;
list-style: none;
padding: 2px 15px;
}
#menu ul li a {
color:#FFF;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
</ul>
</div>
</body>
</html>
Let me know if this is not what you are looking for.
|
Changed the code, but now i'm having the same problem of the background colour not changing, and the rest of the content below not moving down. I was thinking it might be because of my existing code in my stylesheet.
|
|
12-18-2004, 02:28 PM
|
#13
|
Status: I'm new around here
Join date: Dec 2004
Location:
Expertise:
Software:
Posts: 13
|
Sorry, I didn't look real hard at your stylesheet.
Okay, you are clearing floats, but you shouldn't be floating them to begin with. The only blocks you need to float are the #content and #sidemenu.
The best thing to do in this case is to add an additional wrapper to contain these elements. Call it something generic, such as #contentwrapper.
In your CSS, add the following declaration:
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clear {height: 1%;}
/* End hide from IE-mac */
Then add class="clear" to your #contentwrapper div. This clears the float.
Structurally, your layout will look like this:
<div id="wrapper">
<div id="banner">banner</div>
<div id="menu">menu</div>
<div id="contentwrapper" class="clear">
<div id="content">
content
</div>
<div id="sidemenu">
sidemenu
</div>
</div>
<div id="footer">
footer
</div>
</div>
Then the basic CSS to achieve this layout is as follows:
#body {
text-align:center; // THIS IS FOR IE 5 SINCE IT DOESN'T UNDERSTAND MARGIN:AUTO
}
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clear {height: 1%;}
/* End hide from IE-mac */
#wrapper {
width:700px;
margin:25px auto;
}
#banner {
width:100%;
height:100px;
}
#menu {
width:100%
height:25px;
}
#contentwrapper {
width:100%;
}
#content {
width:480px;
float:left;
}
#sidemenu {
width: 220px;
float:left;
}
#footer {
width:100%;
}
Get your basic structure set, then worry about getting your inner content positioned correctly.
Also, don't forget, when using the Box Model Hack, to do it correctly. Be nice to those browsers who understand both rule sets (otherwise known as the "Be Nice to Opera Rule")
Example:
#topwrapper .wrapper {
background:transparent url(/images/headerbg.gif) repeat-x;
margin:0 auto;
border-top:4px solid #FFF;
border-right:4px solid #FFF;
border-left:4px solid #FFF;
border-bottom:none;
text-align:left;
/* BOX MODEL HACK */
width:705px;
voice-family: "\"}\"";
voice-family:inherit;
width:697px;
}
html>body #topwrapper .wrapper {
width:697px;
}
Let me know how it works for you!
|
|
12-20-2004, 05:33 PM
|
#14
|
Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:
Posts: 241
|
I still can't get it to work. I've tried adding what you've said. In Internet Explorer it messes up the menu widths, and in Firefox, I get the same problem.
|
|
12-20-2004, 06:02 PM
|
#15
|
Status: I'm new around here
Join date: Dec 2004
Location:
Expertise:
Software:
Posts: 13
|
i sent you a private message
|
|
12-22-2004, 01:46 AM
|
#16
|
Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:
Posts: 241
|
I just realised something about my code. I had been floating the banner all this time, so thanks to lightofmind for mentioning the floats. Now my website works perfectly. Thanks to all those who helped.
|
|
12-22-2004, 03:19 AM
|
#17
|
Status: Member
Join date: Jul 2004
Location:
Expertise:
Software:
Posts: 226
|
Glad you got it fixed!
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 2 (0 members and 2 guests)
|
|
|
|