Li help

HTML & CSS
1

Hi guys,

how do we have different sized li’s within a menu navigation :S

2

yayy thanks so much for your help :D:D:D

3

lol sorry guys,

i was supposed to post the full post but i had to go somewhere so i kinda just submitted :blush::blush:

anyways here is my issue, i have an image of the graphic of the navigation…this is what i want the nav to look like
notice the last ‘special’ li is shorter

this is what my nav looks like in html at the moment :frowning:

the issues i am having is

  1. i need to find a way to reduce the size of the last li (special)
  2. the arrows need to display nearer to the text

here is my html

<!--Navigation-->
<div id="nav" class="menu">
	<ul>
                <li><a href="#">item1</a></li>
                   
                <li><a href="#">item2</a></li>
                       
                <li><a href="#">item3</a></li>
                
                <li><a href="#">item4</a></li>
                
                <li class="end"><a href="#">special</a></li>
      
      </ul>
</div>

here is my css

#nav {
	margin: 5px 0px 0px 0px;
	width:942px;
	height: 29px;
	background:#333 url(images/nav_bg.png) repeat-x;
}

.menu ul{
	list-style: none;
	color:#ffffff;
}

.menu li{
	float:left;
	position:relative;
	z-index:100;
	background-image: url(images/nav_arrow.gif);
	background-repeat: no-repeat;
	background-position: left;
	border-right: #fff 1px solid;
}

.menu ul li.end {
	background: #cc0000;
	border: none;
}

.menu li a {
	display:block;
	font-size:14px;
	padding:6px 66px 6px 65px;
	color:#fff;
	text-decoration:none;
	margin:0px;
	text-align:center;
}
4

So now we’ve the mark up and style.

for the 1st point,

use selectors to style the element with class .end (such as manipulating the width and padding for the last item)

for example: .menu .end a{ width:100px;padding:6px 10px}

for the 2nd point;
position the background where ever is appropriate as you need,

example:

.menu li{
float:left;
position:relative;
z-index:100;
background-image: url(images/nav_arrow.gif);
background-repeat: no-repeat;
background-position:50px center;
border-right: #fff 1px solid;
}

Here is the complete css, nothing changed in the markup

<style>
#nav {
margin: 5px 0px 0px 0px;
width:942px;
height: 29px;
background:#333 url(images/nav_bg.png) repeat-x;
}

.menu ul{
list-style: none;
color:#ffffff;
}

.menu li{
float:left;
position:relative;
z-index:100;
background-image: url(images/nav_arrow.gif);
background-repeat: no-repeat;
background-position: 50px center;
border-right: #fff 1px solid;
}

.menu ul li.end {
background: #cc0000;
border: none;
}

.menu li a {
display:block;
font-size:14px;
padding:6px 66px 6px 65px;
color:#fff;
text-decoration:none;
margin:0px;
text-align:center;
}
.menu .end a{ width:100px;padding:6px 10px}

5

Such a vague question :). We need to see your link because otherwise we have no code to look at and thus we can’t help at all (though we could probably make a few hundred guesses and hope one is right ;))

If a link isn’t plausible then post full HTML and CSS so we can replicate the problem on our own end :slight_smile:

6

Yay, guesses! I suck at games, this is the only one I’m good at.

Lemme guess, it’s a horizontal menu and the li’s are getting floated? Stating width: auto will cure whichever Opera it was that did the shakey-shake while allowing the width to be determined by the inline content (the text?) inside.

If I’m right, I get a cookie and get to pretend to be Dr House.

if I’m wrong, I get to be all cynical and misanthropic and drink excessively like Dr House.

I also can haz butt-covering:
if it’s a vertical menu, li’s are blocks by default and blocks try to be 100% width of their containers. One way to make them shrink-wrap would be to clear: left (or right) and then float: left (or right).

Ok, I’ll admit it: it IS a sucky question, because it’s the type that needs context. What kind of car should I have to get a hot guy? Depends on the guy. And the car. And me : )

7

If the items need to be a specific width then add a class to each list item and size it accordingly. If the content is a fluid with then don’t apply a width at all and it will accommodate the content.

It would help if you were a little more forthcoming with your requirements as the others have mentioned quite amusingly :slight_smile: