inline <li> ogni dispari

**cippecciopp** · 12-12-2014, 12:58

Ciao a tutti, mi sto cimentando nel design del mio primo sito web (il mio) ed ho subito iniziato con una cosa probabilmente troppo difficile per le mie scarse conoscenze.
Vorrei creare un menu orizzontale in cui ogni link è composto da due <li>, il primo con un'icona, il secondo, a capo e centrato, con il testo del link, esempio:

icona
homepage

Sono in qualche modo riuscito tra html e css, inglobando due elementi <li> in un elemento <a> ed usando display inline e display block con pseudo elementi. Il problema è che così facendo mi sono trovato con il blocco <ul> senza altezza e credo che ciò sia male, anche perchè a causa di questo fenomeno, mi si forma un margine al fondo del menu che non voglio avere.
Incollo un po' di codice così che si capisca meglio cos'ho combinato. Spero che qualcuno mi sappia illuminare perchè io è da diverse settimane che non riesco ad andare avanti.
Grazie in anticipo.

HTML:

codice HTML:

<nav role="Navigation">
   <a href="#content" title="Skip to content">Skip to content</a>
      <ul id="mainNav">
         <a href="index.html" title="Homepage" class="active">
            <li class="fa fa-home"></li>
            <li>Home</li>
         </a>
         <a href="blog.html" title="My Blog" >
            <li class="fa fa-comments"></li> 
            <li>Blog</li>
        </a>
        <a href="#" title="Resources">
           <li class="fa fa-folder"></li>
           <li>Downloads</li>
       </a>
       <a href="#" title="Contact me">
          <li class="fa fa-pencil"></li>
          <li>Contact</li>
      </a>
   </ul>
</nav>

CSS:

codice:

#mainHeader nav {
    display: inline-block;
    margin: 0;
    border: 2px solid black;
    padding: 0;
}
#mainNav li {
    text-align: center;
    font-size: 1.55em;
    margin: 0px 1em;
    text-shadow: 1px 1px .5px #6c95a1;
    display: inline;
}
#mainNav li::first-letter {
    padding: 0px;
    margin: 0px;
    line-height: 0em;
    color: #99773d;
}
#mainNav li:nth-child(odd) {
    font-size: 2em;
    text-shadow: none;
    display: block;
}

PS il #mainHeader non è altro che un div che contiene un colore di sfondo ed un bordo, assieme al logo ed il campo 'cerca'

**Prill** · 12-12-2014, 22:25

non ha molto senso e il link deve trovarsi all'interno della voce elenco e non fuori. Perché due voci elenco e non una dato che il link è unico? Inoltre: non puoi impostare l'icona come sfondo (della voce elenco o del link interno alla voce elenco)?

**cippecciopp** · 13-12-2014, 08:29

Grazie per la risposta.
Il problema che ho è legato al fatto che l'icona con l'immagine, se la inserisco in un elemento all'interno del <li> in cui ho anche il testo della voce di menu, non riesco a mandarla a capo. L'unica maniera in cui sono riuscito a mandarla a capo è stata includendo due <li> in un link (che mi pare di aver letto da qualche parte essere possibile in html 5).
Sarebbe bello poter sostituire il simboletto dell'elenco con l'icona di fontawesome, ma non saprei da che parte cominciare

Se pensi ci sia una soluzione diversa sarei veramente felice di sentirla, perchè io ho usato tutto il mio repertorio

Tra l'altro, giusto ieri, ho provato a mettere i link all'interno dello stesso <li>, includendo anche un elemento <i> con classe font awesome, ma anche in quel caso l'elemento <ul> ha perso l'altezza... mi sta venendo voglia di cancellare il mio css e ricominciare da capo...

**ac_socmel** · 13-12-2014, 10:24

guarda che fontcoso non usa icone o immagini vere
le figure che vedi sono come lettere normali (a b c ... )
quindi se non ti destreggi molto con i css puoi usare <br /> per andare a capo

credo

**cippecciopp** · 13-12-2014, 10:46

No, purtroppo il br non sembra funzionare con le liste

**ac_socmel** · 13-12-2014, 11:55

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>prova font awesome</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
ul {
    background: #FF0;
    border: 4px solid #000;
    overflow: hidden;
}
ul li {
    float: left;
    width: 200px;
    text-align: center;
}
ul li a {
    display: block;
}
ul li a span {
    font-family: FontAwesome;
}
</style>
</head>
<body>
<ul>
    <li><a href="http://www.html.it"><i class="fa fa-home fa-fw"></i><br /> 1515</a></li>
    <li><a href="http://www.html.it"><i class="fa fa-book fa-fw"></i><br /> 65656</a></li>
</ul>
<ul>
    <li><a href="http://www.html.it"><span>&#xf015;</span><br /> 1515</a></li>
    <li><a href="http://www.html.it"><span>&#xf015;</span><br /> 65656</a></li>
</ul>
</body>
</html>

**cippecciopp** · 13-12-2014, 12:02

Questa è interessante... e perchè a me non va a capo se lo metto nel mio?

**cippecciopp** · 13-12-2014, 12:17

Caspita, il br è stata la primissima cosa che ho provato a fare... e non funzionava... ho rifatto entrambi i file, rivedendo un po' il mio css ed ora va... grazie. Rimane solo un problema, se all'interno di un elemento lista inserisco un anchor il blocco ul mi perde il suo valore d'altezza e questo crea un margine al fondo della lista che non so come rimuovere. Se nella lista metto anche un solo elemento senza link tutto si sistema, ma appena metto dei link, ul perde l'altezza e non riesco a capire da cosa possa dipendere...

codice HTML:

<ul id="mainNav">   
   <li><a href="index.html" title="Uno"><i class="active fa fa-home"></i><br>Uno</a></li
   <li><a href="blog.html" title="Due"><i class="fa fa-comments"></i><br>Due</a></li>   
   <li><a href="#" title="Tre"><i class="fa fa-folder"></i><br>Tre</a></li>
   <li><a href="#" title="Quattro"><i class="fa fa-pencil"></i><br>Quattro</a></li>
</ul>

Discussione: inline <li> ogni dispari

Strumenti discussione

Ricerca discussione

Visualizza

inline <li> ogni dispari

Permessi di invio