Onderlijnde linken op mijn site+
-
Johan Sebastiaan - Lid geworden op: 30 okt 2005, 22:12
- Locatie: Waals Brabant
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.
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.
Be free and fare thou well!
-
wamukota - Lid geworden op: 13 dec 2004, 22:33
- Locatie: Brugge
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.
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 --
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;
}
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 - Lid geworden op: 30 okt 2005, 22:12
- Locatie: Waals Brabant
O.K. Probleem bekeken met je hulp! En een oplossing is er voor mijn site.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.Bewaar dit bestandje in dezelfde folder als je index.html bestand en noem het bv. mijnstyles.css. Upload het naar je website.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; }
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 --
Thanks voor de tip
Be free and fare thou well!
-
wamukota - Lid geworden op: 13 dec 2004, 22:33
- Locatie: Brugge
@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:
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:
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 --
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;
}
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; }
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 --