PDA

View Full Version : [HTML+CSS]Problema menù

Baio84
01-03-2013, 14: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
<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
/* 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, 15:24
Da che ne so io il border-left-style (http://www.w3schools.com/cssref/pr_border-left_style.asp) serve ad indicare con che trama viene tracciato il bordo, non quanto deve essere spesso.
Per quello si usa border-left-width (http://www.w3schools.com/cssref/pr_border-left_width.asp).

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:

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:

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, 02: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, 02: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, 02: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, 12:04
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, 17: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, 19:25
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 ).