Hjælp til CSS

Har faced det problem masser af gange.

Eneste umiddelbare løsning til at gøre det så det virker i alle browsere er at bruge f.eks. en table

AA AA AA
BB XX BB
BB XX BB
BB XX BB
CC CC CC

Hvor du i AA og CC har en image som kanter hjørnene, og BB sektionen kan så passende enten være en flerfarvet TD eller også images.

Nej, nej, nej. Med simpel css er det supernemt.

Du skal lægge dine billeder ind i bunden af rammen, som de skal være i. Altså direkte i html-koden med <img>-tag og ikke som baggrundsbilleder. Således:



Og så placerer du hjørnebillederne i css:



Forklaring hertil:
Linjen img.corner {position: absolute;} placerer hjørnerne absolut således, at de ikke har nogen påvirkning på noget andet indhold.
Herefter angives top, right, left eller bottom for hvert enkelt hjørne for at fortælle, hvor de hver især skal være.
img.tr {top: 0; right: 0;} vil fx placere sig 0px fra toppen og 0px fra højre kant og vil dermed være i øverste højre hjørne.
Hvis nu man har en ramme, der er måske 3px tyk, så skal der selvfølgelig blot skrives: img.tr {top: -3px; right: -3px;}

Den første linje div#kontainer {position: relative;} gør, at kontainer-boksen placeres relativt i forhold til alt udenom. Dette gør intet synligt, men er nødvendig fordi det samtidig sørger for at alt indholdet i kontainer-boksen placerer sig i forhold til denne boks ikke skærmvinduet.

Du kan også vælge at nedprioritere IE og bruge "border-radius".
På den måde slipper du for brugen af billeder...

CSS'en herunder skal blot sættes ind i den div, der skal ha' runde hjørner:

.container {-moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px;
}

Forklaring:
Grunden til at du skal have forskellige typer af "border-radius" med, er de forskellige browsere.
F.eks. -moz-border-radius er Mozilla Firefox.

Håber du kan bruge det! Du kan se et eksempel på de runde hjørner på http://billigiphone4g.dk, hvor de blå menupunkter er rundede...

Mvh.
Nikolaj Nørbæk :)

..også http://www.fuckmylife.dk bruger rundede hjørner - se alle de hvide divs :)

Den side er også et godt eksempel på, hvordan det ser ud i IE..