Avatar billede moddi100 Seniormester
07. november 2008 - 19:25 Der er 26 kommentarer og
1 løsning

Runde hjørner med ren css

Hej

Jeg ønsker at lave runde hjørner som så mange andre før mig. Jeg ønsker at lave det i ren css. Hvordan gøres det nemmest med store hjørner? F.eks. 30px * 60px.


- Morten
Avatar billede zips Juniormester
07. november 2008 - 20:31 #1
Her er en som også ønsker runde hjørne, måske kan du bruge det som bliver fortalt :)
http://www.eksperten.dk/spm/830939
Avatar billede moddi100 Seniormester
07. november 2008 - 21:10 #2
Jeg ville nu helst undgå at skulle bruge grafik
Avatar billede Keld Nielsen Professor
07. november 2008 - 21:18 #3
Noget som det her .... http://webdesign101.dk/css/roundcorners/  ???
Avatar billede moddi100 Seniormester
07. november 2008 - 21:30 #4
ja, bortset fra at det er ret besværligt/tidskrævende (efter min mening) at gøre ved f.eks. en område på 30 * 60 pixels.

Jeg kan godt lide princippet i denne metode:

http://www.cssplay.co.uk/boxes/curves.html

Men jeg kan ikke finde ud af at tilpasse den til en tabel, så tabellen er omgivet af en kant hele vejen rundt på f.eks. 30 pixels.

Jeg ønsker nemlig så vidt muligt at undgå position:absolute.
Avatar billede w13 Novice
07. november 2008 - 21:35 #5
Nu er cssplay-koden jo ikke lavet i ren CSS, som du ønsker, men benytter sig netop af HTML-elementer, hvilket man heller ikke kommer uden om, hvis man ikke laver det med grafik eller bruger java script:

<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
Avatar billede moddi100 Seniormester
07. november 2008 - 21:38 #6
Der må også gernes bruges HTML-elementer.....
Avatar billede moddi100 Seniormester
07. november 2008 - 21:39 #7
Men hvordan kan man lave det rundt om en tabel?
Avatar billede w13 Novice
07. november 2008 - 21:39 #8
Ok.....
Avatar billede w13 Novice
07. november 2008 - 21:40 #9
Så skal div-elementet vel bare være en table.
Avatar billede w13 Novice
07. november 2008 - 21:40 #10
Ikke at jeg har testet det, men kan ikke se, hvorfor det ikke skulle virke.
Avatar billede moddi100 Seniormester
07. november 2008 - 22:00 #11
Det virker. Hvordan kan jeg lave det sådan at det ikke kan markeres? (Kan det laves uden JavaScript)
Avatar billede w13 Novice
07. november 2008 - 22:06 #12
Nej. Men hvad gør det også? Det får du nok ingen klager over. :)

Alle browserne reagerer jo forskelligt på markering.
Avatar billede moddi100 Seniormester
07. november 2008 - 22:07 #13
Perfektionist her :D
Avatar billede w13 Novice
07. november 2008 - 22:10 #14
:P Selv hvis det lykkedes dig at få det lavet, ville du få noget halvrodet JavaScript ud af det, som ikke virkede i alle browsere.
Avatar billede moddi100 Seniormester
07. november 2008 - 22:20 #15
Tænkte også lidt på en af pseudo-medlemmerne mun kunne klare det?
Avatar billede roenving Novice
07. november 2008 - 23:33 #16
-- det er nu meget simpelt at lave runde hjørner, du skal bare bruge css 5, som bliver lanceret i beta-version i foråret 2011, i Internet Explorer 11, som kommer i efteråret 2013, mååske kunne du tænke dig at bruge det almindelige hack, som har virket siden 1994, men det inkluderer jo tabeller, som bliver forældede i efteråret 2035, hvor man endelig får en ordentlig model for at placere tabulære data i den fuldstændige idiotiske kontekst uden tabulering ...
Avatar billede roenving Novice
08. november 2008 - 00:11 #17
-- måske blev sarkasmen lidt overdrevet, men i FireFox har det været muligt i flere år, og der findes noget af det i forslaget til css3, men en fuld implementering passer nok meget godt med mine 'sjove' dateringer !-)
Avatar billede moddi100 Seniormester
08. november 2008 - 11:24 #18
roenving > Hvordan ser syntaksen til firefox så ud?
Avatar billede roenving Novice
08. november 2008 - 12:48 #19
Kig f.eks. på: http://blooberry.com/indexdot/css/supportkey/extensions.htm

-moz-border-radius:3px;
Avatar billede moddi100 Seniormester
08. november 2008 - 13:26 #20
Hvorfor er det ikke standard?! Det ville jo være meget mere lige til... :D
Avatar billede moddi100 Seniormester
08. november 2008 - 13:26 #21
Smid et svar hvis du ønsker point w13
Avatar billede w13 Novice
08. november 2008 - 13:28 #22
Ok.
Avatar billede w13 Novice
08. november 2008 - 13:50 #23
Tak for points!
Avatar billede moddi100 Seniormester
08. november 2008 - 14:26 #24
Jeg takker for hjælpen
Avatar billede olebole Juniormester
08. november 2008 - 20:37 #25
<ole>

"Hvorfor er det ikke standard?!" >> Formodentlig fordi vi stadig kæmper os vej ud af den oprindelige mening med HTML. Husk på, det egentlig blot er et tabel- og paragrafværk til opstilling af videnskabelige måledata. Visuelt design og HTML er i udgangspunktet komplet inkompatible størrelser  ;o)

Helt til CSS 5.0 behøver vi dog ikke at vente. I CSS 3.0 bliver det (formodentlig) muligt at sætte border-radius, border-image samt anvende flere, z-indekserede baggrundsbilleder i samme element.

Hvad det så betyder for tidshorisonten, tør jeg dog slet ikke spå om - men der kan sagtens gå 2-3 år endnu, før W3C bliver færdige med standarden ... og så skal den selvfølgelig også 'lige' slå igennem i browserne  :oP

/mvh
</bole>
Avatar billede olebole Juniormester
08. november 2008 - 20:38 #26
2011-2013 er nok slet ikke så dårlige bud  ;o)
Avatar billede moddi100 Seniormester
08. november 2008 - 20:52 #27
> "Hvorfor er det ikke standard?!" >> Formodentlig fordi vi stadig kæmper os vej ud
> af den oprindelige mening med HTML. Husk på, det egentlig blot er et tabel- og
> paragrafværk til opstilling af videnskabelige måledata. Visuelt design og HTML er i
> udgangspunktet komplet inkompatible størrelser  ;o)

Sådan havde jeg nu ikke tænkt på det :D


> 2011-2013 er nok slet ikke så dårlige bud

Desværre kan jeg ikke vente helt så længe :D
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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