Html - Topic

Member

Posts: 4,397

Joined: Jul 5 2007

Gold: 4.00

Aug 19 2013 08:01am

Ho un immagine in un <div> e vorei mettere sopra questo <div> un altro div contenente del testo ... come cavolo faccio ?

EoN-mf

Member

Posts: 10,415

Joined: Aug 24 2005

Gold: 24,533.60

Aug 19 2013 08:09am

leggi qui: sono 10 esempi veloci che ti spiegano tutto quello che puoi fare
http://www.barelyfitz.com/screencast/html-training/css/positioning/

se comunque vuoi mettere del testo sopra un immagine direi che la cosa piu' semplice e' dare l'immagine come sfondo del div e mettervi dentro il testo

This post was edited by EoN-mf on Aug 19 2013 08:09am

gokussj4

Member

Posts: 14,202

Joined: Sep 29 2007

Gold: 511.00

Aug 19 2013 08:58am

Quote (EoN-mf @ 19 Aug 2013 15:09)

se comunque vuoi mettere del testo sopra un immagine direi che la cosa piu' semplice e' dare l'immagine come sfondo del div e mettervi dentro il testo

This.

CSS

div#conteiner {
position:relative;
top:0;
left:0;
width: 300px; larghezza del div contenitore
height:300px; altezza del div contenitore
background: url(img/immagine.png); percorso dell'immagine di sfondo
}

div#testo {
position: absolute;
top:0;
left:0;
padding:20px;
font:14px arial;
color:#000;
}

HTML

<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css"> richiama il foglio di stile eterno
</head>
<body>
<div id="conteiner">
<div id="testo">
qui il testo che vuoi inserire
</div>
</div>
</body>
</html>

This post was edited by gokussj4 on Aug 19 2013 09:02am

gokussj4

Member

Posts: 14,202

Joined: Sep 29 2007

Gold: 511.00

Aug 19 2013 12:30pm

In caso tu non conoscessi i CSS, puoi implentare lo stile all'interno del file HTML in questo modo:

HTML

<html>
<head>
<style type="text/css">
div#conteiner {
position:relative;
top:0;
left:0;
width: 300px;
height:300px;
background: url(img/immagine.png);
}
div#testo {
position: absolute;
top:0;
left:0;
padding:20px;
font:14px arial;
color:#000;
}
</style>
</head>
<body>
<div id="conteiner">
<div id="testo">
qui il testo che vuoi inserire
</div>
</div>
</body>
</html>

EoN-mf

Member

Posts: 10,415

Joined: Aug 24 2005

Gold: 24,533.60

Aug 19 2013 04:35pm

si poteva fare tutto in un div solo mettendo tutte le proprieta' direttamente in un div e tenere il testo in quel div che ha per sfondo l'immagine che ti serve
non ti ho risposto col codice perche' ogni volta capita che l'oggetto in questione e' in una pagina piu' complessa con magari dei float o altri cazzi

gokussj4

Member

Posts: 14,202

Joined: Sep 29 2007

Gold: 511.00

Aug 19 2013 05:33pm

Quote (EoN-mf @ 19 Aug 2013 23:35)

Certo.
Il secondo div serve solo se vuole posizionare il testo in una porzione del div superiore, attraverso il posizionamento assoluto.

Vero è, che se non mastica almeno un po di CSS, gli riuscirà difficile farlo.

Go Back To Italiano Topic List