|
|
|
 |
| CSS |
 |
|
 |
 |
|
Speciale typogrammen die simpel op meerdere plaatsen te gebruiken zijn binnen een website.
|
|
 |
 |
 |
 |
|
| Navigatie ul/li (Horizontaal) |
|
|
|
|
De truuk om iets naast elkaar te zetten is met de code float
|
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li { float:left; }
a { display:block;
width:60px;
background-color:#dddddd;
}
</style>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
|
Note: If a !DOCTYPE is not specified, floating items can produce unexpected results.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
A background color can be added to the links to show the link area.
The whole link area is clickable, not just the text.
Note: overflow:hidden is added to the ul element to prevent li elements from going outside of the list.
Value |
Description |
left |
The element floats to the left |
right |
The element floats the right |
none |
The element is not floated, and will be displayed just where it occurs in the text. This is default |
inherit |
Specifies that the value of the float property should be inherited from the parent element |
|
Link met kruis
<style type="text/css">
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol> |
Value |
Description |
none |
No marker |
circle |
The marker is a circle |
disc |
The marker is a filled circle. This is default |
square |
The marker is a square |
armenian |
The marker is traditional Armenian numbering |
decimal |
The marker is a number |
decimal-leading-zero |
The marker is a number padded by initial zeros (01, 02, 03, etc.) |
georgian |
The marker is traditional Georgian numbering (an, ban, gan, etc.) |
lower-alpha |
The marker is lower-alpha (a, b, c, d, e, etc.) |
lower-greek |
The marker is lower-greek (alpha, beta, gamma, etc.) |
lower-latin |
The marker is lower-latin (a, b, c, d, e, etc.) |
lower-roman |
The marker is lower-roman (i, ii, iii, iv, v, etc.) |
upper-alpha |
The marker is upper-alpha (A, B, C, D, E, etc.) |
upper-latin |
The marker is upper-latin (A, B, C, D, E, etc.) |
upper-roman |
The marker is upper-roman (I, II, III, IV, V, etc.) |
inherit |
Specifies that the value of the list-style-type property should be inherited from the parent element |
|
|
|
|
|
|
|
| Navigatie |
|
|
|
|
<style>
<!-- verander hieronder de kleurnummers, lettertype en afstanden in je eigen voorkeuren -->
div.menuBar,
div.menuBar a.menuButton {
font-family: Verdana, Arial, sans-serif;
font-size: 8pt;
color: #000000;
}
div.menuBar {
background-color: #CCFFCC;
padding: 6px 2px 6px 2px;
text-align: center;
margin-left:10px;
}
div.menuBar a.menuButton {
background-color: transparent;
border: 1px solid;
border-color: #FFFFFF #999999 #999999 #FFFFFF;
color: #000000;
cursor: pointer;
left: 0px;
margin: 1px;
padding: 2px 6px 2px 6px;
position: relative;
text-decoration: none;
top: 0px;
z-index: 100;
}
div.menuBar a.menuButton:hover {
background-color: transparent;
border-color: #999999 #FFFFFF #FFFFFF #999999;
color: #FF0000;
}
</style>
<!-- verander hieronder de url ( of pagina.htm ) target en linknaam -->
<div class="menuBar">
<a class="menuButton" href="http://www.jongevos.nl" target=_new">Link 1</a>
<a class="menuButton" href="http://www.jongevos.nl" target=_new">Link 2</a>
<a class="menuButton" href="http://www.jongevos.nl" target=_new">Link 3</a>
<a class="menuButton" href="http://www.jongevos.nl" target=_new">Link 4</a>
<a class="menuButton" href="http://www.jongevos.nl" target=_new">Link 5</a>
</div> |
|
|
|
|
|
|
| Muis |
|
|
|
|
Link met kruis
<a href="http://www.jongevos.nl" style="cursor: crosshair">Link met kruis</a> |
Link met zandloper
<a href="http://www.jongevos.nl" style="cursor: wait">Link met zandloper</a> |
Link met hand
<a href="http://www.jongevos.nl" style="cursor: hand">Link met hand</a> |
Link met help
<a href="http://www.jongevos.nl" style="cursor: help">Link met help</a> |
Link met move
<a href="http://www.jongevos.nl" style="cursor: move">Link met move</a> |
Link met pointer
<a href="http://www.jongevos.nl" style="cursor: pointer">Link met pointer</a> |
Link met se-resize
<a href="http://www.jongevos.nl" style="cursor: se-resize">Link met se-resize</a> |
Link met e-resize
<a href="http://www.jongevos.nl" style="cursor: e-resize">Link met e-resize</a> |
Link met nw-resize
<a href="http://www.jongevos.nl" style="cursor: nw-resize">Link met nw-resize</a> |
Link met n-resize
<a href="http://www.jongevos.nl" style="cursor: n-resize">Link met n-resize</a> |
Link met ne-resize
<a href="http://www.jongevos.nl" style="cursor: ne-resize">Link met ne-resize</a> |
Link met se-resize
<a href="http://www.jongevos.nl" style="cursor: se-resize">Link met se-resize</a> |
|
|
|
|
|
|
|
|
| Aantal pagina's |
|
|
|
|
Totaal: 330 pagina's
|
|
|
|
|
|
rss