Centrer CSS

Tags:    html css

Hejsa, normalt når jeg har bygget hjemmesider har jeg bygget dem i ren html og ret sjældent brugt css, kun sådan nogle små korte ting som at lave en anden scrollbar farve og noget i den stil.
Men nu har jeg altså bygget en hjemmeside hvor jeg bliver nød til at bruge css som jeg også gerne snart skulle lære og bruge istedet for at være så forbandet konservativ :)
Siden er slicet i photoshop, og sat op i css af photoshop, muligvis det der giver mig problemer
Nå her har i et link til min side:
http://www.houze.dk/niknak
og så lige et link til hvordan hjemmesiden skal se ud
http://www.houze.dk/niknak/design.jpg

og her ser i hjemmeside koden:

"
<!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>
<title>ude</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (ude.psd) -->
<style type="text/css">
<!--

div.Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:1012px;
}

div.index-01_ {
position:absolute;
left:0px;
top:0px;
width:800px;
height:24px;
}

div.index-02_ {
position:absolute;
left:0px;
top:24px;
width:800px;
height:1px;
}

div.index-03_ {
position:absolute;
left:0px;
top:25px;
width:800px;
height:150px;
}

div.index-04_ {
position:absolute;
left:0px;
top:175px;
width:14px;
height:23px;
}

div.index-05_ {
position:absolute;
left:14px;
top:175px;
width:96px;
height:23px;
}

div.index-06_ {
position:absolute;
left:110px;
top:175px;
width:1px;
height:23px;
}

div.index-07_ {
position:absolute;
left:111px;
top:175px;
width:96px;
height:23px;
}

div.index-08_ {
position:absolute;
left:207px;
top:175px;
width:1px;
height:23px;
}

div.index-09_ {
position:absolute;
left:208px;
top:175px;
width:96px;
height:23px;
}

div.index-10_ {
position:absolute;
left:304px;
top:175px;
width:1px;
height:23px;
}

div.index-11_ {
position:absolute;
left:305px;
top:175px;
width:96px;
height:23px;
}

div.index-12_ {
position:absolute;
left:401px;
top:175px;
width:1px;
height:23px;
}

div.index-13_ {
position:absolute;
left:402px;
top:175px;
width:96px;
height:23px;
}

div.index-14_ {
position:absolute;
left:498px;
top:175px;
width:1px;
height:23px;
}

div.index-15_ {
position:absolute;
left:499px;
top:175px;
width:96px;
height:23px;
}

div.index-16_ {
position:absolute;
left:595px;
top:175px;
width:1px;
height:23px;
}

div.index-17_ {
position:absolute;
left:596px;
top:175px;
width:96px;
height:23px;
}

div.index-18_ {
position:absolute;
left:692px;
top:175px;
width:1px;
height:23px;
}

div.index-19_ {
position:absolute;
left:693px;
top:175px;
width:96px;
height:23px;
}

div.index-20_ {
position:absolute;
left:789px;
top:175px;
width:11px;
height:23px;
}

div.index-21_ {
position:absolute;
left:0px;
top:198px;
width:400px;
height:107px;
}

div.index-22_ {
position:absolute;
left:400px;
top:198px;
width:1px;
height:107px;
}

div.index-23_ {
position:absolute;
left:401px;
top:198px;
width:399px;
height:107px;
}

div.index-24_ {
position:absolute;
left:0px;
top:305px;
width:583px;
height:389px;
}

div.index-25_ {
position:absolute;
left:583px;
top:305px;
width:3px;
height:389px;
}

div.index-26_ {
position:absolute;
left:586px;
top:305px;
width:214px;
height:389px;
}

div.index-27_ {
position:absolute;
left:0px;
top:694px;
width:800px;
height:180px;
}

div.index-28_ {
position:absolute;
left:0px;
top:874px;
width:800px;
height:138px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (ude.psd) -->
<div class="Table_01">
<div class="index-01_">
<img id="index_01" src="images/index_01.gif" width="800" height="24" alt="" />
</div>
<div class="index-02_">
<img id="index_02" src="images/index_02.gif" width="800" height="1" alt="" />
</div>
<div class="index-03_">
<img id="index_03" src="images/index_03.gif" width="800" height="150" alt="" />
</div>
<div class="index-04_">
<img id="index_04" src="images/index_04.gif" width="14" height="23" alt="" />
</div>
<div class="index-05_">
<img id="index_05" src="images/index_05.gif" width="96" height="23" alt="" />
</div>
<div class="index-06_">
<img id="index_06" src="images/index_06.gif" width="1" height="23" alt="" />
</div>
<div class="index-07_">
<img id="index_07" src="images/index_07.gif" width="96" height="23" alt="" />
</div>
<div class="index-08_">
<img id="index_08" src="images/index_08.gif" width="1" height="23" alt="" />
</div>
<div class="index-09_">
<img id="index_09" src="images/index_09.gif" width="96" height="23" alt="" />
</div>
<div class="index-10_">
<img id="index_10" src="images/index_10.gif" width="1" height="23" alt="" />
</div>
<div class="index-11_">
<img id="index_11" src="images/index_11.gif" width="96" height="23" alt="" />
</div>
<div class="index-12_">
<img id="index_12" src="images/index_12.gif" width="1" height="23" alt="" />
</div>
<div class="index-13_">
<img id="index_13" src="images/index_13.gif" width="96" height="23" alt="" />
</div>
<div class="index-14_">
<img id="index_14" src="images/index_14.gif" width="1" height="23" alt="" />
</div>
<div class="index-15_">
<img id="index_15" src="images/index_15.gif" width="96" height="23" alt="" />
</div>
<div class="index-16_">
<img id="index_16" src="images/index_16.gif" width="1" height="23" alt="" />
</div>
<div class="index-17_">
<img id="index_17" src="images/index_17.gif" width="96" height="23" alt="" />
</div>
<div class="index-18_">
<img id="index_18" src="images/index_18.gif" width="1" height="23" alt="" />
</div>
<div class="index-19_">
<img id="index_19" src="images/index_19.gif" width="96" height="23" alt="" />
</div>
<div class="index-20_">
<img id="index_20" src="images/index_20.gif" width="11" height="23" alt="" />
</div>
<div class="index-21_">
<img id="index_21" src="images/index_21.gif" width="400" height="107" alt="" />
</div>
<div class="index-22_">
<img id="index_22" src="images/index_22.gif" width="1" height="107" alt="" />
</div>
<div class="index-23_">
<img id="index_23" src="images/index_23.gif" width="399" height="107" alt="" />
</div>
<div class="index-24_">
<img id="index_24" src="images/index_24.gif" width="583" height="389" alt="" />
</div>
<div class="index-25_">
<img id="index_25" src="images/index_25.gif" width="3" height="389" alt="" />
</div>
<div class="index-26_">
<img id="index_26" src="images/index_26.gif" width="214" height="389" alt="" />
</div>
<div class="index-27_">
<img id="index_27" src="images/index_27.gif" width="800" height="180" alt="" />
</div>
<div class="index-28_">
<img id="index_28" src="images/index_28.gif" width="800" height="138" alt="" />
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
"

Mvh
Mikkel Kaas Andersen - Håber i kan hjælpe mig



6 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 3 karma
Sorter efter stemmer Sorter efter dato
Hey,

Kan ikke se hvad der er galt, men kopierede hele koden over på min egen server, virkede det altså som det skulle. Det lignede dit billede på en prik, selvfølgelig uden teksten og undholdet, men baggrunden og menuen sad hvor den skulle.

Kunne dog se at den kode du har postet ikke helt er den kode du har smidt ind på siden, prøv at erstatte koden fra posten med den på din side, og se om det ikke så fungerer.



absolut positionering i ie5/6 kan let give problemer, men når det så er sagt ser det fint ud hos mig, både i ie6 og ff



Du kan jo prøve at se på http://html.dk/ gå ind under css tuturial



Hey,

Kan ikke se hvad der er galt, men kopierede hele koden over på min egen server, virkede det altså som det skulle. Det lignede dit billede på en prik, selvfølgelig uden teksten og undholdet, men baggrunden og menuen sad hvor den skulle.

Kunne dog se at den kode du har postet ikke helt er den kode du har smidt ind på siden, prøv at erstatte koden fra posten med den på din side, og se om det ikke så fungerer.


Nu har jeg kopieret koden over på serveren og på min skærm er der ingen ændringer sket.

Tror problemet er lidt at min positonering er absolut i min css fordi jeg har slicet den i photoshop og ikke relativ, men hvis jeg skifter fra absolut til relativ så fucker designet op hmm. Nogen forslag?



Hvis der ikke er sket nogen ændring, forstår jeg ikke helt hvad det er du har brug for. Før kunne jeg se en masse billeder der flød over det hele, men nu sidder det hele sammen...? - Så forstår ikke lige dit problem



Jeg kan heller ikke se nogen forskel på billedet og siden ud over at der er noget indhold på billedet, som ikke er med på siden. Du siger siden er stylet med CSS, det er jeg ikke helt enig i.



t