Onderlijnde linken op mijn site+

Johan Sebastiaan · 11 nov 2005, 19:17

Beste bloggers,

Ik heb een (klein) probleem! Op mijn persoonlijke webpagina's - http://users.skynet.be/Dirk.De.Bie/ -zijn de linken onderlijnd. Ik vind dat wel niet zo net!
Hoe kan ik daaraan verhelpen? Dien ik iets in te stellen in mijn Frontpage, die ik gebruik om mijn pagina's regelmatig aan te passen?
Kan iemand mij de oplossing geven om aan dit mini-euvel te verhelpen?

WinXP, Frontpage2000, hp pavilion, AMD Sempron 3000, 512Mb DDR, 160-Gb vaste schijf.

wamukota · 11 nov 2005, 20:53

De simpelste oplossing is om een stylesheet te koppelen aan je HTML bestand.

Maak een nieuw bestandje aan, en kopieer daarin de onderstaande code over.

Code: Selecteer alles

a:link{
text-decoration: none;
font-style: normal;
font-weight: normal;
color: #006699;
}

a:visited{
text-decoration: none;
font-style: normal;
font-weight: normal;
color: #006633;
}
a:hover{
text-decoration: underline;
font-style: normal;
font-weight: bold;
color:#CC3300;
}

Bewaar dit bestandje in dezelfde folder als je index.html bestand en noem het bv. mijnstyles.css. Upload het naar je website.

Het enige dat je dan moet doen om in al je HTML bestanden een niet onderlijnde hyperlink te hebben, die vet worden al je erover hovert en van kleur verandert, is ergens in je HTML tussen je [head] en [/head] tag het volgende te zetten.

<link rel="stylesheet" type="text/css" href="mijnstyles.css">

Hoe er rekening mee dat je bij bestanden die in een onderliggende map zitten en moeten verwijzen naar het bestandje mijnstyles.css in de bovenliggende map, je de bestandsnaam moet aanpassen als volgt:

<link rel="stylesheet" type="text/css" href="../mijnstyles.css">

-- Alain --

Johan Sebastiaan · 11 nov 2005, 23:38

wamukota schreef:De simpelste oplossing is om een stylesheet te koppelen aan je HTML bestand.

Maak een nieuw bestandje aan, en kopieer daarin de onderstaande code over.
Code: Selecteer alles
a:link{
text-decoration: none;
font-style: normal;
font-weight: normal;
color: #006699;
}

a:visited{
text-decoration: none;
font-style: normal;
font-weight: normal;
color: #006633;
}
a:hover{
text-decoration: underline;
font-style: normal;
font-weight: bold;
color:#CC3300;
}
Bewaar dit bestandje in dezelfde folder als je index.html bestand en noem het bv. mijnstyles.css. Upload het naar je website.

Het enige dat je dan moet doen om in al je HTML bestanden een niet onderlijnde hyperlink te hebben, die vet worden al je erover hovert en van kleur verandert, is ergens in je HTML tussen je [head] en [/head] tag het volgende te zetten.

<link rel="stylesheet" type="text/css" href="mijnstyles.css">

Hoe er rekening mee dat je bij bestanden die in een onderliggende map zitten en moeten verwijzen naar het bestandje mijnstyles.css in de bovenliggende map, je de bestandsnaam moet aanpassen als volgt:

<link rel="stylesheet" type="text/css" href="../mijnstyles.css">

-- Alain --

O.K. Probleem bekeken met je hulp! En een oplossing is er voor mijn site.
Thanks voor de tip

wamukota · 12 nov 2005, 08:14

@klerk,

Dat kan inderdaad.

Je hebt dus een css-stylesheet gekoppeld aan je HTML document, maar je wil op deze pagina afwijken van de door de CSS opgelegde instellingen.
Om dat te bereiken moet je gebruik gaan maken van de CSS class.
Ik ga hier geen uitleg geven over classes in CSS, maar enkel het werkingsprincipe uitleggen.

Stel dat in je CSS (of in je <styles> ... </styles> sectie) volgende code staat voor je hyperlinks:

Code: Selecteer alles

a
{
	color : WhiteSmoke;
	font-family : verdana,Helvetica,Arial;
	font-size: 8pt;
	font-weight: normal;
	text-decoration : underline;
}

a:hover
{
	color : White;
	font-family : verdana,Helvetica,Arial;
	font-size: 8pt;
	font-weight: normal;
	text-decoration : none;
}

Deze herken je dus wel, want ze komen uit je blog.

Nu gaan we een class toevoegen.
In je <style> .. </style> (in je <head> .. </head> sectie) voeg je onderstaande code toe:

Code: Selecteer alles

a.foto:link {color: red; text-decoration: none; }
a.foto:visited {color: purple; text-decoration: none; }
a.foto:hover {color: orange; text-decoration: underline; }
a.foto:active {color: blue; } 

a.speciaal:link {color: #0000ff; font-size: 18pt; font-weight: bold; }
a.speciaal:visited {color: #894f7b; font-weight: bold; }
a.speciaal:hover {text-decoration: overline; background-color: #003399; }
a.speciaal:active {color: red; }

Je hebt nu 3 verschillende <a> tag formaten die je kunt gebruiken. Degene die je al gewoon was te gebruiken en 2 nieuwe. Hoe roep je nu de nieuwe op?
Simpel:

<a class="speciaal" href="link1.html">Dit is link 1</a>
of
<a class="foto" href="foto1.jpg">Klik hier voor grote foto </a>

Voor andere styles die je gedefinieerd hebt, kun je op dezelfde manier werken. Zoek het eens op onder google (CSS + class)

Hopelijk kun je hier wat verder mee experimenteren.

-- Alain --