Hou er rekening mee dat webpagina's met CSS-stijlen niet door alle browsers op dezelfde manier worden weergegeven.

 

Rounded corners / Afgeronde hoeken

Afgeronde hoeken zijn ontzettend populair. Ook makkelijk te maken. Een paar regels code

<div style="margin:2em 10% 1em 10%; border:2px solid #cccccc; -moz-border-radius:20px; background:#dddddd"><p style="text-align:center">Mooie afgeronde hoeken (alleen met Mozilla)</p></div>

en het is voor de bakker. Dat wil zeggen: als je Mozilla Firefox gebruikt! Zo ziet het eruit in Firefox:

Mooie afgeronde hoeken (alleen met Mozilla)

• Voor degenen die deze pagina met de Internet Explorer bekijken heb ik een schermafdruk gemaakt, zodat zij kunnen zien wat Firefox-gebruikers zien:

Internet Explorer-gebruikers zien helemaal geen ronde hoeken, maar een doodgewone rechthoek:

Mooie afgeronde hoeken (alleen met Mozilla)

• Voor de Firefox-gebruikers heb ik een schermafdruk gemaakt van wat de IE-gebruikers zien:

* * *

De moraal van dit verhaal is dat de IE-gebruikers hun toevlucht moeten zoeken tot andere technieken. Bijvoorbeeld ronde hoeken maken met een beeldbewerkingsprogramma. En die stop je dan in een tabel. Dat is beduidend meer werk!

Hier beneden de code voor de tabel:

<table width="300" cellpadding="0" cellspacing="0"> <tr> <td width="20"><img src="tl.gif" width="20" height="20" alt="" /></td> <td width="260" bgcolor="#E2B6C5"> </td> <td width="20"><img src="tr.gif" width=20” height="20" alt="" /></td> </tr> <tr bgcolor="#E2B6C5"> <td width="20"> </td> <td width="260" align=center>tekst komt hier</td> <td width="20"> </td> </tr> <tr> <td width="20"><img src="bl.gif" width="20" height="20" alt="" /></td> <td width="260" bgcolor="#E2B6C5"> </td> <td width="20"><img src="br.gif" width="20" height="20" alt="" /></td> </tr> </table>

De tabel ziet er dan zo uit in je HTML-pagina:

Dan moet je dus nog ronde hoeken zien te fabriceren voor de tabel. Dat heb ik met het selectiegereedschap van Paint Shop Pro gedaan (optie: rounded rectangle/afgeronde rechthoek). Ik heb net zo lang zitten te vogelen tot ik een rond hoekje had dat paste in de tabel.

Zie hieronder het resultaat:

	tekst komt hier

---

Meer over afgeronde rechthoeken bij Korte Lesjes (Afgeronde Rechthoek).

 

Start | Tutorials | Korte Lesjes | CSS | Fonts | Filters | Links | Allerlei | Zoeken | PSP-varia | P-Filiaal