Testo e immagini.

**luca1962** · 02-02-2009, 22.36.35

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.

**Kevinoo** · 02-02-2009, 23.30.18

Ciao Luca, gli attributi LEFT e TOP si basano sempre dal margine della finestra della pagina web. Quindi devi fare una piccola somma:

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.

Sperando che tu abbia capito... saluti, Kevin

03-02-2009, 00.28.58

Originalmente inviato da luca1962

Come devo fare per ottenere questo risultato? Devo usare le tabelle, o c'e' qualche tag che non conosco?

Grazie.

Ammesso di aver compreso bene la tua domanda, puoi ottenerlo in modi differenti.

Esempio 1... con css + tabelle: http://dialogocosmico.altervista.org/cntab.html

Codice 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>

Esempio 2... con css + div (relative): http://dialogocosmico.altervista.org/cntdiv.html

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>

Ora, puoi anche eliminare "background:#fff;" dal 2° box (che ho inserito solo per evidenziare la sua posizione e larghezza) rendendolo trasparente.

**luca1962** · 03-02-2009, 19.48.57

OK., grazie.

Discussione: Testo e immagini.

LinkBack

Strumenti discussione

Display

Testo e immagini.

Regole di scrittura