[css] impaginato fuori asse

ciao a tutti, sto cercando di impaginare un testo dinamico che viene inserito in php all'interno di una pagina, l'effetto che viene fuori è questo che vi mostro sotto:

http://araim.altervista.org/immagini/prova1.tiff

che è brutto, il testo della seconda e terza riga, lo vorrei allineato all'inizio della riga in questione come un normalissimo "a capo"... il foglio di stile in questione ve lo incollo qui sotto... mi potete aiutare?

Codice HTML:

.riga { float: left; width: 100%; list-style-type: none; padding-bottom: 5px; line-height: 1.2em; } .minuti { float: left; color: #000000; font-size: 9px; width: 3em; font-family: monospace; display: block; font-weight: bold; } .nome { float: left; width: 3em; margin-left: 2px; font-weight: bold; font-size: 11px; } .simbolo { float: left; width: 3em; margin-left: 5px; } .frase { display: inline; margin-left: 5px; }

Dovresti postare anche il codice php della pagina! :-)

il codice della pagina è un papiro in php

Codice PHP:

echo" <div class=\"riga\" style=\"color: ".$colriga."; font-size: ".$sizeriga."; font-weight: ".$bold."; background-color: ".$bgriga."; text-align: ".$align."; margin-bottom: ".$margin."; margin-top: ".$margin.";\">"; echo" <div class=\"minuti\" style=\"font-weight: normal; visibility: ".$vis2."; width2: ".$width.";\">".$data."</div>"; echo" <div class=\"nome\" style=\"color: ".$colriga."; font-size: ".$sizeriga."; visibility: ".$vis2."; width: ".$width2.";\"> <a href=\"schedasmall.php?id=".$username."\" target=\"scheda\"> <img src=\"icorazza/".$razza.".gif\" alt=\"".$icora."\" width=\"10\" height=\"10\" align=\"absmiddle\"></a> ".$username."</div>"; echo" <div class=\"simbolo\" style=\"visibility: ".$vis."; width: ".$width."; margin-left: ".$margin.";\"> <img src=\"ico/".$ico.".gif\" alt=\"".$carica."\" width=\"20\" height=\"20\"></div>"; echo" <div class=\"frase\" style=\"color: #333333; font-size: 9px; font-style: oblique;\">".$notefato."</div>"; echo" <div class=\"frase\" style=\"color: #333333; font-size: 9px; font-style: oblique;\">".$cast."</div>"; echo" <div class=\"frase\" style=\"color: #333333; font-size: 9px; font-style: oblique;\">".$luogo."</div>"; echo" <div class=\"frase\" style=\"color: $colriga; font-size: ".$sizeriga.";\">".$msg."</i></div>"; echo" </div>";

Dove viene inserito il testo 'prova prova prova...'?

un form lo invia senza alcuna formattazione html ad un database.
lo script lo legge e lo pubblica. Dove vedi delle variabili all'interno
del layer è perché a seconda di una sequenza tasti inserita il testo
ha un particolare size o inclinazione o colore...

Non volevo sapere questo! Volevo sapere all'interno di quale div verrà scritto il testo 'prova prova....'! Se vuoi pubblica il codice html che viene creato dalla tua pagina php!

Codice HTML:

<div class="riga" style="color: #000066; font-size: 12px; font-weight: normal; background-color: #F4E7B9; text-align: left; margin-bottom: ; margin-top: ;"> <div class="minuti" style="font-weight: normal; visibility: visible; width2: auto;">13.41</div> <div class="nome" style="color: #000066; font-size: 12px; visibility: visible; width: auto;"> <a href="schedasmall.php?id=ARAIM" target="scheda"> <img src="icorazza/umanom.gif" alt="umano" width="10" height="10" align="absmiddle"></a> ARAIM</div> <div class="simbolo" style="visibility: visible; width: auto; margin-left: ;"> <img src="ico/10001.gif" alt="Principe Araim" width="20" height="20"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #000066; font-size: 12px;">prova prova prova prova prova</i></div> </div>

Ti conviene usare il tag <span> al posto del tag <div> per poi definirlo inline!

Codice:

<style type="text/css">  </style>

Codice:

<div><span class="minuti">13.41</span> <a href="schedasmall.php?id=ARAIM" target="scheda"> <img src="icorazza/umanom.gif" alt="umano" width="10" height="10" align="absmiddle"> </a> <span class="nome">ARAIM</span> <img src="ico/10001.gif" alt="Principe Araim" width="20" height="20"> prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova </div>

non va bene la risultante, io devo permettere il cambio di font e sfondo della riga che viene fuori in html... se dovessi lasciare sono span non potrei fare ciò che serve a me...

Spiegati meglio...perchè puoi modificare font e sfondo anche con span!

guarda qui

devo permettere a seconda della persona che scrive di avere diverse tipologie di output video...

Scusa non hai una pagina esemplificativa online? :wink:

se clicchi sul GUARDA QUI vedrai come viene fuori, è lo screen shot di una chat....

http://araim.altervista.org/immagini/schermata.tiff

Ma è uno screen! Lo so!

Avendo una pagina esemplificativa la posso "modificare" direttamente online e dirti dove puoi eventualmente correggere :wink:

spetta va, vedo cosa riesco a fare :P
così dovrebbe andare ...

http://araim.altervista.org/chatread.php?id=1

Pagina bianca e guardando il sorgente:

Codice:

<script type="text/javascript"> // onload: window.open ('chatread.php','chatread'); </script> <LINK REL=STYLESHEET TYPE="text/css" HREF="./template/stylein.css"> <meta http-equiv="Refresh" content="60;url=chatread.php"> <body style=" background-color: transparent;"> </body>

:|

Codice HTML:

<script type="text/javascript"> // onload: window.open ('chatread.php','chatread'); </script> <LINK REL=STYLESHEET TYPE="text/css" HREF="./template/stylein.css"> <meta http-equiv="Refresh" content="60;url=chatread.php"> <body style=" background-color: transparent;"> <div class="riga" style="color: #FFFFFF; font-size: 11px; font-weight: bold; background-color: #660000; text-align: center; margin-bottom: 10px; margin-top: 10px;"> <div class="minuti" style="font-weight: normal; visibility: hidden; width2: 0px;"></div> <div class="nome" style="color: #FFFFFF; font-size: 11px; visibility: hidden; width: 0px;"> <a href="schedasmall.php?id=" target="scheda"> <img src="icorazza/umanom.gif" title="" width="10" height="10" align="absmiddle"></a> </div> <div class="simbolo" style="visibility: hidden; width: 0px; margin-left: 10px;"> <img src="ico/.gif" title="" width="20" height="20"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #FFFFFF; font-size: 11px;"> prova prova prova</i></div> </div> <div class="riga" style="color: #9900CC; font-size: 10px; font-weight: bold; background-color: ; text-align: left; margin-bottom: 0px; margin-top: 0px;"> <div class="minuti" style="font-weight: normal; visibility: visible; width2: 0px;">11.39</div> <div class="nome" style="color: #9900CC; font-size: 10px; visibility: visible; width: auto;"> <a href="schedasmall.php?id=ARAIM" target="scheda"> <img src="icorazza/umanom.gif" title="umano" width="10" height="10" align="absmiddle"></a> ARAIM</div> <div class="simbolo" style="visibility: hidden; width: 0px; margin-left: 0px;"> <img src="ico/10001.gif" title="Principe Araim" width="20" height="20"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;">[ INCANTESIMO ]</div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #9900CC; font-size: 10px;">prova prova prova</i></div> </div> <div class="riga" style="color: #000066; font-size: 10px; font-weight: bold; background-color: #F4E7B9; text-align: left; margin-bottom: 0px; margin-top: 0px;"> <div class="minuti" style="font-weight: normal; visibility: visible; width2: 0px;">11.39</div> <div class="nome" style="color: #000066; font-size: 10px; visibility: visible; width: auto;"> <a href="schedasmall.php?id=ARAIM" target="scheda"> <img src="icorazza/umanom.gif" title="umano" width="10" height="10" align="absmiddle"></a> ARAIM</div> <div class="simbolo" style="visibility: hidden; width: 0px; margin-left: 0px;"> <img src="ico/10001.gif" title="Principe Araim" width="20" height="20"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #000066; font-size: 10px;"> prova prova prova</i></div> </div> <div class="riga" style="color: #000066; font-size: 12px; font-weight: normal; background-color: #F4E7B9; text-align: left; margin-bottom: ; margin-top: ;"> <div class="minuti" style="font-weight: normal; visibility: visible; width2: auto;">11.39</div> <div class="nome" style="color: #000066; font-size: 12px; visibility: visible; width: auto;"> <a href="schedasmall.php?id=ARAIM" target="scheda"> <img src="icorazza/umanom.gif" title="umano" width="10" height="10" align="absmiddle"></a> ARAIM</div> <div class="simbolo" style="visibility: visible; width: auto; margin-left: ;"> <img src="ico/10001.gif" title="Principe Araim" width="20" height="20"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #000066; font-size: 12px;">prova prova prova</i></div> </div> </body>

Da quel che ho capito vorresti che il testo vada a capo no?

O ci metti un <br /> prima della frase, oppure usi il tag <p> :wink:

non devo andare a capo ad inizio frase, devo fare in modo che la frase se va oltre la prima riga vada a capo sotto l'ora inserita in chat...

Codice HTML:

<body style=" background-color: transparent;"> <div class="riga" style="color: #000066; font-size: 12px; font-weight: normal; background-color: #F4E7B9; text-align: left; margin-bottom: ; margin-top: ;"> <div class="minuti" style="font-weight: normal; visibility: visible; width2: auto;">12.33</div> <div class="nome" style="color: #000066; font-size: 12px; visibility: visible; width: auto;"> <a href="schedasmall.php?id=ARAIM" target="scheda"> <img src="icorazza/umanom.gif" title="umano" width="10" height="10" align="absmiddle"></a> ARAIM</div> <div class="simbolo" style="visibility: visible; width: auto; margin-left: ;"> <img src="ico/10001.gif" title="Principe Araim" width="20" height="20"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #000066; font-size: 12px;">prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova prova</i></div> </div> <div class="riga" style="color: #FFFFFF; font-size: 11px; font-weight: bold; background-color: #660000; text-align: center; margin-bottom: 10px; margin-top: 10px;"> <div class="minuti" style="font-weight: normal; visibility: hidden; width2: 0px;"></div> <div class="nome" style="color: #FFFFFF; font-size: 11px; visibility: hidden; width: 0px;"> <a href="schedasmall.php?id=" target="scheda"> <img src="icorazza/umanom.gif" title="" width="10" height="10" align="absmiddle"></a> </div> <div class="simbolo" style="visibility: hidden; width: 0px; margin-left: 10px;"> <img src="ico/.gif" title="" width="20" height="20"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #FFFFFF; font-size: 11px;"> prova prova prova</i></div> </div> <div class="riga" style="color: #9900CC; font-size: 10px; font-weight: bold; background-color: ; text-align: left; margin-bottom: 0px; margin-top: 0px;"> <div class="minuti" style="font-weight: normal; visibility: visible; width2: 0px;">11.39</div> <div class="nome" style="color: #9900CC; font-size: 10px; visibility: visible; width: auto;"> <a href="schedasmall.php?id=ARAIM" target="scheda"> <img src="icorazza/umanom.gif" title="umano" width="10" height="10" align="absmiddle"></a> ARAIM</div> <div class="simbolo" style="visibility: hidden; width: 0px; margin-left: 0px;"> <img src="ico/10001.gif" title="Principe Araim" width="20" height="20"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;">[ INCANTESIMO ]</div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #9900CC; font-size: 10px;">prova prova prova</i></div> </div> <div class="riga" style="color: #000066; font-size: 10px; font-weight: bold; background-color: #F4E7B9; text-align: left; margin-bottom: 0px; margin-top: 0px;"> <div class="minuti" style="font-weight: normal; visibility: visible; width2: 0px;">11.39</div> <div class="nome" style="color: #000066; font-size: 10px; visibility: visible; width: auto;"> <a href="schedasmall.php?id=ARAIM" target="scheda"> <img src="icorazza/umanom.gif" title="umano" width="10" height="10" align="absmiddle"></a> ARAIM</div> <div class="simbolo" style="visibility: hidden; width: 0px; margin-left: 0px;"> <img src="ico/10001.gif" title="Principe Araim" width="20" height="20"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #000066; font-size: 10px;"> prova prova prova</i></div> </div> <div class="riga" style="color: #000066; font-size: 12px; font-weight: normal; background-color: #F4E7B9; text-align: left; margin-bottom: ; margin-top: ;"> <div class="minuti" style="font-weight: normal; visibility: visible; width2: auto;">11.39</div> <div class="nome" style="color: #000066; font-size: 12px; visibility: visible; width: auto;"> <a href="schedasmall.php?id=ARAIM" target="scheda"> <img src="icorazza/umanom.gif" title="umano" width="10" height="10" align="absmiddle"></a> ARAIM</div> <div class="simbolo" style="visibility: visible; width: auto; margin-left: ;"> <img src="ico/10001.gif" title="Principe Araim" width="20" height="20"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #333333; font-size: 9px; font-style: oblique;"></div> <div class="frase" style="color: #000066; font-size: 12px;">prova prova prova</i></div> </div> </body>

Lascia float: left; agli elementi che vuoi siano a sinistra, togli la proprietà display: inline; da frase, e alla fine della frase (quindi nel codice php), mettici un <br clear="all" />.

Guarda l'esempio:

http://i44.tinypic.com/v620ao.jpg

Codice:

<img style="float: left; margin: 5px;" src="{catrow.forumrow.ICON_IMG}" /> <p style="text-align: justify;">There are solutions for rounded corners using pure CSS. There are solutions that create anti-aliased corners. There are solutions that don't require JavaScript. But to my knowledge, there has yet to be a pure CSS solution for rounded corners that does not require images or JavaScript. After looking, I decided to just create one myself. I'm not much of a programmer, but it was actually a lot of fun figuring out the math involved and learning arrays. In the end I ended up with 3 functions in under 20 lines of code total, so I'm quite happy with myself.</p>

:wink: