Have a Navbar <div>, inside is a <ul> and each <li> contains a <a> with a link (this is for a navigation bar)
I looked on Google and this site and I couldn't find exactly what I was looking for.
What I want is to be able to keep my current style (using <li> with <a>'s inside), and I want the <li> to be evenly distributed and centered (this part comes naturally if they are evenly distributed...) inside the <ul> (which is inside the navbar <div>).
Anyways, if that doesn't make sense let me know, currently they are just left aligned...here's what I have:
HTML:
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
CSS:
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
width: 90%;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
I can also include my .navbar a{} if that is necessary.
I am very new to CSS so go easy, also I did look all over SO and Google first and couldn't find anything quite like this (although maybe since I am new I don't realize it's the same).
If this is a faulty CSS method and/or there is a much easier, more commonly used way of doing this, go ahead and link/post that instead, but I would prefer this way as it makes most sense to me.
This allows a widthless centered dynamic ul if you don't want to specify 90% width:
<!doctype html>
<div class="navbar">
<div id="for-ie">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0 auto;
padding: 0px;
border:1px solid red;
display:table;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
#for-ie { text-align:center; }
#for-ie ul { display:inline-block; }
#for-ie ul { display:inline; }
</style>
<![endif]-->
Tested in IE6, FX 3.
EDIT: Alternate style without the extraneous element:
<!doctype html>
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
padding: 0px;
zoom:1;
border:1px solid red;
overflow: hidden;
}
.navbar li{
padding: 2px;
width: 150px;
display:inline-block;
}
</style>
<!--[if IE]>
<style>
.navbar li { display:inline; }
</style>
<![endif]-->
The proper way to do this these days is to just use Flexbox:
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: nowrap; /* assumes you only want one row */
}
You can use text-align:fixed to do this with just a few lines of CSS, no extra markup.
See my answer here: https://stackoverflow.com/a/15232761/87520
<ul>
<li>Home</li>
<li>Discounts</li>
</ul>
<style>
.navbar > ul {text-align:justify;}
.navbar > ul > li {display:inline-block}
.navbar > ul:after { content:' '; display:inline-block; width: 100%; height: 0 }
</style>
Basically comes down to add text-align: center to the ul and display: inline-block to the li's.
This seems to do the trick:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.navbar {
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
.navbar li{
display: inline-block;
padding: 2px;
width: 150px;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
</body>
</html>
Are you looking for something like this:?
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.navbar li{
display:inline;
line-height:30px;
}
.navbar li a { padding:.4em 5em;}
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
you can use "display: table" and "display: table-cell"
the code is cleaner and the li width isn't hardcoded:
<div class="navbar">
<ul>
<li>Home</li>
<li>Discounts</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</div>
.navbar {
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none;
padding: 0px;
display: table;
table-layout: fixed;
width: 100%;
}
.navbar li{
padding: 2px;
display:table-cell;
width: 50px; /* just for the browser to get idea that all cells are equal */
text-align: center;
border: 1px solid #FF0000;
}
http://jsfiddle.net/dchwv6qn/1/
you need to define a fixed width for your container .
for example:
.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }
if you want to keep your bg color of .navbar, stick with 100%, remove float left from li and style it like this->
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0 auto;
padding: 0px;
width: 800px;
overflow: hidden;
}
.navbar li{
display: inline-block;
padding: 2px;
width: 150px;
marign: 0 auto;
}
Well ive try'd every thing, nothing is working so if you have the same problem, then i would recommend you use tables and td's to align them, still works properly.
Related
I have a new site I am putting together to learn web coding.
My current code for the section in question is as follows:
require_once 'includes/functions.php';
<?php
if(logged_in())
{
$data = $db->query('SELECT COUNT(id) AS num FROM mail WHERE userid = "'.$_SESSION['id'].'"');
$row = $data->fetch_assoc;
$mcount = $row['num'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo SITENAME; ?></title>
<link rel="stylesheet" type="text/css" href="styles/main.css"
</head>
<body>
<div id="wrapper">
<div id="header">
<?php
if(logged_in())
{
echo 'Welcome, ' . $_SESSION['username'] . '! <img src="" alt="" width="32" height="32" /> ('.$mcount.')';
}
else
{
echo 'Welcome, Guest!';
}
?>
</div>
<div id="banner"><img src="" alt="" width="1000" height="250" /></div>
<div id="navbar">
<ul>
<li>Home</li>
<li>
<?php
if(logged_in())
{
?>
Logout
<?php
} else {
?>
Login/Register
<?php
}
?>
</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
... Content to be added here ...
</div> <!-- end content -->
<div id="footer">Copyright 2018 <?php echo SITENAME; ?>. All Rights Reserved.<br />Webmaster Terms of Service</div>
</div> <!-- end wrapper -->
</body>
</html>
and my CSS for these sections are as such:
#navbar
{
float: left;
}
#navbar ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;;
background-color: #f1f1f1;
position: fixed;
overflow: auto;
}
#navbar li a
{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover
{
background-color: #555;
color: white;
}
#content
{
float:right;
width: 810px;
padding: 10px;
}
#footer
{
clear: both;
font-size: 9pt;
text-align: center;
}
My question is this: The Navbar and the Content lines up fine (navbar is fixed to the right so that it will scroll with the page content), but the footer is hidden behind the navbar if the content is shorter than the navbar height.
Is there a way to set the footer min-height to inherit the height of the navbar div so that it will always appear below the fixed navbar instead of behind it?
I researched this on the web, and nothing touched on how to do this specifically (they just said to create a element between the fixed element and the bottom element to create a buffer, which is not what I am trying to do).
Update
Updated code with the entire php file (index.php)
Website URL for preview to see issue live: Test Site
You could make the body the height of the browser window by doing the following
body
{
height: 100%;
}
I'm going blind on this, Is This the desired look ?
#navbar
{
float: left;
}
#navbar ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;;
background-color: #f1f1f1;
position: fixed;
overflow: auto;
}
#navbar li a
{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover
{
background-color: #555;
color: white;
}
#content
{
float:right;
width: 810px;
padding: 10px;
}
#footer
{
clear: both;
font-size: 9pt;
text-align: center;
position: fixed;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>
Logout
Login/Register
</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
set the CSS file like this
#content
{
float:right;
width: 810px;
padding: 10px;
height: 100%;
}
#footer
{
clear:both;
font-size: 9pt;
width: 100%;
background-color: green;
color: white;
text-align: center;
}
I think your expecting answer is this. now the footer is on top of the nav bar
If you want to use a pure CSS without Javascript, you could apply a min-height to the .content element which will force the footer down; In the demo below I have specified the .content to have a min-height: 100vh; to make sure it is at least 100% of the height of the viewport.
Read to the comments in the code for reasons for some of my changes
#navbar {
position: fixed;
left: 0;
top: 0;
/*float: left; Float values do not control the position of fixed elements, the above offset values do*/
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
/*position: fixed; Placing your fixed position value on the #navbar element makes more structural sense*/
overflow: auto;
}
#navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #555;
color: white;
}
#content {
float: right;
width: 810px;
padding: 10px;
min-height: 100vh; /*Change this to what you want*/
}
#footer {
clear: both;
font-size: 9pt;
text-align: center;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
FOOTER
</div>
Another solution would be to set a margin-bottom on the .content that is the same height as the #navbar element:
#navbar {
position: fixed;
left: 0;
top: 0;
/*float: left; Float values do not control the position of fixed elements, the above offset values do*/
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
/*position: fixed; Placing your fixed position value on the #navbar element makes more structural sense*/
overflow: auto;
}
#navbar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #555;
color: white;
}
#content {
float: right;
width: 810px;
padding: 10px;
margin-bottom: 136px /*Current height of the #navbar*/;
}
#footer {
clear: both;
font-size: 9pt;
text-align: center;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Contact Us</li>
<li>Donate</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
FOOTER
</div>
I'm trying to make my menu / navigationbar to center horizontally. I can't quite figure out what I've done wrong / forgotten. Also after my last li is right padding. How do I remove it?
HTML
<div class="wrapper">
<div class="header"></div>
<div class="Header"></div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
CSS
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
text-align: center;
border: 1px red solid;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
padding-left: 20%;
padding-right: 18%;
min-width: 80%;
max-width: 80%;
}
.menu li {
float: left;
display: block;
padding-right: 5%;
}
.menu li:after {
content: '/';
padding-left: 20px;
}
https://jsfiddle.net/sdzLn5hd/
Well, first of all, are you sure this is how your HTML code should be?
<div class="Header">
</div>
<ul class="menu">
<li>Home </li>
<li>Over mij </li>
<li>Mijn diensten </li>
<li>Contact </li>
</ul>
instead of :
<div class="Header">
<ul class="menu">
<li>Home </li>
<li>Over mij </li>
<li>Mijn diensten </li>
<li>Contact </li>
</ul>
</div>
I'd suggest you to check this first.
Secondly, your menu is centered (the menu-items are not. Maybe that's what you meant). Just taking a look at your CSS and adding background-color to it makes it all clear.
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
float: left;
display: block;
padding-right: 5%;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
div.wrapper {
background-color: orange;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
</div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Now, onto the solutions, I am not sure what exactly you are looking for, but I can suggest you two possible solutions.
Solution 1:
Modify the .menu li class as below :
.menu li {
display: block;
text-align: center;
}
See this below :
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
display: block;
text-align: center;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
Solution 2:
Modify the .menu and .menu li class as below :
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
text-align: center; /*Add this property*/
}
.menu li {
display: block;
text-align: center;
}
See this below :
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
text-align: center;
}
.menu li {
display: inline-block;
text-align: center;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
To remove padding from the last li item, you need to target it:
.menu li:last-child {
padding-right: 0;
}
Looking at your code, I can't really figure out what is that you need. Html is all messed up. Why do you close header div before menu?
Change the li to display inline-block, target the last of the li's with :last-child:
.menu {
text-align:center;
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
display:inline-block;
padding-right: 5%;
}
.menu li:last-child {
padding-right: none;
}
JSFiddle Demo
Here is the best I could do. I added flexbox style to the ul, and removed some padding to get it centered.
fiddle: https://jsfiddle.net/sdzLn5hd/7/
HTML
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
</div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:flex;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
margin:auto;
display: block;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
https://jsfiddle.net/sdzLn5hd/9/ something like this perhaps is what you're looking for
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
removing some unneeded tags in your html
put in your .menu
.menu { text-align:center; }
.menu li {
display: inline-block;
padding-right: 5%;
}
Your float:left will always send the elements to their furthest left possible.
and add this line in your css (remove the last '/' and padding)
.menu li:last-child:after {
content: '';
padding-left: 0px;
}
see here: https://jsfiddle.net/sdzLn5hd/5/
To center text and inline elements, a block parent should have text-align: center applied.
Since you have this tagged as HTML5, I would like to provide you with a more semantic approach to your HTML too. There were a lot of extra styling properties left over from you trying to get this to work, so I re-wrote your CSS thus far (including a few more changes that I try to explain in comments). You can see my code in the snippet below:
* { margin: 0px; padding: 0px; } /* Simple CSS reset */
header { display: block; text-align: center; }
h1,
nav > ul {
display: inline-block;
border: 1px red solid;
padding: 20px 0px;
width: 80%;
}
nav > ul { border-top: none; }
nav > ul > li { display: inline; }
nav > ul > li:after { content: "/" }
nav > ul > li:last-child:after { content: "" } /* Remove trailing separator */
nav > ul > li > a {
padding: 15px; /* Padding here is important for touch */
color: black;
text-decoration: none;
}
nav > ul > li > a:hover { text-decoration: underline; }
<header>
<h1>Title</h1>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
I have a menu and a logo on the header, and I am struggling to make the logo to be at the far edge of the left side of the website and the menu to the edge of the right side.
The problem is, when both of them are displayed as inline-block which means they are going to float to the default orientation which is left, I can't figure out a way to change this, please help.
Here's the CSS code:
/*Header*/
.wrapperHeader{
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
width: 100%;
padding: 15px 0px;
z-index: 1000;
}
.content{
width: 1000px;
max-width: 100%;
margin: auto;
}
.header-logo, #logoImage{
width: 250px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
/*Main Menu*/
.header-menu{
width: 690px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
#MainMenu li{
position: relative;
padding: 15px;
display: inline-block;
right: 0px;
}
Note: in the html, the logo is in a section and the menu is in anther section and both of them are inside a divide.
HTML code:
<header>
<div class="wrapperHeader">
<div class="content">
<section class="header-logo">
<img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/>
</section>
<section class="header-menu">
<nav id="MainMenu">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li id="PortfolioMenu"><a id="Portfolio" href="#">Portfolio</a>
<ul class="subMenu">
<li>Web Design</li>
<li>Visual Identity</li>
<li>Photography</li>
</ul>
</li>
<li>Testimonials</li>
<li>About Me</li>
<li>Get In Touch</li>
<li><a class="getStartedButton" href="get-started.html">Get Started</a></li>
</ul>
Menu<p id="SmartMenu-logo">LOAI Design Studio</p>
</nav>
</section>
</div>
</div>
</header>
Here I've edited your CSS code, so you can try this
/*Header*/
.wrapperHeader{
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
padding: 15px 0px;
z-index: 1000;
overflow: hidden;
}
.content{
width: 1000px;
margin: auto;
}
.header-logo, #logoImage{
width: 250px;
float: left;
}
/*Main Menu*/
.header-menu{
width: 690px;
float: right;
}
#MainMenu ul{
margin: 0;
padding: 0;
list-style: none;
}
#MainMenu li{
position: relative;
padding: 5px 15px;
float: left;
list-style: none;
}
li#PortfolioMenu{
padding: 0;
}
li#PortfolioMenu > a{
padding: 5px 15px;
}
ul.subMenu{
display: none;
position: absolute;
}
li:hover ul.subMenu{
display: block;
}
I've used float:left; for the logo, float:right; for the header-menu, removed display:inline-block; and did some other fixes ...
Hope this will help you ...
I would float logo section left, float menu section right and then clear the wrapper using clear:both. Remove the inline-block for this to work properly.
I feel as if I have tried everything from text-align center to margin:0 auto with a position relative and width of 100%, but they didn't work, I am trying to center my UL inside the div...
Here is my code
<style type="text/css">
.header {
height: 40px;
background: #000;
width: 100%;
}
.header ul {
list-style-type: none;
}
.header li {
float: left;
line-height: 40px;
}
.header li a {
color: #FFF;
padding: 0 18px;
height: 40px;
}
</style>
<div class="header">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Services</li>
<li>Rates</li>
<li>Reviews</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
This works without having to define a set width.
ul {
display: table;
margin: 0 auto;
}
If you want to get rid of the left-side padding, thus genuinely centering the list, add:
padding-left: 0;
This should fix it for you.
ul {
display: inline-block;
margin: 0 auto;
}
If that doesn't work for you then give the UL a set width i.e.
ul {
width: 300px;
margin: 0 auto;
}
In the image above, you can see that -its not perfect- all the <ul> elements have all the same size, and the <li> items no, but they are centered in the <ul> no matter what size is (always assuming that will be smaller)
how can i do this?
ul{ width:160px; }
li{ width:auto; margin:5px auto;}
is not working..
-Image edited with texts-
I don't really understand what you're trying to say with your images, but here's how to make something that looks like them.
See: http://jsfiddle.net/thirtydot/wGpPc/
HTML:
<div class="listContainer">
<ul>
<li>Item 1</li>
<li>Item 2</li>
..
</ul>
</div>
CSS:
.listContainer {
width: 160px;
background: #ccc;
border: 1px solid #444;
float: left;
text-align: center;
margin-right: 9px
}
.listContainer ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
text-align: left;
background: #f0f;
/* for ie6/7 */
*display: inline;
zoom: 1
}
li {
margin: 5px 0;
background: #fff
}