[CSS] problema di impaginazione righe

[araim]

Ciao a tutti, in php stò stampando alcune righe contenti alcuni campi.
Il mio problema riguarda la posizione di ogni riga rispetto alla precedente.
Devo fare in modo che ogni riga si allineata a sinistra, e che non si vada a
sovrapporre con le righe precedenti. Ogni riga dispone di 4 "spazi".

Direte voi che è tanto semplice usare le tabelle, ma gli stili mi permettono
di invertire le posizioni o i font di un solo campo senza troppi problemi, cosa
di cui io ho bisogno nel mio template.

Ho provato a fare un incremento in php tramite un contatore che ad ogni
riga aggiungeva tot pixel, ma non va, visto che il 4° spazio è variabile.

Questo è lo stampato:

                echo" <div id=\"riga\">";
            echo" <div id=\"minuti\">$stamp[data]</div>";
            echo" <div id=\"nome\"><img src=\"icorazza/$razza\" width=\"10\" height=\"10\" align=\"absmiddle\"> $nome[username]</div>";
            echo" <div id=\"simbolo\"><img src=\"ico/$stamp[simbolo].gif\" width=\"20\" height=\"20\"></div>";
            echo" <div id=\"frase\">$stamp[frase]</div> ";
            echo" </div>"; 

Questo è il CSS:

<style>
div#riga 		{ width: auto; height: auto; position: absolute; left: 0; right: 0; }
div#minuti 	{ width: 30px; height: 20px; float: left; color: #000000; font-size: 9px; }
div#nome 		{ width: 150px; height:20px; float: left; color: #000000; }
div#simbolo 	{ width: 20px; height: 20px; float: left; color: #000000; }
div#frase 		{ width: auto; height: 50px; float: left; left: 210px; position: absolute; color: #000000; }
</style>

mi potete aiutare?

[dreadnaut]

premetto che position: absolute va considerato come il male, quindi usato il meno possibile.

Se ho capito bene vuoi una riga con tre "campi" a larghezza fissa, e poi il resto del testo, il tutto relativo ad un singolo oggetto. Possiamo quindi rappresentare il tutto con una lista [di attributi].

Uso classi invece di id, nel caso ti servisse mostrarne piu' di uno nella stessa pagina, ed inverto il php perche' diventa piu' semplice

<ul class="descrizione">
 <li class="minuti"><span>Minuti:</span> <?= $stamp[data] ?> </li>
 <li class="nome">
  <span>Razza:</span> <img src="icorazza/<?= $razza ?>" width="10px" height="10px" alt="<?= $razza ?>"/>
  <span>Nome:</span> <?= $nome[username] ?>
 </li>
 <li class="simbolo">
  <span>Simbolo:</span>
  <img src="ico/<?= $stamp[simbolo] ?>" width="20px" height="20px" alt="<?= $stamp[simbolo] ?>" />
 </li>
 <li class="frase"><span>Dice:</span> <?= $stamp[frase] ?> </li>
</ul>

Ora diamo una forma al tutto:

<style type="text/css">
.descrizione {
 list-style-type: none; /* niente pallozzi nella lista */
}

.descrizione LI {
 float: left; /* i campi devono rimanere sulla stessa riga, quindi li schiacciamo a sinistra */
}

.descrizione SPAN {
 display: none; /* il testo serve solo per degradare */
}

.descrizione IMG {
 border: none;  /* eliminiamo i bordi alle immagini (IE) */
}

.descrizione LI.minuti { width: 7em; }  /* testo: ha senso misurarlo in em, piu' che in px */
.descrizione LI.nome { width: 12em; }
.descrizione LI.descrizione { width: 20px; }

</style>

[araim]

la riga deve venire fuori in questo modo, visto che il tutto serve per una chat di gioco di ruolo:

11.43 araim frase frase frase frase frase frase frase frase frase frase frase frase frase frase
11.43 araimtrefenwyd frase frase frase frase frase frase frase frase frase frase frase frase frase frase

però con il tuo sistema, non va, io uso mac os leopard con browser firefox ma non riesco a fare una cavolo di riga impaginata in maniera semplice semplice

.riga 		{ float: left; }
.minuti 	{ float: left; color: #000000; font-size: 9px; }
.nome 	{ float: left; margin-left: 5px; color: #000000; }
.simbolo 	{ float: left; margin-left: 5px; color: #000000; }
.frase 	{ float: left; margin-left: 5px; color: #000000; }

            echo" <div class=\"riga\">";
            echo" <div class=\"data\">$stamp[data]</div>";
            echo" <div class=\"nome\"><img src=\"icorazza/$razza\" width=\"10\" height=\"10\" align=\"absmiddle\"> $nome[username]</div>";
            echo" <div class=\"simbolo\"><img src=\"ico/$stamp[simbolo].gif\" width=\"20\" height=\"20\"></div>";
            echo" <div class=\"frase\">$stamp[frase]</div>";
            echo" </div>"; 

[dreadnaut]

la riga deve venire fuori in questo modo, visto che il tutto serve per una chat di gioco di ruolo:

l'esempio e' perfetto, ora si capisce e' in realta' abbastanza semplice, non servono float o absolute di alcun genere. Allineamento fine delle immagini puoi farlo con qualcosa tipo padding-bottom: 2px;, vedi tu

<ol id="chat">
 <li>
  <span class="data"> 11:30 </span>
  <img src="..." width="10" height="10" alt="..." />
  <b>Nome</b>
  <img src="..." width="20" height="20" alt="..." />
  <p>Frase frase frase </p>
 </li>
...
 <!-- altre righe/<li> di chat -->
</ol>

#chat {
 list-style-type: none;
 padding: 0;
 line-height: 1.2em;
}

#chat SPAN.data {
 display: block;
 float: left;
 width: 3em;
 text-align: right;
 font-family: monospace;
}

#chat IMG {
 border: none;
 margin: 0 5px;
}

#chat P {
 display: inline;
}

[araim]

.riga 		{ float: left; width: 100%; }
.minuti 	{ float: left; width: auto; color: #000000; font-size: 9px; }
.nome 		{ float: left; width: auto; margin-left: 5px; color: #000000; font-weight: bold; font-size: 11px; }
.simbolo 	{ float: left; width: auto; margin-left: 5px; color: #000000; padding-bottom: 2px; }
.frase 		{ float: left; width: auto; margin-left: 5px; color: #000000; }

il mio foglio di stile

            echo" <div class=\"riga\">";
            echo" <div class=\"minuti\">".$stamp['data']."</div>";
            echo" <div class=\"nome\"><img src=\"icorazza/$razza\" width=\"10\" height=\"10\" align=\"absmiddle\"> ".$nome['username']."</div>";
            echo" <div class=\"simbolo\"><img src=\"ico/".$stamp['simbolo'].".gif\" width=\"20\" height=\"20\"></div>";
            echo" <div class=\"frase\">".$stamp['frase']."</div>";
            echo" </div>"; 

il risultato se le righe sono tante:

 
 <LINK REL=STYLESHEET TYPE="text/css" HREF="./template/stylein.css">
 <div id="pagina">
 	<div id="chatread" style=" color: #000000;">

	 <div class="riga"> <div class="minuti">23.40</div> <div class="nome"><img src="icorazza/umanom" width="10" height="10" align="absmiddle"> araim</div> <div class="simbolo"><img src="ico/10001.gif" width="20" height="20"></div> <div class="frase">prova di una frase tanto per vedere la connessione e la stampa. prova di una frase tanto per vedere la connessione e la stampa. prova di una frase tanto per vedere la connessione e la stampa. </div> </div> <div class="riga"> <div class="minuti">23.50</div> <div class="nome"><img src="icorazza/umanom" width="10" height="10" align="absmiddle"> araim</div> <div class="simbolo"><img src="ico/10101.gif" width="20" height="20"></div> <div class="frase">prova di una frase tanto per vedere la connessione e la stampa. prova di una frase tanto per vedere la connessione e la stampa. prova di una frase tanto per vedere la connessione e la stampa. prova di una frase tanto per vedere la connessione e la stampa. </div> </div>

     </div>
    <div id="chatwrite"></div>
 </div>

Il problema in definitiva è lo STYLE FRASE, che si posiziona nella riga successiva a quella dove vengono inseriti ora simbolo1 nome simbolo2, come si può risolvere sul mio foglio di stile?

[dreadnaut]

Il problema in definitiva e' che non leggi quello che la gente scrive. Chissene, e' inutile anche spiegarti le cose. Ho gia' scritto che float non serve a niente, ho eliminato tutti i width, e credevo di aver reso ovvia l'inutilita' di quella marea di <div>. Buon appetito.

[araim]

è che voglio capire cosa non va nel mio. non mi serve la pappa pronta.
alla fine ho usato i miei div ed aggiunto alcune cose del tuo stile...

[dreadnaut]

e' anche in effetti colpa mia, che rispondendo di corsa non specifico i singoli problemi:

1. i <div> sono sbagliati. Semanticamente, perche' i div rappresentano blocchi della pagina, e non parti di un'unica riga, o parti di una chat. La chat stessa non ha senso come div, perche' e' una lista ordinata di frasi, quindi usiamo una lista ordinata. Piu' grezzamente, usare div e' sbagliato perche' in quanto blocchi, i div hanno display: block, che li spinge ad occupare l'intera larghezza del contenitore, ed a te tocca usare float, width ed altre zozzerie non necessarie. Se proprio vuoi usare dei div (aargh! ), dagli display: inline, ma per demarcare parti di un testo si usa <span>.
   
   
2. position: absolute come dicevo all'inizio e' male: e' supportato in modi vari ed incoerenti dai vari browser, ed andrebbe usato solo per togliere parte della pagina dal normale flusso alto-basso
   
   
3. un errore simile e' anche l'uso che hai fatto di float: left;. Float serve per togliere un elemento dal normale flusso sinistra-destra e posizionarlo ad uno dei due estremi. Se "flotti" tutto a sinistra, ti ritrovi esattamente con l'ordine normale - ovvio che tu hai dovuto usare float perche' usavi dei div, e probabilmente non sapevi di display: inline
   
   
4. width: auto sono superflui, perche' se usi div normali vengono ignorati (width: 100%), mentre se usi div+float, e' il valore di default.
   
   
5. ripetere color elemento per elemento e' di nuovo superfluo. Basta una volta per la pagina, o la chat, o la riga. Di default, gli elementi prendono il colore del loro contenitore
   
   
6. non serve mettere contenitori attorno a tutti gli elementi, div o span che siano. Puoi assegnare stili agli elementi stessi, alleggerendo la pagina. Esempio e' il fatto che tu usi un div e poi dai font-weight: bold, quando puoi usare semplicemente <b>. Ricordati che i div non sono elementi speciali, sono elementi jolly, e quindi vanno usati quando nessun'altro va bene - ovvero il meno possibile

In generale, ogni volta che vedi del css ripetersi troppo, c'e' qualcosa che non va, e qualcosa che puo' essere eliminato.

[araim]

grazie ... ^__^