Printable View
Buona sera.
Vi spiego quello che non riesco a fare.
Voglio creare una pagia cosi' composta:
TITOLO (fissando il margine left e top)
FOTO (al centro fissando il margine dal titolo)
TESTO (fissando il margine left e il top dalla foto)
Mi succede che il testo si sovrappone all'immagine ed entrambi sembano "collegati". Come devo fare per ottenere questo risultato? Devo usare le tabelle, o c'e' qualche tag che non conosco?
Grazie.
Ciao Luca, gli attributi LEFT e TOP si basano sempre dal margine della finestra della pagina web. Quindi devi fare una piccola somma: :lol:
Immagine: // Attributi per l'immagine
TOP: 70px;
LEFT: 60px;
Secondo Testo:
TOP: 70px(dell'immagine) + # px;
LEFT: 60px(dell'immagine) + # px;
Il simbolo # corrisponde al tot di pixel che vuoi allontare il testo dall'immagine. :wink:
Sperando che tu abbia capito... saluti, Kevin :top:
Ammesso di aver compreso bene la tua domanda, puoi ottenerlo in modi differenti.Citazione:
Originalmente inviato da luca1962
Esempio 1... con css + tabelle: http://dialogocosmico.altervista.org/cntab.html
Esempio 2... con css + div (relative): http://dialogocosmico.altervista.org/cntdiv.htmlCodice HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>[css + table] top_LEFT middle_CENTER bottom_LEFT</title>
<script type="text/javascript" src=""></script>
<style type="text/css"> html { background:#aaa; }
body { margin:5px; padding:10px; background:#07d; width:973px; font:bold 16px verdana; font-color:#000; } p { margin:0; }
table.tx { width:973px; }
td.box_top, td.box_bottom { padding:14px 0 37px 12px; }
td.box_center { background:#fff; padding:14px 0 37px 12px; text-align:center; }
</style></head><body scroll="auto">
<table class="tx">
<tr><td class="box_top"><p> box 01 left ....... ....... ....... ....... ....... ....... ....... ....... ....... </p></td></tr>
<tr><td class="box_center"><p>
box 02 center <br><br> <img src="image.jpg" style="border:1px dashed #f00; width:500px; height:300px;"> </p></td></tr>
<tr><td class="box_bottom"><p> box 03 left ....... ....... ....... ....... ....... ....... ....... ....... ....... </p></td></tr>
</table></body></html>
Ora, puoi anche eliminare "background:#fff;" dal 2° box (che ho inserito solo per evidenziare la sua posizione e larghezza) rendendolo trasparente.Codice HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>[css + div rel] top_LEFT middle_CENTER bottom_LEFT</title>
<script type="text/javascript" src=""></script>
<style type="text/css"> html { background:#aaa; }
body { margin:5px; padding:10px; background:#07d; width:973px;
font:bold 16px verdana; font-color:#000; } p { margin:0; }
</style></head><body scroll="auto">
<div style="position:relative; top:0; left:0; padding:14px 0 37px 12px;"><p> box 01 left ....... ....... ....... ....... ....... ....... ....... ....... ....... </p></div>
<div style="position:relative; top:0; left:0; text-align:center; padding:14px 0 37px 12px; background:#fff;"><p>
box 02 center<br><br> <img src="image.jpg" style="border:1px dashed #f00; width:500px; height:300px;"> </p></div>
<div style="position:relative; top:0; left:0; padding:14px 0 37px 12px;"><p> box 03 left ....... ....... ....... ....... ....... ....... ....... ....... ....... </p></div>
</table></body></html>
OK., grazie.