Salve ragazzi.
Non so se sono sulla sezione giusta nel caso chiedo venia.
Sono un neofita dell'html e dei css.
Sto realizzando con un mio amico un sito.
Abbiamo inserito un elenco a scomparsa delle pagine principali, tramite il tag ul e li.
Ovviamente ho trovato l'esempio su internet e l'ho adattato alle mie esigenze!
Come sfondo delle celle che contengono i link abbiamo messo dei bottoni creati da noi.
Ci sono dei casi in cui il link va su una riga e altri in cui va su due righe.
Essendo il bottone alto uguale per tutti i link, quelli a 2 righe risultano centrati verticalmente, quelli ad una riga no, stanno allineati in alto.
Ho guardato su internet (soprattutto su questo forum) il modo per fare l'allineamento verticale.
Ho provato inserendo una tabella 1x1 all'interno del tag li, ho provato con br e line-heigt messo prima del testo da 1 riga, ho fatto altri tentativi ma niente.
Sono qui per chiedervi se è possibile fare questo allineamento e, se si, come.
Ringrazio anticipatamente.
Allego la parte dell'html e del CSS che interessano la lista. (ricordo che non ci capisco niente e che ho copiato e riadattato)
<div id="sidebar1">
<ul>[*]<a href="#">
1 riga</a>
<ul> [*]1 riga [*]2 righe [*]1 riga[*]1 riga[*]1 riga [*]1 riga [/list]
.
.
.[/list]
</div>
.tempsma #sidebar1 {
float: left;
width: 150px;
height: 100%;
background-image: url(immagini/sfondo.jpg);
padding: 15px 0;
font: 100% Comic Sans MS;
font-size: 10pt;
}
.tempsma #sidebar1 ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 0px solid #999;
}
.tempsma #sidebar1 ul li {
position: relative;
}
.tempsma #sidebar1 li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
width: 150px;
}
.tempsma #sidebar1 ul li a:hover {
background-attachment: scroll;
background-repeat: repeat;
background-position: 0% 0%;
text-align:center;
text-decoration: none;
color: #ffffff;
background-image: url(immagini/push2.jpg);
}
.tempsma #sidebar1 ul li a {
display: block;
text-align:center;
text-decoration: none;
color: #ffffff;
background-image: url(immagini/push1.jpg);
padding: 5px;
height: 40px;
border: 0px solid #999;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
.tempsma #sidebar1 * html ul li { float: left; height: 1%; }
.tempsma #sidebar1 * html ul li a { height: 1%; }
/* End */
.tempsma #sidebar1 li:hover ul{
display: block;
}
Grazie ancora!
FL

Rispondi quotando