At lave et externt stylesheet, ud af dét du allerede har, er nemt:
Gem koden:
Kode
<style type="text/css">
.land {
width: 90%;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
background-color: #ffcc00;
font-family: Comic Sans MS;
}
.sted {
font-family: Comic Sans MS;
background-color: #ffcc00;
width: 85%;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
}
.hotel {
width: 80%;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
background-color: #ffcc00;
font-family: Comic Sans MS;
}
</style> |
..i en fil (f.eks. lande.css) og fjern 'style' markøren, så indholdet kommer til at se sålede ud:
Kode
<!--
.land {
width: 90%;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
background-color: #ffcc00;
font-family: Comic Sans MS;
}
.sted {
font-family: Comic Sans MS;
background-color: #ffcc00;
width: 85%;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
}
.hotel {
width: 80%;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
background-color: #ffcc00;
font-family: Comic Sans MS;
}
--> |
Nu kan du indsætte det externe stylesheet (lande.css) i din <head> .. </head> sektion med koden:
Kode
<link rel="stylesheet" type="text/css" media="all" href="[sti-]lande.css" /> |
betyder i ovenstående, at du kan angive en absolut (http) eller en rod-/biblioteksrelativ sti til dér, hvor du har gemt filen.
Nu kan stylesheet'et bruges på alle dine sider, men
indholdet...:
Kode
<div class="land">Land</div>
<div class="sted">Sted</div>
<div class="hotel">Hotel</div>
<br>
<div class="land">Land: Grækenland - Spanien - Portugal<br>
<br>
<div class="sted">Sted: Poros - Kreta - Kos<br>
<br>
<br>
<div class="hotel">Hotel: Poseidon - Alexia - <br><br><br><br></div> |
..skal du
stadig rette på aktuelle sider.
Hvis du vil kunne rette indhold af en side dynamisk, må du ENTEN benytte PHP, ASP el. lign til at styre hvad som skal vises og selve indholdet hentes som include fil fra en database. Databasefilen skal så kun rettes ét sted.
..ELLER; lave en form for CSS 'galleri'. Altså noget alá:
http://www.cssplay.co.uk/menu/photo_not_so_simple
..ELLER; et imagemap i CSS:
http://www.cssplay.co.uk/menu/imagemap#nogo
Noget af 'fidusen' er at benytte CSS egenskaben display. Se et eksempel hér:
http://www.cssboxing.com/temp/span_popup_tekst_og_billede.html
Et HTML element gøres 'usynligt' med egenskaben display:none
..det gøre synligt ved mouseover med HTML elementets pseudo-egenskab :hover i kombination med display:block egenskaben.
Man også kan placere flere billeder/tekst oven på hinanden og med egenskaben z-index bestemme hvilket 'lag' af billeder som skal ligge øverst. z-index værdier kan ligeledes ændres ved :hover egenskaben og dermed kan flere billeder 'bytte plads'.
Derved kan al indholdet rettes på samme (HTML-) side og man slipper for, at have flere sider at rette indhold i. Selve CSS koden som bestemmer hvilket indhold på HTMLsiden som skal vises, kan selvfølgelig stadig gøres extern.
</MOLOKYLE>