Problema di allineamento centrale su più box float senza altezza fissa

**Moriero17** · 25-04-2008, 10:46

Ciao a tutti!!! Scusate ho cercato sul forum e su tutti gli articoli ma non sono proprio riuscito a risolvere il mio problema. Rigrazio già tutti quelli che mi risponderanno.
Vorrei centrare un testo non statico (lo carico da un database e cambia a seconda di alcuni parametri) accanto ad una immagine anche essa non statica (quindi non posso dare un valore fisso per l'altezza).
Non voglio però usare il valore height ai div ne voglio mettere un div con altezza fissa che li contenga.
In pratica vorrei simulare una tabella con td senza altezza definita e cn il testo della prima colonna centrata in verticale. Faccio un esempio:
<table>
<tr>
<td>testo centrato non statico</td><td>immagine non statica</td>
</tr>
<tr>
<td>testo centrato2 non statico</td><td>immagine2 non statica</td>
</tr>
...
...
</table>
Con le tabelle il testo si centra da solo e l'altezza della riga cambia in relazione all'altezza della colonna più alta e non devo dare alcuna informazione sull'altezza ne alla tabella ne alle righe o alle colonne.

Ho provato a mettere un div contenitore, quindi il testo e un div con l'immagine es:

aaa.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="aaa.css?1">
</head>
<body>
<div class="riga">
testo<div class="2colonna">[img]immagine.jpg[/img]</div>
<div>
<div class="riga">
testo2<div class="2colonna">[img]immagine2.jpg[/img]</div>
<div>
</body>
</html>

aaa.css
div.riga
{
float:left;
display:inline;
vertical-align:middle;
}
div.2colonna
{
display:inline;
}
ma niente... (p.s. scusate se scrivo cavolate)

ho provato a mettere position relative al div della riga e position absolute a un div che contiene il testo ma quando faccio top:50% si distanzia del 50% non dal blocco che lo contiene ma dal corpo della pagina:

aaa.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="aaa.css?1">
</head>
<body>

<div class="riga">
<div class="colonna1">testo</div><div class="2colonna">[img]immagine.jpg[/img]</div>
<div>
<div class="riga">
<div class="colonna1">testo2</div><div class="2colonna">[img]immagine2.jpg[/img]</div>
<div>
</body>
</html>

aaa.css
div.riga
{
position:relative;
}
div.colonna1
{
float:left;
display:inline;
position:absolute;
top:50%
}
div.2colonna
{
display:inline;
}

un'altra prova che ho fatto:
aaa.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="aaa.css?1">
</head>
<body>

<div class="riga">
<div class="colonna1">testo</div><div class="2colonna">[img]immagine.jpg[/img]</div>
<div>
<div class="riga">
<div class="colonna1">testo2</div><div class="2colonna">[img]immagine2.jpg[/img]</div>
<div>
</body>
</html>

aaa.css
div.riga
{
vertical-align:middle;
}
div.colonna1
{
float:left;
}
div.2colonna
{
float:left;
}

...ma nisba pure stavolta; non so più cosa inventarmi per favore aiutatemi

Penso uno dei problemi principali sia che il div con il testo non cresce in altezza rispetto al div che contiene l'immagine, quindi non può allinearmelo.

**Mich_** · 29-04-2008, 09:42

Io ci vedo delle contraddizioni in quanto scrivi.
In particolare tra la descrizione e l'esempio con la tabella: nella descrizione sembra che vuoi affiancare due oggetti (una immagine e del testo), con la tabella sembra che li vuoi mettere uno sotto l'altro.

Comunque se vuoi usare i CSS in modo proficuo, e` NECESSARIO che la marcatura sia semanticamente corretta.
Quindi:
1. capire cosa vuoi rappresentare
2. usare i tag giusti
3. formattare

Dato che non ho capito il punto 1, tutto il resto non riesco a farlo

.

Visto che alcuni browser hanno una loro interpretazione personale degli standard, e` anche opportuno che spieghi in quali browser deve funzionare (IE6 / IE7 / FF,Opera,Safari,altri).

**Moriero17** · 29-04-2008, 23:45

Il mio problema è quello di centrare verticalmente il testo di una colonna rispetto all'altezza dell'altra che cambia a seconda dell'altezza dell'immagine (spero il disegno sia di aiuto non so se anche stavolta mi sono spiegato bene), senza dare dimensioni fisse alle colonne in ie7.
Con una tabella fatta così:
<tr>
<td style="vertical-align:middle">testo centrato</td><td>[img]immaginegif.gif[/img]</td>
</tr>
il testo mi verrebbe centrato in middle rispetto all'altra colonna perché l'altezza della prima colonna è forzata a quella della seconda;
mentre con i div es.
<div class="riga">
<div class="colonna">testo centrato</div>[img]immaginegif.gif[/img]<div class="colonna">
</div>
l'altezza della prima colonna rimane piccola quanto il testo (come nel disegno) e quindi non riesce a farmi l'allineamento.

**Mich_** · 30-04-2008, 09:33

Allora una marcatura corretta potrebbe essere:

codice:

<div class="contenit">
  

testo</p>
  [img]...[/img]
</div>

Dopodiche` sia <img> che

devono avere il float (ed in questo modo diventa di tipo blocco anche l'img).
Per centrare il

, e` semplice se il testo e` su una sola riga:

codice:

.contenit {
  ...
}
.contenit:after {
  display: block;
  clear: both;
  /* altri attributi come in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float*/
}
.contenit p {
  height: 100%;
  line-height: 100%;
  float: left;
}
.contenit img {
  float: left; /* oppure right */
}

Se invece il testo puo` andare su piu` righe, il codice per i brwoser standard e`:

codice:

.contenit p {
  height: 100%;
  float: left;
  display: table-cell;
  vertical-align: middle;
}

Per i browser IE, invece, occorre inserire trucchi per centrare; si puo` fare con JS (pero` non ricordo la tecnica corretta).

**Moriero17** · 30-04-2008, 23:19

Il testo potrebbe andare su più righe; ma è proprio sbagliato anche in questi casi evitare l'uso delle tabelle per seguire gli standard w3c?

**Mich_** · 05-05-2008, 10:17

Occorre definire cosa intendi per sbagliato.
Dal punto di vista semantico, una tabella e` tale quando ci sono relazioni sia di riga che di colonna, cioe` se puoi definire un titolo per ogni riga e colonna.
Nel tuo caso c'e` una sola riga, per cui non ha senso parlare di tabella: e` solo un trucco per usare un tipo di formattazione.
Nei browser seri si puo` formattare un blocco come se fosse una cella di tabella: si fa con il display che ho usato sopra. Purtroppo in giro ci sono anche browser che preferiscono essere fedeli agli errori del passato, piuttosto che alle specifiche nuove, e questo crea lavoro agli sviluppatori.

Detto questo uno puo` anche programmare con il "metodo vecchio", ma poi non puo` lamentarsi se i suoi siti non sono accessibili (== non possono venir usati per le pubbliche amministrazioni), o se i suoi siti non arrivano in cima ai motori di ricerca, o se i prossimi browser li visualizzeranno male. Il mio punto di vista e` che il mondo (del Web) sta evolvendo, e non possiamo guardare troppo indietro, ma dobbiamo proiettarci in avanti.
Dal mio punto di osservazione, fare siti oggi secondo i modelli di dieci anni fa non ha senso (e lo stesso vale per i browser, ma su quelli non ho l'autorita`/autorevolezza per influire).

Discussione: Problema di allineamento centrale su più box float senza altezza fissa

Strumenti discussione

Ricerca discussione

Visualizza

Problema di allineamento centrale su più box float senza altezza fissa

Permessi di invio