Runde hjørner på div bokse?

<ole>

Hvis højden ikke varierer: Et baggrundsbillede
Hvis højden varierer: Et billede i toppen og et i bunden

/mvh
</bole>

Hmm... Webdesign og så ved du ikke hvordan du laver runde hjørner? Undskyld min sorte humor her, men jeg synes det er lidt ironisk ;)

Nuvel, dit spm om runde hjørner.
Du "laver" ikke runde hjørner via CSS. Du laver 2/3 stykker grafik (top,midt,bund) som du koder ind i 2/3 div-bokse - afhængig af om du vil have top midt og bund eller bare top og bund.

Hov - ja, ole kom lige først her... :)

Oki, lad os sige højden varierer, hvordan sætter jeg så et billede i toppen og i bunden? Skal dette også sættes ind som baggrundsbillede eller hvad?

Ja ja, det kan godt være, det er meget skægt, for dig... men jeg har det kun på hobbyplan, og er næsten lige begyndt at bruge css..

Her er der et eksempel på runde hjørner uden billeder..
http://www.html.it/articoli/nifty/nifty1.html

Her er links til et hav af eksempler, som bruger forskellige teknikker.

http://www.smileycat.com/miaow/archives/000044.php

Jeg vil ikke kalde det for en hån - og jeg beklager hvis du opfattede det sådan.

Men jeg vil til gengæld godt tilkendegive at jeg synes du har godt fat i det grafiske ud fra hvad dine referencer. Thumbs up til det.

Zerocrash..
Ja, sådan opfattede, jeg det, men glad for det ikke skulle opfattes sådan :)
Og takker for dine kommentar om mit grafiske arbejde.. Ang. kodning, så skal vi alle starte ét sted, og jeg er da selv stolt af, at jeg nu bruger css til at style og ikke bruger tabeller eller layers eller sliced images, som jeg tidligere har været ude i, helt klart "forkerte" teknikker...

soerenlyn og sherlock, takker for jeres links, vil straks se på det :)

Sherlock, det ser meget brugbart ud, dit link, men kan ikke gennemskue, hvilke teknikker, er uden brug af billeder?

nåå fandt ud af det he he...

ØV!!!!

Nu har jeg prøvet nogen forskellige teknikker, men kan ikke få noget, af det til at fungere...
Er, der ikke en venlig sjæl, der vil skrive den præcise kode, til htmlén og cssén?

Jeg har lavet 4 små gif hjørner:
topright.gif, topleft.gif, bottomright.gif, bottomleft.gif

Hvis, det kræver flere point, så sig til... jeg er virkelig desperat...

Det er til denne side: http://twoandahalf.dk

Kan du ikke bruge den side jeg viste som skabelon, og så putte dine ting ind i den ? Det er uden billeder..

Nej, det tror jeg ikke jeg kan, for det er ikke indholdet der skal runde hjørner på, men kun den smalle boks hvor menuen er i...

<ole>

sorenlyn >> med al respekt, så er niftycorners (og andre teknikker uden grafik) en rigtig skidt løsning. At bruge hundredevis (og ofte tusindvis) af HTML-elementer for at lave nogle kurver er ekstremt overkill. Så kan man ligeså godt bruge font-tags og lave layout i kæmpe tabel-helveder ... teknik fra forrige århundrede  :)

viggosmor >> Hvis du laver to billeder 'bg_top.gif' og 'bg_bot.gif', som er 200px bredde og som er gule med afrundede hjørner mod en hvid baggrund, så kan du skrive noget lignende dette:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.rounded {
    position: relative;
    width: 180px;
    padding: 15px 10px;
    background: yellow url(bg_top.gif) no-repeat;
}
.rounded img {
    position: absolute;
    left: 0;
    bottom: 0;
}
</style>
</head>
<body>

<div class="rounded">
<div>blabla bla blabla bla blabla</div>
<div>blabla bla blabla bla blabla</div>
<div>blabla bla blabla bla blabla</div>
<div>blabla bla blabla bla blabla</div>
<div>blabla bla blabla bla blabla</div>
<div>blabla bla blabla bla blabla</div>
<div>blabla bla blabla bla blabla</div>
<div>blabla bla blabla bla blabla</div>
<div>blabla bla blabla bla blabla</div>
<div>blabla bla blabla bla blabla</div>
<div>blabla bla blabla bla blabla</div>
<div>blabla bla blabla bla blabla</div>
<img src="bg_bot.gif" alt="">
</div>

</body>
</html>

/mvh
</bole>

PS: de to billeder skal i dette eksempel være 15px høje  :)

Okay - det tager jeg imod :)

Takker ole det må jeg prøve....

PPS: Skal du have andre billeder i boksen, er du nødt til at give 'bund billedet' en klasse:
    <img class="botPic" src="bg_bot.gif" alt="">

- og så lave lidt om i CSS'en:

<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.rounded {
    position: relative;
    width: 180px;
    padding: 15px 10px;
    background: yellow url(bg_top.gif) no-repeat;
}
.rounded .botPic {
    position: absolute;
    left: 0;
    bottom: 0;
}
</style>

Så er det kun det ene, der vil lægge sig i bunden, mens evt. andre billeder følger det alm. flow

Oki, droppede idéen, synes det er meget omstændigt....

Ole læg et svar...

Gerne  :)

Er det lukketid?