Søg
Avatar billede leol Nybegynder
22. marts 2006 - 12:29 Der er 9 kommentarer og
2 løsninger

Runde kanter på <div>

Hej..

Hvordan er det man får runde kanter på <div>?
Avatar billede foxmulder58 Praktikant
22. marts 2006 - 12:30 #1
Man kan ikke lave runde kanter på et div element da det blot er en container, altså et tag der blot indeholder noget (grafik eller kode). Jeg tror det er muligt i tables.

Men jeg er ikke helt sikker.


mvh
Mads
Avatar billede foxmulder58 Praktikant
22. marts 2006 - 12:32 #2
ja du kan anvende tables til dette formål. Du kan se en tutorial her:

http://www.wedoourownstunts.com/htmltutorials/roundedborder_1.html


mvh
Mads
Avatar billede marz* Nybegynder
22. marts 2006 - 13:00 #3
selvfølgelig kan man det men man skal gøre det med grafik...

http://search.atomz.com/search/?sp-q=rounded+corners&x=0&y=0&sp-a=sp1002d27b&sp-f=ISO-8859-1&sp-p=All&sp-k=All
Avatar billede leol Nybegynder
22. marts 2006 - 13:01 #4
Jeg har ikke photoshop på den her computer hvad gør jeg så?
Avatar billede marz* Nybegynder
22. marts 2006 - 13:14 #5
hvis du checker de eksempler ud jeg linkede til kan du 'stjæle' deres runde hjørner...
Avatar billede leol Nybegynder
22. marts 2006 - 13:45 #6
Men "marz" så skal man jo have en grøn background
Avatar billede milandt Nybegynder
22. marts 2006 - 14:24 #7
ffs leol - vær lidt pro aktiv... Start > Programmer > Tilbehør > Paing

.. eller lav baggrunden på din hjemmeside grøn :D
Avatar billede leol Nybegynder
22. marts 2006 - 14:28 #8
Ok... ?
Avatar billede Slettet bruger
22. marts 2006 - 14:30 #9
.. Du kan sagtens få runde hjørne på en <div>-container..


http://pro.html.it/esempio/nifty/
Avatar billede leol Nybegynder
22. marts 2006 - 14:53 #10
wicez <-- Hvordan vil koden se ud så?
Avatar billede Slettet bruger
22. marts 2006 - 15:08 #11
Taget direkte fra siden (http://pro.html.it/esempio/nifty/nifty1.html):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nifty Corners: HTML CSS rounded corners</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{padding: 20px;background-color: #FFF;
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Nifty Corners</h1>
<p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>

<h2>Rounded corners without images</h2>
<p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
<p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
<p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
uaeuueuu eeue ieu.</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 16:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
I dag 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
White papers
Flere white papers »