Gebruiker:Opzoeken/common
Opmerking: na het publiceren moet je misschien je browsercache legen om de veranderingen te zien.
- Firefox / Safari: houd Shift ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5 of Ctrl-R (⌘-Shift-R op een Mac)
- Google Chrome: druk op Ctrl-Shift-R (⌘-Shift-R op een Mac)
- Edge: houd Ctrl ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5.
/* deze code stelt de grootte van de kaders in */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;
}/* deze code stelt de maximale en minimale breedte van de body in */
body {background-color: Thistle;font-family: 'PT Sans Narrow', sans-serif;margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
}
/* deze code voegt een mooie achtergrond toe */
html {background: radial-gradient(circle, SkyBlue, SkyBlue 50%, LightCyan 50%, SkyBlue);background-size: 8px 8px;
}/* de header */
header {
}
header p {float: left;font-size: 16px;font-weight: bold;margin-top: 0px;}header h1 {font-size: 16px;text-align: right;
}
/* het menu */nav ul {list-style-type: none;background-color: #B577B5;
border: 2px solid black;
border-radius: 10px;
font-family: sans-serif;
font-weight: bold;
padding: 16px;}nav ul li {display: inline;border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: #111111;}
nav ul li a:hover {
text-decoration: underline;
}
nav li.selected {
color: #606060;}/* biografieën */section {
background-color: #FFFFFF;
margin-bottom: 24px;
min-height: 320px;
padding-left: 24px;
padding-right: 24px;
}
/* het aside-element */
aside {
}
/* footer */
footer {
}
footer p.copyright {
float: left;
margin-top: 0px;
}
footer p.contact {
text-align: right;
}
/* kleine plaatjes krijgen een maximale hoogte van 200px */
img.small {float: left;height: 200px;margin-bottom: 24px;margin-right: 24px;}/* middelgrote plaatjes mogen de helft van het element waarin ze zich bevinden innemen, met een maximale breedte van 360px */img.medium {
max-width: 360px;
width: 50%;}/* grote afbeeldingen mogen de hele breedte van het element waarin ze zich bevinden innemen */
img.large {width: 100%;}/* deze code voorziet ieder element dat geen kader heeft van een kader */
body, section, img {border: 2px solid #B1B1B1;border-radius: 16px;}/* deze code zorgt ervoor dat je webpagina er op schermen van allerlei groottes goed uitziet */
@media all and (min-width: 900px) {article {float: left;width: 66%;}aside {float: left;padding-left: 24px;width: 34%;}footer {clear: both;}}
table {font-size:70%;
border-collapse: collapse;
width: 100%;
}th,td {
border:1px solid #000000;
padding:8px;
text-align: left;}th {
background-color: #FCAB68;
}
td {
background-color: #BA99C0;
}
p.top-tip {
border: 4px solid #0000FF;
border-radius: 10px;
padding: 1em;}
p.top-tip::before {
color: #111111;
content:"TOPTIP: ";
font-weight: bold;
}