• A
    Super User •

    menu inline

    Salve, ho un piccolo problema con il menu. Dovrei realizarlio in linea orizzontale ma sbaglio in qualche parte. Qualcuno potrebbe essere cosi gentile ad aiutare a una grande imbranata?

    Il div di menu è 450/204px.
    I bottoni hanno tutte la stessa misura 60/100 px.

    Ecco che ho combinato:

    #menu ul{
    margin:0;
    padding:0;
    list-style:none;
    }

    margin:0;
    padding:0;
    text-align:left;
    display:inline;
    }

    background:url(img/bottone1.png) no-repeat top left;
    height:60px;
    width:100px;
    font-size:10px;
    color: #000000;
    margin:0;
    padding:0;
    text-decoration:none;
    display:block;
    }

    Mi sa che display:inline viene bloccato da block. Cosa posso fare? 😢

    0
  • M
    User Attivo •

    Ciao arnien,
    ti basta sostituire il disply:inline, con float:left.

    #menu li{
margin:0;
padding:0;
text-align:left;
**float:left;**
}

    la proprietà inline per il li, viene sovrascritta da quella block di a: un elemento di linea non può contenere un elemento blocco!
    Poichè a te un elemento blocco serve (altrimenti non potresti dare ad a larghezza e altezza), puoi aggirare l'ostacolo mettendo il float sui li!
    Se hai la necessità di ulteriori info, guarda le nostre bellissime FAQ (:yuppi:), ce n'è una che fa al caso tuo: **Che cosa sono gli elementi block e in-line?
    **
    Buon lavoro

    Meryk

    0
  • A
    Super User •

    Grazie mille Meryk. Ora sicuramente usero i vostri FAQ. Grazie mille. 😄

    0
  • Z
    User •

    Ciao, ho un problema simile a quello di arnien. Una lista (menu) inline in cui l'elemento non attivo ha un'immagine di sfondo (un quadratino per intenderci). Per poterlo visualizzare devo necessariamente porre l'elemento come block, per stare in linea aggiungo il float left ma a questo punto il mio menu si sposta a sinistra, mentre io vorrei che restasse allineato al centro rispetto al contenitore.
    Ho fatto varie prove mettendo anche il contenitore in position relative con left al 50% ma in opera crea una barra di scorrimento orizzontale. Qualcuno sa come aiutarmi? Grazie infinite.

    Zoomba

    ps un'ultima nota. Il menu è creato dinamicamente quindi non so a priori quante saranno le voci di menu

    0
  • P
    User Newbie •

    Ciao zoombunnie.
    Credo che la tua situazione di partenza potrebbe essere così riassunta:

    
<ul>
  <li><a href="#">primo</a></li>
  <li><a href="#">secondo</a></li>
  <li><a href="#">terzo</a></li>
  <li><a href="#">quarto</a></li>
  <li><a href="#">quinto</a></li>
</ul>
```Se vuoi che risulti centrato rispetto alla pagina ti basta aggiungere un contenitore attorno:

    <div class="ext">
    <ul>
    <li><a href="#">primo</a></li>
    <li><a href="#">secondo</a></li>
    <li><a href="#">terzo</a></li>
    <li><a href="#">quarto</a></li>
    <li><a href="#">quinto</a></li>
    </ul>
    </div>

    li {display: inline;}
    a{display: block; border: 1px solid red; width:100px; float:left;}
    ul {border: 1px solid blue; width:600px;text-align:center; margin: 0 auto;}
    div.ext{border:1px solid green; }

    
Occorre fissare la dimensione per l'UL, mentre i bordi li puoi sopprimere:)

Spero sia utile.
Ciao.
    0
  • L
    User Attivo •

    Ciao pcamoxy, e benvenuto! 🙂
    Ottimo intervento, grazie anche da parte mia.

    0
  • Z
    User •

    Ciao ragazzi!! Grazie intanto per le celeri risposte.
    Un amico ha scoperto l'arcano.. preparatevi!!!
    Questo è il mio codice
    <div class="elenco">
    <ul>
    <li><a href="#">Pag.precedente</a></li>
    <li><a href="#">1</a> - </li>
    <li><h3>2</h3></li>
    <li> - <a href="#">3</a></li>
    <li><a href="#">Pag.successiva</a></li>
    </ul>
    </div>
    pcamoxy ho provato la tua soluzione ma non funziona perché io non so a priori la dimensione dell'ul (potrebbe avere tre voci o dieci o cinquanta).
    Questo è il css con la soluzione
    ul{
    list-style:none;
    text-align:center;
    }
    li{
    display:inline;
    }
    li h3{
    display:inline;
    background:url(immagini/fe/pagina_on.gif) no-repeat 0px;
    font-size:11px;
    font-weight:bold;
    padding:5px;
    }
    Il mio problema era avere l'elenco centrato e visualizzare l'immagine di sfondo dell'elemento non attivo (pagina_on.gif). Non potevo utilizzare display:block perché se no andava tutto a capo. La scoperta è che anche con display:inline l'immagine era visualizzata, ma spostata, e quindi se ne vedeva solo un pezzo. Perciò è stato aggiunto al background la posizione (0px) e al li un padding di 5px.
    Spero che possa essere d'aiuto a qualcuno, io ci ho sbattuto la testa per un sacco di tempo!!!
    Grazie ancora

    0
Effettua l'accesso per rispondere