[css] hover binnen absolute block

[Aesculapius]

Hallo allen,

Ik zit me mateloos te irriteren aan - uiteraard - het ontzettend kinderachtige gedrag van IE... Google is vanavond kennelijk niet mijn vriend en ook hier op GoT kom ik niet precies tegen wat ik zoek; [CSS] div's positioneren en mee laten rekken komt wel in de buurt met wat duidelijke beschrijvingen over het position-element, echter iedereen lijkt zich tegen te spreken...

Mijn situatie: een container div met twee aparte divs; de eerst bevat main-content en is relative gepositioneerd (5px top en 5px left). De tweede (het submenu) moet rechts naast deze main-div komen, en is dus absolute gepositioneerd.

Binnen deze laatste div zitten weer een aantal nieuwe div's, elke submenu-item één. Deze individuele div's hebben ook een :hover klasse, waarmee ik dus de hover effecten wil afvangen.

Nu de frustratie: zolang de submenu-div een position: absolute heeft, werkt de :hover klasse niet. Maak ik van de submenu-div een static positioning, dan gaat die hover prima, maar staat mijn submenu dus onder mijn maindiv...

code:

<div class="container">
  <div class="mainTxt">
    blabablalabla
  </div>
  <div class="submenu">
    <div class="smenuButton">button1</div>
    <div class="smenuButton">button2</div>
    <div class="smenuButton">button3</div>
    <div class="smenuButton">button4</div>
  </div>
</div>

op die manier dus; mijn css:

code:

div.submenu{
  position:absolute;
  background-image: url('../IMG/lightbulb.png');
  background-repeat: no-repeat;
  background-position: right;
  color: #000000;
  width: 225px;
  height: 180px;
  top: 0px;
  right: 0px;
  /* eek MS IE hack */
  _right: 25px;
  _height:1%;
  _background-image: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/dev1/****/includes/IMG/lightbulb.png', sizingMethod='size');
  /* eek MS IE hack */  
}

div.smenuButton{
  position: relative;
  color: #FFFFFF;
  font-size: x-small;
  height: 18px;
  width: 190px;
  display: block;
  padding-left: 35px;
  background-image: url('../IMG/pijltje.png');
  background-repeat: no-repeat;
  /* eek MS IE hack */ 
  _height:1%;
  _background-image: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/dev1/*****/includes/IMG/pijltje.png', sizingMethod='crop');
  /* eek MS IE hack */  
}

div.smenuButton:hover{
  cursor: pointer;
  color: #919191;
  background-image: url('../IMG/pijltje_hover.png');
  background-repeat: no-repeat;
  /* eek MS IE hack */ 
  _height:1%;
  _background-image: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/dev1/*****/includes/IMG/pijltje_hover.png', sizingMethod='crop');
  /* eek MS IE hack */    
}

Heeft iemand toevallig énig idee?

edit: voor de duidelijkheid: zo http://sophorus.mine.nu/images/ikhaatie.jpg laat mijn grote vriend Firefox hem zien

[ Voor 1% gewijzigd door Aesculapius op 06-09-2007 00:19 . Reden: overzichtsimg toegevoegd ]

[Tom-Eric]

Volgens mij werkt :hover alleen op <a> elementen in Internet Explorer. Aangezien je hier bezig bent met een menu lijkt het me zowiezo logischer dat je daar links voor gebruikt? Je zou dan in je CSS die links een display: block; kunnen geven, waardoor je ze net zo kan stylen als je <div>jes nu.

Zowiezo is het misschien beter om hier, uit semantische overwegingen, gebruik te maken van een lijst (<ul>) met items (<li>), waar dan die links inkomen, omdat dat in feite is wat je hier op een iets lelijkere manier probeert. Daarbij wil ik je ook nog aanrade om IE specifieke hacks in een aparte stylesheet te zetten en deze met conditional comments te includen.

[sopsop]

Tom-Eric schreef op donderdag 06 september 2007 @ 08:01:
Volgens mij werkt :hover alleen op <a> elementen in Internet Explorer.

Aangezien je geen versie van IE meldt, gaan we uit van de laatste versie, en dan klopt je bewering niet.

[Little Penguin]

Is het een idee om het submenu position relative te geven en dat submenu daarna in een absoluut gepositioneerde div te plaatsen? (Ik heb het niet getest overigens).

Kijk verder even naar de 2e alinea van Tom-Eric zijn reactie t.b.v. de hacks en het gebruik van een lijst (ul,li) ipv de div-jes...

[Aesculapius]

ik gebruik voor alle IE tekortkomingen de volgende include aan het begin van mijn html-file:

code:

<!--[if lt IE 7.]>
    <script src="./includes/JS/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->

zie: http://dean.edwards.name/IE7/

die lost onder andere het :hover probleem op waar ik inderdaad mee zit (IE6).

Little Penguin: De situatie is momenteel dat de menubuttons als relative div's binnen het absoluut gepositioneerde submenu block zitten, maar dat wil dus niet

Ik zal eens wat gaan knoeien met die <ul><li> items; ik begrijp dat dat netter is, maar heb het altijd wat minder begrepen... moet ik ze dan stylen op id ofzo ipv op klasse?

[Little Penguin]

Aesculapius schreef op donderdag 06 september 2007 @ 09:58:
Little Penguin: De situatie is momenteel dat de menubuttons als relative div's binnen het absoluut gepositioneerde submenu block zitten, maar dat wil dus niet

Als je de hovers wel werken als het submenu een position:relative heeft dan kun je deze submenu het best verpakken in een nieuwe div en die nieuwe die position:absolute geven.

HTML:

<div class="container">
  <div class="mainTxt">
    blabablalabla
  </div>
  <div class="submenu-abs">
      <div class="submenu-rel">
      <div class="smenuButton">button1</div>
      <div class="smenuButton">button2</div>
      <div class="smenuButton">button3</div>
      <div class="smenuButton">button4</div>
    </div>
  </div>
</div>

Ik zal eens wat gaan knoeien met die <ul><li> items; ik begrijp dat dat netter is, maar heb het altijd wat minder begrepen... moet ik ze dan stylen op id ofzo ipv op klasse?

Het verhaal van de div's vs de ul/li elementen is puur semantisch. Als je ul/lis gebruikt kun je inderdaad aan met minder classes.

Je HTML zou er dan zou uit kunnen komen te zien (gedeeltelijk aangepast, daar waar het menu-lijstje geplaatst is...

HTML:

<div class="container">
  <div class="mainTxt">
    blabablalabla
  </div>
  <div class="submenu-abs">
      <ul>
        <li>button1</li>
        <li>button2</li>
        <li>button3</li>
        <li>button3</li>
    </ul>
  </div>
</div>

Maar dat heeft verder niets met je probleem te maken en als je daar meer van wilt weten dan kun je denk ik beter het internet eens afstruinen naar 'semantic webdesign' of een vergelijkbare zoekkreet.

[Verwijderd]

sopsop schreef op donderdag 06 september 2007 @ 09:30:
[...]

Aangezien je geen versie van IE meldt, gaan we uit van de laatste versie, en dan klopt je bewering niet.

Ook in IE7 werkt de hover niet op een div hoor.

[Aesculapius]

het helpt me allemaal niet zo veel verder helaas
Het toevoegen van een wrapper-div die de menu-items in een relative-div gooien levert hetzelfde resultaat; waarschijnlijk omdat uiteindelijk alsnog die absolute div eromheen zit.
Ook de <ul><li> manier heb ik even uitgeprobeerd maar zodra ik met links werk, hovered hij alleen als ik precies over de letters ga en dus niet in bijv. het binnenste van een O.

Grrr...waarom ook ie

[TeeDee]

Aesculapius schreef op vrijdag 07 september 2007 @ 13:02:
Ook de <ul><li> manier heb ik even uitgeprobeerd maar zodra ik met links werk, hovered hij alleen als ik precies over de letters ga en dus niet in bijv. het binnenste van een O.

Hiervoor kan je 2 dingen doen:

csshover.htc (zoek maar op google, genoeg te vinden )
of
maak van je anchors block-level elementen, en geef deze een width/height van het omringende list-element. Op die manier lijkt het erop als je een hover op je li hebt, terwijl deze eigenlijk op je anchor zit. Extra: je zal ongetwijfeld tegen ander geneuzel (margins, paddings) op lopen.

Als laatste opmerking: het valt me op dat mensen die IE7 van Dean Edwards gebruiken tegen vage problemen op lopen.

[Padschild]

TeeDee schreef op vrijdag 07 september 2007 @ 14:55:
[...]
maak van je anchors block-level elementen, en geef deze een width/height van het omringende list-element. Op die manier lijkt het erop als je een hover op je li hebt, terwijl deze eigenlijk op je anchor zit. Extra: je zal ongetwijfeld tegen ander geneuzel (margins, paddings) op lopen.

Voorbeeldje zoals ik het op mijn website gebruik:

HTML:

<div id="menu">
    <ul>
        <li><a href="../" class="menu_home">Home</a></li>
    </ul>       
</div>

Cascading Stylesheet:

#menu a 
{ 
background-position: top;       /* background 1e state instellen */
background-repeat: no-repeat; 

float: left;                /* naast elkaar plaatsen */

height: 0px;            /* Tekst laten verdwijnen */
width: 0px; 
overflow: hidden;

margin-left: 0px;           /* voor design */

padding-top: 20px;          /* hoogte van een state instellen, zodat de background zichtbaar wordt, maar de tekst niet */
}


#menu li 
{ 
display: inline;            /* design zooi */
float: left; 
padding-left: 1px; 
margin: 0px 0px 0px 10px;
}

#menu ul 
{ 
float: left;                /* weer design zooi */
list-style: none; 
margin: 3px 0px 0px 0px; 
padding: 0px; 
}

#menu a.menu_home {
background-image: url('images/menu/home.gif');
width: 58px;            /* de breedte van de gif instellen. */
}

#menu a:hover
{ 
background-position: center -20px;  /* state verschuiven bij hover, voila */
}

Hier zit zelfs een hover in, om een nieuw 'plaatje' te laden. De tekst is semantisch en voor een zoekmachine te zien, maar aan de front-end zijde niet. Wat er gebeurt is dat de tekst "verdwijnt" door een hoogte van 0 in te stellen, maar wel een padding-top vandezelfde grootte als de 1e state van de gif. Hierdoor wordt de background (de 1e state) zichtbaar. In dezelfde gif zit ook een state van hover verwerkt, waardoor ik hem gewoon met de hoogte van de padding-top moet verschuiven om van state te veranderen. Dit gebeurt bij de #menu a:hover.

Live voorbeeld is te vinden op de link in mijn signature.

Uiteraard zul je wel je eigen listitems moeten aanpassen, maar hopelijk kan het je wat helpen om je hovers toch voor elkaar te krijgen met behulp van de anchor elements

[ Voor 17% gewijzigd door Padschild op 07-09-2007 15:29 . Reden: Comments in de CSS code bij gezet ]

[Aesculapius]

bedankt heren....leuk voer voor het weekend :-)