Avatar billede newbies Nybegynder
30. oktober 2010 - 10:53 Der er 3 kommentarer og
1 løsning

Hjælp til CSS

Hi eksperter!
Jeg har lavet en side http://enor.tk
Skal bruge lidt hjælp til at få runde kanter på hjørnerne.
noget der er gået galt i min css fil menb kan da ikke finde ud af hvad jeg har gjort galt.
Nogen forslag?
Avatar billede The_Buzz Novice
30. oktober 2010 - 12:49 #1
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.
Avatar billede Slettet bruger
30. oktober 2010 - 17:47 #2
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:

<div id="kontainer">

<p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum<br>Lorem ipsum</p>


<img class="corner tl" src="corner_tl.png" alt="" />
<img class="corner tr" src="corner_tr.png" alt="" />
<img class="corner bl" src="corner_bl.png" alt="" />
<img class="corner br" src="corner_br.png" alt="" />

</div>


Og så placerer du hjørnebillederne i css:

div#kontainer {position: relative;}

img.corner {position: absolute;}
img.tr {top: 0; right: 0;}
img.tl {top: 0; left: 0;}
img.br {bottom: 0; right: 0;}
img.bl {bottom: ; left: ;}


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.
Avatar billede noerbaek Nybegynder
02. november 2010 - 09:48 #3
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 :)
Avatar billede noerbaek Nybegynder
02. november 2010 - 09:50 #4
..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..
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester