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
felino [Windows 10] Scompare icone, file e collegamenti sul desktop Windows e Software 0
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 MyBB 1.8] Inserire icone accanto alle sezioni CMS (Content Management System) 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 CMS (Content Management System) 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
felino Mac OS e Client Mail: Stato non in linea Mac e Software 1
I nome utente non esiste nel database PHP 1
M Drag and Drop non capisco le sequenze... Javascript 1
L Suggerimento Pagespeed per non vedenti HTML e CSS 0
F comando di inclusione file audio in I-Pad non funziona HTML e CSS 1
M Immagini non usate WordPress 0
B Non riesco a trovare i cognomi con i caratteri speciali in Access (Microsoft 365) MS Access 0
G Numero zero null non deve visualizzare nulla PHP 0
F Paypal _xclick IPN non risponde PHP 1
R Variabile non risconosciuta dentro una funzione PHP 1
C ACCESS Aprire maschera se valore non presente in una combo MS Access 7
E Alert non viene mostrato PHP 1
felino Hardisk WD SATA 1TB 3.5" non si avvia! Hardware 4
K Scrip non funzionante Javascript 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
zorro CREATE TABLE non funziona PHP 6
L tipo boolean non funzionante su mariadb (mysql). E codice php 7.4. PHP 0
Sevenjeak Php8 non carica estenzioni PHP 0
R query DELETE non cancella i record PHP 1

Discussioni simili