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 2 of 2

Thread: Float Problem

  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post

    Float Problem

    I have a menu made of ul/li. The links are images. To keep them in one line, I did float:right, but the problem is that they float right. If I take float off, they center but one under another. The problem stands on the float under .menu li IMO.

    What do I do to center the whole ul, and show in one row?

    HTML:
    Code:
    	<div class="menu">
    		<ul>
    			<li><a href=?jeshil=news/show_news.php><img src=images/hyrje.gif class=image></a></li>
    			<li><a href=?jeshil=audio.php><img src=images/audio.gif class=image></a></li>
    			<li><a href=?jeshil=video.php><img src=images/video.gif class=image></a></li>
    			<li><a href=komunitet><img src=images/komunitet.gif class=image></a></li>
    			<li><a href=?jeshil=projekte.php><img src=images/projekte.gif class=image></a></li>
    			<li><a href=?jeshil=lidhje.php><img src=images/lidhje.gif class=image></a></li>
    			<li><a href=?jeshil=mbeshtetje.php><img src=images/mbeshtetje.gif class=image></a></li>
    			<li><a href=?jeshil=studiojeshil.php><img src=images/studiojeshil.gif class=image></a></li>
    			<li><a href=?jeshil=kontakt.php><img src=images/kontakt.gif class=image></a></li>											
    		</ul>
    	</div>
    CSS
    Code:
    .menu{
    	height: 52px;
    	width: 747px;
    	margin: 0px;
    	padding: 0px;
    	text-align:center;
    }
    .menu ul { 
    	margin: 0;
    	padding-top: 7px;
    	text-align: center;
    }
    .menu li {
    	list-style-type: none;
    	float:right;
    	list-style-image: url(images/nav-bullet.gif);
    	margin: 0 7px 0;
    	color: #224570;
    }
    .menu li a, .menu li a:visited {
    	color: #224570;
    	text-decoration: none;
    }
    .menu li a:hover {
    	text-decoration: underline;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Assign a width to your ul and apply margin: 0 auto;.
    You see what it does if you put a border around the ul (or any element that makes problems).


  •  

    Posting Permissions

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