[css] centrare un menu in un layout a tre colonne

**blur** · 21-04-2004, 00:16

ciao,

sto utilizzando un layout a 3 colonne (quello che si può scaricare da constile).
ora sulla colonna di sx devo inserire un menu sempre costruito con i css. il problema è che anche il menu usa un file .css esterno e avendone già uno per il layout del sito, ho dovuto fare un copia/incolla da quello del menu.css a layout.css
il problema è che naturalmente è tutto sballato, non riesco a centrarlo bene sulla colonna di sx. ho notato un certo miglioramento nel togliere nel file html il <div class="box"> a fianco di <div id="colonna-sx">, però non so se poi continuando con la costruzione avrò altri problemi.

questo è il codice, è un pò un mattone, ma non è da prendere in considerazione tutto quello all'interno della configurazione del menu ( è sballato, ma funziona)

grazie anticipatamente.

codice:

body { 
	margin: 0 1px 0 0; 
	padding: 0; 
	font: .80em verdana, sans-serif;
	background: #CCC;
	color: #000;
}
hr { display: none }

#header { 
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background: #999; 
	color: #FFF;  
}
#header h1 {  
	font: bold italic 40px/50px impact, arial, verdana, helvetica, sans-serif;
	margin: 0;
}

#colonna-sx, #colonna-dx { 
	float: left; 
	width: 20%; 
	color: #000;
}


/*************************INIZIO CONFIGURAZIONE MENU*******************************************************/


#intestazione {width:160px; margin:0em auto;text-align:left}

#intestazione { 
	
	background:#E0DFE3; 
	border:0px solid #ccc; 
	padding:0em 0;
}



h6 { /*stile per i titoli dei menu*/
font-size:1em;
font-weight:bold;margin:2px 0;
padding:.3em 0em;
}

h7 { /*stile per i titoli dei menu*/
font-size:1em;
font-weight:bold;margin:2px 0;
padding:0em 0em;
}

/*------------------------------------***MENU1***----------------------------------------------*/


/** MENU 1 ** roll-over basato solo sui colori **/
ul.menu1 { 
width:160px;
list-style:none; /* elimino i punti elenco */
margin:0; padding:0; /* elimino i rientri delle liste */
border:1px solid #ccc; 
}
ul.menu1 li a { 
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */ 
}
ul.menu1 li { display:inline } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/
ul.menu1 li a:link, ul.menu1 li a:visited { 
background:#FAFAFD;
color: #000;
} /* colori per il link */
ul.menu1 li a:hover, ul.menu1 li a:active { 
background: #ccc;
color:#c00;
} /* colori per l'effetto roll-over */


/*------------------------------------***MENU2***----------------------------------------------*/


ul.menu2 { 
width:160px;
list-style:none; /* elimino i punti elenco */
margin:0; padding:0; /* elimino i rientri delle liste */
border:1px solid #ccc; 
}
ul.menu2 li a { 
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */ 
}
ul.menu2 li { display:inline } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/
ul.menu2 li a:link, ul.menu2 li a:visited { 
background:#FAFAFD;
color: #000;
} /* colori per il link */
ul.menu2 li a:hover, ul.menu2 li a:active { 
background: #ccc;
color:#c00;
} /* colori per l'effetto roll-over */


/*------------------------------------***MENU3***----------------------------------------------*/

ul.menu3 { 
width:160px;
list-style:none; /* elimino i punti elenco */
margin:0; padding:0; /* elimino i rientri delle liste */
border:1px solid #ccc; 
}
ul.menu3 li a { 
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */ 
}
ul.menu3 li { display:inline } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/
ul.menu3 li a:link, ul.menu3 li a:visited { 
background:#FAFAFD;
color: #000;
} /* colori per il link */
ul.menu3 li a:hover, ul.menu3 li a:active { 
background: #ccc;
color:#c00;
} /* colori per l'effetto roll-over */


/*------------------------------------***MENU4***----------------------------------------------*/

ul.menu4 { 
width:160px;
list-style:none; /* elimino i punti elenco */
margin:0; padding:0; /* elimino i rientri delle liste */
border:1px solid #ccc; 
}
ul.menu4 li a { 
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */ 
}
ul.menu4 li { display:inline } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/
ul.menu4 li a:link, ul.menu4 li a:visited { 
background:#FAFAFD;
color: #000;
} /* colori per il link */
ul.menu4 li a:hover, ul.menu4 li a:active { 
background: #ccc;
color:#c00;
} /* colori per l'effetto roll-over */

/*------------------------------------***MENU5***----------------------------------------------*/

ul.menu5 { 
width:160px;
list-style:none; /* elimino i punti elenco */
margin:0; padding:0; /* elimino i rientri delle liste */
border:1px solid #ccc; 
}
ul.menu5 li a { 
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */ 
}
ul.menu5 li { display:inline } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/
ul.menu5 li a:link, ul.menu5 li a:visited { 
background:#FAFAFD;
color: #000;
} /* colori per il link */
ul.menu5 li a:hover, ul.menu5 li a:active { 
background: #ccc;
color:#c00;
} /* colori per l'effetto roll-over */

/*------------------------------------***MENU6***----------------------------------------------*/

ul.menu6 { 
width:160px;
list-style:none; /* elimino i punti elenco */
margin:0; padding:0; /* elimino i rientri delle liste */
border:1px solid #ccc; 
}
ul.menu6 li a { 
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */ 
}
ul.menu6 li { display:inline } /*elimina lo spazio fra gli elementi della lista introdotto da Opera*/
ul.menu6 li a:link, ul.menu6 li a:visited { 
background:#FAFAFD;
color: #000;
} /* colori per il link */
ul.menu6 li a:hover, ul.menu6 li a:active { 
background: #ccc;
color:#c00;
} /* colori per l'effetto roll-over */



/****************************FINE CONFIGURAZIONE MENU****************************/







#colonna-sx .box, #colonna-dx .box {
	padding:	10px;
}

#colonna-dx { margin-right: -1px; }

#principale { 
	float: left; 
	width: 60%; 
	background: #FFF; 
	color: #000;
	margin: 0 0 -1px 0;
}
#principale .box { 
	border-style: none solid solid solid; 
	border-color: #000; 
	border-width: 1px; 
	padding:	10px;
}

#footer { 
	clear: left;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000; 
	padding:	2px 10px;
	background: #999; 
	color: #FFF; 
	font-size: .80em;
	line-height: 1em;
}

**Jerry Masslo** · 21-04-2004, 01:38

il codice html dov'é?

per i 2 css non ho capito, puoi linkare alla pagina tutti i css che vuoi.

**blur** · 21-04-2004, 09:01

Originariamente inviato da Jerry Masslo
il codice html dov'é?

per i 2 css non ho capito, puoi linkare alla pagina tutti i css che vuoi.

ciao,

si ok, ho linkato i 2 css esterni anzichè crearne uno...

però mi rimane quel problema dell'allineamento:

l'html

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prova</title>
<link rel="stylesheet" type="text/css" href="layout_a_tre_colonne.css" media="screen" />
<link rel="stylesheet" type="text/css" href="menu_verticali.css" media="screen" />

</head>
<body>

<div id="header">
<h1>TuoSito.it</h1>
</div>

<hr />

<div id="colonna-sx">
<h3>colonna-sx</h3>
<div id="colonna-menu">


<ul class="menu1">
	[*]La nostra attività
	[/list]



<ul class="menu2">
	<div id="intestazione"><h7><font color="brown">prova1</h7></font>
	[*]Prova2
	[*]Prova3[/list]
</div>



<ul class="menu3">
             <div id="intestazione"><h7><font color="brown">Prodotto1</h7></font>[*]Prodott02
	[*]prodotto3
	[*]prodotto4
	[*]prodotto5
	[*]prodotto6
[/list]
</div>



<ul class="menu4">
             <div id="intestazione"><h7><font color="brown">Offerte</h7></font>[*]Offerta della settimana

[/list]
</div>


<ul class="menu5">
             <div id="intestazione"><h7><font color="brown">News</h7></font>[*]news1.
	[*]Circolari

[/list]
</div>


<ul class="menu6">
             <div id="intestazione"><h7><font color="brown">Links utili</h7></font>[*]Links
[/list]
</div>

</div>

</div>

<hr />

<div id="principale"><div class="box">
<h3>principale</h3>


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div></div>

<hr />

<div id="colonna-dx"><div class="box">
<h3>colonna-dx</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</div></div>

<hr />

<div id="footer">
Questo è il footer.
</div>

</body>
</html>

**Jerry Masslo** · 21-04-2004, 10:02

blur ogni tanto lo controlli il codice? :quote:

metti questo dentro l'head:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

e guarda come dà di matto il validatore del w3c.

ti direi di lasciare stare quello e ripartire dal layout di constile, poi inserisci i tuoi menu dentro i div laterali e poi vediamo.

**blur** · 21-04-2004, 10:13

Originariamente inviato da Jerry Masslo
blur ogni tanto lo controlli il codice? :quote:

metti questo dentro l'head:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

e guarda come dà di matto il validatore del w3c.

ti direi di lasciare stare quello e ripartire dal layout di constile, poi inserisci i tuoi menu dentro i div laterali e poi vediamo.

opss

è che stavo guardando come poter "immergere" il menu nel div laterale sx.

dici che non sia possibile? mi spakka dover rifarlo

**blur** · 21-04-2004, 11:19

che poi quel menu è quello del tutorial di constile...
quindi non vedo perchè non "potrebbe" funzionare in quel <div>

**Jerry Masslo** · 21-04-2004, 11:34

Originariamente inviato da blur
che poi quel menu è quello del tutorial di constile...
quindi non vedo perchè non "potrebbe" funzionare in quel <div>

Il problema è che lo (x)html è incasinatissimo, non nel senso che è complesso ma che ci sono troppi errori di ogni genere, io non so come sei arrivato a quello ma non hai preso un menu e lo hai inserito in un div, per questo ti dico lascialo stare quello e ricomincia stando più attento agli annidamenti prima di tutto, quando non sei sicuro valida il codice e vedi se è a posto, se non lo è lo devi correggere altrimenti diventa un'impresa sapere cosa non va.

**blur** · 21-04-2004, 13:10

Originariamente inviato da Jerry Masslo
io non so come sei arrivato a quello ma non hai preso un menu e lo hai inserito in un div

come non ho preso un menu? ho preso pari pari quello di constile

http://www.constile.org/template/menu_verticali/
l'ho inserito in blocco nel <div id="colonna-sx">....

quando non sei sicuro valida il codice e vedi se è a posto, se non lo è lo devi correggere altrimenti diventa un'impresa sapere cosa non va.

si ho provato a validare il codice....mi ha dato 77 errori

tipo:
Line 39, column 4: end tag for "div" omitted, but OMITTAG NO was specified [/list]
^
ma il </div> l'ho messo sotto[/list]

mah....

**Jerry Masslo** · 21-04-2004, 14:11

Originariamente inviato da blur
come non ho preso un menu? ho preso pari pari quello di constile

http://www.constile.org/template/menu_verticali/
l'ho inserito in blocco nel <div id="colonna-sx">....

intendevo che non hai preso un menu e messo dentro un div ma hai preso un menu e scaraventato contro un div

si ho provato a validare il codice....mi ha dato 77 errori

tipo:
Line 39, column 4: end tag for "div" omitted, but OMITTAG NO was specified [/list]
^
ma il </div> l'ho messo sotto[/list]

mah....

hai messo un div dentro un ul,il validatore dice che non si può fare, lo puoi mettere dentro un li, ma poi prima hai chiuso l'ul e poi il div, una cosa a volte può stare dentro un'altra ma di sicuro non puoi lasciarne un pezzo fuori.

**blur** · 21-04-2004, 14:33

Originariamente inviato da Jerry Masslo
hai messo un div dentro un ul,il validatore dice che non si può fare, lo puoi mettere dentro un li, ma poi prima hai chiuso l'ul e poi il div, una cosa a volte può stare dentro un'altra ma di sicuro non puoi lasciarne un pezzo fuori.

Per Diana! Era per questo che il menu era tutto sballato

devo fare molta attenzione a quei diavoli di <div>!!!

Discussione: [css] centrare un menu in un layout a tre colonne

Strumenti discussione

Ricerca discussione

Visualizza

[css] centrare un menu in un layout a tre colonne

Permessi di invio