8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)
  • Q:
    Bijdrager
    Pivni Pes

    [CSS] Menu in IE wordt niet corect weergegeven.

    Ik ben aardig ver gevorderd met mijn site, de site doet het vrij goed in verschillende browsers.
    Alleen het menu gaat in IE de fout in, het zal wel weer iets kleins zijn, maar ik kijk er denk ik over hen.

    Firefox & Safari:

    Internet Explorer:

    [code:1:637f2420c4]<div id="headermenu"> <? // Start headermenu ?>
    <ul id="menu">
    <li class="menu-l"></li>
    <li><a class="home" href="index.php"></a></li>
    <li><a class="catalogus" href="#"></a></li>
    <li><a class="keramiek" href="keramiek.php"></a></li>
    <li><a class="glas" href="glas.php"></a></li>
    <li><a class="contact" href="contact.php"></a></li>
    <li class="menu-r"></li>
    </ul>
    </div> <? // Einde headermenu ?>[/code:1:637f2420c4]

    CSS:
    [code:1:637f2420c4]div#headermenu
    {
    width:768px;
    margin: 0px auto;
    padding: 5px;
    }

    ul#menu li
    {
    padding: 0;
    margin: 0;
    list-style: none;
    }

    .menu-l
    {
    background-image: url(../images/menu-l.png);
    width: 140px;
    height: 27px;
    float: left;
    }

    .home
    {
    background-image: url(../images/menu-home-a.png);
    width: 80px;
    height: 27px;
    float: left;
    }

    .catalogus
    {
    background-image: url(../images/menu-catalogus-a.png);
    width: 100px;
    height: 27px;
    float: left;
    }

    .keramiek
    {
    background-image: url(../images/menu-keramiek-a.png);
    width: 80px;
    height: 27px;
    float: left;
    }

    .glas
    {
    background-image: url(../images/menu-glas-a.png);
    width: 80px;
    height: 27px;
    float: left;
    }

    .contact
    {
    background-image: url(../images/menu-contact-a.png);
    width: 80px;
    height: 27px;
    float: left;
    }

    .menu-r
    {
    background-image: url(../images/menu-r.png);
    width: 139px;
    height: 27px;
    float: left;
    }[/code:1:637f2420c4]

    Bijdrager
    Almerrrrr

    Waarom werk je met een aparte class per menu?

    Kun je niet makkelijker gebruik maken van het li element zoiets dus:

    [code:1:6e11a8eb02]
    ul#menu li
    {
    padding: 0 10px 0 10px;
    margin: 0;
    list-style: none;
    float: left;
    }
    [/code:1:6e11a8eb02]

    Is er verder een specifieke reden waarom je gebruik maakt van afbeeldingen als menu buttons?

    Bijdrager
    Japsuh

    Gebruik zoiets (uit een website die ik pasgeleden heb gemaakt):

    [code:1:08923c4586]#menuboven {
    text-align: center;
    }

    #menuboven ul {
    background-color: #E91020;
    border: 1px solid black;
    width: 100%;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    }

    #menuboven ul li {
    display: inline;
    }

    #menuboven ul li a {
    padding-left: 1em;
    padding-right: 1em;
    font-size: 12px;
    font-family: Tahoma, Helvetica, sans-serif;
    text-decoration: none;
    color: white;
    }

    #menuboven ul li a:hover {
    text-decoration: underline;
    }[/code:1:08923c4586]

    Gewoon aanpassen aan hoe jij wilt dat hij eruit ziet, en je hebt een heel goed menu.

    Bijdrager
    Sven van de Scheur

    die code zou het inderdaad moeten oplossen, het probleem ligt em denk ik bij het feit dat jij er nog geen inline element van had gemaakt, sommige browsers doen het dan zoals jij het wil, andere browsers doen dat niet.

    een lijst is normaal gesproken een element dat elke item een nieuwe lijn gebruikt, float left laat het aan elkaar schuiven, een kruising daar tussen resulteerd in een trappetje bij ie….

    Defineer alle menu items als ‘inline’ en ik denk dat het probleem is opgelost….
    display: inline;

    Bijdrager
    Rub3n

    [code:1:cdc069378d]<div id="headermenu"> <? // Start headermenu ?>
    <ul id="menu">
    <li class="menu-l"></li>
    <li><a class="home" href="index.php"></a></li>
    <li><a class="catalogus" href="#"></a></li>
    <li><a class="keramiek" href="keramiek.php"></a></li>
    <li><a class="glas" href="glas.php"></a></li>
    <li><a class="contact" href="contact.php"></a></li>
    <li class="menu-r"></li>
    </ul>
    </div> <? // Einde headermenu ?>[/code:1:cdc069378d]

    dat <? // EINDE hEADERMENU ?>

    kun je ook gewoon

    <!– EINDE MENU –>

    Bijdrager
    Pivni Pes
    ”Almerrrrr”

    Waarom werk je met een aparte class per menu?

    Weet ik niet echt, ik weet wel dat het niet handig is, websites maken is niet echt mijn vak, en ik moet
    nog een hoop leren:wink:

    ”Almerrrrr”

    Is er verder een specifieke reden waarom je gebruik maakt van afbeeldingen als menu buttons?

    In eerste instantie was het de bedoeling om er een mouseover in te verwerken, om de site wat rustiger
    over te laten komen zijn we er van af gestapt.
    Ik heb nu het menu ook drastisch aan gepast, en nu werkt het ook perfect in IE

    ”Sven

    die code zou het inderdaad moeten oplossen, het probleem ligt em denk ik bij het feit dat jij er nog geen inline element van had gemaakt, sommige browsers doen het dan zoals jij het wil, andere browsers doen dat niet.

    een lijst is normaal gesproken een element dat elke item een nieuwe lijn gebruikt, float left laat het aan elkaar schuiven, een kruising daar tussen resulteerd in een trappetje bij ie….

    Defineer alle menu items als ‘inline’ en ik denk dat het probleem is opgelost….
    display: inline;

    Ik heb de “display: inline;” wel toegepast, daarna de buurman gebeld of dat hij met IE even kon controleren, buurman
    was niet thuis.
    Daarna ging ik overdenken wat Almerrrr had geschreven, en ben ik een andere richting ingeslagen, ik weet dus niet
    of dat “display: inline;” voor mij de oplossing was (gaat er wel van uit)

    ”Rub3n”

    [code:1:e0b42a5118]<div id="headermenu"> <? // Start headermenu ?>
    <ul id="menu">
    </div> <? // Einde headermenu ?>[/code:1:e0b42a5118]
    dat <? // EINDE hEADERMENU ?>

    kun je ook gewoon

    <!– EINDE MENU –>

    Ik ben daarvan op de hoogte, ik doe het zo omdat ik soms meer informatie daar in opslaat, een collega kan dit dan ook lezen.
    Op deze manier staat deze info niet online (wel online maar niet geprint in de pagina)

    Zo heb ik het nu opgelost:

    Pagina:
    [code:1:e0b42a5118]<div id="navigatie-container">
    <div id="navigatie-bg">
    <div id="tekst-center">
    <p><a class="menu" href="index.php">Home</a></p>
    <p><a class="menu" href="#">Catalogus</a></p>
    <p><a class="menu" href="keramiek.php">Keramiek</a></p>
    <p><a class="menu" href="glas.php">Glas</a></p>
    <p><a class="menu" href="contact.php">Contact</a></p>
    </div>
    </div>
    </div>[/code:1:e0b42a5118]
    CSS:
    [code:1:e0b42a5118]div#navigatie-container
    {
    width:768px;
    margin: 0px auto;
    padding-top: 20px;
    }

    div#navigatie-bg
    {
    background-image: url(../images/menu-bg.png);
    width:700px;
    height: 27px;
    margin: 0px auto;

    }

    div#tekst-center
    {
    width:450px;
    margin: 0px auto;
    }

    .menu
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    color: #000000;
    padding: 5px 20px;
    float: left;
    }[/code:1:e0b42a5118]

    Bijdrager
    Jurriaan.

    bekend probleem, bij mij werkt een float:left op de LI’s meestal

    Bijdrager
    Henque
    ”Rub3n”

    dat <? // EINDE hEADERMENU ?>

    kun je ook gewoon

    <!– EINDE MENU –>

    [code:1:3dd2087773]<?php
    // EINDE hEADERMENU
    ?>[/code:1:3dd2087773]Dit is beter, je hoeft dit niet in je html te laten zien, maar gebruiken voor je eigen duidelijkheid

8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.