Avatar billede zaittam Nybegynder
03. april 2008 - 10:37 Der er 7 kommentarer og
1 løsning

Simpelt CSS layout

Hej med jer,

Jeg forsøger at få lært det med at sætte designs op i divs og css - og det virker perfekt i IE7. Men det går altså galt i firefox - hvad gør jeg forkert?

<!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=iso-8859-1" />
<style type="text/css">
#container {
    width:500px;
    border:1px solid black;
    text-align:left;
}
#topmenu {
    width:100%;
    float:none;
}
#leftmenu {
    width:150px;
    float:left;
}
#contentbox {
    width:350px;
}
</style>
</head>

<body style="margin:0px;padding:0px;text-align:center;">
<div id="container">
    <div id="topmenu">
        <h1>Untitled website</h1>
    </div>
    <div id="leftmenu">
        Her er sidens menu.
    </div>
    <div id="contentbox">
        Indhold
    </div>
</div>
</body>
</html>
Avatar billede notes2c Nybegynder
03. april 2008 - 10:50 #1
Brug margin istedet for.

<!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=iso-8859-1" />
<style type="text/css">
#container {
    width:500px;
    border:1px solid black;
    text-align:left;
    margin: 0 auto;
}
#topmenu {
    width:100%;
    float:none;
}
#leftmenu {
    width:150px;
    float:left;
}
#contentbox {
    width:350px;
}
</style>
</head>

<body style="margin:0px;padding:0px;">
<div id="container">
    <div id="topmenu">
        <h1>Untitled website</h1>
    </div>
    <div id="leftmenu">
        Her er sidens menu.
    </div>
    <div id="contentbox">
        Indhold
    </div>
</div>
</body>
</html>
Avatar billede zaittam Nybegynder
03. april 2008 - 11:29 #2
Det må vidst være det der hedder et svar..

Kan du forklare mig, hvorfor denne margin skal til? Hvad betyder "0 auto" ?
Avatar billede w13 Novice
03. april 2008 - 11:33 #3
Man kan angive margin på flere forskellige måder.

margin:10px;
  Top-, højre-, bund- og venstre-margin bliver sat til 10px.

margin:10px 9px 8px 7px;
  Her sættes først top-, så højre-, så bund- og så venstre-margin til forskellige værdier.

margin:10px 5px;
  Her sættes top- og bund-margin til 10px og højre- og venstre-margin til 5px.

margin:0 auto;
  Top og bund er 0px, mens højre og venstre er sat til auto.

Og auto betyder simpelthen bare, at den selv finder en margin, hvilket vil resultere i, at det centreres.
Avatar billede notes2c Nybegynder
03. april 2008 - 11:50 #4
w13 har netop svaret på.
Avatar billede zaittam Nybegynder
03. april 2008 - 13:00 #5
Jeg siger mange tak for hjælpen. Skal vi lige dele points op?
Avatar billede w13 Novice
03. april 2008 - 13:02 #6
Pointene må gå til notes2c.
Avatar billede zaittam Nybegynder
03. april 2008 - 13:08 #7
Så må du nøjes med min tak :)
Avatar billede roenving Novice
03. april 2008 - 17:21 #8
-- og så også den sidste variant:

margin: 10px auto 25px;
  top er 10px, venstre og højre er auto, bund er 25px !-)
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