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;
}