Css Wysrodkowanie Strony Niezaleznie Od Rozdzielczosci Ekranu

[C-oolt]

Witam!!!

 

Mam problem z stronka napisana w CSS. Mianowicie to z jej pozycja na ekranie przy rożnych rozdzielczościach ekranu. Przy rozdzielczości ekranu 1280x800 strona wyświetla sie poprawnie na środku. Lecz przy rozdzielczości 1024x768 strona jest przesunięta w prawo. Powoduje to pewien dyskomfort/problem w jej przeglądaniu. Prosiłbym o pomoc co należy zmienić w moim kodzie CSS aby strona niezależnie od rozdzielczości ekranu była zawsze wyświetlana jako wyśrodkowana. Próbowałem już kodu typu:

 

body { background-color: #BDBDBD; margin-right: auto;  margin-left: auto;  width: 770px; }

lecz to nic nie daje.

 

Moj kod CSS jest nastepujacy:

 

html,body{	text-align: center;	margin:auto; 	margin-bottom: 0%;	background-color: #ffffff;	background-image: none;	}#blok1{	position: absolute;		top: 50px;	left: 110px;	}#metal-1-layer_id{	position: absolute;		top: 292px;	left: 305px;	}#blok2{	position: absolute;		top: 292px;	left: 110px;	}#blok3{	position: absolute;		top: 343px;	left: 110px;	}#blok4{	position: absolute;		top: 360px;	left: 330px;	}#style4{	position: absolute;	font-family: sans-serif;	font-size: 13px;	top: 920px;	left: 470px;	color: black;	text-align: left;}#napis{	position: absolute;		top: 150px;	left: 160px;	}#news{	position: absolute;		top: 295px;	left: 110px;	}#button1{	position: absolute;		top: 80px;	left: 130px;}#button2{	position: absolute;		top: 80px;	left: 250px;}#button3{	position: absolute;		top: 80px;	left: 380px;}#news1{	position: absolute;	font-family: sans-serif;	font-size: 13px;	top: 360px;	left: 110px;	right:830px;	width: 200px;	height: 50px;	color: black;	text-align: left;	}#blok5{	position: absolute;		top: 370px;	left: 360px;}#blok6{	position: absolute;		top: 433px;	left: 360px;}#blok7{	position: absolute;		top: 433px;	left: 650px;}#blok8{	position: absolute;		top: 685px;	left: 360px;}#blok9{	position: absolute;		top: 685px;	left: 650px;}#obraz{	position: absolute;		top: 480px;	left: 360px;}#obraz1{	position: absolute;		top: 732px;	left: 360px;}#obraz2{	position: absolute;		top: 480px;	left: 630px;}#obraz3{	position: absolute;		top: 732px;	left: 630px;}#tekst{	position: absolute;	font-family: sans-serif;	font-size: 13px;	top: 470px;	left: 455px;	right:530px;	width: 120px;	height: 90px;	color: black;	text-align: left;	}#tekst1{	position: absolute;	font-family: sans-serif;	font-size: 13px;	top: 722px;	left: 450px;	right:530px;	width: 120px;	height: 90px;	color: black;	text-align: left;	}#tekst2{	position: absolute;	font-family: sans-serif;	font-size: 13px;	top: 470px;	left: 720px;	right:275px;	width: 120px;	height: 90px;	color: black;	text-align: left;	}#tekst3{	position: absolute;	font-family: sans-serif;	font-size: 13px;	top: 720px;	left: 720px;	right: 275px;	width: 120px;	height: 90px;	color: black;	text-align: left;	}

Proszę o jak najszybsza pomoc.

 

Pozdrawia C-oolt

[barat]

Najprostszym sposobem wyśrodkowania DIV'a w CSS jest po prostu nadanie mu margin: 0 auto;

 

Przykład:

 

CSS:

 

#container {width:700px; height:400px; background-color:#8800ff; margin:0 auto;}

 

HTML:

 

<div id="container"></div>

 

Szerokości i kolor tła tylko dla pokazówki.

Dodatkowo zmieniając na margin: 10px auto dasz 10px od góry i od dołu marginesu.

Możesz też ustawić osobno margines od góry i dołu:

margin:10px auto 5px auto;

[C-oolt]

Witam!!!

 

Problem w tym ze chce wyśrodkować cala stronę. Więc margin: 0 auto; umieściłem w znacznikach body:

 

html,body{	text-align: center;	margin-bottom: 0%;	background-color: #13181E;	background-image: none;	margin:0 auto;	}

lecz nie dało to dobrych efektów. Strona na rozdzielczości 1024x768 jest wyświetlana poprawnie lecz na 1280x800 jest przesunięta całkowicie do lewego boku.

 

Gdy ustawie na margin: 0% 10% auto; strona jest wyświetlana poprawnie na rozdzielczości 1280x800 (jest wyśrodkowana) lecz na rozdzielczości 1024x768 jest znowu przesunięta w prawo.

 

html,body{	text-align: center;	margin-bottom: 0%;	background-color: #13181E;	background-image: none;	margin:0% 10% auto;	}

Chce aby strona niezależnie od rozdzielczości (1024x768 wzwyż) była wyświetlana jako wyśrodkowana.

Edytowane 8 Lutego 2008 przez C-oolt

[PelzaK]

weź moze wrzuć tą stronę gdzieś, bo strasznie nie lubię parsować i kompilować kodu oczami... tak byś dał linka, napisał co nie tak i otrzymał odpowiedź co zmienić...

[barat]

Ale Ty mnie źle zrozumiałeś ...

 

Poprzez margin: 0 auto wyśrodkujesz STRONĘ a dokładniej kontener ...

Ustawianie marginesów dla body nie da efektu!

Body nie ma do czego mieć marginesu, ponieważ to body jest głównym elementem, poza body nie ma już nic. Co najwyżej BODY moze mieć padding :)

 

Wklej to w notatnik, zapisz i zobacz, że działa:

 

<!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=utf-8" /><title>Untitled Document</title><style type="text/css"><!--#centrowana {margin:10px auto; width:700px; height:500px; background-color:#00FF00;}--></style></head><body><div id="centrowana"></div></body></html>

Teraz rozumiesz?

Wystarczy, że pozostałe elementy strony będą znajdowały się w tym kontenerze i będzie wszystko ok.

 

Przykład z życia? bwebi.com :)

 

 

---------------

Edit

---------------

 

Zauważyłem, że używasz Position Absolute ... to jest BŁĄD!

To jest praktycznie nie do wyśrodkowania ... nie potrafisz poprawnie używać CSS'a ...

Absolute zawsze pozycjonowane jest względem body począwszy od jego górnego lewego rogu...

Tak się nie powinno robić stron

Poczytaj o pozycjonowaniu (float, marginesy, paddingi) ... na początek może być kurs browsehappy

Z książek ... może Kuloodporne strony wydawnictwa helion :)

Edytowane 9 Lutego 2008 przez barat

[SGJ]

ponieważ to body jest głównym elementem, poza body nie ma już nic.

W html'u. W xhtmlu puszczonym prawidłowo jako application/xhtml+xml body ma nad sobą jeszcze html.

[PelzaK]

a w IE nad htmlem jest jeszcze coś... cholera wie co :D