Notifikationer

Markér alle som læst Log ud

viggosmor Nybegynder

21. oktober 2007 - 13:03 Der er 21 kommentarer og
1 løsning

Runde hjørner på div bokse?

Hej Experter!

Hvordan opnår jeg nemmest, runde hjørner på div bokse, i css?

http://soederberg-webdesign.dk

Fx. på den side, hvordan får jeg nemmest lavet runde hjørner på den røde boks i højre side?

Vh Viggosmor, Lone

Synes godt om

olebole Juniormester

21. oktober 2007 - 13:06 #1

<ole>

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

/mvh
</bole>

Synes godt om

zerocrash Nybegynder

21. oktober 2007 - 13:09 #2

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.

Synes godt om

zerocrash Nybegynder

21. oktober 2007 - 13:09 #3

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

Synes godt om

viggosmor Nybegynder

21. oktober 2007 - 13:09 #4

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?

Synes godt om

viggosmor Nybegynder

21. oktober 2007 - 13:11 #5

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..

Synes godt om

soerenlyn Nybegynder

21. oktober 2007 - 13:15 #6

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

Synes godt om

sherlock Nybegynder

21. oktober 2007 - 13:16 #7

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

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

Synes godt om

zerocrash Nybegynder

21. oktober 2007 - 13:17 #8

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.

Synes godt om

viggosmor Nybegynder

21. oktober 2007 - 13:27 #9

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 :)

Synes godt om

viggosmor Nybegynder

21. oktober 2007 - 13:42 #10

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

Synes godt om

viggosmor Nybegynder

21. oktober 2007 - 13:44 #11

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

Synes godt om

viggosmor Nybegynder

21. oktober 2007 - 15:23 #12

Ø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

Synes godt om

soerenlyn Nybegynder

21. oktober 2007 - 15:34 #13

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

Synes godt om

viggosmor Nybegynder

21. oktober 2007 - 18:04 #14

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...

Synes godt om

olebole Juniormester

21. oktober 2007 - 18:04 #15

<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>

Synes godt om

olebole Juniormester

21. oktober 2007 - 18:05 #16

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

Synes godt om

soerenlyn Nybegynder

21. oktober 2007 - 18:09 #17

Okay - det tager jeg imod :)

Synes godt om

viggosmor Nybegynder

21. oktober 2007 - 19:09 #18

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

Synes godt om

olebole Juniormester

21. oktober 2007 - 19:29 #19

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

Synes godt om

viggosmor Nybegynder

12. januar 2008 - 10:54 #20

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

Ole læg et svar...

Synes godt om

olebole Juniormester

12. januar 2008 - 15:59 #21

Gerne :)

Synes godt om

zerocrash Nybegynder

28. oktober 2009 - 19:04 #22

Er det lukketid?

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS