Rounded corners

Op [url=http://www.redmelon.net/tstme/4corners/]redmelon.net[/url] staat een manier beschreven om ronde hoeken in css te krijgen. Er wordt gebruik gemaakt van een lege div. Ik krijg het niet voor elkaar om deze techniek toe te passen, omdat een lege div niet getoond wordt...

Ik probeer het op http://mac.tekmac.nl/ voor elkaar te krijgen.

Hoe kan dat nou?

Zo'n trucje is wel mooi natuurlijk, maar semantisch klopt er niets van. XHTML/CSS betekent net layout scheiden van structuur, en structuur wordt hier genegeerd. Dit is al even erg als een tabellenlayout.

Maar ronde hoekjes zijn wel leuk, natuurlijk. De manier waar alistapart mee komt is ook niet echt werkbaar, vind ik.

CSS Design: Creating Custom Corners & Borders

Wat is wel een goede manier om ronde hoekies te krijgen? Is het menu zoals het nu op mijn site staat wel wel semantisch correct?

Is het trouwens gepast om in dit forum onderstaande lappen code te plakken, of wordt een link geprefereerd?

[code:1:a07872f83e]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/minmax.js"></script>
<style type="text/css" media="screen,projection">
/* backslash hack hides from IEmac /
@import url(css/screen.css);
/
end hack */
</style>
<title>mac.tekmac.nl</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>mac.tekmac.nl</h1>

&lt;/div&gt;
&lt;div id=&quot;mainbody&quot;&gt;
&lt;h2&gt;welkom&lt;/h2&gt;
&lt;p&gt;Binnenkort zal hier mac.tekmac.nl verschijnen.&lt;/p&gt;
&lt;p&gt;Suggesties? &lt;a href=&quot;mailto&#58;mac@tekmac.nl&quot; alt=&quot;mail naar mac@tekmac.nl&quot;&gt;Mail&lt;/a&gt;!&lt;/p&gt;
&lt;/div&gt;

	&lt;dl&gt;
		&lt;dt&gt;menu&lt;/dt&gt;
		&lt;dd&gt;&lt;a href=&quot;&quot; alt=&quot;home&quot;&gt;home&lt;/a&gt;&lt;/dd&gt;
	&lt;/dl&gt;
&lt;div id=&quot;footer&quot;&gt;
		design&#58; &lt;a href=&quot;http&#58;//mac.tekmac.nl/&quot; alt=&quot;mac.tekmac.nl&quot;&gt;mac.tekmac.nl&lt;/a&gt;
&lt;/div&gt;

</div>
</body>
</html>[/code:1:a07872f83e]

&

[code:1:a07872f83e]* {
margin: 0;
padding: 0;
}

#container{
background-color: #fff;
border:solid 1px #000;
margin:0 auto;
margin-top: .5em;
max-width:70em;
min-width:40em;
padding: .5em;
width:94%;
}

body {
background-color: #ccc;
font: 0.7em/1.5 Geneva, Arial, Helvetica, sans-serif;
text-align: center;
}

dl {
background: #ccc url(…/img/bottom_right.gif) no-repeat bottom right;
float: right;
margin-top: .5em;
margin-bottom: .5em;
width: 15em;
text-align: left;
}

dt {
padding: 5px;
font-size: 130%;
color: #fff;
border-bottom: 1px solid #fff;
background: #622 url(…/img/top_left.gif) no-repeat top left;
}

dd {
padding-left:5px;
color: #222;
font-family: Verdana, sans-serif;
margin-bottom: .5em;
}

#header {
border:1px solid #000;
text-align: left;
background: #ccc url(…/img/mac.png) no-repeat bottom right;
padding: .5em;
height: 90px;
}

#mainbody {
float: left;
margin-top:.5em;
margin-bottom: .5em;
padding: .5em;
text-align: left;
}

#footer {
clear: both;
text-align: right;
font-size: 75%;
border-top:1px solid #ccc;
padding-top: .5em;
} [/code:1:a07872f83e]

Da's geen echte DIV, je plaatst gewoon een backgroundimage in een lege cel. Dit gebruik ik al jaren in Freeway op deze manier. Sterker nog, je kunt zelfs op deze manier een [url=http://www.freewaypro.com/actions/menus/]rollovereffect[/url] maken:

.navbar a {
/* Basic text style for links in the navbar. */
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}

.navbar p {
/* Needed to get around Freeway insisting on
wrapping everything within a table cell with a P tag. */
margin: 0px;
padding: 0px;
}

.navbar td {
/* This defines the borders of the navbar */
margin: 0px;
padding: 0px;
height: 25px;
border-top-style: solid;
border-top-color: #cccccc;
border-top-width: 1px;
border-bottom-color: #333333;
border-bottom-width: 1px;
border-bottom-style: solid;
border-left-style: solid;
border-left-color: #cccccc;
border-left-width: 1px;
border-right-style: solid;
border-right-color: #999999;
border-right-width: 1px;
}

.navbar a:link, .navbar a:visited {
/* This sets up the rollover. Two things to note:
the link is set to ‘display: block’, which forces it
to fill the table cell from left to right. The background
is set to no-repeat, and the x/y coordinates of -500px/0px
make sure that the proper part of the background appears.
Also, the padding settings adjust the finished size of the
buttons. */
margin: 0px;
display: block;
background-repeat: no-repeat;
background-position: -500px 0px;
background-image: url(background.jpg);
color: #333333;
text-decoration: none;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}

.navbar a:hover, .navbar a:active {
/* For rollovers, change the background-position to
show the proper part of the same background image. */
background-repeat: no-repeat;
background-position: -250px 0px;
background-image: url(background.jpg);
color: #ffffff;
text-decoration: none;
}

#selected {
/* To indicate state, show a third part of the background.
Add the id #selected to the link to the current page. */
background-repeat: no-repeat;
background-position: 0px 0px;
background-image: url(background.jpg);
color: #ffffff;
text-decoration: none;
}

#last {
/* To create a dark border on the right side, we add an id
selector to the last cell of the table. */
border-right-style: solid;
border-right-color: #666666;
border-right-width: 1px;
}

Misschien dat dit je verder kan helpen met je rounded corners. Een pas verschenen artikel op [url=http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/] 456bereastreet[/url].

Groetjes,
Kenny

Door een server probleem was dit een dubbele post... sorry

En dan zijn er ook nog de [url=http://pro.html.it/esempio/nifty/]Nifty corners[/url] die zonder afbeeldingen werkt.

Nifty corners [Updated]

Thanks. Ik ga meteen kijken!

Het klopt dat het geen echte div is, maar omdat ie leeg is (alleen een background-image) laat ie hem helemaal niet zien, terwijl het voorbeeld op de site het wel gewoon doet. Beetje gek. Ik heb inmiddels mac.tekmac.nl weer aangepast, zodat het niet meer echt een illustratie van mijn vraag is.

[quote:c29b58be4a="iBert"]Zo'n trucje is wel mooi natuurlijk, maar semantisch klopt er niets van. XHTML/CSS betekent net layout scheiden van structuur, en structuur wordt hier genegeerd. Dit is al even erg als een tabellenlayout.[/quote:c29b58be4a]

En hoe zou jij het dan doen?

Dat Nifty Corners-voorbeeld maakt, voor zover ik het nu kan beoordelen (heb het nog niet goed doorgenomen), gebruik van javascript om de html van de div's te voorzien, of iets dergelijks. Met deze techniek houdt je je html-bestand [i:da1507546c]clean[/i:da1507546c].

Het blijft een beetje trucen, maar puur een lege div om een achtergrondplaatje in te hangen (die het dus bij mij nog steeds niet doet) voelt toch niet prettig aan…

Javascript om een hoekje te maken? Het wordt steeds mooier!

Het is heel simpel: stel dat je zoiets doet:

[code:1:3ce6a635e8]
<div id="afgerondehoeken">
<h2>Kopje</h2>
<p>tekst</p>
</div>
[/code:1:3ce6a635e8]

Keurig structureel enzo, nietwaar? Je hebt 1 element te weinig om hoekje te maken. Aan de <div> kan je de rechterbovenhoek hangen, aan de h2 de rechterbovenhoek. Aan de p de hoeklinksonder … en toen was het op. CSS biedt niet de mogelijkheid om 2 backgrounds aan 1 element te hangen, dus helaas pindakaas. Je ontkomt er niet aan om een extra span of div toe te voegen.

En dan geef ik het je alsnog te doen om het allemaal werkend te krijgen op IE5 t/m Opera8.

Javascript is bedoelt als “behavioral” laag en onder behavior wordt zeker niet verstaan dat je een niet-semantische div wegschrijft, ook als ziet je HTML er ‘clean’ uit. Dat is even krom als wiet legaal verkopen aan de voorkant, maar verbieden legaal in te kopen aan de achterkantvan het cafe.

En dan nog praktisch: x regels javascript code om 10 karakters HTML uit te sparen? Dat heet roomser dan de paus zijn in mijn opinie. Of je doel voorbij schieten, of schieten met een schot hagel om een mug te doden. HTML is geen science, ook al maken sommige mensen dat er van.

Je hebt natuurlijk gelijk. Het is goed en ik denk zelfs belangrijk om structureel en zo veel als redelijkerwijs mogelijk volgens w3c te werken. Overdrijven is echter ook een vak.

zoiets als hier?

CBGO