No replies
barleytwist
barleytwist's picture
Offline
Regular
Last seen: 11 years 23 weeks ago
Timezone: GMT+1
Joined: 2008-06-29
Posts: 23
Points: 3

I have a menu within my content thus:

<div class="contentMenu">
<ul>
<li>
<a href="#" title="Find out more"><img src="images/stories/memories/FamilyLife/thumb/familyFWHarveysBuildingsDorchester.jpg" alt="" />
<span>Family life</span></a>
</li>
.
.
.
<li>
<a href="#" title="Find out more"><img src="images/stories/memories/SightsAndSounds/thumb/sightsMOOsmington1963.jpg" alt="" />
<span>Sights/Sounds</span></a>
</li>
</ul>
</div>

I want the menu items not to spill onto the next line when I shrink the browser. I have tried overflow:hidden; but does not stop the last one taking up a new "line". There are 7 menu items across the page. The CSS so far is:

.contentMenu {
background-color:#FFFFCC;
border:1px solid #B9C0F7;
margin-bottom:6px;
padding:8px 0 5px;
}
#main .contentMenu ul, #main2 .contentMenu ul {
margin:0 auto;
overflow:hidden;
width:95%;
}
#main ul, #main2 ul {
list-style-position:outside;
list-style-type:square;
margin:0 0 0 20px;
padding:10px 0;
}
#main ul li, #main2 ul li {
margin:0;
padding:0 0 0 10px;
}
.contentMenu li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
text-align:center;
width:15%;
}
.contentMenu a {
padding-top:4px;
text-decoration:none;
}
.contentMenu img {
border:medium none;
height:62px;
width:55px;
}

Of course the meni images need to be evenly spaced across the page. Would appreciate if someone could point me in the right direction.

--------------------
Thanks for your time