[CSS] Lijst posities

[Verwijderd]

Ik ben bezig met het maken van een menu voor een website. Nu zit ik met een raar probleem van dat er tussen de lijsten een kleine ruimte zit, waardoor het er niet goed uit komt te zien, en de lijsten ongeveer 8px te hoog komen te staan...

een voorbeeld van dit staat hier: http://www.swoos.com/menu.php. In IE werkt het wel zoals het zou moeten doen... Weet iemand hoe ik dit kan oplossen, of hoe ik in de CSS file onderscheidt kan maken tussen IE, FF en Opera? Alvast bedankt.

[Verwijderd]

Natuurlijk, je kan voor elke type en versie browser een verschillende CSS-file gaan maken, maar het is juist de bedoeling dat de stylesheet volgens de standaard in elke browser tot dezelfde weergave leidt. Waar komen je verschillen dan toch vandaan?

Verschil #1: horizontale ruimte
Door verandering van je doctype naar XHTML 1.0 Strict doctype zie je dat IE en FF gelijke weergave tonen: de weergave die FF al toonde. Wil/moet je je huidige doctype blijven gebruiken, gebruik dan de bekende hacks voor IE quirks mode.

Verschil #2: verticale positionering
FF toont de gedefinieerde padding-top (7px), waar IE deze afkapt als die buiten de li valt. Voor de onderkant gelijksoortig: FF toont de gedefinieerde padding-bottom (0px), waar IE deze in quirks mode uitvult tot de onderkant van de li. En ja, het lijkt hierdoor (onterecht) op verschuiving.

[Verwijderd]

had het al opgelost, had float: left; enzo gebruikt en dat werkte (Y)

[Verwijderd]

Mooi dat je het zelf al had opgelost!
Wil je volgende keer dan ook een volledige omschrijving van de oplossing geven ter afronding van je topic? Dat scheelt mij tijd en een vreemde smiley (Y) naar mijn hoofd. Daarbij is het wel zo netjes voor het GoT-archief (zie ook "post ook de oplossing!" van de postregels).

[HawVer]

Verwijderd schreef op donderdag 20 oktober 2005 @ 15:52:
Mooi dat je het zelf al had opgelost!
Wil je volgende keer dan ook een volledige omschrijving van de oplossing geven ter afronding van je topic? Dat scheelt mij tijd en een vreemde smiley (Y) naar mijn hoofd. Daarbij is het wel zo netjes voor het GoT-archief (zie ook "post ook de oplossing!" van de postregels).

Zooo jij weet al snel hoe het moet..

Verwijderd schreef op dinsdag 18 oktober 2005 @ 19:52:
Ik ben bezig met het maken van een menu voor een website. Nu zit ik met een raar probleem van dat er tussen de lijsten een kleine ruimte zit, waardoor het er niet goed uit komt te zien, en de lijsten ongeveer 8px te hoog komen te staan...

een voorbeeld van dit staat hier: http://www.swoos.com/menu.php. In IE werkt het wel zoals het zou moeten doen... Weet iemand hoe ik dit kan oplossen, of hoe ik in de CSS file onderscheidt kan maken tussen IE, FF en Opera? Alvast bedankt.

Jorikjet .. mooi clean menutje erg netjes opgelost.

Je kan dit ook gebruiken. Ziet er wat overzichtelijker uit?

code:

document.getElementById("blala").style.display = 'none';

/edit..

Check hem ook ff in firefox. Ziet er toch niet helemaal 100% uit..

[ Voor 31% gewijzigd door HawVer op 20-10-2005 17:40 ]

[Verwijderd]

ja, die pagina is nog niet geupdate. ik post zo anders wel even sourcecode van het menutje.

html code:

code:

<ul id="Menu">
    <li><a href="index.php" id="menu_home" onmouseover="changemenu('home')" class="first">Home</a></li>
    <li><a href="page.php" id="menu_algemeen" onmouseover="changemenu('algemeen')">Algemeen</a></li>
    <li><a href="page.php" id="menu_contact" onmouseover="changemenu('contact')">Contact</a></li>
</ul>

<div id="Submenu">
    <ul id="submenu_home" class="hide">
        <li><a href="index.php">Home</a></li>
        <li><a href="page.php">Nieuws en updates</a></li>
        <li><a href="page.php">Over ons</a></li>
        <li><a href="page.php">Waarom?</a></li>
    </ul>
                
    <ul id="submenu_algemeen" class="hide">
        <li><a href="page.php">Afflicates</a></li>
        <li><a href="page.php">Datacentrum</a></li>
        <li><a href="page.php">Veelgestelde vragen</a></li>
        <li><a href="page.php">Voorwaarden</a></li>
        <li><a href="page.php">Downloads</a></li>
    </ul>       
                
    <ul id="submenu_contact" class="hide">
        <li></li>
    </ul>
</div>

javascript:

code:

function changemenu( submenu )
{
    // huidige menu verbergen
    document.getElementById('submenu_' + current_submenu).className = 'hide';
    
    if(current_submenu == "home")
        document.getElementById('menu_' + current_submenu).className = 'first';
    else
        document.getElementById('menu_' + current_submenu).className = '';
    
    // ver verwisselen
    current_submenu = submenu;
    
    // menu tonen
    document.getElementById('submenu_' + current_submenu).className = 'show';
    document.getElementById('menu_' + current_submenu).className = 'over';
}

window.onload = function() { changemenu( current_submenu ); }

en de CSS:

code:

/* ------------------------ */
/* MENU                     */
/* ------------------------ */

#Menu   {
    position: absolute;
    top: 88px;
    margin: 0;
    padding: 0;
    border-right: solid 1px #F9F9F9;
}

#Menu li {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    height: 28px;
}

#Menu a {
    height: 100%;
    font: bold 12px Arial;
    text-decoration: none;
    color: #4B4B4B;
    padding: 7px 17px 6px 15px;
    margin: 0;
    border-left: solid 1px #F9F9F9;
    border-right: solid 1px #AEAEAE;
    float: left;
}

#Menu a.first   {
    padding-left: 16px;
    border-left: none
}

#Menu a.over    {
    color: #FFFFFF;
    background:  url(../images/menu_blue.gif);
    padding-left: 16px;
    border-left: none;
}

/* ------------------------ */
/* SUBMENU                  */
/* ------------------------ */

#Submenu    {
    background: #375C94;
    margin: 0;
    height: 28px;
    padding: 0;
}

#Submenu .hide  { display: none;    }
#Submenu .show  { display: display; }

#Submenu ul {
    position: absolute;
    top: 122px;
    height: 28px;
    margin: 0;
    padding: 0;
}

#Submenu li {
    display: inline;
    margin: 0;
    list-style: none;
    float: left;
    padding: 0 0 0 15px;
}

#Submenu a  {
    font: bold 11px Arial;
    text-decoration: none;
    color: #FFFFFF;
    margin: 0;
    float: left;
}

#Submenu a:hover    {
    border-bottom: solid 1px #FFBC00;
}

Alstublieft.

_{onezero, je bent geen moderator hoor}

[ Voor 34% gewijzigd door Verwijderd op 21-10-2005 16:25 ]

[Verwijderd]

Das ist ja super fantastisch!

offtopic:
Geen moderator? Oh ja, dat is ook zo.
Enkel een klein pikkie en lange tenen, waar je gisteren op stond