Hej alle
Jeg sidder og leger med at lave hjemmeside, og jeg vil gerne have en horisontal menu, der er centreret, men jeg kan simpelthen ikke få det til at lykkes, så jeg håber I kan hjælpe mig
I kan se et eksempel på det her:
jeth.dkDet er menuen under banneret, jeg gerne vil have skal sidde i midten.
Jeg prøvet mig med at sætte en bredde og derefter bruge margin: 0 auto;, men jeg kan simpelthen ikke få det til at virke!
Hvis man sætter en background-color på <ul> elementet, kan jeg se at den er centreret, så problemet må være at <li> elementerne ikke centreres, så hvordan opnår jeg det?
Her er HTML-koden der er relavant for menuen:
- <body>
- <div id="header">
- <div id="menu">
- <ul id="menuListe">
- <li>menupunkt 1</li>
- <li>menupunkt 2</li>
- <li>menupunkt 3</li>
- <li>menupunkt 4</li>
- </ul>
- </div>
- </div>
- </body>
og CSS'en:
- body {
- margin: 0;
- background-image: url("images/baggrund.png");
- }
-
- #header {
- height: 350px;
- width: 100%;
-
- transition: margin 2s;
- -moz-transition: margin 2s;
- -webkit-transition: margin 2s;
- -o-transition: margin 2s;
- }
-
- #menu {
- width: 100%;
- margin: 20px 0;
- }
-
- #menu ul {
- list-style-type: none;
- width: 100%;
- margin: 0 auto;
- padding: 0;
- }
-
- #menu li {
- text-align: center;
- float: left;
- background-image: url(images/menuKnap.png);
- margin-left: 50px;
- height: 50px;
- width: 160px;
- }
Siden er til kun for sjov, så formålet med det er udelukkende at eksperimentere og lære af det
Mvh Johan
Indlæg senest redigeret d. 30.10.2011 13:51 af Bruger #16676