...

View Full Version : im sure its an easy css nav issue



thesavior
12-22-2005, 01:48 AM
on this page: http://www.lonelylizard.com/~eli/index.php

notice the links on the left.

The titles overlap. If i get rid of the height: 31px; on the title bar, it works, if i have it, that is what happens. Also, the background images on the title section on the nav, starts off aligned, but as you go lower, it gets more and more misaligned.

What do i need to change in my css?

harbingerOTV
12-22-2005, 02:14 AM
first your missing a " . " on your class


.stats
{
font-size: x-small;
float: left;
clear: left;
width: 150px;
}

and then these fix it up.


.links
{
font-size: medium;
font-weight: bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
margin: 0;
width: 150px;
padding: 0;
color: #fff;
float: left;
clear: left;
}

div.linkheader
{
/* font-size: medium;
font-weight: bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0px 0px 0px 0px;
background-color: #835318;
text-align: center;
width: 150px;
height: 50px;
float: left;
line-height: 50px;
clear: left;
color: #4e422e;
background-image: url('forum%20stuff/tile-cat.gif'); */

background: url(http://www.lonelylizard.com/~eli/forum%20stuff/tile-cat.gif);
border-bottom: 1px solid #413d1d;
font-family: Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Georgia, Courier, Times

New Roman, Serif;
color: #fff2be;
height: 31px;
text-align: center;
font-size: medium;
font-weight: bold;
margin: 0px;
padding: 0px;
float: left;
clear: left;
width: 150px;
}


in the HTML


<div style="text-align: center;float:left;clear:left;width: 150px;">
<a href="http://www.freedomain.co.nr/">
<img src="anima.gif" width="88" height="15" class="normal" alt="Free Domain Name -

www.YOU.co.nr!" /></a><br />
</div>
<span class="stats">
Page hits:<b> 41977</b><br />
Todays Page hits: <b> 174</b><br />
</span></div>


you need to make everything float left and clear left to get them to stack correctly. You also need the same width all the way down for the text centering to work.

thesavior
12-22-2005, 02:20 AM
what does clear: left do?

harbingerOTV
12-22-2005, 02:29 AM
if you do something like:


<div style="float:left;width:100px;height:100px;background-color:#fc3;"></div>
<div style="float:left;width:100px;height:100px;background-color:#6f6;"></div>
<div style="float:left;width: 100px;height:100px;background-color:#ffc;"></div>


the floated divs will display alllined up since each one is floating to the left of the element above it in the html (try it ;) )

then if write something like:


<div style="clear:left;float:left;width:100px;height:100px;background-color:#fc3;"></div>
<div style="clear:left;float:left;width:100px;height:100px;background-color:#6f6;"></div>
<div style="clear:left;float:left;width: 100px;height:100px;background-color:#ffc;"></div>


by adding the clear:left the next first element floats left as normal. the second (since html is all about top down and left to right) will go to the next available space under the element above it. try it ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum