Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Aug 2005
    Posts
    1,119
    Thanks
    2
    Thanked 1 Time in 1 Post

    im sure its an easy css nav issue

    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?

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    first your missing a " . " on your class
    Code:
    .stats
    {
    	font-size: x-small;
    	float: left;
    	clear: left;
    	width: 150px;
    }
    and then these fix it up.
    Code:
    .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
    Code:
    <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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Senior Coder
    Join Date
    Aug 2005
    Posts
    1,119
    Thanks
    2
    Thanked 1 Time in 1 Post
    what does clear: left do?

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    if you do something like:
    Code:
    <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:
    Code:
    <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
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •