problema navbar: le scritte si allineano 4 volte su 5

Daniele Ferrante

Nuovo Utente
6 Set 2013
5
0
0
Buongiorno, perdonatemi se esistono già altre pagine dedicate a questo argomento, ma sono un principiante e temo che non sarei capace di adattare i rimedi degli altri thread al mio problema. Senza contare che attualmente non ho il tempo per dedicarmi anima e corpo al ripensamento del codice css della mia pagina.

Comunque, è da un anno che sto impazzendo sul mio sito, quando viene aperto con chrome o con safari a volte invece che ordinare le scritte in orizzontale le ordina in verticale, poi è sufficiente aggiornare e tutto torna alla normalità.
Qui è il sito http://www.danieleferrante.com (per avere più probabilità che si presenti il bug chiudete chrome, riapritelo e avviate il sito)

Qui è tutto il codice css principale
Codice:
@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../../fonts/League_Gothic-webfont.eot');
    src: url('../../fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         local('League_Gothic-webfont'), local('League_Gothic-webfont'), url('../../fonts/League_Gothic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-stretch: expanded;

}

body {
	display:block;
	padding: 0;
	border: 0;
	margin:0;
	font-family:"MS Gothic", "LeagueGothicRegular";
	font-size:12px;
}

.center_box {margin:0 auto;}

#navigation {
position:fixed;
top: 0;
width: 100%;
color: #ffffff;
border: 0px;
border-spacing: 0px;
height: 25px;
text-align:center;
padding-top: 0px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
display:table-cell;
vertical-align:middle;
text-align:center;
height:25px;
text-align:middle;
font-size: 25px;
padding-top:0px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover, a:visited {
background-color:grey;
} 

div {
    font-size: 25px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    border: 15px;
}

#piede {
position: fixed;
bottom: 0;
width: 100%;
color: #ffffff;
height: 21px;
text-align: center;
padding-bottom: 2px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#piede a {
display:inline;
width:100px;
height:20px;
text-align:middle;
font-size: 25px;
padding-left: 1px;
padding-right: 1px;
color: white;
text-decoration: none;
}

#piede a:hover {
background-color:grey;
} 

.title
{
    font-size: 40px;
    text-align: left;
}
 
.subtitle
{
    font-size: 20px;
    text-align: center;
	font-weight:100;
	font-style:bold;
	
}

.subtitle2
{
    font-size: 20px;
    text-align: left;
	font-weight:100;
	font-style:bold;
	
}
 
#container
{
    position: relative;
    width: 960px;
    margin: 30px auto 0px auto;
}

.button
{
    display:table-cell;
	vertical-align:middle;
	width:90px;
	height:21px;
	font-size: 25px;
	padding-left: 10px;
	padding-right: 10px;
	color: white;
	text-decoration: none;
	border:none;
	background-color:#141414;
	font-family:"MS Gothic", "LeagueGothicRegular";
}

.button:hover
{
	background-color:grey;
	
}	

#menu {
position:fixed;
top:25px;
color: #ffffff solid;
border: 0px;
border-spacing: 0px;
width:90px;
height: 21px;
text-align: center;
padding-top: 0px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#menu a {
display:table-cell;
	vertical-align:middle;
width:90px;
height:21px;
font-size: 25px;
padding-left: 10px;
padding-right: 10px;
color: white;
text-decoration: none;
}

#menu a:hover, a:visited {
background-color:grey;
} 

.here{
background-color:grey;
}

Ringrazio chiunque dovesse aiutarmi
Ciao!
 

Daniele Ferrante

Nuovo Utente
6 Set 2013
5
0
0
Informazioni aggiuntive

Per scritte intendo solo quelle della barra di navigazione superiore, ecco uno screenshot
screenshot.jpg
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,secondo me ti conviene cambiare la struttura html del menu ed usare una lista <ul>
HTML:
<style>
    ul {
        margin: 0;
        padding:0;
        list-style-type: none;
    }
    ul li {
        float:left;
        margin:0 5px;
    }
    ul li a {
        text-decoration: none;
        color: white;
    }
</style>
<ul>
    <li><a href="index.html"><img border="0" src="loghino.gif"/></a></li>
    <li><a href="pag/about.html">ABOUT</a></li>
    <li><a href="pag/portfolio.html">PORTFOLIO</a></li>
    <li><a href="pag/contact.html">CONTACT</a></li>
    <li><a href="pag/links.html">LINKS</a></li>
</ul>
fai prima che a sistemare il css
 
Ultima modifica:

Daniele Ferrante

Nuovo Utente
6 Set 2013
5
0
0
Ciao,secondo me ti conviene cambiare la struttura html del menu ed usare una lista <ul>
HTML:
<style>
    ul {
        margin: 0;
        padding:0;
        list-style-type: none;
    }
    ul li {
        float:left;
        margin:0 5px;
    }
    ul li a {
        text-decoration: none;
        color: white;
    }
</style>
<ul>
    <li><a href="index.html"><img border="0" src="loghino.gif"/></a></li>
    <li><a href="pag/about.html">ABOUT</a></li>
    <li><a href="pag/portfolio.html">PORTFOLIO</a></li>
    <li><a href="pag/contact.html">CONTACT</a></li>
    <li><a href="pag/links.html">LINKS</a></li>
</ul>
fai prima che a sistemare il css

Si, ho provato adesso... è che io vorrei mantenere la barra scura in alto e le caratteristiche di trasparenza quando c'è lo scroll...
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
il css che ho postato è minimale, giusto per dargli l'rientamento orizzontale, devi aggiungere la tua formattazione
 
Discussioni simili
Autore Titolo Forum Risposte Data
L [HTML] Problema con navbar HTML e CSS 0
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2
K [PHP] Problema con variabili concatenate. PHP 1
A Problema filtro fluidifica Photoshop Photoshop 1
H Problema Bordi Scontorno Photoshop 1
O problema con query PHP 4
R Problema installazione Realtek WiFi USB rtl8821 Reti LAN e Wireless 0
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
Y Problema percorso file in rete PHP 1
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
P Problema acquisizione clienti Webdesign e Grafica 1
F NetBeans problema creazione progetto Java Windows e Software 0
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 11
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
D problema php mysql PHP 1

Discussioni simili