View Full Version : Float Problem

10-20-2006, 09:17 PM
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?


<div class="menu">
<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>


height: 52px;
width: 747px;
margin: 0px;
padding: 0px;
.menu ul {
margin: 0;
padding-top: 7px;
text-align: center;
.menu li {
list-style-type: none;
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;

10-20-2006, 11:07 PM
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).