[css] Navigatie m.b.v. UL over plaatje, IE werkt niet mee

[Zoefff]

Voor mijn toekomstige fotosite / blog wil ik een simpele, duidelijke manier om te navigeren door de foto's. Daarvoor heb ik nu de navigatie over de foto heengelegd, klik je op het linkerdeel dan ga je naar de vorige foto, klik je op het rechterdeel dan ga je naar de volgende foto. Het probleem is echter dat het wel werkt in Fx, maar níet in IE (what's new ).

Ik heb een UL met 2 LI's naast elkaar (beiden 50%) over het plaatje heen gelegd, en in die LI's een A als block en 100% * 100%. Wanneer je over de A heengaat, krijgt deze een achtergrondplaatje met een pijltje erin.

Relevante code:

Cascading Stylesheet:

#image {
    width:800px;    
    position:relative;
}
#nav {
    position:absolute;
    margin:0px;
    padding:0px;
    height:100%;
    width:100%;
}
#nav a {
    display:block;
    height:100%;
    width:100%;
}
#nav a:focus {
    border:0px;
}
#nav a span {
    display:none;
}
#nav li {
    list-style-type:none;
    height:100%;
    width:50%;
}
#nav .prev {
    float:left;
}
#nav .prev a:hover {
    background-image:url(prev.png);
    background-repeat:no-repeat;
    background-position:bottom left;
}
#nav .next a:hover {
    background-image:url(next.png);
    background-repeat:no-repeat;
    background-position:bottom right;
}

HTML:

<div id="image">
    <ul id="nav">
        <li class="prev"><a href="#"><span>Previous</span></a></li>
        <li class="next"><a href="#"><span>Next</span></a></li>
    </ul>
    <img src="DSC_0729.jpg" alt="">
</div>

Een online voorbeeld vind je op http://zoefff.area61server.nl/testzut/foto_nav/foto_nav.htm .

Hopenlijk heeft iemand een idee hoe ik dit op kan lossen. Ik ben al in de weer geweest met de z-index, maar dat heeft tot nu toe nog niets opgeleverd. Misschien is het wel de oplossing, maar gebruik ik verkeerde combinaties. Misschien ligt het wel aan iets heel anders

Let niet op de knullige manier van borders maken, die heb ik er snel aan toegevoegd om het resultaat te zien, dat kan natuurlijk netter.

[Sappie]

z-index is gaar in IE.. Het is vaak een kwestie van wat aankloten is mijn ervaring.. zal eens even kijken

heb je mss een rarretje met de html css en de plaatjes.. is wat eenvoudiger aankloten, krijg het probleem ff niet zo 123 gereconstrueerd dmv toepassen van achtergrondkleurtjes

edit: thnx.. enne mjah ik was te lui

[ Voor 56% gewijzigd door Sappie op 17-01-2006 13:58 ]

[Zoefff]

[list]• http://zoefff.area61server.nl/testzut/foto_nav/foto_nav.htm
• http://zoefff.area61server.nl/testzut/foto_nav/prev.png
• http://zoefff.area61server.nl/testzut/foto_nav/next.png

[Sappie]

het lijkt erop dat IE de width en height van 100% niet begrijpt voor de list met id = 'nav' of deze iig niet goed overneemt van de div met id = "image" (is dit trouwens wel normaal bij absoluut gepositioneerde zut die immers uit de flow worden gehaald). Verder gaat opera ook niet met je site om zoals je zou willen.

ik kijk nog ff verder naar een oplossing.

edit: verder.. zijn de afmetingen van de foto's altijd hetzelfde?

[ Voor 12% gewijzigd door Sappie op 17-01-2006 14:08 ]

[Redshark]

Ik zit ook even te spelen, ik vind dit eigenlijk erg mooi als navigatie.
Ik heb even snel de display:none weggehaald bij #nav a span en dan werkt er in IE in ieder geval iets. Weliswaar niet goed, maar het is een begin. Ik zoek netjes verder hoor

[Zoefff]

Nee, de afmetingen zijn niet altijd hetzelfde, helaas. Ik ben echter wel bereid om de CSS per foto opnieuw te genereren, zoveel werk is dat niet, en als het de enige oplossing is door de afmetingen er fixed in te zetten.. tsja...

[Redshark]

Toen ik jouw borders net aanzette en in IE keek zag ik iig dat de LI niet juist werd weergegeven. Ik heb je CSS iets aangepast:
#nav li {
display:inline;
list-style-type:none;
height:100%;
width:50%;
}
Enkel de width en height gaan nu niet lekker bij bij.

[Sappie]

Zoefff schreef op dinsdag 17 januari 2006 @ 14:12:
Nee, de afmetingen zijn niet altijd hetzelfde, helaas. Ik ben echter wel bereid om de CSS per foto opnieuw te genereren, zoveel werk is dat niet, en als het de enige oplossing is door de afmetingen er fixed in te zetten.. tsja...

Als je de afmetingen van de 'image' div specificeert dan is het niet meer zo'n probleem om het goed te krijgen iig. Wanneer je deze niet specificeert krijg ik het niet werkend in zowel IE (wel met expressions) als Opera.

edit:

onderstaande voorbeeld illustreert je probleem eigenlijk zo'n beetje:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">    
    <style type="text/css">
        #box {
            position: relative;         
            border: 1px solid black;
        }
        
        #box img { 
            display: block; 
            width: 600px;
            height: 300px;
            background: yellow;
        }
        
        #box div {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            left: 0;
            background: red;
        }
    
    </style>
</head>
<body>
    <div id="box">
        [img]"#">
        <div></div>
    </div>
</body>
</html[/img]

Wanneer er geen afmetingen zijn gespecificeerd voor de div met id "box" doet geen enkele browser logischerwijs (standaard breedte van een block level element is nl 100% zoals ook te zien) wat je wilt.

Specificeer je enkel een breedte dan gaat het in firefox goed. Specificeer je box als zijnde een "inline-block" element (wat niet ondersteund wordt door ff afaik) dan doet opera iets vaags wat er qua afmetingen op lijkt.

Specificeer je tenslotte zowel breedte als hoogte dan doen alle browsers wel wat je wilt.

Ik heb nu ff geen tijd om er verder naar te kijken, maar misschien is het wat handiger proberen met deze testcase. Ook heb ik nog gekeken naar javascript om de afmetingen mee te specificeren.. dit gaf op een vage manier ook het gewenste resultaat niet.

nog een edit: ook width / height: inherit voor de absoluut gepositioneerde box werkt slechts in Opera (=enig browser die het ondersteunt?)

[ Voor 82% gewijzigd door Sappie op 17-01-2006 15:11 ]

[crisp]

Het is te fixen met een stukje javascript:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">    
    <style type="text/css">

        body {
            background-color: #F5F5F5;
        }
        #container {
            width: 800px;
            margin: 100px auto 0px auto;
        }
        #image_container {
            width: 800px;
            padding: 0px 20px;
            margin: 0px auto;
            background-color: #FFF;
        }
        #image_top {
            background-image: url(border_top.png);
            height: 20px;
            width: 840px;
        }
        #image_bottom {
            background-image: url(border_bottom.png);
            height: 20px;
            width: 840px;
        }
        #image {
            position: relative;
            width: 800px;
        }
        #image #nav {
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
            padding: 0;
            margin: 0;
            background: url(none.png); /* IE needs this */
        }
        #image #nav li {
            float: left;
            width: 50%;
            height: 100%;
        }
        #image #nav li a {
            display: block;
            width: 100%;
            height: 100%;
        }
        #image #nav li.prev a:hover {
            background: url(prev.png) no-repeat bottom left;
        }
        #image #nav li.next a:hover {
            background: url(next.png) no-repeat bottom right;
        }
        #image #nav li a span {
            display: none;
        }

    </style>
    <script type="text/javascript">

        function fixNav(img)
        {
            var nav = document.getElementById('nav');
            if (nav)
            {
                nav.style.height = img.height + 'px';
                nav.style.width = img.width + 'px';
            }
        }

    </script>
</head>
<body>
    <div id="container">
        <div id="image_top"></div>
        <div id="image_container">
            <div id="image">
                <ul id="nav">
                    <li class="prev"><a href="#"><span>Previous</span></a></li>
                    <li class="next"><a href="#"><span>Next</span></a></li>
                </ul>
                <img src="DSC_0729.jpg" onload="fixNav(this)">
            </div>
        </div>
        <div id="image_bottom"></div>
    </div>
</body>
</html>

Let op de standaard background-image die ik al opgeef voor #nav - IE heeft dit nodig (kan gewoon een transparant plaatje zijn).
Note dat IE sowieso bij een hover altijd de background-images opnieuw zal downloaden - er is geen workaround voor die bug (behalve werken met images ipv background-images).

[Zoefff]

Jeej \o/

Het werkt nu, maar zeg niet hoe

Jouw (crisp) oplossing is inderdaad wat ik ook in m'n hoofd had, alleen was ik van plan om dan maar met PHP verschillende items een fixed-height mee te geven. De javascript oplossing is natuurlijk veel slimmer. Maar, dan ben je er nog niet, IE heeft nog een verassingen in petto

Het achtergrondplaatje word namelijk pas weergegeven als je over tekst in het a-element hovert, ondanks dat het een block-element is. Daarna kan je wel overal hoveren, alsof de boel eerst geactiveerd moet worden? Oplossing was in ieder geval om de hover aan de li te hangen (met behaviour zodat IE het ook snapt), dan werkt het wel.

Waar de standaard background-image voor #nav voor is begrijp ik niet helemaal? Het fixt bovenstaand probleem niet namelijk? Laat maar. Dat plaatje is blijkbaar ook nodig. Het maakt overigens niet uit of het een bestaand plaatje is of niet

[ Voor 8% gewijzigd door Zoefff op 18-01-2006 10:47 ]