Image position / doctype

Status
Niet open voor verdere reacties.
rikietje

rikietje

Gebruiker
Lid geworden
17 nov 2010
Berichten
154
Hallo,

Bij de bouw van mijn website was ik vergeten een doctype toe te voegen, stom maar de wereld vergaat niet.

Om aan de eisen van de W3 validator te voldoen dacht ik daar is mee te beginnen.

Het volgende probleem doet zich op.

Als ik een doctype toe voeg, komt mijn background image niet te staan waar hij hoort te staan.

Als ik de doctype weg haal is het probleem weer opgelost.

Hier heb je het stukje CSS dat de background beschrijft

HTML: 
body
{
background-color:#153E7E;
background-image:url('images/logobackground.png');
background-repeat:no-repeat;
background-position: right bottom;
background-position: absolute;
}

Een voorbeeld van de pagina waarop ik op het huidige moment geen doctype heb toegevoegd

http://rikbeernink.nl

Hier staat de image mooi right bottom

en op deze pagina heb ik een doctype toegevoegd

http://rikbeernink.nl/info.php

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hier doemt het verschijnsel op.

Op http://rikbeernink.nl/guestbook.php

doemt het weeral op.

Mijn vraag is, zijn jullie hier bekend mee? En wat is de mogelijke oplossing!
 
Probeer deze eens:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd">
 
ScorpionX zei:
Probeer deze eens:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd">
Klik om te vergroten...
Bedankt voor je reactie!


Ik heb het geprobeerd maar dit werkt niet, het probleem is dat wanneer ik een doctype gebruikt er dit gebeurd.
 
background-position: right bottom;
background-position: absolute;

Haal sowieso even die spaties weg tussen : en de waarde.
En zet em dan op degene die ik je net gaf.
 
ScorpionX zei:
background-position: right bottom;
background-position: absolute;

Haal sowieso even die spaties weg tussen : en de waarde.
En zet em dan op degene die ik je net gaf.
Klik om te vergroten...

Ook dit lost het probleem niet op.

Zoals ik al heb verteld werkt alles prima.

Totdat ik die doctype ga toevoegen...
 
Doe dit weg in uw css background-position: absolute;
 
Poppoll zei:
Doe dit weg in uw css background-position: absolute;
Klik om te vergroten...

Ja dat heb ik later toegevoegd in de hoop het probleem te helpen.

Maar is er verder iemand bekend met het probleem dat het toevoegen van een doctype de background image verplaatst?
 
Rik,
Dit heeft niets te maken met het invoegen van uw doctype, maar wel met de hoogte van de body.

Voeg dit toe aan uw css helemaal bovenaan:
Code: 
html, body {
height: 100%;
}
Uw paginacode bevat heel wat fouten hieronder een bijgewerkte, valid, versie van info.htm
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<title>Rik Beernink : Info</title>

<link rel="Stylesheet" type="text/css" href="info.php_files/main_css.css" />
</head>
<body>
<div id="content">
<a href="http://rikbeernink.nl/index.php"><img src="info.php_files/logotitle.png" alt="" /></a>
<div class="div_menu">
<a href="http://rikbeernink.nl/index.php"><img src="info.php_files/homebutton.png" onmouseover="this.src='images/buttons/homebuttonmouseover.png';" onmouseout="this.src='images/buttons/homebutton.png';" alt="" /></a>
<a href="http://rikbeernink.nl/info.php"><img src="info.php_files/infobutton.png" onmouseover="this.src='images/buttons/infobuttonmouseover.png';" onmouseout="this.src='images/buttons/infobutton.png';"  alt="" /></a>
<a href="http://rikbeernink.nl/guestbook.php"><img src="info.php_files/gastenboekbutton.png" onmouseover="this.src='images/buttons/gastenboekbuttonmouseover.png';" onmouseout="this.src='images/buttons/gastenboekbutton.png';" alt="" /></a>
<a href="http://rikbeernink.nl/tutorials.php"><img src="info.php_files/tutorialsbutton.png" onmouseover="this.src='images/buttons/tutorialsbuttonmouseover.png';" onmouseout="this.src='images/buttons/tutorialsbutton.png';" alt="" /></a>
<a href="http://rikbeernink.nl/links.php"><img src="info.php_files/linksbutton.png" onmouseover="this.src='images/buttons/linksbuttonmouseover.png';" onmouseout="this.src='images/buttons/linksbutton.png';" alt="" /></a>
<a href="http://rikbeernink.nl/nieuwsbrief.php"><img src="info.php_files/nieuwsbriefbutton.png" onmouseover="this.src='images/buttons/nieuwsbriefbuttonmouseover.png';" onmouseout="this.src='images/buttons/nieuwsbriefbutton.png';" alt="" /></a>
<a href="http://forum.rikbeernink.nl/"><img src="info.php_files/forumbutton.png" onmouseover="this.src='images/buttons/forumbuttonmouseover.png';" onmouseout="this.src='images/buttons/forumbutton.png';" alt="" /></a>
</div>
<br/>

<img src="info.php_files/fotorik.jpg" class="float_right" alt="" />
<div class="div_text_left">
Deze website wordt gemaakt door Rik Beernink<br/><br/>Rik Beernink is 16 jaar oud en woont in Giesbeek, Gelderland.<br/>Zijn interesses liggen in Judo, Sporten, Gitaar spelen, bezig zijn met de computer en zijn vriendin Babette.<br/>Hij zit nu 5 HAVO, met het profiel Natuur en Techniek en de keuzevakken Informatica en Management &amp; Organisatie<br/>Hij volgt zijn opleiding op het Candea College in Duiven.</div>
<br/>
<br/>

<div class="div_text_left">
Rik doet ook aan social networking!<br/>Hieronder enkele links naar zijn social network accounts!
<br/><br/> <a href="http://twitter.com/rik_rikrik">Twitter</a><br/><a href="http://rikietje.hyves.nl/">Hyves</a><br/><a href="http://facebook.com/rikbeernink">FaceBook</a><br/><br/>Op FaceBook voeg ik <b>geen</b> onbekenden toe!
</div>
</div>


</body>
</html>

!! PS paden moeten aan uw toestand aangepast worden!!

Als je de strict versie gebruikt zoals hier mag je geen target in links gebruiken.
Moeten o.a. meta, img en br afgesloten zijn: voorbeeld: <br /> of <br/> en niet <br>
 
Laatst bewerkt:
Ik heb alle tips die je hebt gegeven opgevolgd maar ik kom er nog steeds niet uit, het probleem met de background image is er nog steeds :(
 
Rik,
Het is wel van belang dat je de veranderingen doet zoals ik heb gegeven.
Je hebt de height toegevoegd aan de body tag = verkeerd!
moet zijn:
Code: 
html, body {
height: 100%;
}

Ook de doctype heb je niet aangepast wat natuurlijk ook fouten geeft.
 
Poppoll zei:
Rik,
Het is wel van belang dat je de veranderingen doet zoals ik heb gegeven.
Je hebt de height toegevoegd aan de body tag = verkeerd!
moet zijn:
Code: 
html, body {
height: 100%;
}

Ook de doctype heb je niet aangepast wat natuurlijk ook fouten geeft.
Klik om te vergroten...

Bedankt voor je reactie!

Ik dacht dat je een fout maakte in je css tag maar dat was dus niet zo!

Het probleem is nu verholpen, maaar

op een pagina met meer tekst, staat de afbeelding nu boven in

kijk

http://rikbeernink.nl/downloadtut_payserver.php
 
Bovenstaand probleem komt trouwens niet voor in IE, daar werkt alles naar behoren maar in google chrome zul je het probleem zien.
 
Poppoll zei:
Wat dacht je van ook hier de doctype in te voeren??
Klik om te vergroten...

Ik heb het doctype nu toegevoegd, het probleem is nu ik dat aangepast heb in met die body 100%, dat in google chrome de afbeelding nou niet meer onderaan de pagina staat.
 
Je hebt
Code: 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<html>
<html> moet weg.
 
Ik heb geprobeerd hem in de html tag te zetten en erbuiten, maar het plaatje spawnt onderin het scherm, niet onderaan de pagina
 
Maak van de body tag in uw css dit:
body
{
background:#153E7E url('images/logobackground.png') no-repeat fixed right bottom;
}
 
Laatst bewerkt:
Poppoll zei:
Maak van de body tag in uw css dit:
body
{
background:#153E7E url('images/logobackground.png') no-repeat fixed right bottom;
}
Klik om te vergroten...

Hartstikke bedankt! dit is het stukje code wat ik net nodig had!

Gaaf man nou blijft tijdens het scrollen toch de achtergrond staan, deze is opgelost!


Heb je misschien een link naar de website waar je deze vandaan hebt? Misschien dat daar nog meer handige tips staan.
 
Rik,
Wat je nu nog moet doen is je site controleren bij w3c en de fouten wegwerken.

Wat de oplossing voor je probleem betreft, dat komt niet van een site, dat zijn dingen die ik weet, door jarenlange ervaring.
PP
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan