Css: Fixed with Horizontal Menu, with Variable Width Tabs, Using Ul

CSS: Fixed with horizontal menu, with variable width tabs, using ul

Here's my jquery solution:

var actualWidth = 1000;
var totalLIWidth = 0;

// Calculate total width of list items
var lis = $('ul li');

lis.each(function(){
    totalLIWidth += $(this).width();
});

// Work out how much padding we need
var requiredPadding = Math.round(((actualWidth-totalLIWidth)/lis.length)/2);

// To account for rounding errors, the error is going to be forced into the first tab.
var roundingErrorFix = (requiredPadding*lis.length*2)+totalLIWidth-actualWidth;

// Apply padding to list items
lis.each(function(i) {
    if(i==0) {
        $(this).css('padding-left',requiredPadding-roundingErrorFix+'px')
            .css('padding-right',requiredPadding-roundingErrorFix+'px');
    }
    else {
        $(this).css('padding-left',requiredPadding+'px')
            .css('padding-right',requiredPadding+'px');
    }
});

Best way to create horizontal menu with fixed width

You could give the <ul>/<ol> a display: table and the <li> a display: table-cell:

HTML:

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

CSS:

ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
}

http://jsfiddle.net/8RXUw/

li menu tabs to fill the width of page (equally)

You can do this, but not with pure CSS.

(By the way, you need a table-row element between your table and table-cell elements.)

Here's a solution that uses a single line of jQuery to specify the cell width after load: http://jsfiddle.net/mblase75/juGJ4/1/

jQuery:

$('.menu li').width((100/$('.menu li').length)+'%');

CSS:

div.width {
    display: table;
}
ul.menu, div.menu ul {
    display:table-row;
    width:100%;
    margin: 0;
    padding: 0;
}
.menu li, div.menu li {
    display:table-cell;
    text-align: center;
}

In some cases, though, this still won't work, because your table cells contain long strings that won't wrap and therefore force their respective table cells to a certain minimum width. The best solution here is simply to break up those long strings.

fixed ul as navigation bar

You must clarify Your question. If You need the navigation to be fixed on the page (You scroll the page down, the navigation stay at the same position), or You need the navigation to be on every page of Your project. Shortly: The first one is done using position: fixed. The second one must be done using server scripting language, for example PHP and include. Clarify Your question, and U will obtain the full answer :).

Sorry, to less reputation to make a comment only.

UPGRADE:

Ok, very simple answer: You must have other file only for navigation, for example

navigation.php. 

Inside the file You can have only Your ul list with your navigation:

<ul>
<li><a href="">Menu 1</a></li>
....
</ul>

Then on every page (for example historia.php) in the place that You need your navigation You must include it:

historia.php:

<h2>History</h2>
<?php include "navigation.php"; ?>
<p>Jesteśmy na rynku już od 1969 roku...</p>

There are better practices then that, but for a start to learn it is great. IN that case, You can change Your navigation only in one file, and the rest stays untouched.

best regards

CSS Dropdown Menu Without Fixed Width

how about ( as parent <li> is relative )

nav ul li:hover > ul {
    display: block;
    position: absolute; 
    top:25px;
    left:0;
}

http://jsfiddle.net/aPbV4/3/

forcing menus to take up 100% of width

specify a width as a percentage.

<ul>
    <li>something</li>
    <li>something</li>
    <li>something</li>
    <li>something</li>
<ul>

ul li {
    width:25%;
    display:inline;
}

CSS fixed width in a span

ul {

  list-style-type: none;

  padding-left: 0px;

}

ul li span {

  float: left;

  width: 40px;

}

<ul>

  <li><span></span> The lazy dog.</li>

  <li><span>AND</span> The lazy cat.</li>

  <li><span>OR</span> The active goldfish.</li>

</ul>

---

Related Topics