Hallo beste mensen,
Ik zit met een klein probleem waar ik de oplossing maar niet van kan vinden;
Zie eerst onderstaande URL:
http://www.gmt-design.nl/lynx/start/index.html
Zoals je zal zien werkt in Firefox alles prima, maar in Safari of IE verspringt de onderste afbeelding telkens naar beneden, waarschijnlijk door het menu.
Weet onderdehand niet meer waar het aan kan liggen…
Misschien dat een van jullie het ziet.
Alvast bedankt! :finderoud:
in firefox op windows springt je afbeelding ook naar beneden iig
In [url=http://www.opera.com/]Opera[/url] blijft het plaatje wel gewoon staan, raar maar waar!
volgens mij staan het menu en het plaatje in de zelfde laag en wordt door het menu uit te laten klappen het plaatje ook naar beneden gedrukt. ik zou de pagina ook niet met tabellen en divs opbouwen, maar of het een of het ander.
Plaatje even in een nieuwe layer zetten en vervolgens de z-index hoger instellen als de rest.
Als ik je code zo bekijk, heb je dit niet veel vaker gedaan? Probeer zoveel mogelijk met vaste waarden te werken in layers. Dus hoogte en breedte van elementen vast zetten.
Probeer ook aan te geven met een floats en margins waar iets moet komen te staan. Werkt prima en gebruik ik ook al langere tijd en ondervind daar nooit problemen mee. Ben zelf web ontwikkelaar en maak websites die werken op IE, Firefox en Safari, met alleen XHTML en CSS. Bij sommige sites moet nog verder gegaan worden en moet het voldoen aan de http://www.drempelsweg.nl richtlijnen. Daar kun je alleen maar met CSS en XHTML werken.
Menu’s hoor je niet op te bouwen met tabellen, maar met lists (<ul><li></li></ul>)
Was ergens een opmerking over een z-index. Een z-index werkt alleen bij absolute layers! Dat is hier niet het geval en dus werkt dat ook niet. Heb even snel iets aangepast aan je pagina. De code staat hieronder. Probeer het maar…
Gebruik geen inline styles, maar zet alles netjes in een stylesheet en gebruik ID’s en Classes!
Oooh ja, nog één ding over je doctype. Je gebruikt nu nog transitional, maar probeer te werken met onderstaande doctype. Deze is veel stricter in het gebruik van Layers, etc. Transitional werd gebruikt als overgansfase van HTML naar XHTML en zal steeds meer verdwijnen. Dit kan later problemen op gaan leveren.
[code:1:b40e24d343]<!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" lang="nl" xml:lang="nl">
[/code:1:b40e24d343]
Hier de code met een kleine aanpassing:
[code:1:b40e24d343]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mpowering People</title>
<link href="mpp.css" rel="stylesheet">
<script type=“text/javascript”>
function zien(laag)
{
document.getElementById(laag).style.display = ‘block’;
}
</SCRIPT>
<SCRIPT language=javascript>
function hide(laag)
{
document.getElementById(laag).style.display = ‘none’;
}
</SCRIPT>
</head>
<body>
<div style=“width:955px; height:600px; margin:0 auto; background: #000 url(‘http://www.gmt-design.nl/lynx/start/backgrounds/start1.jpg’) no-repeat top left; padding: 0px;”>
<img src="http://www.gmt-design.nl/lynx/start/logo/logostart.gif" width="403" height="153" style="margin-left:30px; margin-top:25px;" />
<DIV id=“hoofdmenu” name=“hoofdmenu” class=“homebar” style=“visibility: visible; background-color: #000000; height:50px; margin-top: 60px; width: 75%; “>
<TABLE>
<TR>
<TD><FONT color=”#FFFFFF”> </FONT><a onmouseover=“zien(‘MPP_menu’), hide(‘Projecten_menu’), hide(‘Donateur_menu’), hide(‘Nieuws_menu’), hide(‘Contact_menu’), hide(‘Kinder_menu’);” href="#">MPP</a></TD>
<TD><FONT color="#FFFFFF"> | </FONT><a onmouseover=“hide(‘MPP_menu’), hide(‘Projecten_menu’), hide(‘Donateur_menu’), hide(‘Nieuws_menu’), hide(‘Contact_menu’), zien(‘Kinder_menu’);” href="#">Onze kinderen</a></TD>
<TD><FONT color="#FFFFFF"> | </FONT><a onmouseover=“hide(‘MPP_menu’), hide(‘Kinder_menu’), hide(‘Donateur_menu’), hide(‘Nieuws_menu’), hide(‘Contact_menu’), zien(‘Projecten_menu’);” href="#">Projecten</a></TD>
<TD><FONT color="#FFFFFF"> | </FONT><a onmouseover=“hide(‘MPP_menu’), hide(‘Kinder_menu’), hide(‘Projecten_menu’), hide(‘Nieuws_menu’), hide(‘Contact_menu’), zien(‘Donateur_menu’);” href="#">Word donateur</a></TD>
<TD><FONT color="#FFFFFF"> | </FONT><a onmouseover=“hide(‘MPP_menu’), hide(‘Kinder_menu’), hide(‘Projecten_menu’), hide(‘Donateur_menu’), hide(‘Contact_menu’), zien(‘Nieuws_menu’);” href="#">Nieuws</a></TD>
<TD><FONT color="#FFFFFF"> | </FONT><a onmouseover=“hide(‘MPP_menu’), hide(‘Kinder_menu’), hide(‘Projecten_menu’), hide(‘Donateur_menu’), hide(‘Nieuws_menu’), zien(‘Contact_menu’);” href="#">Contact</a></TD>
</TR>
</TABLE>
<DIV id="MPP_menu" name="MPP_menu" class="homesub" style="display: none; background-color: #000000; width: 55%; ">
<TABLE>
<TR>
<TD><FONT color="#FFFFFF">&nbsp; </FONT><A href="index.htm">Home</A></TD>
<TD><FONT color="#FFFFFF"> | </FONT><A href="sub1.htm">Wie is MPP</A></TD>
<TD><FONT color="#FFFFFF"> | </FONT><A href="sub2.htm">Wat doet MPP</A></TD>
<TD><FONT color="#FFFFFF"> | </FONT><A href="sub3.htm">Waar is MPP actief</A></TD>
</TR>
</TABLE>
</DIV>
<DIV id="Kinder_menu" name="Kinder_menu" class="homesub" style="display: none; background-color: #000000; width: 55%; ">
<TABLE>
<TR>
<TD><FONT color="#FFFFFF">&nbsp; </FONT><A href="sub1.htm">Overzicht kinderen</A></TD>
<TD><FONT color="#FFFFFF"> | </FONT><A href="sub2.htm">Zoek een kind</A></TD>
</TR>
</TABLE>
</DIV>
<DIV id="Projecten_menu" name="Projecten_menu" class="homesub" style="display: none; background-color: #000000; width: 55%; ">
<TABLE>
<TR>
<TD><FONT color="#FFFFFF">&nbsp; </FONT><A href="sub1.htm">Lopende projecten</A></TD>
<TD><FONT color="#FFFFFF"> | </FONT><A href="sub2.htm">Afgewerkte projecten</A></TD>
</TR>
</TABLE>
</DIV>
<DIV id="Donateur_menu" name="Donateur_menu" class="homesub" style="display: none; background-color: #000000; width: 55%;">
<TABLE>
<TR>
<TD><FONT color="#FFFFFF">&nbsp; </FONT><A href="sub1.htm">Word donateur</A></TD>
<TD><FONT color="#FFFFFF"> | </FONT><A href="sub2.htm">Opzeggen</A></TD>
</TR>
</TABLE>
</DIV>
<DIV id="Nieuws_menu" name="Nieuws_menu" class="homesub" style="display: none; background-color: #000000; width: 55%; ">
<TABLE>
<TR>
<TD><FONT color="#FFFFFF">&nbsp; </FONT><A href="sub1.htm">Nieuwsbrief</A></TD>
<TD><FONT color="#FFFFFF"> | </FONT><A href="sub2.htm">Oude nieuwsbrieven</A></TD>
<TD><FONT color="#FFFFFF"> | </FONT><A href="sub1.htm">Mailing list</A></TD>
</TR>
</TABLE>
</DIV>
<DIV id="Contact_menu" name="Contact_menu" class="homesub" style="display: none; background-color: #000000;margin-top: 0px; width: 55%; ">
<TABLE>
<TR>
<TD><FONT color="#FFFFFF">&nbsp; </FONT><A href="sub1.htm">Nederland</A></TD>
<TD><FONT color="#FFFFFF"> | </FONT><A href="sub2.htm">Nicaragua</A></TD>
</TR>
</TABLE>
</DIV>
</DIV>
<div id="rekensom" style="float:right; margin-top:20px; "><img src="http://www.gmt-design.nl/lynx/start/rekensommen/rekensom1.jpg"></img></div>
</div
></body>
</html>
[/code:1:b40e24d343]
[quote:dee34a557a="Lifelogger"]Oooh ja, nog één ding over je doctype. Je gebruikt nu nog transitional, maar probeer te werken met onderstaande doctype. Deze is veel stricter in het gebruik van Layers, etc. Transitional werd gebruikt als overgansfase van HTML naar XHTML en zal steeds meer verdwijnen. Dit kan later problemen op gaan leveren.
[code:1:dee34a557a]<!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" lang="nl" xml:lang="nl">
[/code:1:dee34a557a][/quote:dee34a557a]
Transitional wordt soms nog gebruikt om CSS te vermijden. Zo werkt het border-attribuut wel in Transitional, niet in Strict. Ondertussen is er trouwens ook een opvolger van XHTML 1.0 Strict, namelijk XHTML 1.1, met niet al te veel nieuws. Name-attribuut wordt id-attribuut, lang wordt xml:lang en er is een nieuwe collectie ruby-elements (vraag mij niet wat dat is :)).
Voor XHTML wordt deze doctype gebruikt:
[code:1:dee34a557a]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/code:1:dee34a557a]
Deze HTML-tag:
[code:1:dee34a557a]<html xmlns="http://www.w3.org/1999/xhtml">[/code:1:dee34a557a]
En éé, meta-tag is ook veranderd:
[code:1:dee34a557a]<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />[/code:1:dee34a557a]
OK. thanks for the info. Zal er eens induiken!
Ik zou geen XHTML 1.1 gebruiken, tenzij je precies weet waarom en je inderdaad XML-achtige zaken gaat doen.
XHTML 1.1 is [b:70afa0fae0]niet[/b:70afa0fae0] compatible met XHTML 1.0 en HTML4 en IE6 (en ook 7) ondersteunen het niet wanneer het als application/xhtml+xml wordt aangeboden.
Als je XHTML 1.1 als text/html aanbiedt heeft het geen enkele toegevoegde waarde, behalve een paar flinke hoofdpijn componenten en workarounds met forms e.d., dat HTML4 of XHTML1 een betere keus is.
referenties:
http://www.456bereastreet.com/archive/200512/beginners_should_start_with_html_not_xhtml/
http://www.webstandards.org/buzz/archive/2005_09.html#a000558
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(XHTML)
http://annevankesteren.nl/2004/12/xhtml-notes
Zo dat zijn nog eens reacties!
Nee idd, heb hier geen enorme ervaring mee, ben nog lerende.
Maar begreep idd al dat niet alles inline moest.
Ik ga even met jullie antwoorden puzzelen, bedankt!
[quote:de42a2b216="tennapel"]Ik zou geen XHTML 1.1 gebruiken, tenzij je precies weet waarom en je inderdaad XML-achtige zaken gaat doen.
XHTML 1.1 is [b:de42a2b216]niet[/b:de42a2b216] compatible met XHTML 1.0 en HTML4 en IE6 (en ook 7) ondersteunen het niet wanneer het als application/xhtml+xml wordt aangeboden.
Als je XHTML 1.1 als text/html aanbiedt heeft het geen enkele toegevoegde waarde, behalve een paar flinke hoofdpijn componenten en workarounds met forms e.d., dat HTML4 of XHTML1 een betere keus is.
referenties:
http://www.456bereastreet.com/archive/200512/beginners_should_start_with_html_not_xhtml/
http://www.webstandards.org/buzz/archive/2005_09.html#a000558
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(XHTML)
http://annevankesteren.nl/2004/12/xhtml-notes[/quote:de42a2b216]
IE schakelt dan over naar de text/html-modus, de rest gebruikt echte application/xhtml+xml.
Moeilijke XML-dingen. Niks van. In XHTML 1.1 zijn eigenlijk maar drie wijzigingen.
[quote:97e0669441="à la Mac"]Niks van. In XHTML 1.1 zijn eigenlijk maar drie wijzigingen.[/quote:97e0669441]
Misschien moet je een aantal van de links in een eerdere post lezen.
[quote:57e09ce843="à la Mac"] Transitional wordt soms nog gebruikt om CSS te vermijden. [/quote:57e09ce843]
Transitional werkt net zo goed met CSS. Dit is een loze opmerking en nog feitelijk onjuist ook. Ik heb het gevoel dat jij de klok wel hebt horen luiden a la Mac, maar geen idee hebt van waar de klepel hangt.
Lees dit (inmiddels verouderde) verhaal maar eens door: http://www.alistapart.com/stories/doctype/
[quote:919ca3179c="tennapel"][quote:919ca3179c="à la Mac"] Transitional wordt soms nog gebruikt om CSS te vermijden. [/quote:919ca3179c]
Transitional werkt net zo goed met CSS. Dit is een loze opmerking en nog feitelijk onjuist ook. Ik heb het gevoel dat jij de klok wel hebt horen luiden a la Mac, maar geen idee hebt van waar de klepel hangt.
Lees dit (inmiddels verouderde) verhaal maar eens door: http://www.alistapart.com/stories/doctype/[/quote:919ca3179c]
Ik weet zeker dat Transitional net zo goed met CSS werkt als Strict of 1.1. Maar vaak wordt Transitional gebruikt als het:
A. De CSS-kennis van de webdesigner te beperkt is
B. Als de browsers waar de site voor bestemd is CSS slechts gedeeltelijk of niet ondersteunt (zoals Dillo)
Sommige webdevelopers zijn natuurlijk te lui om een CSS-alternatief te zoeken voor hun HTML-code en laten het dan maar op Transitional staan…
[quote:7cf4742655="à la Mac"] Ik weet zeker dat Transitional net zo goed met CSS werkt als Strict of 1.1. Maar vaak wordt Transitional gebruikt als het:
A. De CSS-kennis van de webdesigner te beperkt is
B. Als de browsers waar de site voor bestemd is CSS slechts gedeeltelijk of niet ondersteunt (zoals Dillo)
Sommige webdevelopers zijn natuurlijk te lui om een CSS-alternatief te zoeken voor hun HTML-code en laten het dan maar op Transitional staan…[/quote:7cf4742655]
HAHAHAHAHAHA… o man… je snapt er werkelijk helemaal niets van; wel lollig 8)
Als jouw redenatie correct is, dan is Eric Meyer lui en heeft hij beperkte kennis van CSS… grinnik (de oplettende lezer zal zien dat de website van Eric Meyer, de Opper CSS Guru, een HTML4/Transitional Doctype heeft).
[quote:25a5ebeaee="tennapel"][quote:25a5ebeaee="à la Mac"] Ik weet zeker dat Transitional net zo goed met CSS werkt als Strict of 1.1. Maar vaak wordt Transitional gebruikt als het:
A. De CSS-kennis van de webdesigner te beperkt is
B. Als de browsers waar de site voor bestemd is CSS slechts gedeeltelijk of niet ondersteunt (zoals Dillo)
Sommige webdevelopers zijn natuurlijk te lui om een CSS-alternatief te zoeken voor hun HTML-code en laten het dan maar op Transitional staan…[/quote:25a5ebeaee]
HAHAHAHAHAHA… o man… je snapt er werkelijk helemaal niets van; wel lollig 8)
Als jouw redenatie correct is, dan is Eric Meyer lui en heeft hij beperkte kennis van CSS… grinnik (de oplettende lezer zal zien dat de website van Eric Meyer, de Opper CSS Guru, een HTML4/Transitional Doctype heeft).[/quote:25a5ebeaee]
Blijkbaar lui genoeg om hun site te vernieuwen :).
