Immagine in secondo piano

**Sifr** · 19-08-2004, 12:27

Ciao a tutti,
vi spiego il mio problema: ho una pagina in cui è presente un'immagine con una sfumatura che finisce col diventare il colore dello sfondo della pagina. Nel punto in cui l'immagine si confonde col colore di sfondo, ho bisogno di scrivere del testo, che non posso mettere insieme all'immagine. Non posso neanche mettere l'immagine come sfondo di una cella in quanto è una foto e ci sarebbe il rischio di allargarla troppo... Esiste qualche modo per rimediare? Avevo pensato a qualcosa con i CSS, però non mi viene in mente nulla di particolare... Inoltre non dovrebbe tagliare fuori browser come IE 5.0 o NN 6.0 (insomma, le ultime 2 versionei di IE, NN, Opera e Mozilla ci dovrebbero stare).

Ciao!

Sifr

**Jerry Masslo** · 19-08-2004, 13:50

intanto lascia perdere netscape6, il fatto che sia la penultima versione dei netscape non migliora la sua condizione di browser pessimo e usato da quasi nessuno, tranne gli sviluppatori che credono che qualcuno lo usi.

devi dare all'elemento in cui metti l'immagine un position:relative e annidargli un altro elemento con position:absolute, a questo punto con top o bottom e left o right piazzi il tuo testo dove ti pare.

**Sifr** · 19-08-2004, 17:14

Grazie!

E con IE 5.0 e Mozilla sai dirmi come se la cava?

Ciao

Sifr

**Jerry Masslo** · 19-08-2004, 17:40

www.mozilla.org

ti scarichi tutti i mozilli che ti servono, se li metti in cartelle separate dovreti pure usarli tutti

http://www.quirksmode.org/browsers/multipleie.html

e da qui scarichi gli ie predenti all'ultimo che puoi anch'essi usare tutti sulla stessa installazione dell'os

**Sifr** · 19-08-2004, 17:52

Denghiù!

**Sifr** · 20-08-2004, 12:10

Ciao,
c'è ancora qualcosa che non mi torna.. il mio codice è questo:

codice:

 
<div style="position:relative;"> 
  <td width="25%" valign="top" class="posizionamento"> 
    <p class="testo">PROGETTO LOGOS</p>
    <p class="testo">- Simone</p>
    <p class="testo">- Simo</p>
    <p class="testo">- Simone</p>
    <p class="testo"></p>
    <p class="testo"></p>
  </td>
  <td width="25%" valign="top" class="posizionamento2">
    <p class="testo">PROGRAMMA START </p>
    <p class="testo">- Simone</p>
    <p class="testo">- Simo</p>
    <p class="testo">- Simone</p>
    <p class="testo">- Simone</p>
    <p class="testo">- Simo</p>
    <p class="testo"></p></td>
</div>

e

codice:

.posizionamento {
   position: absolute;
   left: 220;
   top: 210;
}

.posizionamento2 {
   position: absolute;
   left: 340;
   top: 210;

}

e quando cambio risoluzione i 2 livelli vanno dove pare a loro.. perchè?

Byez
Sifr

**Jerry Masslo** · 20-08-2004, 12:53

con le tabelle non mi trovi ben disposto

intanto devi dare la misura a quei valori cioé

top:200px ad esempio e non 200

poi una cella non può stare dentro un div semmai il contrario

dentro un div eventualmente ci potrai mettere tutta una tabella

cioè dovresti fare una cosa del genere:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
* {margin:0;padding:0}

html, body {height:100}

body {background:silver}
.posizionamento {
position: absolute;
left: 220px;
top: 210px;
width:25%
}

.posizionamento2 {
position: absolute;
left: 340px;
top: 210px;
width:25%
}
table {width:100%}
</style>

</head>

<body>
<table>
<tr>
<td>
<div style="position:relative;width:100%;background:red "> ndo' stai?
<div class="posizionamento">
<p class="testo">PROGETTO LOGOS</p>
<p class="testo">- Simone</p>
<p class="testo">- Simo</p>
<p class="testo">- Simone</p>
<p class="testo"> </p>
<p class="testo"> </p>
</div>
<div class="posizionamento2">
<p class="testo">PROGRAMMA START </p>
<p class="testo">- Simone</p>
<p class="testo">- Simo</p>
<p class="testo">- Simone</p>
<p class="testo">- Simone</p>
<p class="testo">- Simo</p>
<p class="testo"> </p></div>

</div>
</td>
</tr>
</table>
</body>
</html>

nota che se gli absolute ti servono per menù a scomparsa è un conto ma così al ridimensionamento dei caratteri si sovrappongono

**Sifr** · 20-08-2004, 22:42

Grazie per la risposta... Lunedì, appena provo il tutto, ti dico..
Byez

Sifr

**Sifr** · 24-08-2004, 10:00

Ciao,
ho cambiato un po' l'impostazione della pagina.. adesso quelle due colonne sono dentro una tabella annidata nel DIV che la posiziona.. Tuttavia ho notato un problemino... Ecco il codice:

codice:

<div style="position:relative;width:100%;"> 
<div class="posizionamento">
<table width="100%" cellpadding="2" cellspacing="2">
<tr> 
<td align="CENTER" valign="top" colspan="2"><p class="testo">Un po' di testo</p></td>
</tr>
<tr> 
<td width="36%" align="center" valign="top"><p class="testo">CIAO!</td> 

.....


.....

.....

</table></div></div>

e

codice:

.posizionamento { 
position: absolute; 
left: 20px; 
}

praticamente in questo modo la tabella diventa strettissima, e quindi si allunga di tantissimo (sei costretto a "scrollare" anche a 1152 * 864!) senza contare l'effeto grafico bruttissimo (per scrivere 3 parole ha bisogno di 3 righe!!). Ho notato che se però aumento il width a 600% oppure specifico width nel css così

codice:

width: 500px

tutto si visualizza bene (anche se in quest'ultimo modo NN 7.0 non lo capisce e lo visualizza come se width non fosse neanche stato specificato... Il primo modo ancora l'ho provato solo IE). Sai dirmi perchè e se c'è un modo per evitare di tagliare fuori NN (L'ultima versione almeno credo debba essere supportata)?
Grazie mille per l'aiuto!

Sifr

**Jerry Masslo** · 24-08-2004, 10:35

dai il width che ti serve al layer cioé a come si chiama .posizionamento e lascia 100% alla tabella e vedi che fa

Discussione: Immagine in secondo piano

Strumenti discussione

Ricerca discussione

Visualizza

Immagine in secondo piano

Permessi di invio