allinemaneto verticale..

[Certe Notti]

salve ragazzi,

ho un problema con l'allinemaneto verticale di alcuni testi il foglio di stile è questo:

/* impostazione del body */
body {background-color: #ffffff; color: #ffffff; margin: 0px; overflow: auto; }  

/* link */
a:link.binaco {background-color: #000; color: #fff; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } 
a:visited.bianco {background-color: #000; color: #fff; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } 
a:hover.bianco {background-color: #000; color: #fff; text-decoration: underline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } 

/* testata */

/* corpo pagina*/
.centrale {width: 100%;
  margin-top: 20px;
  background-color: #ffffff}

/* colonna centrale */
.colonnacentrale {text-align: left;
  background-color: #ffffff}
  
.titolocentrale {height: 30px;
  border-bottom: 2px solid #ffffff;
  background-color: #5375a5;
  padding-left: 5px;
  vertical-align: middle;
  font-weight: bold;
  font-size: 13px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #ffffff; 
  margin-left: 15px;
  margin-right: 15px}  
  
.corpocentrale {height: 30px;
  background-color: #cccccc;
  margin-left: 15px;
  margin-right: 15px}  
  
/* colonna di sinistra */
.colonnasx {width: 220px;
  text-align: left;
  background-color: #ffffff}

.titolosx {height: 30px;
  border-bottom: 2px solid #ffffff;
  background-color: #5375a5;
  padding-left: 5px;
  vertical-align: middle;
  font-weight: bold;
  font-size: 13px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #ffffff;  
  margin-left: 15px}  

.corposx {height: 30px;
  background-color: #cccccc;
  margin-left: 15px}  
  
/* colonna di destra */
.colonnadx {width: 160px;
  text-align: left;
  background-color: #ffffff}

.titolodx {height: 30px;
  border-bottom: 2px solid #ffffff;
  background-color: #5375a5;
  padding-left: 5px;
  vertical-align: middle;
  font-weight: bold;
  font-size: 13px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #ffffff;  
  margin-right: 15px}  

.corpodx {height: 30px;
  background-color: #cccccc;
  margin-right: 15px}

e la pagina di risultato è:

http://www.ro76.it/homepage.asp
Come si vede i titoli nelle righe blu sono tutti con allineamento top o presso che simile al top quando io gli ho dato un vertical-align: middle

perchè?

[Certe Notti]

coome non detto qualcuno potrebbe però spiegarmi su come si faccia a fare l'effetto a finestra che si chiude come su questo sito..

http://www.linuxquestions.org/


grazie...

[Certe Notti]

pensavo di esserci riuscito mi sono accorto solo dopo che su opera non andava e ora fa lo stesso giochino di prima anche sugli altri broweser...

ma cosa sbaglio?

/* impostazione del body */
body {background-color: #ffffff; color: #ffffff; margin-left: 15px; margin-right: 15px; margin-top: 20px; overflow: auto; }  

/* link */
a:link.binaco {background-color: #000; color: #fff; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } 
a:visited.bianco {background-color: #000; color: #fff; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } 
a:hover.bianco {background-color: #000; color: #fff; text-decoration: underline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } 

/* corpo pagina - centrale */
.corpopagina {width: 100%;
  background-color: #ffffff}

/* colonna di sinistra */
.colonna-sinistra {width: 240px;
  text-align: left;
  background-color: #ffffff}

.titolo-sinistra {height: 25px;
  border: 1px solid #000000;
  background: url(sfondo.gif)}  

.corpomenu-sinistra {height: 40px;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  text-align: left;
  padding-left: 5px;
  background-color: #cccccc}   

/* colonna centrale */
.colonna-centrale {margin-left: 15px;
  margin-right: 15px;
  text-align: left;
  background-color: #ffffff}
  
.titolo-centrale {height: 25px;
  margin-left: 15px;
  margin-right: 15px;
  border: 1px solid #000000;
  background: url(sfondo.gif)}  

.corpo-centrale {height: 40px;
  margin-left: 15px;
  margin-right: 15px;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000; 
  text-align: left;
  padding-left: 5px;
  background-color: #cccccc} 

/* colonna di destra */
.colonna-destra {width: 200px;
  text-align: left;
  background-color: #ffffff}

.titolo-destra {height: 25px;
  font-size: 12px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #ffffff;
  padding-left: 5px;
  vertical-align: middle;
  border: 1px solid #000000;
  background: url(sfondo.gif)}  
  
.corpomenu-destra {height: 40px;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  text-align: left;
  padding-left: 5px;
  background-color: #cccccc}

Grazie

[Certe Notti]

up....

non riesco porprio a trovare il bandolo della matassa...

help me!

[Certe Notti]

qualcuno potrebbe aiutarmi...?

[InsaneDesign]

Non ho capito di preciso dove sta il tuo problema sull'allineamento cmq possa darti queste due dritte:

1. Se devi allineare un blocco di oggetti all'interno di un div se usi "vertical-align" il comando non allinea gli oggetti all'interno del div, bensì allinea il div stesso al centro verticale dell'oggetto che lo contiene.

2. se devi allineare al centro una scritta in un menù o cmq all'interno di un blocco e sei sicuro sarà di una sola linea, usa il line height. Esempio: ho un menù orizzontale i cui pulsanti devono essere alti 20px e con scritto dentro i vari home, link, contatti etc. imposti l'altezza del blocco a 20px e line-height 20px, et ualà, allineato perfetto al centro. questo metodo da problemi se hai immagini di mezzo, che ne so, un dot o una freccetta da mettere a inizio riga, che conviene posizionare come sfondo del bottone