ul align center

This site is best viewed in a modern browser with JavaScript enabled.

bellanko

I'm having troubles for centering a menu I've done with HTML and CSS. I want to center it like the image upper it (I know you can't see it since it's located on my computer), the code I've so far:

<!DOCTYPE html>
 <html lang="cat">
	<head>
		<title>Treball de Recerca</title>
		<link rel="stylesheet" type="text/css" href="style.css" />	
	</head>
	<body>
		<div id="container">
			<div id="header" align="center">
				<div id="logo">
				<a href="index.html"><img src="HEADER.png" alt="Delphic"/></a>
				</div>

			<div id="menu">
			<ul class="nav" align="center">
				<li><a href="index.html">INICI</a></li>
				<li><a href="">FORMULACIO</a>
					<ul>
						<li><a href='Hidrurs.html'>Hidrurs</a></li>
						<li><a href='Oxids.html'>Oxids</a></li>
						<li><a href='Peroxids.html'>Peroxids</a></li>
						<li><a href='Sals Binaries.html'>Sal Binaries</a></li>
						<li><a href='Hidroxids.html'>Hidroxids</a></li>
						<li><a href='Oxoacids.html'>Oxoacids</a></li>
					</ul>
				</li>
				<li><a href="Calcul.html">CALCUL MASSES MOLECULARS</a></li>
				<li><a href="">CONTACTE</a></li>
			</ul>
			</div>
		</div>
	</div>
</body>
</html>

#container {
	width: 900px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;	
}

body {
	height: 100%;
	padding: 0;
	font-size: 18px;
	text-align: justify;
	color: #565656;
	background-color: #f0f0f0;
	font-family: Arial, Helvetica, sans-serif;
}


#header {
	font-size: 20px;
	text-align: center;
	margin: 0px;
	padding: 0px;
}


ul, ol {
	list-style:none;
	margin: 0;
	padding: 0;
}

.nav li a {
	background-color: transparent;
	color: #565656;
	text-decoration:none;
	padding:10px 12px;
	display:block;
}

.nav > li {
	float:left;
}			

.nav li ul {
	display:none;
	position:absolute;
	min-width:140px;
}

.nav li:hover > ul {
	display:block;
}

.nav li ul li {
	position:relative;
	background-color:#e1e1e1;
}

coothead

Hi there bellanko,
[indent]
try it like this...

[color=navy]
<!DOCTYPE html>
<html> [color=red]<!-- lang="cat" does not validate-->[/color]
<head>

<meta charset="utf-8">

<title>Treball de Recerca</title>

<link rel="stylesheet" type="text/css" href="style.css">

<style>
* {
    margin:0;
    padding:0;
    list-style:none;
    border:0;
 }
html,body {
    height:100%;
    font-family:arial,helvetica,sans-serif;
    font-size:18px;
    color:#565656;
    background-color:#f0f0f0;
 }
#container {
    width:900px;
    height:100%;
    margin:auto;	
 }
#container:before {
    content:'';
    display:block;
    padding-top:10px;
 }
#logo,#logo img {
    display:block;
    width:600px;          [color=red] /* replace "600" with  correct value */[/color]
    height:150px;         [color=red] /* replace "150" with  correct value */ [/color]  

    margin:auto;
    background-color:#fc9; [color=red]/* remove this test code */[/color]
 }					
#nav {
    position:relative;
    right:50%;
    float:right;
 }
#container:after {
    content:'';
    display:block;
    clear:both;
 }
#nav li {
    position:relative;
    left:50%;
    float:left;  

 }			
#nav li a {
    display:block;
    padding:10px 12px;
    color:#565656;
    text-decoration:none;
 }					
#nav li ul {
    position:absolute;
    right:auto;
    display:none;
    float:none;
    white-space:nowrap;
 }			
#nav li:hover ul {
    display:block;
 }			
#nav li ul li {
    float:none;
    left:auto;
    background-color:#e1e1e1;
 }
</style>

</head>
<body>

<div id="container">

<a id="logo" href="index.html"><img src="HEADER.png" alt="Delphic"></a>

<ul id="nav">
 <li><a href="index.html">INICI</a></li>
 <li><a href="">FORMULACIO</a>
  <ul>
   <li><a href='Hidrurs.html'>Hidrurs</a></li>
   <li><a href='Oxids.html'>Oxids</a></li>
   <li><a href='Peroxids.html'>Peroxids</a></li>
   <li><a href='Sals-Binaries.html'>Sal Binaries</a></li>[color=red]<!-- hyphen added to Sals Binaries -->[/color]
   <li><a href='Hidroxids.html'>Hidroxids</a></li>
   <li><a href='Oxoacids.html'>Oxoacids</a></li>
  </ul></li>
 <li><a href="Calcul.html">CALCUL MASSES MOLECULARS</a></li>
 <li><a href="">CONTACTE</a></li>
</ul>

</div>

</body>
</html>[/color]

[/indent]

coothead

bellanko

Thank you very much!! Everything is how it should now

coothead

[indent]
No problem, you're very welcome.
[/indent]

coothead