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
 
Autore Discussioni simili Forum Risposte Data
Z PHP 1
Z PHP 0
M jQuery 6
D PHP 1
D PHP 1