mettere il menu css al centro

29-09-2010, 21.53.40

salve ecco il codice del mio menu ma mi sta tutto sulla sinistra come posso centrarlo

Codice HTML:

<!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=iso-8859-1" />
                        <title>Free CSS Navigation Menu Designs 1 at exploding-boy.com</title>
                        <style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        font: bold 11px/1.5em Verdana;
}

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

/*- Menu Tabs H--------------------------- */

    #tabsH {
      float:left;
      width:100%;
      background:#000;
      font-size:93%;
      line-height:normal;
      }
    #tabsH ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #tabsH li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsH a {
      float:left;
      background:url("tableftH.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsH a span {
      float:left;
      display:block;
      background:url("tabrightH.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsH a span {float:none;}
    /* End IE5-Mac hack */
    #tabsH a:hover span {
      color:#FFF;
      }
    #tabsH a:hover {
      background-position:0% -42px;
      }
    #tabsH a:hover span {
      background-position:100% -42px;
      }

        #tabsH #current a {
                background-position:0% -42px;
        }
        #tabsH #current a span {
                background-position:100% -42px;
        }
-->
</style>
                </head>

                <body>
                        <h2>Tab Menu H</h2>
                        <div id="tabsH">
                                <ul>
                                        <!-- CSS Tabs -->
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="chisono.html"><span>Chi Sono</span></a></li>
<li><a href="contattami.html"><span>contattami</span></a></li>
<li><a href="pazienti.html"><span>Pazienti Trattati</span></a></li>
<li><a href="visita.html"><span>Visita Posturale</span></a></li>

                                </ul>
                        </div>
                </body>
</html>

29-09-2010, 22.38.05

puoi inviare il link della pagina?

**karl94** · 29-09-2010, 22.49.35

Leggi questa discussione: http://forum.it.altervista.org/basi-...u-con-css.html

29-09-2010, 22.50.10

Originalmente inviato da layoututorialing

puoi inviare il link della pagina?

eccolo
http://tecnicoposturale.altervista.org/

29-09-2010, 23.01.58

Originalmente inviato da karl94

Leggi questa discussione: http://forum.it.altervista.org/basi-...u-con-css.html

non ci capisco nulla ci ho provato ma resta sempre li

29-09-2010, 23.07.11

So che sembra da nabbi, ma prova così:

Codice HTML:

<div id="tabsH">
                                <ul>
                                        <!-- CSS Tabs -->
<center><li><a href="index.html"><span>Home</span></a></li>
<li><a href="chisono.html"><span>Chi Sono</span></a></li>
<li><a href="contattami.html"><span>contattami</span></a></li>
<li><a href="pazienti.html"><span>Pazienti Trattati</span></a></li>
<li><a href="visita.html"><span>Visita Posturale</span></a></li></center>

                                </ul>
                        </div>

29-09-2010, 23.12.56

nulla altre idee?

**karl94** · 29-09-2010, 23.12.57

Originalmente inviato da irumble

So che sembra da nabbi, ma prova così:

Codice HTML:

<div id="tabsH">
                                <ul>
                                        <!-- CSS Tabs -->
<center><li><a href="index.html"><span>Home</span></a></li>
<li><a href="chisono.html"><span>Chi Sono</span></a></li>
<li><a href="contattami.html"><span>contattami</span></a></li>
<li><a href="pazienti.html"><span>Pazienti Trattati</span></a></li>
<li><a href="visita.html"><span>Visita Posturale</span></a></li></center>

                                </ul>
                        </div>

Prima di tutto, è codice HTML non valido (detro un ul ci possono stare solo li), l'elemento center è deprecato e non funziona poiché il posizionamento degli elementi li è effettuato tramite i float.

@Tecnicoposturale: sto ricreando lo stesso effetto da zero, visto che quello che hai trovato tu è obsoleto.
Edit: visto che sto rifacendo il tutto, c'è qualche cosa che vorresti cambiare (a parte l'allineamento) o lo rifaccio identico?

29-09-2010, 23.16.07

Vabbè ci ho provato :D.
Trova altri menu, basta cercare in rete: menu jquery
escono davvero alcuni carini!

http://www.1stwebdesigner.com/resour...enu-solutions/

29-09-2010, 23.18.02

Originalmente inviato da karl94

Prima di tutto, è codice HTML non valido (detro un ul ci possono stare solo li), l'elemento center è deprecato e non funziona poiché il posizionamento degli elementi li è effettuato tramite i float.

@Tecnicoposturale: sto ricreando lo stesso effetto da zero, visto che quello che hai trovato tu è obsoleto.
Edit: visto che sto rifacendo il tutto, c'è qualche cosa che vorresti cambiare (a parte l'allineamento) o lo rifaccio identico?

sei un grande bo fai te io non ci capisco tanto cmq graficamente era semplice e mi piaceva cosi però se vuoi inventa quello che ti pare

**karl94** · 30-09-2010, 18.30.34

Ecco qui:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-IT">
    <head>
        <title>Titolo pagina</title>
        <style type="text/css">
            body{
                font: 11px Verdana, Arial, Helvetica, sans-serif;
                margin: 5px;
            }
            
            #nav{
                margin: 0 -5px;
                padding: 10px 50px 0;
                font-weight: bold;
                background: #000;
                text-align: center;
            }
            
            #nav > li{
                display: inline;
                display: inline-block;
            }
            
            #nav > li > a{
                display: inline-block;
                padding: 5px 15px;
                border: solid #666;
                backgroud: #222;
                color: #FFF;
                text-decoration: none;
                border-width: 1px 1px 0;
                -moz-border-radius: 2px 2px 0 0;
                -webkit-border-radius-top-left: 2px;
                -webkit-border-radius-top-right: 2px;
                border-radius: 2px 2px 0 0;
            }
            
            #nav > li > a:hover{
                border-color: #999;
                background: #444;
            }
        </style>
    </head>
    <body>
        <h1>Titolo</h1>
        <ul id="nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="chisono.html">Chi Sono</a></li>
            <li><a href="contattami.html">Contattami</a></li>
            <li><a href="pazienti.html">Pazienti Trattati</a></li>
            <li><a href="visita.html">Visita Posturale</a></li>
        </ul>
    </body>
</html>

Dimmi se ti va bene o se devo cambiare qualcosa.

30-09-2010, 20.43.55

oppure prova semplicemente a racchiudere il menù in un div che poi verrà centrato, però il div deve avere la stessa larghezza del menù

Codice HTML:

<div align="center"><div style="width: larghezzamenùpx;">qua il codice del menù</div></div>

Discussione: mettere il menu css al centro

LinkBack

Strumenti discussione

Display

mettere il menu css al centro

Regole di scrittura