CSS box

Hej

Jag ska göra en box i css. Det finns tre bilder som boxen innehåller, en top-bild som är avrundad, en bg-bild som upprepas inne i boxen och en bottom-bild som också är avrundad.

Hur skulle ni göra för att bygga upp boxen, man kan ju göra tre divs sedan sätta in bilderna i varsin div. Men finns det något "smidigare" sätt att göra detta på?

Vad ska du ha i boxen? Du kan ju använda de element som du tänkt lägga i DIVen. (Du kanske inte ens behöver använda en DIV.. ;))

Det ska vara lite olika texter. Rubrik och text under. Tanken är att man ska kunna välja vilka texter som ska visas i boxen så det vore bra om man kan använda samma rubrik-stil och text-stil till texterna.

<div>
 <h[i]n[/i]>[i]rubrik[/i]</h[i]n[/i]>
 <p>[i]text[/i]</p>
</div>

div { background:url(foo) repeat-y left; }
div h[i]n[/i] { background:url(bar) no-repeat left top; }
div p { background:url(baz) no-repeat left bottom; }

Okej, men om jag nu vill ha samma hn och samma p flera gånger i diven, går det då att lösa på nått sätt eller måste man anväda sig av flera divs?

Jag ska försöka förklara hur det är. Det där ska vara en sidebar och i den sidebaren ska man själv få bestämma vilken information som ska synas, det finns x antal på val som man kan välja ifall man vill visa eller inte visa dem.

När jag inte vet vilka texter besökaren kommer visa vore det bra om man använde samma hn på alla.

Förstår du ungefär hur jag menar? :)

<div>
 <h[i]n[/i] class="first">[i]rubrik[/i]</h[i]n[/i]>
 <p>[i]text[/i]</p>
 <h[i]n[/i]>[i]rubrik[/i]</h[i]n[/i]>
 <p class="last">[i]text[/i]</p>
</div>

div { background:url(foo) repeat-y left; }
div .first { background:url(bar) no-repeat left top; }
div .last { background:url(baz) no-repeat left bottom; }

? :)

haha jo, men det är ju som svårt. tänk om en användare bara väljer att visa ett textfält. då kommer den bara ha first och inte last. Man måste nog köra med tre divs om det inte finns något annat element man kan använda sig av.