Allineamento verticale tag li

**sisma_1** · 06-02-2010, 19:05

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

**evan75** · 07-02-2010, 07:47

ciao,

su IE8 e FF a me non dà nessun problema. l'unico pulsante ad essere "allineato" in basso è il primo, non perché ci sia allineamento verticale ma poiché nell'html hai inserito un tag
(break line = vai a capo)

domande secondarie se non dovessi ancora avere trovato la soluzione: che browser usi? quanto sono lunghi i testi che inserisci?
potresti postare tutto l'html e i css?

ciao

**sisma_1** · 08-02-2010, 22:03

Ciao Evan75.
Grazie per la risposta.
Scusa per il tag br, mi sono dimenticato di toglierlo, era una delle prove che stavo facendo.
Faccio i test sia su IE8 che su FF.

Allego l'html e il CSS, così da essere più chiaro.
NB: i bottoni in questione sono da 150x50 px.

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="parrocchia, santa maria assunta, castel del piano, adorazione perpetua, cellula, padre pio, nuova chiesa, don francesco buono, cav, centro aiuto alla vita, caritas perugia" />

<title>Parrocchia Santa Maria Assunta - Castel del Piano (Pg)</title>

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

<body class="tempsma">
<%
Dim pag
pag = Request.QueryString("pag")
If pag = "" Then
pag = "index.htm"
End If
%>

<div id="container">
<div id="header">
<table width="1024" border="0">
<tr>
<td width="151">[img]immagini/parrocchia.jpg[/img]</td>
<td width="863">[img]immagini/testata.jpg[/img]</td>
</tr>
</table>
</div>

<div id="sidebar1">
<ul id=nav>[*]Chiesa
<ul> [*]Storia <-- 1 RIGA NO[*]Adorazione Eucaristica Perpetua <-- 2 RIGHE OK[*]Cammino Neocatecumenale[*]Confessioni[*]Orario delle Sante messe [*]I nostri Sacerdoti [/list]

[*]Cellule di Evangelizzazione
[*] Attività Parrocchiali
<ul> [*]Credo la Chiesa [*]Dieci Comandamenti [*]Scuola di Vita Cristiana[*]Corsi Prematrimoniali[*]Catechesi per le coppie [*]Catechesi per adulti [/list]

[*]Gruppi e Associazioni
<ul> [*]Caritas [*]Centro Aiuto alla Vita C.A.V. [*]Sentinelle dello Sport[*]La voce della Vita[/list]

[*]Per i ragazzi
<ul> [*]Dopo Cresima [*]Campus Estivi [*]Pastorale[/list]

[*]La nuova Chiesa
<ul> [*]Informazioni generali [*]Presentazione progetto [*]Avanzamento lavori[/list]

[*]Pellegrinaggi
[*]Il coro
<ul> [*]Il coro del sabato [*]Il coro della domenica 10 [*]Il coro della domenica 11[/list]

[*]Gallery
<ul> [*]Foto [*]Viedo [/list]

[*]Link amici

[*]Contatti
[/list]
</div>

<div id="mainContent">
<% Server.Execute(pag) %>

</div>

<div id="footer">
PIEDE CON LINK
</div>
</div>
</body>
</html>

CSS
@charset "utf-8";
body {
font: 100% Verdana;
background-image: url(immagini/sfondo1.jpg);
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}

.tempsma #container {
width: 1024px;
background-image: url(immagini/sfondo.jpg);
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}

.tempsma #header {
margin: 0;
background-image: url(immagini/sfondo.jpg);
}

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

.tempsma #mainContent {
width: 840px;
margin: 0 0 0 170px;
background-image: url(immagini/sfondo.jpg);
}

.tempsma #mainContent h1 {
margin: 0;
padding: 0;
font-size: 20pt;
}

.tempsma #mainContent p {
margin: 0;
font-size: 10pt;
}

.tempsma #footer {
padding: 0 10px;
background:#EEEEEE;
font-size: 6pt;
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}

.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

Grazie ancora.

FL

**evan75** · 09-02-2010, 02:17

scusa ma continuo a non capire dove sia il problema..
ho ritoccato un po' i css per mostrare i colori di background degli elementi a e ul.

Posto un print screen per farti vedere quello che vedo io sul mio schermo (usando IE 8 in questo caso)

Mi potresti mostrare dov'è il problema usando l'immagine che ho postato come riferimento?

grazie

**sisma_1** · 09-02-2010, 11:05

Ciao, forse mi sono spiegato male all'inizio.

Anche io lo vedo in quel modo.
Il mio problema è allineare verticalmente la scritta sul bottone, quindi che la scritta chiesa (per esempio) sia centrata sia orrizzontalmente che verticalmente all'interno del bottone. Attualmente è centrata solo orizzontalmente.

Ho modificato l'immagine a mano e ho "abbassato" sia la scritta chiesa che la scritta storia.

Grazie ancora.
FL

**evan75** · 10-02-2010, 03:17

ciao Sisma_1,

scusa il ritardo, ma al lavoro non posso stare sul forum..

Non è un grande problema: devi usare la proprietà line-height.
la proprietà line-height setta l'altezza della riga di testo.
esempio: se diamo un line-height:100 px; significa che OGNI riga di testo che abbia questa proprietà avrà un'altezza di 100px e il testo si trova esattamente a metà di quell'altezza.

come applicarlo:

la tua line-height: DEVE essere uguale all'altezza dell'elemento contenitore (in questo caso[*])

li {
height:40px;
line-height:40px;
}

questo però risolve SOLAMENTE i link su una sola riga.
i link su due righe non possono ovviamente avere queste proprietà perchè sarebbero alti 80px
(line-height:40px * 2 righe= 80px)

come si risolve:

diamo una classe ai link a due righe
e questa classe avrà una line-heigh uguale alla metà della line height dei link su una righa, in questo caso 20px.

esempio di codice:

HTML:

<li class="testo_su_due_righe">bla bla bla

CSS:

li .testo_su_due_righe {
line-height:20px;
}

fammi sapere come và..

ciao

- E75

**sisma_1** · 10-02-2010, 10:06

Bellissimo!

Alla line-height c'ero arrivato, ma non sapevo come farla funzionare, c'ho provato e ho lasciato perde!

Appena posso la provo subito!

Ps: scusa il ritardo ma anche io dal lavoro è un pò problematica andare sul forum!

Ti faccio sapere appena ci provo.

Grazie.

FL.

**sisma_1** · 11-02-2010, 23:25

Perfetto!!
Data la mia ignoranza su html e css ho creato 2 classi, una da 40 px e una da 20 px.
Poi ho avuto difficoltà a definire il css (non avevo capito bene la questione li.class) ma ho trovato il manuale dell'html ufficiale e ho capito meglio il tuo esempio.

Ora ho risolto i problema.

Grazie mille

FL

**evan75** · 12-02-2010, 02:20

nessun problema.
Io ho imparato molto dal forum di html.it e ho conosciuto gente molto in gamba.

se posso, compatibilmente con gli impegni, cerco di "ricambiare il favore".

Discussione: Allineamento verticale tag li

Strumenti discussione

Ricerca discussione

Visualizza

Allineamento verticale tag li

Permessi di invio