Posizionare testo con CSS

**Traxsung** · 25-11-2014, 20:44

Vorrei creare un piccolo codice html che mi permetta di visualizzare un'immagine di background con i vari testi posizionati dove voglio io.
Vorrei ottenere qualcosa simile alll'immagine in allegato:

http://i.imgur.com/owaQ6U4.jpg

Io ho già creato qualcosa, ma ho difficoltà a spostare il testo:

codice:

<!DOCTYPE html>
<html>
<head>
<style>
body  {
    background-image: url("http://oi60.tinypic.com/2hf6rlj.jpg");
    background-repeat:no-repeat;
    
}
</style>
</head>
<body>

<h1>PREZZO</h1>
<h1>PREZZO TAGLIATO</h1>
<h1>PERCENTUALE</h1>

</body>
</html>

mi date una mano ?

**TheAvenger** · 26-11-2014, 01:54

Va bene una cosa così?

codice:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: relative;
}   

#uno {
  position: absolute;
  top: 241px;
  left: 323px;
}
  
#due {
  position: absolute;
  top: 70px;
  left: 100px;  
}
  
#tre {
  position: absolute;
  top: 150px;
  left: 480px;  
}   
</style>
</head>
<body>
<div>
  <img src="http://oi60.tinypic.com/2hf6rlj.jpg"/>
  
  <h1 id="uno">PREZZO</h1>
  <h2 id="due">PREZZO TAGLIATO</h2>
  <h2 id="tre">PERCENTUALE</h2>
</div>  
</body>
</html>

**Traxsung** · 26-11-2014, 02:52

Direi fantastico ^_^
Ti ringrazio tanto TheAvenger

Ho capito che hai usato
position: absolute;

volevo chiederti una cosa giusto per imparare... come fai a capire ed identificare i valori che assegni a top e left ?

**ac_socmel** · 26-11-2014, 03:07

per spostare gli "elementi" devi studiarti i "posizionamenti"
http://www.w3.org/TR/css3-box/
http://jsfiddle.net/m1co18fj/

**TheAvenger** · 26-11-2014, 04:26

Di nulla. Comunque noto solo ora che ho sbagliato una cosa, nel codice CSS ho scritto img anzichè div, il codice corretto è questo:

codice:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  position: relative;
}   

#uno {
  position: absolute;
  top: 241px;
  left: 323px;
}
  
#due {
  position: absolute;
  top: 70px;
  left: 100px;  
}
  
#tre {
  position: absolute;
  top: 150px;
  left: 480px;  
}   
</style>
</head>
<body>
<div>
  <img src="http://oi60.tinypic.com/2hf6rlj.jpg"/>
  
  <h1 id="uno">PREZZO</h1>
  <h2 id="due">PREZZO TAGLIATO</h2>
  <h2 id="tre">PERCENTUALE</h2>
</div>  
</body>
</html>

Comunque sia quoto ac_socmel, ti conviene dare un'occhiata al posizionamento degli elementi. In poche parole quelli impostati in modo assoluto si posizionano relativamente al primo elemento genitore posizionato (ovvero non impostato in modo statico), in questo caso il div che ho settato su relative. Se prendi in considerazione il codice errato che ho postato prima e provi a spostare l'immagine tramite top, right etc. vedrai che le scritte rimarranno lì dove sono, mentre se usi quello corretto che ti ho scritto ora e sposti il div, vedrai che l'immagine si sposterà assieme a loro.

Discussione: Posizionare testo con CSS

Strumenti discussione

Ricerca discussione

Visualizza

Posizionare testo con CSS

Permessi di invio