[CSS/Dreamweaver] Navigationbar met overlappende div...

[Wijnbo]

Hallo, ik heb in dreamweaver een navigationbar met over-images gemaakt. Dit zijn lege plaatjes die onder elkaar een foto vormen, iedereen kent het principe wel. Aangezien deze plaatjes links worden, heb ik er dus een div over gepositioneerd met de volgende eigenschappen :

code:

width: 120px;
    height: 23px;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow:always;
    padding-top:5px;
    text-align: center;
    font-weight: b900;
    font-family: Tahoma;
    font-size: 14px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale  src='./images/120_30_trans.png');

Hierbij is 120_30_trans.png een transparant plaatje, wat dus als achtergrond wordt gebruikt.

Het probleem : De navigation bar werkt wel, met de lege stukken van de div. waar echter de tekst staat, werkt ie niet en springt het plaatje terug naar het standaard plaatje. Is hier wat aan te doen, of moet ik de tekst echt in het plaatje zetten en dan maar hopen dat de klant niet al te vaak iets wil wijzigen?

[Zoefff]

Kan je misschien een voorbeeldje online zetten? Ik snap nu niet precies wat je bedoeld. Sowieso lijkt me die "filter:progid:DXImageTransform.Microsoft.enz" niet echt een cross-browser oplossing...

[Wijnbo]

Zoefff schreef op zaterdag 19 februari 2005 @ 11:59:
Kan je misschien een voorbeeldje online zetten? Ik snap nu niet precies wat je bedoeld. Sowieso lijkt me die "filter:progid:DXImageTransform.Microsoft.enz" niet echt een cross-browser oplossing...

Heb het inmiddels opgelost, door alleen div's te gebruiker die als een soort van rollover image functioneren, geen navigatiebar.
Maar nu heb ik het volgde probleem : Lokaal doet de site het prima, maar online laad ie alleen van het eerste plaatje de "mouseover". Wat kan ik hier aan doen? Ik heb al gezocht op een of andere preloader, maar ik kom er niet uit. hier staat trouwens een testversie :

http://wijnbo.freeprohost.com/hiddink

(Sla het eerste gedeelte van de source maar over, das een banner van hen die niet werkt

[Zoefff]

Dat mouseoverplaatje, is dat gewoon het oranje vlak of moet er nog iets komen wat ik niet zie

Als het namelijk alleen om oranje vlakken gaat, dan is dit op een veel eenvoudiger manier op te lossen met een List en wat CSS.

[Wijnbo]

Zoefff schreef op zaterdag 19 februari 2005 @ 13:25:
Dat mouseoverplaatje, is dat gewoon het oranje vlak of moet er nog iets komen wat ik niet zie

Als het namelijk alleen om oranje vlakken gaat, dan is dit op een veel eenvoudiger manier op te lossen met een List en wat CSS.

Oranje vlak? Het is een oranje versie van het originele plaatje... check rechtsonderin de hoek maar, daar schijnt nog een klein stukje door van het achtergrond plaatje...de rest v/d plaatjes worden echter niet geladen om de een of andere redenen..

[Zoefff]

Dan alsnog is dit veel makkelijker te doen. Heb even snel een voorbeeldje gemaakt met een kleurtje als mouseover, maar dat kan je natuurlijk ook vervangen door een plaatje.

Cascading Stylesheet:

body {
    font-family:Tahoma, Verdana, Arial;
    font-size:12px;
}
#div_menu {
    width:120px;
    height:338px;
    background-image:url(bg.gif);
}
#div_menu ul {
    list-style:none;
    text-align:center;
    margin-left:0px;
    padding-left:0px;
    padding-top:15px;
    font-weight:bold;
}
#div_menu li {
    height:25px;
    display:block;
}
#div_menu a {
    padding-top:5px;
    padding-bottom:5px;
    color:#000000;
    text-decoration:none;
    height:15px;
    width:120px;
    display:block;
}
#div_menu a:hover {
    background-color:#FF9933;
    display:block;
}

en

HTML:

<div id='div_menu'>
    <ul>
        <li><a href='#'>Grondwerk</a></li>
        <li><a href='#'>Mobiele Recycling</a></li>
        <li><a href='#'>Afvalverwerking</a></li>
        <li><a href='#'>Containers</a></li>
        <li><a href='#'>Transport</a></li>
        <li><a href='#'>Grondstoffen</a></li>
        <li><a href='#'>Contact</a></li>
    </ul>   
</div>

Een voorbeeld vind je op mijn server, http://zoefff.gotdns.com/got/menu_list_css/menu.htm

[Zoefff]

Als je in plaats van een kleurtje een plaatje wilt, moet je dus alle li elementen een aparte class meegeven (<li class='li_1'> ofzo), en in je css de plaatjes aangeven:

Cascading Stylesheet:

.li_1 a:hover {
    background-image:url(plaatje_1.gif);
    display:block;
}

ofzo

[Wijnbo]

Zoefff schreef op zaterdag 19 februari 2005 @ 13:58:
Als je in plaats van een kleurtje een plaatje wilt, moet je dus alle li elementen een aparte class meegeven (<li class='li_1'> ofzo), en in je css de plaatjes aangeven:

Cascading Stylesheet:

.li_1 a:hover {
    background-image:url(plaatje_1.gif);
    display:block;
}

ofzo

Dank alvast, code is nu 10 x zo kort, resultaat op www.hiddinktest.tk, maar mn site laadt nog steeds niet alle plaatjes aan het begin in. Hoe kan ik dit doen? (preloader? en zo jah, hoe)

[Zoefff]

Het probleem is niet dat ze niet worden geladen, maar dat die plaatjes helemaal niet bestaan op je server: http://wijnbo.freeprohost...mages/menu_05_empty_o.jpg

[Wijnbo]

Zoefff schreef op zaterdag 19 februari 2005 @ 14:45:
Het probleem is niet dat ze niet worden geladen, maar dat die plaatjes helemaal niet bestaan op je server: http://wijnbo.freeprohost...mages/menu_05_empty_o.jpg

plaatjes extenties : .JPG en .jpg

moet volgende keer beter opletten

[ Voor 10% gewijzigd door Wijnbo op 19-02-2005 15:26 ]

[Zoefff]

Joah

Als ik jou was zou ik de a:hover background kleur wel even oranje maken in plaats van zwart. Nu krijg je als je over de menuitems heen gaat, en het plaatje even wat langzamer laad, een groot zwart vlak te zien. Als je dit oranje maakt, valt het al minder op dat het plaatje nog niet geladen is.

Officieel is dit overigens nog beter op te lossen door gewoon een png met alpha transparancy te nemen, maar dat word helaas niet helemaal correct ondersteund door IE. Totdat IE dit wel doet is dit een goede oplossin

[Wijnbo]

Zoefff schreef op zaterdag 19 februari 2005 @ 15:39:
Joah

Als ik jou was zou ik de a:hover background kleur wel even oranje maken in plaats van zwart. Nu krijg je als je over de menuitems heen gaat, en het plaatje even wat langzamer laad, een groot zwart vlak te zien. Als je dit oranje maakt, valt het al minder op dat het plaatje nog niet geladen is.

Officieel is dit overigens nog beter op te lossen door gewoon een png met alpha transparancy te nemen, maar dat word helaas niet helemaal correct ondersteund door IE. Totdat IE dit wel doet is dit een goede oplossin

Ik zat er ook eerst aan te denken om een 50 % oranje transparancy plaatje als hover te gebruiken, zoals ik dat op de rest van de site doe, maar heb het toch maar niet gedaan ivm compatibiliteitsproblemen..

[Zoefff]

Er bestaan wel "behaviours" die het mogelijk maken om alpha transparancy vanaf IE5.5 te gebruiken http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html, maar een echte oplossing is het natuurlijk niet, blijft een workaround.

[SuperRembo]

Interessant, ongeveer zoals ik dat ook heb gedaan http://forum.fok.nl/topic/671081

[Zoefff]

Hahaha