Creare Sfondo bordi arrotondati in CSS e DIV

[Pandax]

Ciao a tutti, sto tentando di fare questa cosa con i CSS ma probabilmente sbaglio qualcosa...
La cosa in questione sarebbe questa:
Vorrei fare una pagina con sfondo bianco
e un'immagine rettangolare con bordi arrotondati in cui andare a inserire le pagine (titolo e contenuti).
Tutto questo senza tabelle, ma con i CSS
ho quindi creato sulla mia pagina php questi <div> che se non ho capito male dovrebbero appunto definirmi, livelli e struttura. (o almeno la mia intenzione sarebbe quella)

<div class="contenitore" id="con">
	<div class="tab_contenitore_ang_sup_sx" id="con_ass"></div>
	<div class="tab_contenitore_parte_sup" id="con_p_sup"></div>
	<div class="tab_contenitore_ang_sup_dx" id="con_asd"></div>
	<div class="tab_contenitore_parte_lat_sx" id="con_als"></div>
	<div class="tab_contenitore_sfondo" id="con_sfondo"></div>
	<div class="tab_contenitore_parte_lat_dx" id="con_ald"></div>
	<div class="tab_contenitore_ang_inf_sx" id="con_ais"></div>
	<div class="tab_contenitore_parte_inf" id="con_p_inf"></div>
	<div class="tab_contenitore_ang_inf_dx" id="con_afd"></div>
</div>

<div class="pagina" id="pag">
	<div class="titolo" id="t_sx">
	</div>
        <div class="contenuti" id="con">
	</div>
</div>

mentre nel CSS ho messo questo

.contenitore {
	/*border:#FF0000 medium solid ;*/
	position:absolute;
	top: 124px;
	left: 8px;
	width:694px;
	height:493px;

}

.titolo {
	/*border:#FF0000 medium solid ;*/
	position:absolute;
	top: 0px;
	width:670px;
	text-align:center;
	
}

.contenuti {
	/*border:#FF0000 medium solid ;*/
	position:absolute;
	top: 50px;
	width:670px;
	text-align:center;
}

.tab_contenitore_ang_sup_sx { 
	background-image:url(../imm_pezzi_sito/tab_sfondo/ang_sup_sx.gif);
	top:0px;
	left:0px;
	position:relative;
	width:12px;
	height:12px;

}

.tab_contenitore_parte_sup { 
	background-image:url(../imm_pezzi_sito/tab_sfondo/parte_sup.gif);
	background-repeat:repeat-x;
	position:relative;
	top:-12px;
	left:12px;
	width:670px;
	height:12px;
}

.tab_contenitore_ang_sup_dx { 
	background-image:url(../imm_pezzi_sito/tab_sfondo/ang_sup_dx.gif);
	position:relative;
	top:-24px;
	left:682px;
	width:12px;
	height:12px;
}

.tab_contenitore_parte_lat_sx { 
	background-image:url(../imm_pezzi_sito/tab_sfondo/parte_lat_sx.gif);
	background-repeat:repeat-y;
	position:relative;
	top:-24px;
	left:0px;
	width:12px;
	height:471px;
	
}

.tab_contenitore_sfondo { 
	background-color:#FFFFFF; 
	background-repeat:repeat;
	position:relative;
	top:-496px;
	left:12px;
	width:682px;
	height:471px;
	
}

.tab_contenitore_parte_lat_dx { 
	background-image:url(../imm_pezzi_sito/tab_sfondo/parte_lat_dx.gif);
	background-repeat:repeat-y;
	position:relative;
	top:-967px;
	left:682px;
	width:12px;
	height:471px;
}

.tab_contenitore_ang_inf_sx { 
	background-image:url(../imm_pezzi_sito/tab_sfondo/ang_inf_sx.gif);
	position:relative;
	top:-967px;
	left:0px;
	width:12px;
	height:12px;
}

.tab_contenitore_parte_inf { 
	background-image:url(../imm_pezzi_sito/tab_sfondo/parte_inf.gif);
	position:relative;
	top:-979px;
	left:12px;
	width:670px;
	height:12px;
}

.tab_contenitore_ang_inf_dx { 
	background-image:url(../imm_pezzi_sito/tab_sfondo/ang_inf_dx.gif);
	position:relative;
	top:-991px;
	left:682px;
	width:12px;
	height:12px;
}

allora il mio problema era appunto creare lo sfondo, l'immagine rettangolare con bordi arrotondati.
ovviamente per non caricare un'immagine enorme e troppo pesante ho pensato di creare solo le immagini degli angoli e dei bordi per poi farle ripetere, come si fa solitamente quando si usano le tabelle.

Ho usato position:relative; perchè con position:absolute; non me li posizionava correttamente.
solo che... in questo modo...
A. le coordinate sono.. be.. un po strane (top:-991px; left:682px e non ne capisco nemmeno molto il senso.
B. su firefox funziona... ma su ie l'ìimmagine la crea ma sotto l'immagine mi metto un mare di spazio vuoto facendo uscire la scrollbar verticale.

Sapete darmi una mano?
Vi ringrazio per l'aiuto. ^_^

ps se non sono stato chiaro, chiedete pure.

[felixsuperstar]

beh, non so quale sia la pesantezza della pagina ma credo che potresti semplicemente utilizzare un background comune a tutti i div e in testa e in coda inserire l'immagine dai bordi arrotondati..spero di essermi fatto capire..

[Pandax]

si ho capito... ma le immagini che dovrei fare dovrebbe essere comunque 4:
-testa, lato sx, lato dx, coda.
e non mi risolverebbe il problema di come si fa a posizionarli correttamente.

con position:absolute; non va... credo perchè i <div> alla fine vanno a capo

con position:relative; va... ma oltre ai riferimenti..strani.. in ie fa un po' di casino.

forse c'è qualcosa di sbagliato...
o nella struttura... o nelle proprietà da dare nel css.

spero che qualcuno sappia darmi qualche dritta.

grazie a tutti

[Piccy]

Io ho fatto così:


CODICE CSS
span.rtop, span.rbottom{display: block; }
span.rtop span, span.rbottom span{display: block; height: 1px;
overflow: hidden;
background-color: #FFF;}
span.r1{margin: 0 5px}
span.r2{margin: 0 3px}
span.r3{margin: 0 2px}
span.rtop span.r4, span.rbottom span.r4{margin: 0 1px; height: 2px}

CODICE PAGINA
<span class="rtop"> <span class="r1"></span> <span class="r2"></span>
<span class="r3"></span> <span class="r4"></span> </span>
<p class="rcentro"></p>
<span class="rbottom"> <span class="r4"></span> <span class="r3"></span>
<span class="r2"></span> <span class="r1"></span> </span> </div>

Così funziona se hai un colore di background e non un bordo. Se invece a te serve un bordo con gli angoli stondati, non fai altro che modificare il codice delle varie classi del css inserendo le immagini e modificandogli al posizione.

[felixsuperstar]

rewind...allora cerco di spiegarmi meglio..
poniamo tu abbia un rettangolo al centro della pagina bianco e non voglia inserire l'immagine per intero...
io fare in questo modo:
suddividerei in tre div il rettangolone:
-alto
-centro
-basso

Fatto questo il div centrale lo riempirei tramite la proprietà background di bianco:

background: #fff;

Per quanto riguarda il div in alto andrei a creare l'immagine che rappresente la parte iniziale del rettangolo dai bordi smussati e la metterei tramite:

background-image: url("testata.gif");

Lo stesso afrei per la parte sottostante...chiaro?
Altrimenti faccio il disegno e te lo posto.

[Pandax]

poniamo tu abbia un rettangolo al centro della pagina bianco e non voglia inserire l'immagine per intero...
io fare in questo modo:
suddividerei in tre div il rettangolone:
-alto
-centro
-basso

Altrimenti faccio il disegno e te lo posto.

Grazie per l'ulteriore spiegazione ma avevo capito.
solo che io non posso mettere il bianco nel div centrale perchè ho dei bordini anche sul lato.

ma cmq il problema poi rimane su come posizionare il tutto con i css.

che left e che top dare.. che position... ecc..

[Pandax]

Originariamente inviato da Piccy

Così funziona se hai un colore di background e non un bordo. Se invece a te serve un bordo con gli angoli stondati, non fai altro che modificare il codice delle varie classi del css inserendo le immagini e modificandogli al posizione.

in verità ho preso il codice che hai postato, ci ho fatto una pagina html e un css.. ma non fa nulla...

e ... be ammetto anche di capire poco di com'è fatto...

[Piccy]

Lo sfondo che c'è è bianco... hai almeno cambiato colore? Ti garantisco che funziona...

[Pandax]

vi allego immagine per chiarire meglio come viene la pagina..
sfondo con rettangolone bianco con bordo e angoli arrotondati
e all'interno i contenuti.

[felixsuperstar]

secondo em ti stai facendo forse troppi problemi o meglio dovresti spiegarci esattamente la pagina quanto pesante sarà...io nel mio sito ho parechci elementi garfici ma se li ottimizzi per il web allora riescia d avere un rapporto qualità/leggerezza interessante..