Header in html plaatsen zonder dat background erover gaat
- Onderwerp starter jefpef96
- Startdatum
- Status
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi jefpef96,
Tja, een oplossing hangt meestal samen met een probleem. En op een webpagina hangt een probleem meestal samen met de constructie van die pagina.
Oftewel: als we geen (test-) probleempagina zien, weten we niet hoe die in elkaar zit ... en dus ook niet wat een oplossing zou kunnen zijn.
CSShunter
Tja, een oplossing hangt meestal samen met een probleem. En op een webpagina hangt een probleem meestal samen met de constructie van die pagina.
Oftewel: als we geen (test-) probleempagina zien, weten we niet hoe die in elkaar zit ... en dus ook niet wat een oplossing zou kunnen zijn.
- Heb je een link?
CSShunter
Sorry ik heb helaas geen pagina om te laten zien maar misschien heb je iets aan de html code?
--------------------
<html>
<head>
<meta charset="itf-8" />
<link rel="stylesheet" href="style.css">
<background style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='img/background1.jpg' style='width:100%;height:100%' alt='' />
</div>
</head>
<body>
<div class="header"><a src="img/header"></a></div>
</body>
</html>
-------------------
Ik ben ook pas net begonnen met html leren dus heb nog niet echt de kennis om het zo 123 op te lossen.
ik probeer het nog eens uit te leggen:
je hebt een plaatje(background) en achter dat plaatje(background) zit de header dus de background overlayed de header waardoor je de header niet kan zien. ik hoop zo nog een toevoeging en een verduidelijking van mijn probleem te hebben weergeven.
jefpef96.
--------------------
<html>
<head>
<meta charset="itf-8" />
<link rel="stylesheet" href="style.css">
<background style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='img/background1.jpg' style='width:100%;height:100%' alt='' />
</div>
</head>
<body>
<div class="header"><a src="img/header"></a></div>
</body>
</html>
-------------------
Ik ben ook pas net begonnen met html leren dus heb nog niet echt de kennis om het zo 123 op te lossen.
ik probeer het nog eens uit te leggen:
je hebt een plaatje(background) en achter dat plaatje(background) zit de header dus de background overlayed de header waardoor je de header niet kan zien. ik hoop zo nog een toevoeging en een verduidelijking van mijn probleem te hebben weergeven.
jefpef96.
Laatst bewerkt:
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi jefpef96,
Verschillende dingen kloppen niet in deze code. - Geen probleem: we beginnen maar even bovenaan, en zakken dan naar beneden.
Startpunt
Elke webpagina hoort te beginnen met een zogenaamd "doctype", dat is het "document type" waarmee aan de browsers aangegeven wordt welke versie van html (met welke standaard-regels) ze moeten gebruiken. Laat je dat weg, dan weten browsers niet goed hoe ze de rest moeten interpreteren, en dat kan vrij lastige consequenties hebben.
Je kunt bv. html5 nemen, dat heeft als doctype-declaratie:
=======
De <head>
Die begint met de <meta>-regel voor de "charset". Dat is de "character-set" (=set van lettertekens) die aangeeft hoe de lettertekens in de volgende code opgevat moeten worden door de browsers. Je hebt staan: itf-8, dat moet zijn: utf-8.
Verder als verplicht nummer in de <head> hoort er een pagina-titel te worden opgegeven (die in de browserbalk bovenaan en/of op de browser-tabbladen komt te staan), bijvoorbeeld:
Dan heb je een link naar een stylesheet staan. Dat kan, maar alleen als je de opmaak in een stylesheet met die naam gezet hebt (ik weet niet of je dat gedaan hebt). Daar hoort ook het type van het bestand bij, ook alweer om de browsers te laten weten wat ze te verwachten hebben:
Dan gaat het met <style type="text/css"> ... </style>. Op de puntjes komen dan de style-regels te staan.
Daarna komt de </head> en kan de <body> beginnen.
De body
Als je de header-afbeelding een link wilt laten zijn, moet je de afbeelding binnen de link zetten als <img>, want de link <a> mag alleen vertellen waar de link naar toe gaat. Dan wordt het in totaal:
Bij de breedte en hoogte natuurlijk de maten opgeven die jouw header-image heeft. 
CSShunter
_____________
PS: wat is je leermateriaal om html te leren?
Verschillende dingen kloppen niet in deze code. - Geen probleem: we beginnen maar even bovenaan, en zakken dan naar beneden.
Startpunt
Elke webpagina hoort te beginnen met een zogenaamd "doctype", dat is het "document type" waarmee aan de browsers aangegeven wordt welke versie van html (met welke standaard-regels) ze moeten gebruiken. Laat je dat weg, dan weten browsers niet goed hoe ze de rest moeten interpreteren, en dat kan vrij lastige consequenties hebben.
Je kunt bv. html5 nemen, dat heeft als doctype-declaratie:
HTML:
<!DOCTYPE html>- Andere mogelijkheden staan hier: www.w3.org/QA/2002/04/valid-dtd-list.html
HTML:
<!DOCTYPE html>
<html lang="nl">=======
De <head>
Die begint met de <meta>-regel voor de "charset". Dat is de "character-set" (=set van lettertekens) die aangeeft hoe de lettertekens in de volgende code opgevat moeten worden door de browsers. Je hebt staan: itf-8, dat moet zijn: utf-8.
HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Testpagina</title>
HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Testpagina</title>
<link rel="stylesheet" type="text/css" href="style.css">- Als het stylesheet er (nog) niet is, kan je dit weglaten.
Dan gaat het met <style type="text/css"> ... </style>. Op de puntjes komen dan de style-regels te staan.
- Niet tussen tags als <background>, <img> enz. want dat is geen css (de taal voor de opmaak), en dat wordt niet begrepen.
HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Testpagina</title>
<style type="text/css">
body {
background: url(img/background1.jpg) no-repeat;
}
</style>De body
Als je de header-afbeelding een link wilt laten zijn, moet je de afbeelding binnen de link zetten als <img>, want de link <a> mag alleen vertellen waar de link naar toe gaat. Dan wordt het in totaal:
HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Testpagina</title>
<style type="text/css">
body {
background: url(img/background1.jpg) no-repeat;
}
</style>
</head>
<body>
<div id="header">
<a href="pagina-waar-de-link-naar-toe-moet.htm"><img src="img/header.jpg" width="600" height="250" alt=""></a>
</div>
</body>
</html>- Op deze manier komt de header-afbeelding keurig boven de achtergrond.
- Behalve ... als je toch een style.css hebt gemaakt, waarin fouten of tegenstrijdige dingen staan.
CSShunter
_____________
PS: wat is je leermateriaal om html te leren?
Laatst bewerkt:
- Status