[HTML+CSS]Problema menù

Baio84 · 01-03-2013, 15:25

Ho creato un menù a comparsa a cascata per prendere mano ai tag <ul> e <li>. L'unico problema è che quando imposto il border-right-style e border-left-style pari a un 1px nel css, l'elenco appare spostato di qualche px a destra. Nel css ho resettato tutti i tag. Vorrei che il menù comparisse inquadrato giusto.

Codice HTML

Codice HTML:

<html>

<head>
	<link rel="stylesheet" type="text/css" href="Stile.css" />
</head>

<body name="pagina" onLoad="leggiEmoticon()">
	<div id="contenitore">
		<div id="header">
			<h1>Titolo della Pagina</h1>
		</div><!--FINE DIV HEADER-->
		
		<div id="nave" style="overflow:visible; height:30px; valign:middle">
			<ul id="menu">
				<li><a href="#">Serie A</a></li>
				<li><a href="#">Serie B</a></li>
				<li><a href="#">CSI</a>
					<ul>
						<li style="border-top:1px solid;"><a href="#">G&amp;B United</a></li>
						<li><a href="#">Marcaria</a></li>
						<li><a href="#">Commessaggio</a></li>
					</ul>
				</li>
			</ul>
			<div style="clear:both"></div>
		</div><!--FINE DIV NAV-->
		
		<div id="col-sx">
			COLONNA SINISTRA
		</div><!--FINE DIV COL-SX-->
		
		<div id="col-centro">
			QUESTA E' LA COLONNA CENTRALE<br />
		</div><!--FINE DIV COL-CENTRO-->
		
		<div id="col-dx">
			Ciao come va?
		</div><!--FINE DIV COL-DX-->
		
		<div id="footer">
			FOOTER
		</div><!--FINE DIV FOOTER-->
	
	</div><!--FINE DIV CONTENITORE-->
</body>

</html>

Codice CSS

Codice:

/* RESET CSS */
div {
	padding:0;
}
h1 {
	margin: 0;
	padding: 0;
}
ul {
	list-style:none;
	margin:0;
	padding:0;
}
li {
	margin:0;
	padding:0;
}

/* GENERALE */
body {
	font:15px Calibri;
	background: #000
}

/* CONTENITORE */
div#contenitore {
	margin:0 auto;
	background:#fff;
	width:940px;
	padding:10px;
}

/* TESTATA */
div#header {
	background:#40f;
	float:left;
	width:920px;
	padding: 10px;
}

/* MENU */
div#nave {
	width:940px;
	float:left;
	background:#555;
	margin-top:2px;
}
ul#menu li {
	float:left;
	margin-right:5px;
	width:150px;
	text-align:center;
	border:1px #000 solid;
}
ul#menu li a {
	display:block;
	background:#ddd;
	color:#444;
	text-decoration:none;
	padding:5px 20px;
}
ul#menu li a:hover {
	background:#f00;
	color:#fff;
	font-weight:bold;
}
ul#menu li ul {
	display:none;
}
ul#menu li:hover ul {
	display:block;
	position:absolute;
	z-index: 2;
}
ul#menu li ul li {
	float:none;
	border-top-style:none;
	border-left-style:none;
	border-right-style:none;
	border-bottom-style:1px;
}

/* COLONNA SINISTRA */
div#col-sx{
	background:#f00;
	width:231px;
	float:left;
	padding:5px;
	margin:2px 0;
	margin-right:2px;
	height: 400px;
}

/* COLONNA CENTRALE */
div#col-centro{
	background:#ff0;
	float:left;
	width:511px;
	padding:5px;
	margin:2px 0;
	margin-right:2px;
	height: 400px;
}

/* COLONNA DESTRA */
div#col-dx{
	background:#719;
	width:164px;
	float:left;
	padding:5px;
	margin:2px 0;
	height: 400px;
	background-color:rgba(255,100,100,0.7);
}

/* FOOTER */
div#footer {
	background:#042;
	width:940px;
	clear:both;
}

kwb · 01-03-2013, 16:24

Da che ne so io il border-left-style serve ad indicare con che trama viene tracciato il bordo, non quanto deve essere spesso.
Per quello si usa border-left-width.

Inoltre, devi tenere conto che vai a usare 1px della larghezza totale dell'elemento, quindi dovrai poi posizionare gli elementi di conseguenza ( ad esempio il padding sarà 1px in meno di quello che desideri ).

EDIT: Attenzione anche a questo:

Codice:

ul#menu li {
	float:left;
	margin-right:5px;
	width:150px;
	text-align:center;
	border:1px #000 solid;
}

Anzitutto, con questa istruzione, ogni elemento #menu li avrà uno spazio a destra di 5px. Poi siccome hai aggiunto la proprietà border, questa si applica a tutti e 4 i bordi, quindi sx,dx, top e bottom. Il che vuol dire che se togli il margine di 5px, gli elementi ul#menu li saranno separati da una riga nera di 2 px, data dalla somma del bordo destro e sinistro dei due elementi adiacenti.
Per ovviare al problema:

Codice:

ul#menu li {
	float:left;
/*	margin-right:5px;*/
	width:150px;
	text-align:center;
	border:1px #000 solid;
	border-left:none;
}
ul#menu li:first-child {
	border-left: 1px #000 solid;
}

Baio84 · 03-03-2013, 03:35

Ti ringrazio per i consigli perchè è sempre un'esperienza in più. Per quanto riguarda il margin-right:5px l'ho messo apposta perchè li volevo staccati e non uniti.
Per il mio problema penso che il border-style andasse bene lo stesso perchè credo che prendesse come riferimento un border dell'elemento padre ul#menu li, comunque anche col border-width mi dà lo stesso problema. Ho risolto impostando un margin-left:-1px. Ora io pensavo che dovesse essere di -2px perchè il bordo di 1px riguarda sia il destro che il sinistro, ma così il menù risultava spostato di 1px dall'altra parte. Si vede che è una piccola incongruità che si viene a creare

Baio84 · 03-03-2013, 03:36

Ti ringrazio per i consigli perchè è sempre un'esperienza in più. Per quanto riguarda il margin-right:5px l'ho messo apposta perchè li volevo staccati e non uniti.
Per il mio problema penso che il border-style andasse bene lo stesso perchè credo che prendesse come riferimento un border dell'elemento padre ul#menu li, comunque anche col border-width mi dà lo stesso problema. Ho risolto impostando un margin-left:-1px. Ora io pensavo che dovesse essere di -2px perchè il bordo di 1px riguarda sia il destro che il sinistro, ma così il menù risultava spostato di 1px dall'altra parte. Si vede che è una piccola incongruità che si viene a creare

Baio84 · 03-03-2013, 03:37

Ti ringrazio per i consigli perchè è sempre un'esperienza in più. Per quanto riguarda il margin-right:5px l'ho messo apposta perchè li volevo staccati e non uniti.
Per il mio problema penso che il border-style andasse bene lo stesso perchè credo che prendesse come riferimento un border dell'elemento padre ul#menu li, comunque anche col border-width mi dà lo stesso problema. Ho risolto impostando un margin-left:-1px. Ora io pensavo che dovesse essere di -2px perchè il bordo di 1px riguarda sia il destro che il sinistro, ma così il menù risultava spostato di 1px dall'altra parte. Si vede che è una piccola incongruità che si viene a creare

kwb · 03-03-2013, 13:04

Quote:

Originariamente inviato da Baio84

Ti ringrazio per i consigli perchè è sempre un'esperienza in più. Per quanto riguarda il margin-right:5px l'ho messo apposta perchè li volevo staccati e non uniti.
Per il mio problema penso che il border-style andasse bene lo stesso perchè credo che prendesse come riferimento un border dell'elemento padre ul#menu li, comunque anche col border-width mi dà lo stesso problema. Ho risolto impostando un margin-left:-1px. Ora io pensavo che dovesse essere di -2px perchè il bordo di 1px riguarda sia il destro che il sinistro, ma così il menù risultava spostato di 1px dall'altra parte. Si vede che è una piccola incongruità che si viene a creare

Guarda che la soluzione che ho messo io l'ho testata e a me pareva funzionare correttamente. Da che browser fai le prove?

Baio84 · 04-03-2013, 18:44

Sto facendo le prove con Chrome.
Ma allora con le mie prime istruzioni css il secondo elenco non sarebbe spostato di 5px piuttosto di 1px?

kwb · 04-03-2013, 20:25

Quote:

Originariamente inviato da Baio84

Sto facendo le prove con Chrome.
Ma allora con le mie prime istruzioni css il secondo elenco non sarebbe spostato di 5px piuttosto di 1px?

Gli elementi dal secondo in poi sono spostati di 5 px + 2px di bordo ( destro dell'elemento di sinistra e sinistro dell'elemento di destra ).

01-03-2013, 16:24	#2
kwb Senior Member Iscritto dal: Jul 2003 Città: Alessandria Messaggi: 10167	Da che ne so io il border-left-style serve ad indicare con che trama viene tracciato il bordo, non quanto deve essere spesso. Per quello si usa border-left-width. Inoltre, devi tenere conto che vai a usare 1px della larghezza totale dell'elemento, quindi dovrai poi posizionare gli elementi di conseguenza ( ad esempio il padding sarà 1px in meno di quello che desideri ). EDIT: Attenzione anche a questo: Codice: ul#menu li { float:left; margin-right:5px; width:150px; text-align:center; border:1px #000 solid; } Anzitutto, con questa istruzione, ogni elemento #menu li avrà uno spazio a destra di 5px. Poi siccome hai aggiunto la proprietà border, questa si applica a tutti e 4 i bordi, quindi sx,dx, top e bottom. Il che vuol dire che se togli il margine di 5px, gli elementi ul#menu li saranno separati da una riga nera di 2 px, data dalla somma del bordo destro e sinistro dei due elementi adiacenti. Per ovviare al problema: Codice: ul#menu li { float:left; /* margin-right:5px;/ width:150px; text-align:center; border:1px #000 solid; border-left:none; } ul#menu li:first-child { border-left: 1px #000 solid; } __________________ Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505 Ultima modifica di kwb : 01-03-2013 alle 16:37.*

03-03-2013, 03:35	#3
Baio84 Member Iscritto dal: Apr 2012 Messaggi: 56	Ti ringrazio per i consigli perchè è sempre un'esperienza in più. Per quanto riguarda il margin-right:5px l'ho messo apposta perchè li volevo staccati e non uniti. Per il mio problema penso che il border-style andasse bene lo stesso perchè credo che prendesse come riferimento un border dell'elemento padre ul#menu li, comunque anche col border-width mi dà lo stesso problema. Ho risolto impostando un margin-left:-1px. Ora io pensavo che dovesse essere di -2px perchè il bordo di 1px riguarda sia il destro che il sinistro, ma così il menù risultava spostato di 1px dall'altra parte. Si vede che è una piccola incongruità che si viene a creare

03-03-2013, 03:36	#4
Baio84 Member Iscritto dal: Apr 2012 Messaggi: 56	Ti ringrazio per i consigli perchè è sempre un'esperienza in più. Per quanto riguarda il margin-right:5px l'ho messo apposta perchè li volevo staccati e non uniti. Per il mio problema penso che il border-style andasse bene lo stesso perchè credo che prendesse come riferimento un border dell'elemento padre ul#menu li, comunque anche col border-width mi dà lo stesso problema. Ho risolto impostando un margin-left:-1px. Ora io pensavo che dovesse essere di -2px perchè il bordo di 1px riguarda sia il destro che il sinistro, ma così il menù risultava spostato di 1px dall'altra parte. Si vede che è una piccola incongruità che si viene a creare

03-03-2013, 03:37	#5
Baio84 Member Iscritto dal: Apr 2012 Messaggi: 56	Ti ringrazio per i consigli perchè è sempre un'esperienza in più. Per quanto riguarda il margin-right:5px l'ho messo apposta perchè li volevo staccati e non uniti. Per il mio problema penso che il border-style andasse bene lo stesso perchè credo che prendesse come riferimento un border dell'elemento padre ul#menu li, comunque anche col border-width mi dà lo stesso problema. Ho risolto impostando un margin-left:-1px. Ora io pensavo che dovesse essere di -2px perchè il bordo di 1px riguarda sia il destro che il sinistro, ma così il menù risultava spostato di 1px dall'altra parte. Si vede che è una piccola incongruità che si viene a creare

04-03-2013, 18:44	#7
Baio84 Member Iscritto dal: Apr 2012 Messaggi: 56	Sto facendo le prove con Chrome. Ma allora con le mie prime istruzioni css il secondo elenco non sarebbe spostato di 5px piuttosto di 1px?

Strumenti
Mostra una versione stampabile Invia questa pagina per email