Avatar billede dylfen Nybegynder
27. november 2010 - 19:42 Der er 11 kommentarer og
1 løsning

Centrering af menu

Hej Experter

Jeg forsøger at centrer min menu, men det lykkedes bare ikke... Jeg håber der er en venlig sjæl der kan finde fejlen eller manglen ;)

CSS kode:

.menu div {
    text-align:center;
    display:inline;
}
.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    text-align:center;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
}
.menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
}
.menu li{
    display: inline;
    text-align:center;
    float:left;
    padding:0px;
}
.menu li a{
    background:#333333 url("images/style/seperator.gif") bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
    background: #2580a2 url("images/style/hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}
.menu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
}
.menu li:hover ul{
    display:block;
}
.menu li li {
    background:url('images/style/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
}
.menu li:hover li a{
    background:none;
}
.menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
    background:#2580a2 url('images/style/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
}
.menu p{
    clear:left;
}
Avatar billede claes57 Ekspert
27. november 2010 - 19:49 #1
der skal lidt html-kode med også - hvordan og hvornår bruger du css
Avatar billede spil-eksperten Nybegynder
27. november 2010 - 20:07 #2
Avatar billede webweaver Praktikant
27. november 2010 - 20:57 #3
margin: auto;
Avatar billede dylfen Nybegynder
27. november 2010 - 20:58 #4
jamen det er en nested list menu

html ser sådan ud
<ul>
<li>link 1<li>
<li>link 2
  <ul>
  <li>sublink 1</li>
  <li>sublink 2</li>
  </ul>
</li>
</ul>
Avatar billede webweaver Praktikant
27. november 2010 - 21:09 #5
<ul style="margin: auto; width: 200px">
<li>link 1<li>
<li>link 2
  <ul>
  <li>sublink 1</li>
  <li>sublink 2</li>
  </ul>
</li>
</ul>
Avatar billede dylfen Nybegynder
27. november 2010 - 21:26 #6
Virkede ikke.... :(
Avatar billede webweaver Praktikant
27. november 2010 - 21:36 #7
Hvad mener du?

Virker fint her. Det vil centrere din menu helt fint.
Har testet det i nyeste versioner af IE, FF og Chrome. Virker i alle. Du SKAL angive en width på din ul, ellers virker det ikke.

http://www.lasse-jensen.dk/eksperten/ulcenter.html
Er dette centreret hos dig?
Avatar billede webweaver Praktikant
27. november 2010 - 21:38 #8
Det skal selvfølgelig lige siges, at hvis du har pakket din ul menu ind i alt muligt, vil den ikke blive centreret på sitet, men naturligvis centreret i den boks den befinder sig i. Kan være en div, table med mere ...
Avatar billede dylfen Nybegynder
27. november 2010 - 22:10 #9
det er sgu meget muligt det virker på din ene html fil med en style på 2 properties, men nu skal jeg jo ikke til at starte forfra, men at finde fejlen i min css sheet...
Avatar billede Slettet bruger
27. november 2010 - 23:17 #10
Hvis du giver os et link til din side, kan vi hurtigere hjælpe dig, uden at skulle gætte os frem til en helt masse :)
Avatar billede dylfen Nybegynder
28. november 2010 - 00:44 #11
jo har smidt hele lortet op på http://dan-c.dk
Avatar billede dylfen Nybegynder
10. februar 2011 - 19:30 #12
Lukket
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