html - CSS Centrering af tabel - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css html webdesign

Bruger #14791 @ 20.04.11 13:15

Hej Alle.

Jeg forsøger at få min side centreret, men jeg kan simpelthen ikke få det til at virke.
Det er photoshop der har lavet css koden, og jeg har forsøgt med lidt forskelligt, bla. Margin: auto; osv.

Min CSS:

CSS kode

 @charset "utf-8";
 /* CSS Document */
 
 body {
         position:absolute;
         margin-top: 5px;
         margin-bottom: 0px;
         margin-left: auto;
         margin-right: auto;
 }
 
 
 div.Table_01 {
     position:absolute;
     width:1179px;
     height:1000px;
 }
 
 div.interface3-01 {
     position:absolute;
     left:0px;
     top:0px;
     width:1179px;
     height:256px;
 }
 
 div.interface3-02 {
     position:absolute;
     left:0px;
     top:256px;
     width:27px;
     height:44px;
 }
 
 div.interface3-03 {
     position:absolute;
     left:27px;
     top:256px;
     width:97px;
     height:32px;
 }
 
 div.interface3-04 {
     position:absolute;
     left:124px;
     top:256px;
     width:25px;
     height:44px;
 }
 
 div.interface3-05 {
     position:absolute;
     left:149px;
     top:256px;
     width:190px;
     height:34px;
 }
 
 div.interface3-06 {
     position:absolute;
     left:339px;
     top:256px;
     width:199px;
     height:4px;
 }
 
 div.interface3-07 {
     position:absolute;
     left:538px;
     top:256px;
     width:161px;
     height:34px;
 }
 
 div.interface3-08 {
     position:absolute;
     left:699px;
     top:256px;
     width:222px;
     height:4px;
 }
 
 div.interface3-09 {
     position:absolute;
     left:921px;
     top:256px;
     width:89px;
     height:34px;
 }
 
 div.interface3-10 {
     position:absolute;
     left:1010px;
     top:256px;
     width:16px;
     height:44px;
 }
 
 div.interface3-11 {
     position:absolute;
     left:1026px;
     top:256px;
     width:131px;
     height:34px;
 }
 
 div.interface3-12 {
     position:absolute;
     left:1157px;
     top:256px;
     width:22px;
     height:44px;
 }
 
 div.interface3-13 {
     position:absolute;
     left:339px;
     top:260px;
     width:27px;
     height:40px;
 }
 
 div.interface3-14 {
     position:absolute;
     left:366px;
     top:260px;
     width:145px;
     height:30px;
 }
 
 div.interface3-15 {
     position:absolute;
     left:511px;
     top:260px;
     width:27px;
     height:40px;
 }
 
 div.interface3-16 {
     position:absolute;
     left:699px;
     top:260px;
     width:27px;
     height:40px;
 }
 
 div.interface3-17 {
     position:absolute;
     left:726px;
     top:260px;
     width:172px;
     height:30px;
 }
 
 div.interface3-18 {
     position:absolute;
     left:898px;
     top:260px;
     width:23px;
     height:40px;
 }
 
 div.interface3-19 {
     position:absolute;
     left:27px;
     top:288px;
     width:97px;
     height:12px;
 }
 
 div.interface3-20 {
     position:absolute;
     left:149px;
     top:290px;
     width:190px;
     height:10px;
 }
 
 div.interface3-21 {
     position:absolute;
     left:366px;
     top:290px;
     width:145px;
     height:10px;
 }
 
 div.interface3-22 {
     position:absolute;
     left:538px;
     top:290px;
     width:161px;
     height:10px;
 }
 
 div.interface3-23 {
     position:absolute;
     left:726px;
     top:290px;
     width:172px;
     height:10px;
 }
 
 div.interface3-24 {
     position:absolute;
     left:921px;
     top:290px;
     width:89px;
     height:10px;
 }
 
 div.interface3-25 {
     position:absolute;
     left:1026px;
     top:290px;
     width:131px;
     height:10px;
 }
 
 div.interface3-26 {
     position:absolute;
     left:0px;
     top:300px;
     width:190px;
     height:664px;
     background-image:url(../images/interface3_26.png)
 }
 
 div.interface3-27 {
     position:absolute;
     left:190px;
     top:300px;
     width:800px;
     height:664px;
     background-image:url(../images/interface3_27.png)
 }
 
 div.interface3-28 {
     position:absolute;
     left:990px;
     top:300px;
     width:189px;
     height:664px;
     background-image:url(../images/interface3_28.png)
 }
 
 div.interface3-29 {
     position:absolute;
     left:0px;
     top:964px;
     width:190px;
     height:26px;
 }
 
 div.interface3-30 {
     position:absolute;
     left:190px;
     top:964px;
     width:800px;
     height:26px;
 }
 
 div.interface3-31 {
     position:absolute;
     left:990px;
     top:964px;
     width:189px;
     height:26px;
 }
 
 div.interface3-32 {
     position:absolute;
     left:0px;
     top:990px;
     width:1179px;
     height:10px;
 }

Min html:

HTML kode

 <html>
 <head>
 <title>interface3</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <link rel="stylesheet" type="text/css" href="styles/stylesheet.css">
 </head>
 <body bgcolor="#7c7c7c">
 <!-- Save for Web Slices (interface3.psd) -->
 <div class="Table_01">
     <div class="interface3-01">
         <img src="images/interface3_01.png" width="1179" height="256" alt="">
     </div>
     <div class="interface3-02">
         <img src="images/interface3_02.png" width="27" height="44" alt="">
     </div>
     <div class="interface3-03">
         <a href="index.php"
             onmouseover="window.status='Forside';  return true;"
             onmouseout="window.status='';  return true;">
             <img src="images/interface3_03.png" width="97" height="32" border="0" alt=""></a>
     </div>
     <div class="interface3-04">
         <img src="images/interface3_04.png" width="25" height="44" alt="">
     </div>
     <div class="interface3-05">
         <a href="om.php"
             onmouseover="window.status='Om foreningen';  return true;"
             onmouseout="window.status='';  return true;">
             <img src="images/interface3_05.png" width="190" height="34" border="0" alt=""></a>
     </div>
     <div class="interface3-06">
         <img src="images/interface3_06.png" width="199" height="4" alt="">
     </div>
     <div class="interface3-07">
         <a href="dokumenter.php"
             onmouseover="window.status='Dokumenter';  return true;"
             onmouseout="window.status='';  return true;">
             <img src="images/interface3_07.png" width="161" height="34" border="0" alt=""></a>
     </div>
     <div class="interface3-08">
         <img src="images/interface3_08.png" width="222" height="4" alt="">
     </div>
     <div class="interface3-09">
         <a href="salg.php"
             onmouseover="window.status='Til salg';  return true;"
             onmouseout="window.status='';  return true;">
             <img src="images/interface3_09.png" width="89" height="34" border="0" alt=""></a>
     </div>
     <div class="interface3-10">
         <img src="images/interface3_10.png" width="16" height="44" alt="">
     </div>
     <div class="interface3-11">
         <a href="venteliste.php"
             onmouseover="window.status='Venteliste';  return true;"
             onmouseout="window.status='';  return true;">
             <img src="images/interface3_11.png" width="131" height="34" border="0" alt=""></a>
     </div>
     <div class="interface3-12">
         <img src="images/interface3_12.png" width="22" height="44" alt="">
     </div>
     <div class="interface3-13">
         <img src="images/interface3_13.png" width="27" height="40" alt="">
     </div>
     <div class="interface3-14">
         <a href="bestyrelsen.php"
             onmouseover="window.status='Bestyrelsen';  return true;"
             onmouseout="window.status='';  return true;">
             <img src="images/interface3_14.png" width="145" height="30" border="0" alt=""></a>
     </div>
     <div class="interface3-15">
         <img src="images/interface3_15.png" width="27" height="40" alt="">
     </div>
     <div class="interface3-16">
         <img src="images/interface3_16.png" width="27" height="40" alt="">
     </div>
     <div class="interface3-17">
         <a href="lejlighederne.php"
             onmouseover="window.status='Lejlighederne';  return true;"
             onmouseout="window.status='';  return true;">
             <img src="images/interface3_17.png" width="172" height="30" border="0" alt=""></a>
     </div>
     <div class="interface3-18">
         <img src="images/interface3_18.png" width="23" height="40" alt="">
     </div>
     <div class="interface3-19">
         <img src="images/interface3_19.png" width="97" height="12" alt="">
     </div>
     <div class="interface3-20">
         <img src="images/interface3_20.png" width="190" height="10" alt="">
     </div>
     <div class="interface3-21">
         <img src="images/interface3_21.png" width="145" height="10" alt="">
     </div>
     <div class="interface3-22">
         <img src="images/interface3_22.png" width="161" height="10" alt="">
     </div>
     <div class="interface3-23">
         <img src="images/interface3_23.png" width="172" height="10" alt="">
     </div>
     <div class="interface3-24">
         <img src="images/interface3_24.png" width="89" height="10" alt="">
     </div>
     <div class="interface3-25">
         <img src="images/interface3_25.png" width="131" height="10" alt="">
     </div>
     <div class="interface3-26"></div>
     <div class="interface3-27"></div>
     <div class="interface3-28"></div>
     <div class="interface3-29">
         <img src="images/interface3_29.png" width="190" height="26" alt="">
     </div>
     <div class="interface3-30">
         <img src="images/interface3_30.png" width="800" height="26" alt="">
     </div>
     <div class="interface3-31">
         <img src="images/interface3_31.png" width="189" height="26" alt="">
     </div>
     <div class="interface3-32">
     <img src="images/interface3_32.png" width="1179" height="10" alt=""></div>
 </div>
 </center>
 
 <!-- End Save for Web Slices -->
 </body>
 </html>

Hvordan kan jeg få hele siden i center?
se evt. www.borup-soepark.dk

Hilsen Christian

10 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 5 karma

Sorter efter stemmer Sorter efter dato

Bruger #69 @ 20.04.11 18:25

188

OK, så er jeg med. Har lige testet dette, og det virker.

CSS kode

 body {
     margin: 5px auto 0;
     position: absolute;
 }
 
 /* Skal ændres til: */
 
 body {
     margin: 5px auto 0;
 }

CSS kode

 div.Table_01 {
     height: 1000px;
     position: absolute;
     width: 1179px;
 }
 
 /* Skal ændres til: */
 div.Table_01 {
     margin: 0 auto;
     position: relative;
     width: 1179px;
 }

Bruger #4487 @ 20.04.11 15:23

1.384

Hjælper det hvis du i din body sætter width: 100%; og i din container div (tror den hed table1), sætter margin: 0px auto; ??

Ellers så ved jeg ikke helt havd du skal gøre

Bruger #69 @ 20.04.11 15:23

188

Løsning 1
Lav din CSS for div.Table_01 om til:

CSS kode

 div.Table_01 {
      position:relative;
      width:1179px;
      height:1000px;
      margin: 0 auto;
  }

Løsning 2
Tilføj dette lige efter <body>-tagget i din HTML:

<div id="wrapper">

Tilføj dette lige før </body>-tagget i din HTML:

</div>

Tilføj dette til din CSS-fil:

CSS kode

 #wrapper {
      width: 1179px;
     margin: 0 auto;
     position: relative;
  }

Indlæg senest redigeret d. 20.04.2011 15:26 af Bruger #69

Bruger #14791 @ 20.04.11 15:27

Tak for Jeres svar, intet ser ud til at virke

Bruger #4487 @ 20.04.11 15:27

1.384

se evt. www.borup-soepark.dk

Lige en sidebemærkning - Siden er lidt tung at loade, pga. alle de store billeder, bare så du vidste det

ellers er det et fint hjemmeside design

Bruger #69 @ 20.04.11 15:31

188

Tak for Jeres svar, intet ser ud til at virke

Har lige set, at den kode du har postet her i forum ikke er den samme, som du har på websitet. Kan det være derfor, noget ikke virker? Jeg har testet min løsning 1 og 2 på min computer med den kode, du har postet, og der virker det fint.

Desuden er dit website allerede centreret, så nu bliver jeg i tvivl om problemet?

Indlæg senest redigeret d. 20.04.2011 15:36 af Bruger #69

Bruger #14791 @ 20.04.11 17:49

Det er min fejl, det er egentlig et test miljø som jeg ikke kan få til at virke. Det andet er bare alm HTML og test miljøet er baseret på CSS. Se det her: http://www.borup-soepark.dk/gammel/index1.php

Bruger #14791 @ 20.04.11 21:54

TAK! Det virkede.. Lader til at problemet var position: Absolute, frem for Relative. Tusind tak!

Bruger #15306 @ 24.05.11 18:14

Position:absolute; kan du udelade... Det eneste der er vigtigt er at margin:0 auto; og width

XXpx er defineret. Så funker det.

Husk at "lukke" tråden hvis du har fået dit svar

-2

Bruger #16025 @ 22.05.11 12:52

442

CSS kode

 * {
     margin: 0 auto;
     padding: 0 auto;
 }

CSS Centrering af tabel

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler