Søg
Avatar billede jakobdo Ekspert
11. maj 2008 - 10:42 Der er 5 kommentarer og
1 løsning

Runde hjørner - crossbrowser og i xhtml

Hej,
er der nogen som kan hjælpe med at lave runde hjørner på en DIV ?
Mine krav:

CSS og billeder
Ingen javascript
Højde og bredde skal ikke defineres som faste størrelser
XHTML Strict
Det der mangler af hjørnet, skal være transparent (da baggrundsfarven kan være skiftende eller et billede)

Jakob
Avatar billede notes2c Nybegynder
11. maj 2008 - 12:53 #1
Her er noget som der er lige til at gå til

http://www.vertexwerks.com/tests/sidebox/
Avatar billede jakobdo Ekspert
13. maj 2008 - 22:08 #2
Den er desværre ikke brugbar.
Hvis indholdet bliver for bredt, så "knækker" koden og det samme hvis teksten bliver for lang.
Avatar billede notes2c Nybegynder
14. maj 2008 - 01:18 #3
Så kan du måske bruge denne.

http://www.alistapart.com/articles/customcorners/
Avatar billede jakobdo Ekspert
14. maj 2008 - 06:49 #4
Limitations:
.... If we made the top right corner graphic transparent, the top left graphic beneath it would show ....
Avatar billede notes2c Nybegynder
14. maj 2008 - 08:57 #5
Fandt noget hos kalsey.com.

Det skulle passe til dine krav, du må selv sørge for at grafikken bliver transparent.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}
.roundcont {
    width: 100%;
    background-color: #f90;
    color: #fff;
}

.roundcont p {
    margin: 0 10px;
}

.roundtop {
    background: url(http://kalsey.com/tools/css/rounded/images/tr.gif) no-repeat top right;
}

.roundbottom {
    background: url(http://kalsey.com/tools/css/rounded/images/br.gif) no-repeat top right;
}

img.corner {
  width: 15px;
  height: 15px;
  border: none;
  display: block !important;
}
-->
</style>
</head>

<body>

<div class="roundcont">
  <div class="roundtop">
    <img src="http://kalsey.com/tools/css/rounded/images/tl.gif" alt=""
    width="15" height="15" class="corner"
    style="display: none" />
  </div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing
  elit, sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip
  ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.</p>

<div class="roundbottom">
    <img src="http://kalsey.com/tools/css/rounded/images/bl.gif" alt=""
    width="15" height="15" class="corner"
    style="display: none" />
  </div>
</div>
<table>
<tr>
<td style="width: 50%;">
<div class="roundcont">
  <div class="roundtop">
    <img src="http://kalsey.com/tools/css/rounded/images/tl.gif" alt=""
    width="15" height="15" class="corner"
    style="display: none" />
  </div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing
  elit, sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip
  ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.</p>

<div class="roundbottom">
    <img src="http://kalsey.com/tools/css/rounded/images/bl.gif" alt=""
    width="15" height="15" class="corner"
    style="display: none" />
  </div>
</div>
</td>
<td style="width: 30%;">
<div class="roundcont">
  <div class="roundtop">
    <img src="http://kalsey.com/tools/css/rounded/images/tl.gif" alt=""
    width="15" height="15" class="corner"
    style="display: none" />
  </div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing
  elit, sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip
  ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.</p>

<div class="roundbottom">
    <img src="http://kalsey.com/tools/css/rounded/images/bl.gif" alt=""
    width="15" height="15" class="corner"
    style="display: none" />
  </div>
</div>
</td>
<td style="width: 20%;">
<div class="roundcont">
  <div class="roundtop">
    <img src="http://kalsey.com/tools/css/rounded/images/tl.gif" alt=""
    width="15" height="15" class="corner"
    style="display: none" />
  </div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing
  elit, sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip
  ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.</p>

<div class="roundbottom">
    <img src="http://kalsey.com/tools/css/rounded/images/bl.gif" alt=""
    width="15" height="15" class="corner"
    style="display: none" />
  </div>
</div>
</td>
</tr>
</table>
</body>
</html>
Avatar billede jakobdo Ekspert
14. maj 2008 - 22:15 #6
Jeg endte med at bruge denne:
http://www.webdesign101.dk/css/roundcorners/
Da billede løsninger bliver for begrænsede... :o(

Men du får tak for hjælpen.
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 går 09:50 Mobilpay svindel Af nu_igen i Andre onlineløsninger
22/0120:51 Knap til ipad Af FinnLauridsen i Excel
21/0113:53 Icloud mail via Outlook Af lbc i E-mail programmer
21/0108:32 USB NØGLE gratis Af nu_igen i Andet hardware
20/0121:11 Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP
White papers
Flere white papers »