Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1213 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Code Cleanup

Thread title: Code Cleanup
Closed Thread  
Page 2 of 2 < 1 2
    Thread tools Search this thread Display Modes  
12-18-2004, 12:16 AM
#11
lightofmind is offline lightofmind
lightofmind's Avatar
Status: I'm new around here
Join date: Dec 2004
Location:
Expertise:
Software:
 
Posts: 13
iTrader: 0 / 0%
 

lightofmind is on a distinguished road

  Old

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
ULTiMATE is offline ULTiMATE
Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:
 
Posts: 241
iTrader: 0 / 0%
 

ULTiMATE is on a distinguished road

Send a message via ICQ to ULTiMATE Send a message via AIM to ULTiMATE Send a message via MSN to ULTiMATE

  Old

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
lightofmind is offline lightofmind
lightofmind's Avatar
Status: I'm new around here
Join date: Dec 2004
Location:
Expertise:
Software:
 
Posts: 13
iTrader: 0 / 0%
 

lightofmind is on a distinguished road

  Old

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
ULTiMATE is offline ULTiMATE
Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:
 
Posts: 241
iTrader: 0 / 0%
 

ULTiMATE is on a distinguished road

Send a message via ICQ to ULTiMATE Send a message via AIM to ULTiMATE Send a message via MSN to ULTiMATE

  Old

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
lightofmind is offline lightofmind
lightofmind's Avatar
Status: I'm new around here
Join date: Dec 2004
Location:
Expertise:
Software:
 
Posts: 13
iTrader: 0 / 0%
 

lightofmind is on a distinguished road

  Old

i sent you a private message

12-22-2004, 01:46 AM
#16
ULTiMATE is offline ULTiMATE
Status: Member
Join date: Aug 2004
Location: Bristol, United Kingdom
Expertise:
Software:
 
Posts: 241
iTrader: 0 / 0%
 

ULTiMATE is on a distinguished road

Send a message via ICQ to ULTiMATE Send a message via AIM to ULTiMATE Send a message via MSN to ULTiMATE

  Old

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
karl472001 is offline karl472001
Status: Member
Join date: Jul 2004
Location:
Expertise:
Software:
 
Posts: 226
iTrader: 0 / 0%
 

karl472001 is on a distinguished road

Send a message via MSN to karl472001

  Old

Glad you got it fixed!

Closed Thread  
Page 2 of 2 < 1 2


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed