Problém s rozlišením. – HTML / XHTML – Fórum – Programujte.com

Zdravim.Mám vytvořený web (na monitoru s rozlišením 1280x1024) a mám rozmístění stránky poskládané, jak chci.Ale když se na web podívám na monitorem s menším rozlišením, prvky se mi rozháží.Existuje nějaký kód, který optimalizuje web pro všechna rozlišení?Pls poraďte

To elias : Poradím ti optimalizovat pro jedno rozlišení a to v dnešní době pro 1024x768. A nebo se dá taky použít layout s procentuálními šírkami prvků, ale to nedoporučuju :)

Diky ale potrebuji spis poradit konkretne.Dávám sem kód:

body

{

  min-width: 630px; /* 2 x (LC plna-sirka + CC padding) + RC plna-sirka */

}



#container

{

  padding-left: 200px; /* LC plna-sirka */

  padding-right: 190px; /* RC plna-sirka + CC padding */

  position: relative; /* Resi "nekonecnou" stranku v IE7 */

}



#container .column

{

  position: relative;

  float: left;

}



#center

{

  padding: 10px 20px; /* CC padding */

  width: 100%;

}



#left

{

  width: 180px; /* LC width */

  padding: 0 10px; /* LC padding */

  right: 240px; /* LC plna-sirka + CC padding */

  margin-left: -100%;

}



#right

{

  width: 130px; /* RC width */

  padding: 0 10px; /* RC padding */

  margin-right: -100%;

}



#paticka-uvnitr

{

  clear: both;

}



/*** oprava pro IE ***/

* html #left

{

  left: 150px; /* RC plna-sirka */

}



/*** Stejna vyska sloupcu ***/

#container

{

  overflow: hidden;

}



#container .column

{

  padding-bottom: 1001em; /* X + padding-bottom */

  margin-bottom: -1000em; /* X */

}



/*** oprava paticky ***/

* html body

{

  overflow: hidden;

}



* html #paticka

{

  float: left;

  position: relative;

  width: 100%;

  padding-bottom: 10010px;

  margin-bottom: -10000px;

  background: #FFF; /*** Stejne jako u body ***/

}



/*** Jen pro vzhled ***/



body

{

  margin: 0;

  padding: 0;

  background: #FFCC00;

}



#hlavicka, #paticka-uvnitr

{

  font-size: large;

  text-align: center;

  padding: 0.3em 0;

  background: #FFCC00;

}



#left

{

  background: #FFCC00;

}



#center

{

  background: yellow;

}



#right

{

  background: #FFCC00;

}



#container .column

{

  padding-top: 1em;

  text-align: justify;

} 

#levypanelobal

{

float: left;

width: 170px;

margin: 5px 0px 5px 5px;

padding: 2px 2px 2px 2px;

font-size: 90%;

}



#pravypanelobal

{

float: right;

width: 130px;

margin: 5px 5px 5px 0px;

padding: 2px 2px 2px 2px;

font-size: 85%;

}



#hlavnipanelobal

{

padding: 5px 150px 5px 190px;

}



#hlavnipanelhlavicka

{

background-color: #dddddd;

}



#hlavnipanelpaticka

{

background-color: #dddddd;

} 

Asi ti neporadím konkrétně, ten dlouhý kód se mi číst nechce, navíc je to zbytečné, když ke stylu nepřibalíš i HTML.

Nejjednodušší je zabalit všechno do jednoho divu a tomu nastavit pevnou šířku v css (ale existují i jiné možnosti). V prohlížečích s menším rozlišení se obsah zobrazí v té šířce, v jaké je definován a návštěvník webu si kdyžtak zascrolluje.

Nevím jestli jsem to dobře pochopil, ale asi chceš, aby jsi měl 630px široký div, který by byl zarovnán na středu při každém rozlišení? Pokud ano, tak ten vytvoříš takto (btw. nechápu smysl atributu min-height u tagu body :)...

body {

  padding: 0;

  text-align: center;

}



div#kontejner {

  width: 630px;

  margin: 0 auto;

}

to Nefaritus:Díky moc za konkrétní pomoc.Zítra se na to mrknu na té obrazovce s menším rozlišením a doufám že už to bude v pořádku.Každopádně díky.

Rozliseni muzes zmenit i na sve obrazovce (leve mysitko na plocku->vlastnosti->zobrazeni). A ten samy efekt ma i zmenseni velikosti okna prohlizece.