[CSS] Dropdownmenu goed positioneren

[Captain Pervert]

Ik heb een CSS menu hiervandaan gehaald, het naar eigen wensen aangepast en het werkt prima.

Ik krijg het ding alleen maar steeds niet op de goede plek. Hier staat het menu (de blauw balk). Zoals je ziet moet hij 4 of 5 pixels naar rechts, maar welke waarde ik ook verander, er gebeurt gewoonweg niets. Ik ben geen CSS-expert, maar kan meestal door logisch nadenken bestaande progsels prima naar mijn zin aanpassen. Nu loop ik echter totaal vast.

Dit is de CSS:

Cascading Stylesheet:

box-sizing: content-box



#menu_container {
  position: relative;
    height:25px;}

/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {padding: 0; margin:0; list-style-type: none;}

/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {display:block;width:126px; font-size:10pt; color:#fff; height:25px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #000; border-width:1px 0 1px 1px;}

/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}

/* Set up the list items */
#pmenu li {float:left; background:#7a9de4;}

/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative;}
/* Make the hovered list color persist */
#pmenu li:hover > a {background:#dfd7ca; color:#c00;}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:120px;}
/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:-30px; top:16px;}

/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative; background:#dfd7ca; color:#c00;}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {background:#dfd7ca; color:#c00;}

/* Set up the pointers for the sub level indication */
#pmenu li.fly {background:#7a9de4 url(../images/cssmenu_fly.gif) no-repeat right center;}
#pmenu li.drop {background:#7a9de4 url(../images/cssmenu_drop.gif) no-repeat right center;}


/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}

/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul{ 
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */

Dit is de html:

HTML:

<div id="menu_container">
<ul id="pmenu">
<li><a href="http://www.cosanostra.nl">Home</a></li>
<li class="drop"><a href="#nogo">Geschiedenis<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="http://www.cosanostra.nl/history.php" class="enclose">Over ons</a></li>
    <li><a href="http://www.cosanostra.nl/lan.php">LANparties</a></li>
    <li><a href="http://www.cosanostra.nl/clan.php">Counter-Strike</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="drop"><a href="#nogo">Foto's<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="http://www.cosanostra.nl/foto.php" class="enclose">Fotoverslagen</a></li>
    <li><a href="http://www.cosanostra.nl/smoelenboek.php">Smoelenboek</a></li>
    <li><a href="http://www.cosanostra.nl/wiewoontwaar.php">Wie woont waar</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="drop"><a href="http://www.cosanostra.nl/forum">Forum<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="http://www.cosanostra.nl/forum" class="enclose">Forum</a></li>
    <li><a href="http://www.cosanostra.nl/forum/forum7.html">Gastenboek</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="drop"><a href="#nogo">Tools<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="http://www.cosanostra.nl/nieuwsinsturen.php" class="enclose">Nieuws insturen</a></li>
    <li><a href="http://www.cosanostra.nl/nieuwsarchief.php" >Nieuwsarchief</a></li>
    <li><a href="http://www.cosanostra.nl/pollarchief.php" >Poll archief</a></li>
    <li><a href="http://www.cosanostra.nl/birthsys" >Verjaardag noteren</a></li>
    <li><a href="http://www.cosanostra.nl/quote.php">Quote toevoegen</a></li>
    <li><a href="http://www.cosanostra.nl/search">Site doorzoeken</a></li>
    <li><a href="http://www.cosanostra.nl/games.php">Cosa Games</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.cosanostra.nl/ecards">E-cards</a></li>
<li><a href="http://www.cosanostra.nl/bancanostra" class="enclose">Banca Nostra</a></li>
</ul>
</div>

- Padding-left in de menu container instellen heeft geen effect (of dat nou 1, 5 of 100 pixels is)
- Left 5 heeft ook geen effect

Iemand een suggestie?

[apokalypse]

Zet van #pmenu, #pmenu ul
de margin-left

simpel. Ik heb hiervoor firebug gebruikt.
https://addons.mozilla.org/en-US/firefox/addon/1843

[Captain Pervert]

Huh, wat? Zet wat op wat?

[DeZzL]

iets als

code:

#pmenu, #pmenu ul{
margin-left:5px;
}

[ Voor 27% gewijzigd door DeZzL op 10-12-2007 13:36 ]

[apokalypse]

code:

#pmenu, #pmenu ul 
{
    margin-left:5px;
}

als je dit al niet snapt, zou ik een basic css cursus doen.
http://www.w3schools.com/css/default.asp bijvoorbeeld

[Captain Pervert]

Met margin-left: 5px werkt het in IE7, in FF staat het ding gecentreerd en springt het laatste item naar een volgende regel...

/edit: padding: 0px; toegevoegd en nu snapt FF hem ook.

Denk dat ik hem heb

[ Voor 144% gewijzigd door Captain Pervert op 10-12-2007 15:47 ]