[FIR] Werkt niet in een UL LI?

[Verwijderd]

Het probleem in grove lijnen, de tekst in de <li> tags maakt de boel onnodig breed. Door de <span> geheel op "display:none;" te zetten wordt zo'n beetje het hele zaaktje verwijderd.

Als ik de originele <h1><span... etc. probeer zoals op de onderstaande site beschreven, dan werkt het wel. Maar ik wil mijn menu eigenlijk kwijt in een <UL>

http://www.stopdesign.com/also/articles/replace_text/


Werkt dit gewoon niet vanwege een of andere feature in IE en Mozilla? En als dat het geval is, wat is een goede oplossing?

Cascading Stylesheet:

    body { margin: 0; text-align: center; }
    h1 { display: none; }
    #wrap { width: 720px; margin: 0 auto; padding: 0; text-align: left; }
    
    #top_menu { 
        background: url(gfx/bg_header.gif) no-repeat; 
        margin: 0; 
        width: 720px; height: 80px; 
        text-align: right; 
    }
        #top_menu ul { 
            position: relative; 
            top: 60px; 
            display: inline; 
            list-style-type: none; 
            margin: 0; padding: 0; 
        }
        #top_menu ul li { display: inline; }
        #top_menu ul li a { text-decoration: none; }
        #top_menu ul li div a span { display: none; }

        #top_menu ul li div.home a { 
            background: url(gfx/menu_home_up.gif) no-repeat; 
            width: 33px; 
            height: 20px; 
        }
        #top_menu ul li div.home a:hover { 
            background: url(gfx/menu_home_down.gif) no-repeat; 
        }

En de HTML

HTML:

<div id="wrap">

    <h1>Een Homepage</h1>

    <div id="top_menu">
        <ul>
            <li><div class="home"><a href="#home"><span>Home</span></a>
                </div></li>
            <li><div class="home"><a href="#home"><span>onderdeel01</span></a>
                </div></li>
            <li><div class="home"><a href="#home"><span>onderdeel02</span></a>
                </div></li>
            <li><div class="home"><a href="#home"><span>nog een onderdeel03</span></a>
                </div></li>
            <li><div class="home"><a href="#home"><span>en de laatste</span></a>
                </div></li>
        </ul>
    </div>

</div>

[Verwijderd]

bij de <li> tag kan je ook de margin en padding verkleinen, waarmee je het probleem waarschijnlijk oplost. Hier gebruik je het alleen bij de <ul> tag.

[Bosmonster]

Sorry, maar vraag het me af: wat is [FIR]

[ Voor 29% gewijzigd door Bosmonster op 03-04-2004 00:41 ]

[MAZZA]

Bosmonster schreef op 03 april 2004 @ 00:40:
Sorry, maar vraag het me af: wat is [FIR]

Fahrner Image Replacement denk ik...

[T-MOB]

FIR staat voor Fahrner Image Replacement. Zie ook: A list apart. Het komt neer op image replacement technieken met behup van CSS ipv Javascript.

[Bosmonster]

MAZZA schreef op 03 april 2004 @ 00:58:
[...]

Fahrner Image Replacement denk ik...

Ik zie het nu in het originele document... afdeling interessante termen

[ Voor 7% gewijzigd door Bosmonster op 03-04-2004 01:04 ]

[MAZZA]

Bosmonster schreef op 03 april 2004 @ 01:01:
[...]


Ik zie het nu in het originele document... afdeling interessante termen bedenken voor doodnormale dhtml

Mwah is puur css En Fahrner is diegene die het verzonnen heeft. Is ie bekend mee geworden da's duidelijk

[Bosmonster]

MAZZA schreef op 03 april 2004 @ 01:04:
[...]

Mwah is puur css En Fahrner is diegene die het verzonnen heeft. Is ie bekend mee geworden da's duidelijk

Valt dan wel weer mee.. had er nog nooit van gehoord

[chris]

En het leukste van FIR is dat het idee heel mooi en puur is, maar het in de praktijk niet werkt waar het eigenlijk voor bedoeld is...

Wat wel een (blijvend?) voordeel is: je mark-up wordt er simpel door. Hier een paar noties over FIR: ala

[crisp]

FIR is handig om voor bepaalde mediatypes danwel een achtergrondplaatje, dan wel een tekst te laten zien.

[Verwijderd]

Heej mijn topic hooghouden he? Ik reageer maandag nog eventjes als ik weer op m'n werk ben.

FIR is inderdaad dat Fahrner Image Replacement gebeuren. Op zich een aardige techniek, lekker simpel, en je code blijft overzichtelijk. Maarja, dat staat wel te lezen op ALA (A List Apart)

Ik probeer nu eigenlijk voor de commerciele websites dit box gedoe te gebruiken, vooral in kleine sites waar nog wat tijd te winnen valt op andere onderdelen van de site (programmeren) zodat ik meer tijd kan steken in dit uitzoeken.

Grootste voordeel tot nu toe is eigenlijk dat de code verdomd overzichtelijk blijft.

1000x makkelijker om in te werken.

En het kost me nu denk ik minder tijd om een basis template te bouwen dan voorheen met tables en zooi

Anyway... tot maandag