-
allineare un tag <li>
questo è il codice html:
Codice HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>HTML & CSS navigation menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navigation">
<ul align="right">
<li id="active"><a href="navigation.html">Home</a></li>
<li><a href="navigation.html">Forum</a></li>
<li><a href="navigation.html">Chat</a></li>
<li><a href="navigation.html">Amministrazione</a></li>
<li><a href="navigation.html">Log-in</a></li>
</ul>
</div>
</body>
</html>
------
questo è il css
Codice:
#navigation {
width: 950px;
height: 50px;
margin: 0;
padding: 0;
background: url(images/navigation-bg.png) no-repeat left top;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: inline;
margin: 0px;
}
#navigation ul li a {
height:33px;
display: block;
float: left;
padding: 17px 15px 0 15px;
font: bold 12px Arial;
color: #FFF;
text-decoration: none;
background: url(images/navigation-separator.png) no-repeat right center;
}
#navigation ul li a:hover {
color:#363636;
background: url(images/navigation-hover.png) repeat-x left top;
}
#navigation ul li#active a {
color:#363636;
background: url(images/navigation-hover.png) repeat-x left top;
}
potrei allineare a destra le voci di menu: amminstrazione e login?
-
modifica l'html
Codice:
<div id="navigation">
<ul align="right">
<li id="active"><a href="navigation.html">Home</a></li>
<li><a href="navigation.html">Forum</a></li>
<li><a href="navigation.html">Chat</a></li>
<li class="dx"><a href="navigation.html">Amministrazione</a></li>
<li class="dx"><a href="navigation.html">Log-in</a></li>
</ul>
e aggiungi al css
Citazione:
.dx {
float: right
}
-
e se volessi centrare una di queste voci ?
-
