Centrare un div solo in orizzontale
Ho un div da mettere in mezzo per orizzontale in modo da poterlo mettere in basso ma al centro non so se mi son spiegato bn spero sì.
usando margin:auto non riesco a spostarlo più in giù perchè margin-top nn lo posso usare quindi cm faccio vi lascio la pagina in html:
Codice HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pupax</title>
<script type='text/javascript' src='js/jquery-1.4.2.js'></script>
<style type="text/css">
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:auto;
}
ul#navigation li {
display:inline;
float:left;
width:102;
}
ul#navigation li a {
display: block;
float:left;
color:#000000;
margin-top: -2px;
height: 25px;
width:100;
background-repeat:no-repeat;
background-position:50% 10px;
background-color:#e7f2f9;
border:1 solid #bddcef;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#cae3f2;
}
ul#navigation .home a{
background-image: url(png/settings.png);
}
ul#navigation .about a{
background-image: url(png/notes.png);
}
ul#navigation .podcasts a{
background-image: url(png/ipod.png);
}
ul#navigation .rssfeed a{
background-image: url(png/weather.png);
}
ul#navigation .photos a{
background-image: url(png/maps.png);
}
ul#navigation .contact a{
background-image: url(png/chat.png);
}
ul#navigation .reg a{
background-image: url(png/remote.png);
}
ul#navigation .guide a{
background-image: url(png/guide.png);
}
ul#navigation .forum a{
background-image: url(png/forum.png);
}
ul#navigation .post a{
background-image: url(png/forum.png);
}
.tit{
color:#000000;
height: 23px;
width:100;
background-repeat:no-repeat;
background-position:50% 10px;
background-color:#e7f2f9;
border:1 solid #bddcef;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-top-right-radius: 10px;
-khtml-border-top-left-radius: 10px;
text-decoration:none;
text-align:center;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
} .tt{
margin-left: 25px;
margin-bottom: 15px;
}
.left {
margin-top: 40px;
display: block;
float:right;
color:#000000;
width:150;
border:1 solid #bddcef;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-top-right-radius: 10px;
-khtml-border-top-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:10px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.tit2{
color:#000000;
height: 23px;
width:100;
background-repeat:no-repeat;
background-position:50% 10px;
background-color:#e7f2f9;
border:1 solid #bddcef;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-top-right-radius: 10px;
-khtml-border-top-left-radius: 10px;
text-decoration:none;
text-align:center;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
} .tt2{
margin-left: 25px;
margin-bottom: 15px;
}
.center {
margin-top: 100px;
display: block;
margin: auto;
color:#000000;
width:150;
border:1 solid #bddcef;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-top-right-radius: 10px;
-khtml-border-top-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:10px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
</head>
<body>
<ul id="navigation">
<li class="home"><a href="index.php">Home</a></li>
<li class="about"><a href="inf.php">Informazioni</a></li>
<li class="photos"><a href="photo.php">Wallpapers</a></li>
<li class="rssfeed"><a href="news.php">Newsletter</a></li>
<li class="podcasts"><a href="login.php">Login</a></li>
<li class="contact"><a href="cont.php">Contatti</a></li>
<li class="reg"><a href="reg.php">Registrazione</a></li>
</ul>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
<span style='position:absolute;z-index:1;
left:8px;top:8px;width:173px;height:86px'><img width=173 height=86
src="images/logo.png" ></span>
<div class="left" align="center">
<div class="tt">
<div class="tit">
Eventi
</div>
Eventi in costr_<br>
uzione
</div>
<div class="tt">
<div class="tit">
News
</div>
News in costr_<br>
uzione
</div>
</div>
<div class="center" align="center">
<div class="tt2">
<div class="tit2">
....
</div>
....
</div>
</div>
</body>
</html>
e poi un ultima cosa come mai la scritta sotto "eventi " e gli altri rimane spostata. Avrà capito meglio chi ha visto la pagina.
Per provarla non è necessario jquery è solo per spostare il menu
