[Dundret]

Hej,
Håller på och knåpar med en ny hemsida, och jag tänkte samtidigt prova något nytt, bygga den av css istället för tables.

Men nu har jag fastnat lite på hur jag får sidan centrerad, oavsett vad besökarna har för upplösning på sina skärmar.
Har suttit och sökt och testat mig fram men jag får inte till det riktigt, så en liten knuff framåt skulle vara väldigt tacksamt, nu innan man blir alldeles för gråhårig :P


Lite kod jag kan bjuda på:

CSS -filen

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1000px;
	height:800px;
	
}

#index-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:126px;
	height:50px;
}

#index-02_ {
	position:absolute;
	left:126px;
	top:0px;
	width:243px;
	height:50px;
}

#index-03_ {
	position:absolute;
	left:369px;
	top:0px;
	width:268px;
	height:50px;
}

#index-04_ {
	position:absolute;
	left:637px;
	top:0px;
	width:197px;
	height:50px;
}

#index-05_ {
	position:absolute;
	left:834px;
	top:0px;
	width:166px;
	height:17px;
}

#index-06_ {
	position:absolute;
	left:834px;
	top:17px;
	width:137px;
	height:33px;
}

#index-07_ {
	position:absolute;
	left:971px;
	top:17px;
	width:29px;
	height:33px;
}

#index-08_ {
	position:absolute;
	left:0px;
	top:50px;
	width:1000px;
	height:58px;
}

#index-09_ {
	position:absolute;
	left:0px;
	top:108px;
	width:1000px;
	height:66px;
}

#index-10_ {
	position:absolute;
	left:0px;
	top:174px;
	width:1000px;
	height:61px;
}

#index-11_ {
	position:absolute;
	left:0px;
	top:235px;
	width:24px;
	height:31px;
}

#index-12_ {
	position:absolute;
	left:24px;
	top:235px;
	width:951px;
	height:31px;
}

#index-13_ {
	position:absolute;
	left:975px;
	top:235px;
	width:25px;
	height:31px;
}

#index-14_ {
	position:absolute;
	left:0px;
	top:266px;
	width:58px;
	height:534px;
}

#index-15_ {
	position:absolute;
	left:58px;
	top:266px;
	width:890px;
	height:14px;
}

#index-16_ {
	position:absolute;
	left:948px;
	top:266px;
	width:52px;
	height:534px;
}

#content_ {
	position:absolute;
	left:58px;
	top:280px;
	width:890px;
	height:489px;
}

#index-18_ {
	position:absolute;
	left:58px;
	top:769px;
	width:890px;
	height:31px;
}

HTML -filen

<div id="Table_01">
	<div id="index-01_">
 <img id="index_01" src="images/index_01.jpg" width="126" height="50" alt="" />
	</div>
	<div id="index-02_">
 <img id="index_02" src="images/index_02.jpg" width="243" height="50" alt="" />
	</div>
	<div id="index-03_">
 <img id="index_03" src="images/index_03.jpg" width="268" height="50" alt="" />
	</div>
	<div id="index-04_">
 <img id="index_04" src="images/index_04.jpg" width="197" height="50" alt="" />
	</div>
	<div id="index-05_">
 <img id="index_05" src="images/index_05.jpg" width="166" height="17" alt="" />
	</div>
	<div id="index-06_">

	</div>
	<div id="index-07_">
 <img id="index_07" src="images/index_07.jpg" width="29" height="33" alt="" />
	</div>
	<div id="index-08_">
 <img id="index_08" src="images/index_08.jpg" width="1000" height="58" alt="" />
	</div>
	<div id="index-09_">
 <img id="index_09" src="images/index_09.jpg" width="1000" height="66" alt="" />
	</div> 
osv..
osv..

[JLE]

Gör såhär:
#wrap{
margin:0 auto;
width:80em;
}

Och inneslut sedan hela sidan i den som en div.

[Dundret]

Originally posted by JLE@Feb 4 2008, 21:28
Gör såhär:
#wrap{
margin:0 auto;
width:80em;
}
Och inneslut sedan hela sidan i den som en div.

Hmm, verkar inte få det att fungera, tror jag.. ska man göra såhär:

Lägga denna snut t.ex. längst upp i CSS filen?

 
#wrap{
margin:0 auto;
width:80em;
}

Sedan i HTML filen, lägga till

 <div id="wrap"> och sedan sist avsluta med </div> 

Alltså så det blir såhär:

<div id="wrap">
<div id="Table_01">
<div id="index-01_">
 <img id="index_01" src="images/index_01.jpg" width="126" height="50" alt="" />
</div>
<div id="index-02_">
 <img id="index_02" src="images/index_02.jpg" width="243" height="50" alt="" />
</div>

eller är jag ute och cyklar nu kanske?

[Dundret]

Jag har även lagt upp en test sidan som ni kan kika på, den som vill..

http://dundret.mine.nu/sidan/

[Dundret]

Sorry om jag spammar :blink: Men jag kanske har fått det att fungera nu, det vore schysst om ni kunde testa hur det fungerar för er med era upplösningar och webläsare.

http://dundret.mine.nu



Och för den som är intresserad, kan jag även ge kodsnutten till

[Cosma]

Kan svara för de andra länken du la att den funkar fint fint i FF med högupplöst skärm 1600.

[guran]

Detta hör inte till ditt problem, men prova med background-image i CSS i stället för att lägga bilder med html när bilderna tillhör layouten.

[Dundret]

Ops, råkade skriva fel adress andra gången, korrekta adressen är:

http://dundret.mine.nu/sidan/

Men det verkar fungera iaf, kan även bjuda på kodsnutten

.wrapper {
position:relative;
margin:0 auto;
text-align:left;

width:1000px;
}


Och sedan;

<div class="wrapper">

Originally posted by guran@Feb 5 2008, 00:36
Detta hör inte till ditt problem, men prova med background-image i CSS i stället för att lägga bilder med html när bilderna tillhör layouten.

Tackför tipset, det blir till att jag gör så istället!



Fler tips tages tacksamt emot, då jag är en liten nybörjare endå :P

[Kurdix]

Om det är img-taggar du vill centrera så kör med text-align:center;

[PortsStudio]

Det fungerar även för hela sidor, "text-align:center;"

Ex. <body style="text-align:center;">

Går givetvis att lägga i css-filen istället, "#body {" osv...