Problem med runde kanter og DIV

[andreasn]

Jeg skal ha en boks med runde kanter og har et problem med at bakgrunnsbildet vises over det runde hjørnet.

 

Et bilde som viser problemet:

 

Dette er koden slik den så ut i det jeg tok screenshot:

 

<div style="width: 100%;background-image:url(/images/modul_main.gif);">
<div style="width:100%; position:relative; top:0px;">
<img src="/images/modul_top.gif" alt="" />
</div>
........
</div>

 

modul_top er bildet med runde hjørner og modul_main er bakgrunnsbildet.

 

Jeg har prøvd ut med diverse padding og margin verdier, men ingenting har gitt et akseptabelt resultat.

 

Jeg har også prøvd å putte hjørnebildet utenfor den første div'en men da blir det en strek mellom hjørnebildet og bakgrunnen (motsatt av mitt problem....)

 

Håper noen har noen ideer jeg kan prøve.

[PoleCat]

<div class="boks">
 <span><--! innhold --></span>
</div>

 

.boks {
 background: url("/images/modul_main.gif") repeat-y;
}

.boks span {
 background: url("/images/modul_top.gif") no-repeat;
 padding: 10px; /* elns */
 display: block;
}

 

Det burde vel fungere, eller?

 

EDIT: Glemte en veldig viktig sak.

Endret 15. september 2004 av PoleCat

[andreasn]

Det fungerte veldig bra, takk for hjelpen!

[PoleCat]

Husk, dersom du skal ha blokkelementer innenfor span-elementet, må du gjøre om span-elementet til f.eks en div. (hilsen en smule oppmerksom satyrium )

 

EDIT: Og mest sannsynlig så skal du nok det, så da kan du bare gjøre om med en gang:

 

.boks {
background: url("/images/modul_main.gif") repeat-y;
}

.boks div {
background: url("/images/modul_top.gif") no-repeat;
padding: 10px; /* elns */
}

 

<div class="boks">
<div><--! innhold --></div>
</div>

Endret 15. september 2004 av PoleCat

[Cucum(r)]

Når vi snakker om avrundede bokser, så har 465 Berea Streets lab noen fine eksempler på akkurat det.