Hou er rekening mee dat webpagina's met CSS-stijlen niet door alle browsers op dezelfde manier worden weergegeven. Voor de goede orde: ik werk met Internet Explorer 6.

 

Rand maken met een CSS-code (in-line style)

 

We beginnen met een plaatje zonder border/rand.

* * *

Hieronder staan een aantal voorbeelden van borders/randen die met een CSS-code gemaakt zijn.

---

1. De code:

<img src="image1.jpg" width="299" height="55" style="border: 1px solid black">

Zo ziet het eruit:

---

2. De code:

<img src="image1.jpg" width="299" height="55" style="border: 2px double black">

Zo ziet het eruit:

---

3. De code:

<img src="image1.jpg" width="299" height="55" style="border: 4px double saddlebrown">

Zo ziet het eruit:

---

4. De code:

<div style="width:305px;text-align:center;border:1px solid black;"><img src="image1.jpg"width="299" height="55" style="border: 3px solid white"></div>

Zo ziet het eruit:

---

5. De code:

<div style="margin:0px auto;width:311px;text-align:center;border:1px solid maroon;background:khaki;"><img src="image1.jpg" width="299" height="55" style="border:6px solid khaki;"></div>

Zo ziet het eruit:

---

6. De code:

<div style="width: 307px; text-align:center;border:1px dashed black;"> <img src="image1.jpg" width="299" height="55" style="border:4px solid white;"></div>

Zo ziet het eruit:

---

7. De code:

<div style="width: 307px; text-align:center;border:2px dotted orange;"> <img src="image1.jpg" width="299" height="55" style="border:4px solid white;"></div>

Zo ziet het eruit:

---

8. De code:

<table align="center" border="1" bordercolor="#c6a184" width="450" height="150"> <tr><td width="100%"> <p align="center"> <img src="lap01.jpg" width="128" height="85" style="border: 3px solid #c6a184"> <img src="lap02.jpg" width="128" height="85" style="border: 3px solid #c6a184"> <img src="lap04.jpg" width="128" height="85" style="border: 3px solid #c6a184"> </p> </td></tr> </table>

Zo ziet het eruit:

Mozilla Firefox geeft de buitenste randen van bovenstaande tabel NIET gekleurd weer. De Internet Explorer dus wel.

 

De foto's die ik gebruikt heb komen van deze site: http://www.maion.com/photography/lapland/fall_colors_fr_pictures.html.

En sommige codes zijn van Mandarin Design.

---

 

Zie ook mijn vorige lesje over Randen en mijn tutorial over CSS boxes.

 

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