CODEWITHSUNDEEP
htmlcssmenuhtml-listscss-float
Tony Bogdanov
Tony Bogdanov

Reputation: 7686

CSS: How to set 100% width on the first li of ul

I have a simple UL navigation menu with width of 1000px:

<ul class="menu">
    <li class="first"><a href="/">google</a></li>
    <li><a href="/">google</a></li>
    <li><a href="/">google</a></li>
</ul>

So, how can I set the first element to fit the entire UL width and push the other list items on the right (all LIs should be on the same line - horisontal menu)?

I know I could float:left the first and float:right the rest, but this will reverse the order of the right - floated elements.

I need a quick, CSS only solution, working even in IE6.

Thanks in advance!

UPDATE: To clarify, the first element is a logo, the final result is like the header of 9gag.com except the logo should be on the left and all links to the right.

Upvotes: 0

Views: 2104

Answers (5)

justanotherhobbyist
justanotherhobbyist

Reputation: 2190

As stated before separate the logo from the main navigation. Do something like this instead.

<div id="header>
<div id="logo">Logo here</div>
<ul><li>Rest of links here</li></ul>
</div>

The header div is the wrapping div. You could change this to <header></header> if you want to do HTML5 (this will work in all browsers even old ones). Then set the width of the logo, you can use a link there aswell. And float the ul and logo to the left.

Upvotes: 0

fbadaro
fbadaro

Reputation: 161

See this example, i don't know your menu is dynamic, but if you have a 'width' for other's li's, is more easier

Demo: http://jsfiddle.net/e6SWD/12/

.menu {
  margin-left: 84px; /* width others 2 li's */
  width: 1000px
}

.menu li {
  display: inline;
}

.menu li.first {
  display: block;
  float: left;
  margin-left: -84px; /* width others 2 li's */
  width: 100%
}

Upvotes: 2

mikevoermans
mikevoermans

Reputation: 4007

Now with more clarification:

http://jsfiddle.net/6DkVx/2/

ul {
  width: 1000px;   
  position: relative;
  text-align: right;
}
li {
  display: inline-block;
}
.first { 
  position: absolute; 
  top: 0; left: 0; 
}

​

Upvotes: 1

Marat Tanalin
Marat Tanalin

Reputation: 14123

Logo usually should not be a part of navigation menu. It's more appropriate to mark-up it as header (H1 on home page, and H3 on rest pages).

<h3><a href="/">MyBrand</a></h3>

<ul>
    <li><a href="/products/">Products</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

You can use then float: right for your UL list itself to align menu to the right.

Upvotes: 2

hjpotter92
hjpotter92

Reputation: 80639

Just use this CSS

.menu li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}

Upvotes: 0

Related Questions