Newsgroup: it.comp.www.html
Titolo: allineamento verticale

c'è un modo semplice con i css di allineare il testo a una linea base
corrispondente a un valign bottom nelle tabelle?
 
Con una cella posso allineare il testo in tutte e quattro i lati del
quadrato: valign top, bottom, e allineare il testo a destra o sinistra.
Con i css posso stabilire una linea di base e allineare il testo con un
valign bottom?
-- 
Sandro kensan 
www.kensan.it
 & 
www.qiqi.it
 geek site
Saluto gli agenti della NSA - Hello NSA - 
www.nsa.gov
 
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 valign bottom?
 
Non ho capito la domanda. Puoi fare un disegno di quello che vuoi e 
postarlo da qualche parte?
 
Istintivamente ti direi di no, ma magari chiedi una cosa banale.
 
Bye.


 Istintivamente ti direi di no, ma magari chiedi una cosa banale.
 
Grazie per la risposta.
 
Aggiungo una informazione. Un frequentatore di questo ng che mi ha
mandato una email (intendeva fare il reply a questo post) mi ha consigliato:
 
http://www.w3schools.com/cssref/playit.asp?filename=playcss_vertical-align&preval=top
 
 
ma io volevo qualche cosa tipo:
 
<br><div style="valign: bottom">Testo qualsiasi</div>
<br>
<hr>
 
con il testo che mi viene allineato alla riga orizzontale hr.
 
In pratica con le tabelle posso fissare una riga orizzontale:
 
<table><tr><td><immagine 50x50 px></td><td valign=bottom>Testo
qualsiasi</td></tr></table>
 
in questo caso la base dell'immagine 50x50px funge da riga orizzontale
ovvero la base della tabella funge da riga orizzontale. Si può fare lo
stesso in modo semplice con i css?
 
Provo con un altro esempio:
 
<div style="float: left; margin-right: 10px;"><img alt="aa"
src="button_diaspora.png"
height="62" width="61"><br>
<center>123</center>
</div>
<div style="float: left; margin-right: 10px;">Testo qualsiasi
</div>
 
Questa è una immagine con un numero sotto. Se dovessi usare le tabelle
potrei affiancare a destra un "Testo qualsiasi" in diverse posizioni
verticali. Potrei scegliere di usare una tabella con due righe e due
colonne per contenere l'immagine, il numero: "123" e il "Testo
qualsiasi". Quest'ultimo posso metterlo sia allineato orizzontalmente
con "123" che allineato con l'immagine, posso scegliere pure
l'allineamento verticale top, middle e bottom: ho 6 possibilità di
allineamento verticale.
 
Posso fare lo stesso con i CSS in modo semplice?
 
-- 
Sandro kensan 
www.kensan.it
 & 
www.qiqi.it
 geek site
Saluto gli agenti della NSA - Hello NSA - 
www.nsa.gov
 



 
 
Anni fa ho usato questo sistema per allineare in verticale il testo delle 
colonne, in base ad un tag che decidi tu (nel mio caso l'ultimo <P>):
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
 
 
Gabriele


 valign bottom?
 
.table {
  display: table;
  border-top: 1px solid #CCCCCC;
 border-left: 1px solid #CCCCCC;
}
.row {
  display: table-row;
}
.cell {
  display:table-cell;
  padding:5px;
  border-right: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  vertical-align: bottom;
  height: 100px;
}
 
 
<div class="table">
        <div class="row">
                <div class="cell">cella 1</div>
                <div class="cell">cella 2</div>
                <div class="cell">cella 3</div>
        </div>
        <div class="row">
                <div class="cell">cella 1</div>
                <div class="cell">cella 2</div>
                <div class="cell">cella 3</div>
        </div>
        <div class="row">
                <div class="cell">cella 1</div>
                <div class="cell">cella 2</div>
                <div class="cell">cella 3</div>
        </div>
</div>
 
-- 
http://www.maxori.it
 
L'Arte è la capacità di fare cose di nessun valore
e di riuscire a venderle
F. Zappa


 }
 
Questo l'avevo pensato pure io ma non trovo che sia un grande passo
avanti usare le tabelle del css al posto delle tabelle dell'html. Tra
l'altro si tratta di allineare il testo e usare le tabelle (css) solo
per allinearlo mi sembra (per quel poco che so) contrario allo "spirito"
del css.
 
Comunque ponendomi in modo costruttivo: le tabelle css sono più veloci e
danno meno problemi al browser delle tabelle html?
 
Io tra l'altro uso nel mio sito le tabelle css e ho un filtro lato
server che blocca gli accessi dei browser (IE6) non compatibili con le
tabelle css. Quindi sfondi una porta aperta se vuoi farmi usare le tabelle.
 
-- 
Sandro kensan 
www.kensan.it
 & 
www.qiqi.it
 geek site
Saluto gli agenti della NSA - Hello NSA - 
www.nsa.gov
 


 
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
 
 
Ho letto un po', usa anche il js. Non credo sia quello che cerco io. Se
non c'è un modo semplice allora userei volentieri display: table; o mi
tengo <table>
 
-- 
Sandro kensan 
www.kensan.it
 & 
www.qiqi.it
 geek site
Saluto gli agenti della NSA - Hello NSA - 
www.nsa.gov
 


Ringrazio MacMax, Pellizzari, Grabriele per le risposte che mi hanno
permesso di chiarirmi le idee e il codice (pappa pronta) di Mac mi ha
fornito l'illuminazione a me che sono una frana in css.
 
Quella che ho realizzato è questo:
 
http://www.kensan.it/tmp/qq.html
 
 
dove l'uso delle tabelle css è limitato al minimo al contrario delle
tabelle html che sono usate in modo pesante con molti livelli di
annidamento. Poi qq.html si adatta automaticamente alla larghezza della
pagina nel senso che se si restringe la finestra del browser si ottiene
una impaginazione comunque non orribile.
 
Se ci sono migliorie che si possono fare le accetto volentieri.


 danno meno problemi al browser delle tabelle html?
 
Il punto di usare le table css invece di HTML è che stai usando le 
proprietà visuali delle tabelle, e non quelle semantiche, quindi è più 
corretto usare quelle css.
 
Le prestazioni sono più o meno le stesse.
 
Il vantaggio è che, se domani vuoi cambiare il layout usando dei float, 
dei position o flexbox, o, semplicemente, vuoi fare un sito responsive 
con le media-queries, usando le display:table sui css lo puoi fare, 
usando le <table> in HTML non puoi.
 
Il segreto è non abusarne, e non ragionare con il "layout a tabelle" 
mentre disegni il sito.
 
Bye.



Io provengo dal layout a tabelle quindi sarà difficile. Metterò tutto
quel che conosco al posto di usare le tabelle.
 
Molto utile il minicorso di css che mi hai fatto: i principi generali li
sto apprendendo.
-- 
Sandro kensan 
www.kensan.it
 & 
www.qiqi.it
 geek site
Saluto gli agenti della NSA - Hello NSA - 
www.nsa.gov
 



 
Sì, quel sistema usa anche un js, contenuto delle colonne indentificate dai 
vari <div> si allinea in basso in base ad un tag da te specificato.
 
Nel prossimo futuro mi auguro prenda piede la proprietà flex
http://www.webhouseit.com/flex-layout-css-del-futuro/
 
 
Gabriele


 
http://www.webhouseit.com/flex-layout-css-del-futuro/
 
 
Bello flex, ho letto tutta la guida che è fortunatamente in italiano
comprensibile a uno come me. Molto interessante e funziona bene con
firefox ma con IE anche col 10 vedo che ci sono problemi, con safari
vuole il prefisso webkit e Opera mini non pervenuta.
 
Ho già rinunciato a IE6 e 7 ma non è il caso di andare oltre.
-- 
Sandro kensan 
www.kensan.it
 & 
www.qiqi.it
 geek site
Saluto gli agenti della NSA - Hello NSA - 
www.nsa.gov
 


 Ho già rinunciato a IE6 e 7 ma non è il caso di andare oltre.
 
E fidati butta nel cesso pure IE8, ormai è da un bel po' che tutti
i siti fatti coi controcrismi esigono almeno IE9 e non la
spazzatura preistorica precedente.


 
http://www.webhouseit.com/flex-layout-css-del-futuro/
 
 
Io ho quasi definitivamente deciso di NON usare mai flex per il layout. È 
troppo limitato, non facilmente controllabile, e, per alcuni layout, poco 
pratico.
 
Bye.


Sto realizzando alcune modifiche e il codice che mi da problemi è questo:
 
http://www.kensan.it/tmp/qq1.html
 
 
la bandiera inglese non si allinea verso il basso ma si allinea al top.
Mi pare che il vertical align della tabella css non abbia effetto dentro
il float che a sua volta contiene l'immagine della bandiera inglese.
 
Dove sbaglio? Devo per forza non usare i float per avere l'allineamento
verticale e usare solo tabelle css?


 il float che a sua volta contiene l'immagine della bandiera inglese.
 
I float occupano sempre il minimo spazio indispensabile.
 
O usi un height su tutti i div, e poi allinei in basso, oppure metti un 
padding-top, o (meh...) fai l'immagine alta come tutte le altre.
 
Bye.


 padding-top, o (meh...) fai l'immagine alta come tutte le altre.
 
Ok padding top funziona ma non trovo sia il massimo quello di aggiungere
uno spazio vuoto sopra una immagine perché ci sia un allineamento
verticale verso il basso.
 
Non ho capito come usare un height e poi allineare verso il basso:
 
<div style="float: left; vertical_align: bottom; height: 30px;">
<immagine></div>
 
non mi funziona. Potresti precisare?
-- 
Sandro kensan 
www.kensan.it
 & 
www.qiqi.it
 geek site
Saluto gli agenti della NSA - Hello NSA - 
www.nsa.gov
 


 <immagine></div>
 
 
Cosi` funziona:
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd
">
<html>
  <head>
    <title>prova</title>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
 
    <style type="text/css">
 
      .table, .table_1 {
      display: table;
      width: 40px;
      height: 40px;
      }
 
      .table {
      margin-right: 40px;
      float: left;
      }
 
      .cell_icons, .cell_icons_1, .img_37x30, .img_37x25 {
      display: table-cell;
      }
 
      .cell_icons_1 {
      vertical-align: bottom;
      }
 
      .img_37x30 {
      border: 0px;
      width: 37px;
      height: 30px;
      }
 
      .img_37x25 {
      border: 0px;
      width: 37px;
      height: 25px;
      }
 
    </style>
 
  </head>
  <body>
    <div class="table">
      <div class="cell_icons">
	<a href="
http://www.kensan.it
">
	  <img class="img_37x30"
	       src="
http://www.kensan.it/images/icons/home_page_37x30.png
"
	       alt="Home page" >
	</a>
      </div>
    </div>
    <div class="table">
      <div class="cell_icons">
	<a href="mailto:
ken...@kensan.it
">
	  <img class="img_37x30"
	       src="
http://www.kensan.it/images/icons/email_37x30.png
"
	       alt="email">
	</a>
      </div>
    </div>
    <div class="table">
      <div class="cell_icons">
	<a href="Chi_sono.php">
	  <img class="img_37x30"
	       src="
http://www.kensan.it/images/icons/chi_sono_25x30.png
"
	       alt="Chi sono">
	</a>
      </div>
    </div>
    <div class="table_1">
      <div class="cell_icons_1">
	<a href="
http://www.google.com/translate?hl=en&amp;ie=UTF8&amp;sl=it&amp;tl=en&amp;u=http%3A%2F%2Fwww.kensan.it%2Farticoli%2F%3C?php%20echo%20$nome_articolo;%20?%3E.php
">
	  <img class="img_37x25"
	       src="
http://www.kensan.it/images/icons/british-flag_37x25.png
"
	       alt="Translation">
	</a>
      </div>
    </div>
  </body>
</html>


 Cosi` funziona:
 
Ho visto, l'ho provato, funziona. A dire la verità sapevo già che
avrebbe funzionato una simile soluzione. Hai messo tante tabelle quante
sono le immagini e poi li hai affiancate con dei float.
 
Io poi, per completare la tua opera, metterei una unica tabella che
raggruppi tutte le immagini del tipo:
 
Tecniche di clearing per i float:
.clear {
	display: table;
}
http://gabrieleromanato.com/2011/07/css-tecniche-per-il-clear-dei-float-cross-browser/
 
 
Debbo dire che la soluzione diventa sempre più lunga dal punto di vista
del codice da scrivere.
 
-- 
Sandro kensan 
www.kensan.it
 & 
www.qiqi.it
 geek site
Saluto gli agenti della NSA - Hello NSA - 
www.nsa.gov
 


 del codice da scrivere.
 
Era per provare qualche TAG da te proposto, poi se la si vuole fare
breve senza tante palle:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd
">
<html>
  <head>
    <title>prova1</title>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
 
    <style type="text/css">
 
      .wrapper {
      top: 30px;
      border: 1px solid #CCCCCC;
      width: 275px;
      height: 40px;
      padding: 5px;
      position: relative;
      }
 
      .img_37x30 {
      border: 0px;
      width: 37px;
      height: 30px;
      margin-right: 40px;
      }
 
      .img_37x25 {
      border: 0px;
      width: 37px;
      height: 25px;
      position: absolute; 
      bottom: 5px;
      }
 
    </style>
 
  </head>
  <body>
    <div class="wrapper">
	<a href="
http://www.kensan.it
">
	  <img class="img_37x30"
	       src="
http://www.kensan.it/images/icons/home_page_37x30.png
"
	       alt="Home page" >
	</a>
	<a href="mailto:
ken...@kensan.it
">
	  <img class="img_37x30"
	       src="
http://www.kensan.it/images/icons/email_37x30.png
"
	       alt="email">
	</a>
	<a href="Chi_sono.php">
	  <img class="img_37x30"
	       src="
http://www.kensan.it/images/icons/chi_sono_25x30.png
"
	       alt="Chi sono">
	</a>
	<a href="
http://www.google.com/translate?hl=en&ie=UTF8&sl=it&tl=en&u=http%3A%2F%2Fwww.kensan.it%2Farticoli%2F%3C?php%20echo%20$nome_articolo;%20?%3E.php
">
	  <img class="img_37x25"
	       src="
http://www.kensan.it/images/icons/british-flag_37x25.png
"
	       alt="Translation">
	</a>
    </div>
  </body>
</html>
