Avatar billede Frederik Nybegynder
30. december 2007 - 18:32 Der er 15 kommentarer og
1 løsning

Centrering af side.

Hej.

Jeg har set på forskellige tråde her inde, men har ikke rigtig kunnet finde et svar på mit problem. Jeg vil gerne have centreret en side, men kan ikke rigtig gennemskue det. Vil blive meget glad hvis der er en der vil prøve, at forklare mig hvordan det skal gøres.

siden ser sådan ud:
<html>
<head>
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="style.css">

<body>
<div id="title">
<h1>Titel</h1>
</div>

<div id="content">
<h1>Overskrift</h1>
tekst
</div>

<div id="leftmenu">
<p>venstre menu</p>
<ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    <li>Punkt 4</li>
    <li>Punkt 5</li>
    <li>Punkt 6</li>
    <li>Punkt 7</li>
</ul>
</div>

<div id="rightmenu">
<p>højre menu</p>
<ul>
    <li>Punk 1</li>
    <li>Punkt 2</li>
</ul>
</div>
</body>

</html>

css filen ser sådan ud:
body {
        position:absolute;
        width:800;
        height:98%;
        border: 1px solid black;

}

#title {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height: 75px;
    background-color:orange;
}
#leftmenu {
    position:absolute;
    left:0px;
    top:75px;
    width:150px;
    background-color:silver;
}
#rightmenu {
    position:absolute;
    right:0px;
    top:75px;
    width:150px;
    background-color:silver;
}
#content {
    padding-top: 70px;
    margin-left:160px;
    margin-right:160px;
    background-color:white;
}
Avatar billede hundevennen Nybegynder
30. december 2007 - 18:41 #1
der er jo flere måder at gøre det på - f.eks at placere siden i en <div align="center"> eller placere det hele i en tabel som du så med en class også centrere
Avatar billede keysersoze Ekspert
30. december 2007 - 18:43 #2
nu er align="center" jo ikke ligefrem css :)

men bortset fra det er det tæt på - pak al indhold ind i en div;

<div style="width: 800px; margin: auto;">
  DIT INDHOLD
</div>
Avatar billede whatever Nybegynder
30. december 2007 - 18:48 #3
Om man kunne faktisk bare indsætte margin: 0 auto; på body-taggen instedet:

body {
        position:absolute;
        width:800;
        height:98%;
        border: 1px solid black;
    margin: 0 auto;
}
Avatar billede Frederik Nybegynder
30. december 2007 - 19:02 #4
Hmm.. der er ikke noget af det der virker..

I Firefox er siden placeret i venstre side, og i IE7  fylder siden hele skærmen..
Avatar billede whatever Nybegynder
30. december 2007 - 19:03 #5
Glem det med body-taggen. Det virker vist ikke efter hensigten ;-)
Avatar billede keysersoze Ekspert
30. december 2007 - 19:08 #6
link eller kode?
Avatar billede keysersoze Ekspert
30. december 2007 - 19:08 #7
... iøvrigt - glemt _aldrig_ doctype.
Avatar billede Frederik Nybegynder
30. december 2007 - 19:24 #8
body {
        position:absolute;
        width:800;
        height:98%;
        border: 1px solid black;
    margin: 0 auto;
}

#title {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height: 75px;
    background-color:orange;
}
#leftmenu {
    position:absolute;
    left:0px;
    top:75px;
    width:150px;
    background-color:silver;
}
#rightmenu {
    position:absolute;
    right:0px;
    top:75px;
    width:150px;
    background-color:silver;
}
#content {
    padding-top: 70px;
    margin-left:160px;
    margin-right:160px;
    background-color:white;
}




<html>
<head>
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="style.css">

<body>
<div id="position">
<div id="title">
<h1>Titel</h1>
</div>

<div id="content">
<h1>Overskrift</h1>
tekst
</div>

<div id="leftmenu">
<p>venstre menu</p>
<ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    <li>Punkt 4</li>
    <li>Punkt 5</li>
    <li>Punkt 6</li>
    <li>Punkt 7</li>
</ul>
</div>

<div id="rightmenu">
<p>højre menu</p>
<ul>
    <li>Punk 1</li>
    <li>Punkt 2</li>
</ul>
</div>
</div>
</body>

</html>
Avatar billede keysersoze Ekspert
30. december 2007 - 23:28 #9
hvor er din position klasse? og doctype?
Avatar billede syvon Nybegynder
31. december 2007 - 10:41 #10
sådan kan det gøres

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body {
    margin :0 ;
    }
#center 
      {
      margin-left: -400px;
      position:absolute;
    height:98%;
    border: 1px solid black;
      left: 50%;
      width: 800px;
      visibility: visible
      }
#title {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height: 75px;
    background-color:orange;
}
#leftmenu {
    position:absolute;
    left:0px;
    top:75px;
    width:150px;
    background-color:silver;
}
#rightmenu {
    position:absolute;
    right:0px;
    top:75px;
    width:150px;
    background-color:silver;
}
#content {
    padding-top: 70px;
    margin-left:160px;
    margin-right:160px;
    background-color:white;
}

-->
</style>
</head>
<body>
<div id="center">
<div id="title">
<h1>Titel</h1>
</div>

<div id="content">
<h1>Overskrift</h1>
tekst
</div>

<div id="leftmenu">
<p>venstre menu</p>
<ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    <li>Punkt 4</li>
    <li>Punkt 5</li>
    <li>Punkt 6</li>
    <li>Punkt 7</li>
</ul>
</div>

<div id="rightmenu">
<p>højre menu</p>
<ul>
    <li>Punk 1</li>
    <li>Punkt 2</li>
</ul>
</div>
</div>
</body>
</html>
Avatar billede Frederik Nybegynder
31. december 2007 - 12:32 #11
Syvon det virker! Kunne jeg evt. få en forklaring?
Avatar billede syvon Nybegynder
31. december 2007 - 12:44 #12
der er sat dogtype på

og så er der lagt et div uden om det hele som er lagt 50% fra venstre side der har en minus margen på halvdelen af div's brede
Avatar billede keysersoze Ekspert
31. december 2007 - 12:48 #13
doctype som foreslået et par gange - samt, mere eller mindre, de styles der blev foreslået 30/12-2007 18:43:47.
Avatar billede Frederik Nybegynder
02. januar 2008 - 15:35 #14
Det er vidst 50 50 om svarene så.. Syvon smid et svar, så deler jeg lige point ud ;)
Avatar billede syvon Nybegynder
02. januar 2008 - 15:44 #15
Ingen point her ellers tak :)
Avatar billede Frederik Nybegynder
03. januar 2008 - 23:14 #16
Okay :) Tak for besvarelsen!
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