Centrare un div solo in orizzontale

03-06-2011, 20.08.51

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

**karl94** · 03-06-2011, 22.57.26

Non capisco, quale sarebbe il div da centrare? Il div.center? Questo è già centrato.
Comunque, inserisci la dichiarazione del doctype ed elimina gli attributi align, che sono deprecati dal secolo scorso.

05-06-2011, 08.02.45

si ho capito ma se io voglio spostarlo in giu cm faccio?

**karl94** · 05-06-2011, 11.39.43

In basso dove?

05-06-2011, 13.20.07

vabbè ho risolto creando il file style.php e in modo dinamico lo messo in mezzo se vuoi vedere vai su http:/pupax.it/ cmq intendevo in basso alla pagina

Discussione: Centrare un div solo in orizzontale

LinkBack

Strumenti discussione

Display

Centrare un div solo in orizzontale

Regole di scrittura