Icone non allineate correttamente nella barra di navigazione

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
Salve,

Ho il seguente problema le icone della barra di navigazione non si allineano e non riesco a capire come mai. VOrrei avere le icone tutte sulla stessa linea con la scritta sotta come da esempio nella immagine. Grazie dell'aiuto :)
Screen Shot 2014-03-10 at 23.06.16.jpg
HTML

HTML:
<nav><!--NAVIGATION-->
			 <ul id="bar">
				 <!--<li><a href="#">☰</a>MOBILE -->
				 <li><a href="#box1"><img src="../img/pictogram-information.png" alt="pictogram-information"><span>Praktis</span></a></li>
				 <li><a href="#box2"><img src="../img/pictogram-udstillinger_01.png" alt="pictogram-udstillinger_01"><span>Udstillinger</span></a></li>
				 <li><a href="#box3"><img src="../img/pictogram-uddannelse.png" alt="pictogram-uddannelse"><span>Undervisning</span></a></li>
				 <li><a href="#box4"><img src="../img/pictogram-science_01.png" alt="pictogram-science_01"><span>Sjovt nok klogere</span></a></li>
				 <li><a href="#box5"><img src="../img/pictogram-festogkonference_05.png" alt="pictogram-festogkonference_05"><span>Fest & konference</span></a</li>
				 <!--<li><a href="child.html">Børnezonen</a></li>EXTERNAL LINK--> 
			 </ul>	
		</nav> <!--END-->
CSS
Codice:
nav {
	 position: relative;
	 width:100%;
	 height:150px;
	 border: 2px black solid;
	 word-spacing: 0;
	 left: 0px;
	 top: 0px;
	 background: red;
	 z-index: 100;
 }
 
 ul#bar {
	 position: relative;
	 max-width: 100%; 
	 min-width: 50%;
 }
 
 #bar li {
 list-style: none;
 display: inline-block;
 margin-left: 4%;
 width: 15%;
 height: 150px;
 }
 #bar li a {
	 position: relative;
	 width: 100%;
 }
 span {
	 position: relative;
	 top:20px;
	 text-decoration: none;
	 text-align: center;
	 font-size: 18px;	
	  }
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, provalo cosi
HTML:
<style>
    nav {
        width:100%;
        height:150px;
        border: 2px black solid;
        word-spacing: 0;
        background: red;
        z-index: 100;
    }

    ul#bar {
        max-width: 100%; 
        min-width: 50%;
    }

    #bar li {
        list-style: none;
        display: inline-block;
        margin-left: 4%;
        width: 15%;
        height: 150px;
    }
    #bar li img {
        width:90px;
        height:90px;
        float: left;
    }
    #bar li a {
        width: 100%;
    }
    span {
        display: block;
        clear: both;
        text-decoration: none;
        font-size: 18px;	
    }
</style>
<nav><!--NAVIGATION-->
    <ul id="bar">
        <!--<li><a href="#">☰</a>MOBILE -->
        <li>
            <a href="#box1">
                <img src="http://forum.mrwebmaster.it/img/pictogram-information.png" alt="pictogram-information">
            </a>
            <span>Praktis</span>
        </li>
        <li><a href="#box2">
                <img src="http://forum.mrwebmaster.it/img/pictogram-udstillinger_01.png" alt="pictogram-udstillinger_01">
            </a>
            <span>Udstillinger</span>
        </li>
        <li><a href="#box3">
                <img src="http://forum.mrwebmaster.it/img/pictogram-uddannelse.png" alt="pictogram-uddannelse">
            </a>
            <span>Undervisning</span>
        </li>
        <li><a href="#box4">
                <img src="http://forum.mrwebmaster.it/img/pictogram-science_01.png" alt="pictogram-science_01">
            </a>
            <span>Sjovt nok klogere</span>
        </li>
        <li><a href="#box5">
                <img src="http://forum.mrwebmaster.it/img/pictogram-festogkonference_05.png" alt="pictogram-festogkonference_05">
            </a>
            <span>Fest & konference</span>
        </li>
        <!--<li><a href="child.html">Børnezonen</a></li>EXTERNAL LINK--> 
    </ul>	
</nav> <!--END-->
ho dato una dimensione alle img giusto per vedere l'effetto visto che non avevo le immagini, puoi toglierle se le immagini hanno tutte le stesse dimensioni
 

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
Ciao, provalo cosi
HTML:
<style>
    nav {
        width:100%;
        height:150px;
        border: 2px black solid;
        word-spacing: 0;
        background: red;
        z-index: 100;
    }

    ul#bar {
        max-width: 100%; 
        min-width: 50%;
    }

    #bar li {
        list-style: none;
        display: inline-block;
        margin-left: 4%;
        width: 15%;
        height: 150px;
    }
    #bar li img {
        width:90px;
        height:90px;
        float: left;
    }
    #bar li a {
        width: 100%;
    }
    span {
        display: block;
        clear: both;
        text-decoration: none;
        font-size: 18px;	
    }
</style>
<nav><!--NAVIGATION-->
    <ul id="bar">
        <!--<li><a href="#">☰</a>MOBILE -->
        <li>
            <a href="#box1">
                <img src="http://forum.mrwebmaster.it/img/pictogram-information.png" alt="pictogram-information">
            </a>
            <span>Praktis</span>
        </li>
        <li><a href="#box2">
                <img src="http://forum.mrwebmaster.it/img/pictogram-udstillinger_01.png" alt="pictogram-udstillinger_01">
            </a>
            <span>Udstillinger</span>
        </li>
        <li><a href="#box3">
                <img src="http://forum.mrwebmaster.it/img/pictogram-uddannelse.png" alt="pictogram-uddannelse">
            </a>
            <span>Undervisning</span>
        </li>
        <li><a href="#box4">
                <img src="http://forum.mrwebmaster.it/img/pictogram-science_01.png" alt="pictogram-science_01">
            </a>
            <span>Sjovt nok klogere</span>
        </li>
        <li><a href="#box5">
                <img src="http://forum.mrwebmaster.it/img/pictogram-festogkonference_05.png" alt="pictogram-festogkonference_05">
            </a>
            <span>Fest & konference</span>
        </li>
        <!--<li><a href="child.html">Børnezonen</a></li>EXTERNAL LINK--> 
    </ul>	
</nav> <!--END-->
ho dato una dimensione alle img giusto per vedere l'effetto visto che non avevo le immagini, puoi toglierle se le immagini hanno tutte le stesse dimensioni

Grazie ho risolto cosi :-D
 
Discussioni simili
Autore Titolo Forum Risposte Data
P inserimento icone social tramite html HTML e CSS 1
atipika INSERIRE ICONE DOWNLOAD E STAMPA WORDPRESS WordPress 10
L Mancata visualizzazione di icone su button PHP 0
D [WordPress] [PHP] icone distanziate su Iphone x WordPress 2
A icone css in selectmenu jQuery 2
G [Guida 1.8] Inserire icone accanto alle sezioni MyBB 0
N [php]icone funzioni tabelle PHP 12
felino [Windows Vista] Icone sul desktop sparite... Windows e Software 2
Fuego2806 [PHP] Icone template - index.php PHP 2
felino [Windows XP] Errore Icone Programmi e Lancio Applicazione Windows e Software 5
A Windows 7 personalizzare vista elenco con icone più grandi Windows e Software 0
F Google maps: Assegnare icone personalizzate a markers estratti da mysql. Javascript 3
M Icone copiate cambiano grafica Windows e Software 3
N Icone del Treeview - Menù ad Albero Javascript 2
S Icone gif trasparenti per web Webdesign e Grafica 3
Web Designer Aggiungere icone nelle sezioni MyBB MyBB 0
Web Designer Editor free per icone .ico: IcoFX Webdesign e Grafica 0
L icone degli strumenti di disegno Webdesign e Grafica 1
F icone Presenta il tuo Sito 2
G Caricamento icone su condizioni Flash 0
catellostefano Joomla: problema visualizzazione icone Joomla 7
A compaiono e scompaiono icone barra degli strumenti Sicurezza e Virus 2
G Si può salvare posizionamento icone windows? Windows e Software 5
V Icone Flash 1
F icone Webdesign e Grafica 0
grottafelix Set Icone style Light Webdesign e Grafica 7
grottafelix Set icone Presenta il tuo Sito 4
G Icone Webdesign e Grafica 5
M icone casinò e bingo comparse sul dsktp Windows e Software 10
L perché cambiano le icone????? Discussioni Varie 8
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
felino Conversione da MPG a MP4: audio non sincronizzato Windows e Software 1
F Telecamere Wi-Fi non si connettono A nvr IP Cam e Videosorveglianza 0
G Finestra di dialogo che non si apre - programma NUENDO Windows e Software 0
L php mysql non salva solo id PHP 21
D Pagina non trovata Wordpress WordPress 7
S connesso, internet non disponibile ( con extebder tp-link850) Reti LAN e Wireless 0
F Script java elenco alfabetico non funziona Javascript 3
F Script non funzionante. Devo elencare in ordine alfabetico un elenco di nominativi, ma lo script non Javascript 2
L Estrazione dati casuali non doppioni MySQL 1
napuleone non si chiude il thead e non si apre il tbody Javascript 0
napuleone non si aggiorna textarea in tempo reale Javascript 3
D Modem Asus non trasmette ogni 3/4 giorni Reti LAN e Wireless 2
M non static method cannot be referenced from a static context Java 1
napuleone Con le date il codice da di matto o forse non è così Javascript 6
M Questa pagina non carica correttamente Google Maps: aiuto!! HTML e CSS 1
M "Internet non disponibile" Reti LAN e Wireless 0
L Non vedo pc in rete Reti LAN e Wireless 0
M Numero random non ripetitivo Java 2
G pc desktop non si connette all'hotspot wifi Reti LAN e Wireless 0

Discussioni simili