Strona na środku gdy oddalamy. Opcje

[DonMuha]

Witam. Mam pewien problem... Chciałbym zrobić aby moja strona nie wyglądała badziewnie na innych rodzajach monitora niż mój. Chcę aby gdy się oddala (ctrl + kółko na myszce) strona jest na środku, tak jak tu: huntera.pl gdy oddalimy lub mamy większy monitor. Oto chodzi, że jak ja robie stronę, to dostosowuje ją do swojego monitora, ale gdy inni mają monitory 22cale lub więcej to strona jest bardzo brzydka... Mam nadzieje, że mi pomożecie.
Pozdrawiam,
DonMuha.

[icetique]

A stronę masz o stałej szerokości czy na % szerokości okna?

[DonMuha]

Hmm... Sam nie wiem, najlepiej bedzie jak dam to:

[HTML] pobierz, plaintext 
body {
  background: #25230e url('nic.png') no-repeat scroll top center;
}
 
#main
{
width: 99%; /* strona będzie troszkę mniejsza od szerokości ekranu*/
margin: 0px auto;
 
 /* określamy marginesy(odstęp)od końca ekranu: góra/dół po 10px, prawo/lewo:
 
po równo automatycznie */
border: 1px; /*ramka na około całego diva o szerokości 1px*/
}
 
#NewsHeadline {
  margin-top: 5px;
}
#newstext {
  margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 5px;
}
#newsauthor {
	margin-left: 10px;
	margin-right: 10px;
}
.line {
  background: url('line.gif') repeat-x;
}
#NewsHeadlineBackground {
  position: relative;
  height: 28px;
  margin-bottom: 5px;
  background-repeat: repeat-x;
  border-left: 1px solid #3a3825;
  border-right: 1px solid #3a3825;
	border-top: 1px solid #3a3825;
  border-bottom: 1px solid #3a3825;
}
 
#NewsHeadlineIcon {
  position: absolute;
  top: -1px;
  left: 0px;
  margin-left: 5px;
  margin-right: 5px;
  float:left;
}
 
#NewsHeadlineDate {
  font-size: 7pt;
  position: absolute;
  top: 9px;
  left: 50px;
  width: 85px;
  color: white;
}
 
#NewsHeadlineText {
  position: relative;
  top: 6px;
  left: 135px;
  font-size: 10pt;
  font-weight: bold;
  color: white;
}
#tex { background: url("menu_bg.png"); padding: 3px 0 3px 0; width: 145px; height: 17px;}
#tex ul { margin: 0 0 0px 0; width: 185px; }
#tex ul li { margin: 0px 0 0 0; height: 17px; padding: 1px 0 2px 0; width: 100%; background: url("menu_bg.png"); float: left; display: block; }
#tex a { display: block; color: #B0AEA3; margin: 0 0 0 15px; text-decoration: none; }
#tex a:hover { color: #fff; text-decoration: none; }
 
#logo
{
text-align: center; /*centrowanie tekstu*/
height: 75px;
border-bottom: 1px; /*ramka od dołu grubości 1px*/
background: #25230e;
}
#lmenu
{
 
float: left; /* przesunięcie elementu do lewej strony */
width: 160px;
}
 
#rmenu
{
 
float: right; /* przesunięcie elementu do prawej strony */
width: 160px;
}
 
#tresc
{
position: relative;
margin-left: 161px; /*trochę większe marginesu od szerokości menu dają nam pewność że ten blok "wsunie" się miedzy bloki zawierające menu */
margin-right: 161px;
padding: 1px; /* odległość od sąsiadujących elementów równa 1px */
/*nie określamy szerokości tego bloku po to by rozszerzał/zwężał się wraz ze zmianą rozdzielczości i wielkości monitora */
background: #25230e;
}
 
#stopka
{
clear: both; /* określa szerokość diva jako równą szerokości "main"*/
text-align: center;
height: 50px;
border-top: 1px;
color: white;
background: #25230e;
}
 
table
{
	width: 100%;
	border-spacing: 1px;
	border-collapse: separate;
	*border-collapse: expression('separate', cellSpacing = '1px');
	color: black;
 
	margin-left: auto;
	margin-right: auto;
}
 
/*tr
{
	height: 27px;
 
}*/
 
td, th
{
	padding-left: 11px;
	padding-right: 11px;
	padding-top: 5px;
	padding-bottom: 5px;
 
	background-color: #322f1e;
	/* background-color: #27343a; */
 
}
 
.input1 {
	padding: 2px;
	background-color: #322f1e;
	border-top: 1px solid #3a3825;
	border-right: 1px solid #3a3825;
	border-bottom: 1px solid #3a3825;
	border-left: 1px solid #3a3825;
}
 
/** HEADINGS */
 
h1, h2, h3, h4, h5, h6 {
	margin: 0px;
}
 
/** TEXTS */
 
body, th, td {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #B0AEA3;
}
 
input, textarea, select
{
    color: black; 
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
 
p, blockquote, ul, ol, dl {
	margin-top: 0px;
	margin-bottom: 1em;
	text-align: justify;
	line-height: 16px;
}
 
.text3 {
	font-size: 16px;
	font-weight: bold;
	color: #F5EED0;
}
 
.text4 {
	font-size: 11px;
	font-weight: normal;
}
 
.text5 {
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: bold;
	color: #F6F6EB;
}
 
.text6 {
	font-size: 10px;
}
 
.text7 {
	font-size: 10px;
	color: #CCCCC9;
}
 
.text8 {
	text-align: center;
	color: #676459;
}
 
/** LISTS */
 
.list1 {
	width: 137px;
	margin-left: 0px;
	padding-left: 20px;
	list-style: none;
}
 
 
.list1 li.first {
	background: none;
}
 
.list1 a {
	text-decoration: none;
	color: #CCCCC9;
}
 
.list1 a:hover {
	text-decoration: underline;
	color: #D8D8BA;
}
 
.list2 {
	margin-left: 0px;
	padding-left: 0px;
	list-style: none;
}
 
.list2 li {
	display: inline;
}
 
 
.list3 {
	margin-left: 0px;
	padding-left: 0px;
	list-style: none;
}
 
/** LINKS */
 
a {
	color: #E1E1C6;
}
 
a:hover {
	text-decoration: none;
}
 
.link1 {
	text-decoration: none;
	font-weight: bold;
	color: #E5DABE;
}
 
/** STYLES */
 
.style1 {
}
 
.style1 a {
}
 
.style1 a:hover {
}
 
 
.align-justify { text-align: justify; }
.align-right { text-align: right; }
 
img { border: none; }
 
.img1 {
	float: left;
	margin: 3px 15px 0px 0px;
}
 
.img2 {
	float: right;
	margin: 3px 0px 0px 15px;
}
 
hr { display: none; }
 
 
 
table
{
	width: 100%;
	border-spacing: 1px;
	border-collapse: separate;
	*border-collapse: expression('separate', cellSpacing = '1px');
	color: black;
 
	margin-left: auto;
	margin-right: auto;
}
 
/*tr
{
	height: 27px;
 
}*/
 
td, th
{
	padding-left: 11px;
	padding-right: 11px;
	padding-top: 5px;
	padding-bottom: 5px;
 
	background-color: #322f1e;
	/* background-color: #27343a; */
 
}
 
.login td
{
	padding: 0 0 0 0;
	height: auto;
	background-color: transparent; 
}
 
#white { color: white }
[HTML] pobierz, plaintext 

[Volume]

Domyślam się, że skoro użyłeś % to jeśli ktoś ma większa rozdzielczość (nie chodzi o wilekość ekranu bo nawet na 40 calowych ekranach mozna ustawic sobie rozdzielczosc np. (zakładam że np. Ty taka masz) 1024x768 i miec przykladowo rozlożoną strone jak u Ciebie, choć wiadomo że wielkość idzie w parze z rozdzielczością) to automatycznie strona mu się rozciąga co po nieprzemyślanym rozplanowaniu pozostałego kodu może skutkować np. tym że niektóre bloki gdzies pouciekają bądź dosadnie pisząc porozwalają..
Dlatego jeśli chcesz pozostać przy % to musisz testować strone na różnych rozdzielczościach (i jeśli deklarujesz wymiary w % to deklaruj je dla wszystkich główncyh bloków) i zakładaj przy tym różne warianty - nie tylko, że ktoś może mieć większą rozdzielczość ale też mniejszą. Przykładowo moge polecić za wzór stronę: http://pornel.net/ (i jego arty tez;])

Natomiast ja np. staram sie unikać % a w zamian deklarować stale wymiary w px. Po prostu zakładam dość wg mnie uniwersalne wymiary dla strony - szerokosc 800px (aktualnie rzadko zdarza się aby ktos dziala na mniejszych rozdzielczosciach) i wszystkie bloki również deklaruje w px (poza czcionką). Wtedy strona wszędzie wygląda jako tako (chyba że ktos ma naprawdę duż rozdzielczość to 800 px może wygloądać wąsko...) no ale wszystkim nie dogodzisz...

Ten post edytował Volume 24.03.2010, 18:43:10