Avatar billede hrole Mester
11. maj 2009 - 00:09 Der er 8 kommentarer og
1 løsning

Centrering af floated css menu

Hej,

Efter en tur på google kan jeg se jeg ikke er den første med dette problem. Men efter at være igennem mange af disse hits er det stadig ikke lykkedes mig at løse problemet.

menu.css:
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; /*margin-right:2px */}
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; /* opacity:0 ;*/ list-style:none;}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:135px; margin:0;}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover {background-color:#999999;}
ul.menu ul ul {left:135px; top:-1px}
ul.menu .menulink {/*border:1px solid #aaa;*/ padding:4px 6px 6px; font-weight:bold; background:url(../img/inaktiv.gif); width:125px;}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(../img/aktiv.gif)}
ul.menu .sub {background:#d1d1d1 url(../img/arrow_r.gif) 127px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}

stykesheet.css:
html, body {
    margin:0px;
    padding:0px;
    background-color:#CCCCCC;
    border:0px;
    font-size:12px;
    min-width:975px;
}
div#navbar{
    float:left;
    background-image:url(baggrund.gif);
    height:25px;
    width:100%;
}

og menuen indsat i en div på selve siden:
<div id="navbar">
<ul class="menu" id="menu">
    <li><a href="noget.php" class="menulink">forside</a></li>
    <li><a href="#" class="menulink">nogetandet</a>
        <ul>
            <li><a href="noget2.php">noget2</a></li>
            <li><a href="noget3">noget3</a></li>
        </ul>
    </li>
</ul>
</div>

Hvordan får jeg centreret menuen så den virker i IE7+ og FF3+?
Avatar billede Dajuf Nybegynder
11. maj 2009 - 09:21 #1
Eventuelt prøv dette:

div#navbar{
margin: auto;
float: left;
background-image: url(baggrund.gif);
height: 25px;
width: 100%;
}
Avatar billede hrole Mester
11. maj 2009 - 10:16 #2
Det ændrer desværre intet
Avatar billede zips Juniormester
11. maj 2009 - 11:40 #3
Er det som dette http://pmob.co.uk/pob/centred-float.htm du ønsker
Avatar billede hrole Mester
11. maj 2009 - 11:42 #4
Det er netop det jeg ønsker. Men har problemer med at tilpasse mine css, så det fungerer.
Avatar billede Dajuf Nybegynder
11. maj 2009 - 12:13 #5
Jeg prøvede lige selv at kopiere dine koder ind i en html-fil og forsøgte at finde fejlen. Det virkede hos mig at ændre

html, body {
    margin:0px;
    padding:0px;
    background-color:#CCCCCC;
    border:0px;
    font-size:12px;
    min-width:975px;
}
til
html, body {
    margin: auto;
    padding:0px;
    background-color:#CCCCCC;
    border:0px;
    font-size:12px;
    min-width:975px;
}

Virker det hos dig?
Avatar billede hrole Mester
11. maj 2009 - 12:45 #6
næh, det virker ikke, men det er vel også i #navbar, eller evt. menu.css ændringen skal ske?
Avatar billede hrole Mester
11. maj 2009 - 21:07 #7
det tyder på det er linien
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; /* opacity:0 ;*/ list-style:none;}
der laver problemer da den indeholder absolut positionering.
Hvordan omskrives den til relativ?
Avatar billede hrole Mester
11. maj 2009 - 21:48 #8
eller også at width:100%; i
div#navbar{
    float:left;
    background-image:url(baggrund.gif);
    height:25px;
    width:100%;
}
Avatar billede hrole Mester
16. maj 2009 - 15:08 #9
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester