[xhtml+css] text in div niet selecteerbaar

[SURFivor]

http://michelos.nl/wijwandelengraag/

ik heb in een container twee divjes gemaakt die naast elkaar staan. in FF is de linkerdiv op de één of andere manier geblokkeerd. als ik er een link in plaats, is deze niet clickable. aangezien ik nog weinig ervaring heb met xhtml+css, weet ik dus niet wat hiervan de oorzaak is.

[André]

Er staat vermoedelijk een layer of plaatje overheen waardoor de linkerdiv op de achtergrond staat. Ook in IE gaat het selecteren trouwens raar.

[ Voor 19% gewijzigd door André op 25-04-2005 21:34 ]

[faabman]

Wanneer je in je web developer toolbar op "Display Topographic Information" klikt dan zie je het probleem...

De container met je content erin is over het menu geplaatst...

[SURFivor]

code:

<div id="container">
      <div id="zijkant">
        <p>nieuws<br />
        wandelverslagen<br />
        wandelkalender<br />
        smoelenboek<br />
        loopwonder vd maand<br />
        links<br />
        gastenboek</p>
        <p>inloggen<br />
        registreren</p>
      </div>
      <div id="inhoud">
        <h2>Zeemansloop</h2>
        <p>blablabla</p>
        <p><em><a href="verslagen/verslag.php?id=2" title="Zeemansloop">lees verder</a></em></p>
        <h2>Bloesemtocht</h2>
        <p>blablabla</p>
        <p><em><a href="verslagen/verslag.php?id=1" title="Bloesemtocht">lees verder</a></em></p>
      </div>

code:

#container {margin: 0; padding: 0; width: 650px; position: relative;}
#zijkant {width: 150px; background: transparent; position: absolute;}
#inhoud {margin: 0; padding-left: 150px; display: block; background: transparent; width: 500px; position: absolute;}

ik zie al ongeveer wat ik fout doe. die padding-left moet worden vervangen door left. maar dan nog loopt die pagina nog niet soepeltjes. in IE selecteert ie heel moeilijk...

[ Voor 24% gewijzigd door SURFivor op 25-04-2005 21:45 ]

[Dennis]

IE selecteert altijd moeilijk met absolute positionering, dus daar kijk ik niet van op.

[André]

Dennis schreef op maandag 25 april 2005 @ 22:26:
IE selecteert altijd moeilijk met absolute positionering, dus daar kijk ik niet van op.

Dat is een heel ander probleem en heeft hier niets mee te maken

[Dennis]

Hij doet het nu goed bij mij trouwens.

[SURFivor]

klopt, hij doet het nu idd goed.

een ander vraagje, waarom verschuift IE de layers één pixel naar links?

[André]

SURFivor schreef op maandag 25 april 2005 @ 22:56:
klopt, hij doet het nu idd goed.

een ander vraagje, waarom verschuift IE de layers één pixel naar links?

Hoe bedoel je? Welke layers staan 1px te ver naar links? Of is het zo dat ze in FF 1px te ver naar rechts staan? Hou je rekening met borders/paddings/margins?

[SURFivor]

als ik de pagina in IE bekijk, zie ik dat het bovenste plaatje rechts een wit lijntje heeft. en links komt ie iets over de omlijning heen. alsof hij een tikje naar rechts is verschoven. margin en padding staan op 0 (margin: auto)

[André]

SURFivor schreef op maandag 25 april 2005 @ 23:05:
als ik de pagina in IE bekijk, zie ik dat het bovenste plaatje rechts een wit lijntje heeft. en links komt ie iets over de omlijning heen. alsof hij een tikje naar rechts is verschoven. margin en padding staan op 0 (margin: auto)

Dat komt door deze regel uit #navigatie:

code:

background: #f7f7f7 url(header.jpg) center top fixed no-repeat;

IE centreert de image dus net iets verder naar links
Resize je window maar eens en zie dat hij soms wel en soms niet goed staat

[ Voor 8% gewijzigd door André op 25-04-2005 23:09 ]

[SURFivor]

André schreef op maandag 25 april 2005 @ 23:08:
IE centreert de image dus net iets verder naar links
Resize je window maar eens en zie dat hij soms wel en soms niet goed staat

en hoe kan ik dit oplossen?

ik kan natuurlijk gewoon een plaatje in de html-pagina zelf zetten maar ik wil persé css-designen.

[André]

Door de background niet te centreren, hij is net zo breed als de layer waar hij in staat dus centreren is overbodig.

[SURFivor]

nu heb ik het volgende gedaan

code:

#navigatie {
   margin: 0;
   padding: 0;
   height: 150px;
   width: 650px;
   position: relative;
   background: #009966 url(header.jpg);
}

en dan nog doet ie het niet goed...