testo su immagine

[strawberry]

ciao a tutti,
vorrei realizzare con i css una pagina con un rettangolo dai bordi arrotondati di sfondo e il testo nel suo interno...ho problemi con il posizionamento del testo, in quanto nonostante imposti i vari margini con le misure adeguate, il testo è sempre fuori dal rettangolo

mi segnalate qualche sito dove potrei trovare utili informazioni per questo stupido problema da risolvere? grazie mille

[ratte]

I problemi sono quasi tutti stupidi... una volta risolti... 8)

Prova a controllare anche il "padding" e, per avere più velocemente un aiuto dal forum, posta il codice! 8)

o/ !

[strawberry]

così funziona, ma se avete da consigliarmi un'alternativa mi fa piacere...non si finisce mai di imparare!

CSS:

#container {
box-sizing: border-box;
width:400px;
position: absolute;
left: 400px;
top: 150px;
z-index: 2;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;

}

.rounded {
width: 800px;
height: 500px;
background-color: white;
color: #E63302;
position: absolute;
left: 350px;
top: 100px;
z-index: 1;

border: 5px solid #E63302;


border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
z-index: 1;
}

HTML:

<div class="rounded"></div>
<div id="container">


TESTO DA INSERIRE</p>

</div>

GRAZIE PER LA CELERE RISPOSTA

[ratte]

Ciao di nuovo! Ahhh.... capito... vedo solo ora che il tuo arrotondamento è notevole... forse è da li che "scappava" il testo.

Come hai fatto non è male 8) Ma è molto "rigido" ti darà diversi problemi in seguito:
-> ogni volta che ridimensioni il #container dovrai poi adattare il .rounded
-> il # container è posizionato in modo assoluto ed ha larghezza fissa, quindi non si adatterà al ridimensionamento della pagina.

Prova a ripartire da un coso così (se ti piace):

<style>
#container {
	width:400px;
	border: 5px solid #E63302;
	margin:  0 auto 0 auto;
	padding: 40px;
	
	border: 5px solid #E63302;
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
}
</style>

<div id="container">


TESTO DA INSERIRE</p>
</div>

è tutto in un unico livello di cui puoi modificare la larghezza ed il margine (per posizionarlo come vuoi nella pagina) ed ha un pading molto ampio in modo da evitare che il testo vada sopra agli angoli. Se metterai piu o meno testo, ora, il div si adatterà in altezza 8)

o/ !