Avatar billede lise75 Nybegynder
08. juli 2009 - 12:31 Der er 10 kommentarer

Hvordan centrerer jeg min CSS-menu?

Hej eksperter

Jeg er ved at gå ud af mit gode skind og har brug for hjælp.

Jeg er ved at lave mit første website i CSS, hvor jeg har en vandret menu liggende øverst.

Se evt. udkast her (ikke færdigt): http://www.broskovdesign.dk/index.html

Hvordan i hede hulen får jeg den menu centreret? Jeg har prøvet alt muligt og lige lidt hjælper det. Nu er jeg så heller ingen CSS-ekspert.

Lidt af HTML'en:

<div class="container">
<div id="header">
<ul id="menu">
  <li><a href="java script:;" target="_self">HOME</a></li>
  <li><a href="java script:;" target="_self">ABOUT</a></li>
  <li><a href="java script:;" target="_self">RESPONSIBILITY</a></li>
  <li><a href="java script:;" target="_self">COLLECTION</a></li>
  <li><a href="java script:;" target="_self">STYLEBOOK</a></li>
  <li><a href="java script:;" target="_self">SHOW ROOM</a></li>
  <li><a href="java script:;" target="_self">IN THE PRESS</a></li>
  <li><a href="java script:;" target="_self">KIDS</a></li>
  <li><a href="java script:;" target="_self">WEBSHOP</a></li>
  <li><a href="java script:;" target="_self">CONTACT US</a></li>
</ul>
  </div>
</div>

Lidt af CSS'en:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #FFF;
    background-color: #333;
    line-height: 118%;
}
.container {
    width: 940px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#header {
    background-color: #333;
    background-image: none;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 35px;
    padding-left: 0px;
    align: center;
}
#menu {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #333;
}
#menu li {
    float: left;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    color: #CCC;
    list-style-type: none;
}
#menu a {
    color: #333;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight:bold;
    background-color: #D8303D;
    background-image: none;
    background-position: right bottom;
}
#menu a:hover {
    color: #fff;
    padding-bottom: 8px;
    background-color: #333;
    background-image: none;
    background-position: center bottom;
    font-weight: bold;
    }


Kan nogen hjælpe mig???

Hilsen Lise
Avatar billede claes57 Ekspert
08. juli 2009 - 13:10 #1
sæt en
align: center;
op i .container
evt kan du centrere i body, og så kun bruge align:left i div med sidens tekst.
Avatar billede lise75 Nybegynder
08. juli 2009 - 13:23 #2
Jeg synes ikke rigtigt, det virker :-(

Jeg har prøvet at sætte align: center; ind i både .container og i body. Her sker ingenting. Fjerner jeg align:left (undtagen ved tekstfeltet) ser menuen pludselig helt forkert ud (bliver til en lodret menu). Derfor har jeg bibeholdt float: left; i

#menu li {
    float: left;
        margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    color: #CCC;
    list-style-type: none;
}


Kan du hjælpe mig videre på en anden måde?
Avatar billede claes57 Ekspert
08. juli 2009 - 17:57 #3
en mulig fejl -
    margin-left: auto;
    align: center;
}
</style>
#content-wrapper {
    font-size: 75%;
    margin-left: 8%;

i http://www.broskovdesign.dk/hscph.css

fjern linjen med
</style>
Avatar billede lise75 Nybegynder
09. juli 2009 - 10:24 #4
Ja, jeg har godt studset over </style> og tidligere prøvet at fjerne den, men så rykker tekstfeltet og billedet sig, så det står forkert. Jeg aner ikke, hvordan den stump kode er kommet ind, men som sagt er jeg heller ingen prof. Desværre ændrer det ikke noget på menuen, om </style> er der eller ej.

Puh, jeg tror, jeg må prøve at starte lidt forfra med den CSS, så </style> kan komme væk uden at ødelægge noget...
Avatar billede lise75 Nybegynder
09. juli 2009 - 10:41 #5
Du får lige hele HTML'en og CSS'en, hvis det er.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HENRIETTE STEFFENSEN Copenhagen</title>
<link href="hscph.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
</head>

<body>
<!--Module 1-->
<div class="container">
<div id="header">
<ul id="menu">
  <li><a href="java script:;" target="_self">HOME</a></li>
  <li><a href="java script:;" target="_self">ABOUT</a></li>
  <li><a href="java script:;" target="_self">RESPONSIBILITY</a></li>
  <li><a href="java script:;" target="_self">COLLECTION</a></li>
  <li><a href="java script:;" target="_self">STYLEBOOK</a></li>
  <li><a href="java script:;" target="_self">SHOW ROOM</a></li>
  <li><a href="java script:;" target="_self">IN THE PRESS</a></li>
  <li><a href="java script:;" target="_self">KIDS</a></li>
  <li><a href="java script:;" target="_self">WEBSHOP</a></li>
  <li><a href="java script:;" target="_self">CONTACT US</a></li>
</ul>
  </div>
</div>
<!--Module 2-->
<div class="container">
  <div id="content-wrapper">
    <div id="column-left">
      <p><h1>Headline</h1></p>
      <p>&nbsp;</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
    <div id="column-right"><img src="images/model.jpg" alt="HENRIETTE STEFFENSEN Copenhagen collection" width="352" height="500" /></div>
  </div>
</div>
<br class="clearfloat" />
<!--Module 3-->
<div class="container">
<div id="footer"> 
  <div id="footer-wrapper">
    <div id="logo"><p><img src="images/hscphLogo.gif" alt="HENRIETTE STEFFENSEN Copenhagen" width="218" height="68" /><span>HENRIETTE STEFFENSEN Copenhagen</span></p></div>
    <div id="footer-content">COPYRIGHT © 2009 HENRIETTE STEFFENSEN ApS</div>
  </div>
  <br class="clearfloat" />
  </div>
</div>
</body>
</html>

@charset "utf-8";
body, h1, h2, h3, h4, p, ul, li {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #FFF;
    background-color: #333;
    line-height: 118%;
    align: center;
}
.container {
    width: 940px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    align: center;
}
</style>

#content-wrapper {
    font-size: 75%;
    margin-left: 8%;
}
#content-wrapper h1 {
    font-size: 150%;
    font-weight: normal;
}
#column-left {
    width: 400px;
    float: left;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 74px;
}
#column-right {
    width: 355px;
    float: left;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 20px;
}

#header {
    background-color: #D8303D;
    background-image: none;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 31px;
    padding-left: 0px;
    overflow: visible;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

#footer {
    background-color: #333;
    background-image: none;
    background-repeat: repeat-x;
    margin: 0px;
    clear: both;
    color: #333;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
    font-size: 100%;
    text-align: center;
}
#footer p span {
    position: absolute;
    top: -10000px;
    color: #999;
}
#footer a {
    color: #CCC;
    text-decoration: underline;
}
#footer a:hover {
    color: #CCC;
    text-decoration: none;
}
#logo {
    padding-top: 11px;
    padding-bottom: 16px;
}
#footer-content {
    color: #C4C4C4;
    padding-top: 6px;
    padding-bottom: 6px;
}

#menu {
    margin: 0;
    padding: 0;
    background-color: #333;
    width: 100%;
}
#menu li {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    color: #CCC;
    display: inline;
    float: left;
}
#menu a {
    color: #333;
    display: block;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight:bold;
    background-color: #D8303D;
    background-image: none;
    background-position: right bottom;
}
#menu a:hover {
    color: #fff;
    padding-bottom: 8px;
    background-color: #333;
    background-image: none;
    background-position: center bottom;
    font-weight: bold;
    }
Avatar billede lise75 Nybegynder
09. juli 2009 - 11:48 #6
Hej igen

Nå, nu har jeg selv fået </style>-tagget væk og samlet al CSS'en i én fil.

Menuen er dog stadig ikke centreret...

@charset "utf-8";
body, h1, h2, h3, h4, p, ul, li {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #FFF;
    background-color: #333;
    line-height: 118%;
    align: center;
}
.container {
    width: 940px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    align: center;
}
#menu {
    margin: 0;
    padding: 0;
    background-color: #333;
    width: 100%;
}
#menu li {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    color: #CCC;
    display: inline;
    float: left;
}
#menu a {
    color: #333;
    display: block;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight:bold;
    background-color: #D8303D;
    background-image: none;
    background-position: right bottom;
}
#menu a:hover {
    color: #fff;
    padding-bottom: 8px;
    background-color: #333;
    background-image: none;
    background-position: center bottom;
    font-weight: bold;
}
#content-wrapper {
    margin-left: 8%;
}
#content-wrapper h1 {
    font-size: 150%;
    font-weight: normal;
}
#column-left {
    width: 400px;
    float: left;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 0px;
}
#column-right {
    width: 355px;
    float: left;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 20px;
}

#header {
    background-color: #D8303D;
    background-image: none;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 31px;
    padding-left: 0px;
    overflow: visible;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

#footer {
    background-color: #333;
    background-image: none;
    background-repeat: repeat-x;
    margin: 0px;
    clear: both;
    color: #333;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
    font-size: 100%;
    text-align: center;
}
#footer p span {
    position: absolute;
    top: -10000px;
    color: #999;
}
#footer a {
    color: #CCC;
    text-decoration: underline;
}
#footer a:hover {
    color: #CCC;
    text-decoration: none;
}
#footer-logo {
    padding-top: 11px;
    padding-bottom: 16px;
}
#footer-content {
    color: #C4C4C4;
    padding-top: 6px;
    padding-bottom: 6px;
}
Avatar billede claes57 Ekspert
09. juli 2009 - 16:14 #7
den kan jeg ikke løse...
#menu {
    margin: 0;
    padding: 0;
    background-color: #333;
    width: 100%;
}
#menu li {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    color: #CCC;
    display: inline;
    float: left;

menu fylder 100%, og du starter med at skrive (float:left) fra venstre - så den er som sådan venstrestillet.
det hjælper ikke at fjerne 100%, og float:left skal være der.
Avatar billede lise75 Nybegynder
10. juli 2009 - 21:34 #8
tak fordi du prøvede :-)
Avatar billede lise75 Nybegynder
10. juli 2009 - 21:37 #9
Jeg kan ikke gennemskue (eller huske), hvordan man giver points!? Kan du hjælpe mig på vej?
Avatar billede claes57 Ekspert
13. juli 2009 - 16:35 #10
bare luk... (no cure - no pay)
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
Kurser inden for grundlæggende programmering

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