Autor Zpráva
Honza1234
Profil
Dobrý den!
Mám takový problém. Stránky jsem si udělal v css. Napozicoval jsem všechen obsah na střed. Můj monitor je širokoúhlý - 22", rozlišení, které používám 1680x1050 px. Když stránky spustím, vše se zobrazí tak, jak má. Hlavička, pravá strana, levá strana, obsah a to vše se drží uprostřed. Po stranách je prázdné místo. Stránky jsem si chtěl ještě zobrazit na mém starém monitoru. Tentokrát není širokoúhlý, ale klasický - 19", rozlišení, které používám 1280x1024 px. No a když jsem spustil stránky, tak vůbec nevypadali jako na širokoúhlém monituru. Sice je vše na středu, ale stránka se zobrazí v levé části, kde je vidět: levé prázdné místo, levá strana (nějaká ta rubrika), obsah a teď není vidět kousek hlavičky, půlka pravé strany a žádné prázdné místo v pravé části. Aby to bylo na středu, tak se musí posunout horizontální lišta. Vše se zase přesune do levé části, když kliknu na nějaký odkaz v rubrice. A teď bych od vás potřeboval poradit, jestli se to náhodou nedá nějak optimalizovat, aby to šlo na všech monitorech. Možná bych ty stránky měl udělat na starém monitoru a širokoúhlý si s tím lépe poradí. Ale opravdu nevím. Děkuji moc za každou odpověď a nápad (jestli to tu už někde je, tak se omlouvám za zbytečný příspěvek).
Philber
Profil
Nebyl by lepší odkaz, protože si myslím ze problém asi nebude v monitoru ale ve stránkach,.. je sice pravda ze jinej menší atp monitor může stránky zobrazit jinak ale nemělo by se to zkazit az tak moc
Honza1234
Profil
Tak to asi to nebude monitorem, ale tím rozlišením. Na širokoúhlém monitoru jsem změnil rozlišení z 1680x1050px na 1280x1024px. Toto rozlišení mám na starém monituru, no a posunulo se to stejně i na širokoúhlém. Odkaz na stránky: www.webuschovna.wz.cz . Nebo, jak si napsal, je chyba ve stránkách.
Trejpa
Profil
Honza1234
Pro rozvržení stránky je lepší než pozicování použít float.
Dneska se stránky dělají nějak takto:
<style>
 /* #vse uprostřed v IE 6 */
body { text-align: center; }
 /* #vse uprostřed jinde než v IE 6, hlavní šířka */
#vse { text-align: left; margin: 0 auto; width: 960 px; }
 /* pozadí stránky simulující tři stejně vysoké sloupce */
#vse { background: url(trisloupce.jpg) repeat-y; }
 /* hlavička: cokoliv, třeba pozadí a výška (šířka se přizpůsobí do #vse) */
#hlavicka {  }
 /* obtékání sloupců */
#leva, #obsah, #prava { float: left; }
 /* šířka sloupců (pro jistotu ubrat pixel nebo procento) */
#leva { width: 200px; } #obsah { width: 558px; } #prava { width: 200px; }
 /* patička: ukončení obtékání, pozadí a třeba výška */
#paticka { clear: left; }
</style>
<div id=vse>
  <div id=hlavicka></div>
  <div id=leva></div>
  <div id=obsah></div>
  <div id=prava></div>
  <div id=paticka></div>
</div>




Pokud zarputile trváš na (podle mě) neefektivním pozicování, tak se ode mne inspiruj. Principem je vytvořit vystředěný blok, který má nastaveno position: relative; a všechny v něm vnořené elementy se pozicují od jeho levého horního rohu (tedy ne od začátku stránky, jak jsi to dělal dosud).
KGW
Profil
Když máš v css u hlavičky tohle width: 1650px; tak ti to na jiný rozlišení fungovat nebude.
Honza1234
Profil
Trejpa
Hele mohl by si prosímtě zveřejnit nějakou stránku, kde tento styl zápisu bude vysvětlený? Myslím, jak se vytváří kostra, co znamená /* */, co se píše a co nepíše za #vse {}, jak vytvářet pozadí sloupce atd. Dodatek: Tenhle zápis je stejný jako ten můj, akorát je tam něco přidané?
Ještě se chci zeptat, v tomhle zápisu, by ty stránky šli na všech rozlišeních?

KGW
Jj, to máš pravdu, ale když jsem to změnil na 1280, tak se to sice zobrazilo v pořádku na rozlišení 1280x1024, ale na 1650x1050, se to přesunulo doprava, ale vše bylo vidět tak, jak má. Já chci, aby to na všech rozlišeních bylu uprostřed.
Zdeněk Košťál
Profil
Honza1234
http://www.jakpsatweb.cz/
panther
Profil
Honza1234
Hele mohl by si prosímtě zveřejnit nějakou stránku, kde tento styl zápisu bude vysvětlený?
třeba tady

co znamená /* */
komentář

co se píše a co nepíše za #vse {}
CSS deklarace, co chceš ;-). vse je id divu

Tenhle zápis je stejný jako ten můj, akorát je tam něco přidané?
rozdíl snad vidíš, ne?

Já chci, aby to na všech rozlišeních bylu uprostřed.
Centrování a jiné zdroje. Hledej.
Honza1234
Profil
panther
Dík borče za odkazy!

Mám ještě dotaz. Nechal jsem se inspirovat podle tvého odkazu na centrování. Udělám hlavičku, pod tím levý sloupec a pak jsem udělal pravý, který jsem chtěl, aby byl taky pod hlavičkou. No ale ta pravá strana se cpe pořád pod ten levý sloupec, a když udělám top: 0px; tak se to posune úplně pod ten levý sloupec. Tak jsem šel do mínusu top: -1000px :). Pravý sloupec se konečně zobrazil pod hlavičkou. Stejně tak jsem to musel udělat s obsahem.
Bohužel, stránka nekončí hned, tam, kde je konec sloupce, ale jde stále dolů. Asi se řídí podle toho pravého sloupce a obsahu, který tam chybí.
Můžeš se na to prosím podívat?:

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>title</title></head>
<style type="text/css"> 

/*centrování:*/
body {text-align: center;}
#hlavicka {position: relative; width: 1150px; height: 350; top: 0; text-align: left;margin: 0 auto;}
#levy {position: relative; width: 250; height: 1000; right: 450px; text-align: center; margin: 0 auto;}
#pravy {position: relative;  width: 250px; height: 1000; top: -1000px; left: 450px; text-align: center; margin: 0 auto;}
#obsah{position: relative; width: 600px; top: -2000px; left: 0px; text-align: center; margin: 0 auto;}

}
/*samotný obsah:*/

body{background: White none;font-size: 1em;line-height: 1.3em;}

#hlavicka{background: #EEE none;}
p{text-indent: 0.3em;margin: 15px 10px;}

#levy{background: Gray; }
p{text-indent: 0.3em;margin: 15px 10px;}

#pravy{background: Gray; }
p{text-indent: 0.3em;margin: 15px 10px;}

#obsah 
p{text-indent: 0.3em;margin: 15px 10px;}

</style>

<body><div id="hlavicka">
<p>Hlavicka</p>
</div>

<div id="levy">
<p>Levý sloupcec, který se řídí podle hlavičky.</p>
</div>

<div id="pravy">
<p>Pravý sloupec, který se řídí podle levého sloupce.</p>
</div>

<div id="obsah">
<p>Obsah, který se asi řídí podle pravého sloupce</p>
</div>

</div>
</body>
</html>


Ale už to na všech rozlišeních jde. Díky moc!
panther
Profil
Honza1234
proč to proboha všechno pozicuješ? Posílal jsem ti odkaz na floatovaný layout.. Tohle se mi číst nechce..

Jen zběžně:
- chybí ti tam jednotky
- nezadávej pevnou výšku
- šířka 1150px je moc, max. 980px
- background: white none; je co?
Trejpa
Profil
Honza1234
Nechal jsem se inspirovat podle tvého odkazu na centrování.
Nenechal. Nic jsi nepochopil.

Ty si to pozicování z hlavy vytlouct nenecháš, co? Ať je tedy po tvém. Tak ještě jednou a pomaleji:

1) Vytvoř blok uvnitř body a pojmenuj ho (třeba id="vse" jako v mém příkladu).
<body><div id="vse"></div></body>

2) Všechen obsah dej do tohoto bloku.
<body><div id="vse">
  <div id="hlavicka"> ... </div>
  <div id="leva"> ... </div>
  ...
</div></body>

3) Vycentruj ten blok pro Internet Explorer 6 a starší.
body { text-align: center; }

4) Vycentruj ten blok pro ostatní prohlížeče. Nastav mu šířku, případně výšku.
#vse { text-align: left; margin: 0 auto;  width: 980px; }

5) Nastav bloku relativní pozici. To ti umožní, aby bloky, které jsou uvnitř, šly pozicovat absolutně s tím rozdílem, že bod [0,0] není na začátku stránky, ale v začátku tohoto vystředěného bloku.
#vse { position: relative; }

6) Nastav rozměry a absolutní pozici vnořeným blokům (nula začíná v levém horním okraji bloku #vse, ne celé stránky).
#hlavicka { position: absolute; top: 0px; left: 0px; width: 980px; height: 200px;}
#leva { position: absolute; top: 200px; left: 0px; width: 240px; height: 800px;}
#obsah { position: absolute; top: 200px; left: 240px; width: 600px; height: 800px;}
   ...


Uvidíme, kam se s tím dostaneš nyní.
Honza1234
Profil
Trejpa
Hele tak moc díky. Asi bych to sám opravdu nedal, i když by to zvládla i opice.
Pokusil jsem se to nějak udělat a zanechávám odkaz: http://www.webuschovna.wz.cz/ .
Tak snad už je to všechno v pořádku. A ještě jednou dík!
panther
Profil
Honza1234
Tak snad už je to všechno v pořádku.
ještě odbourej „height: 800px“ u všech sloupců. Nevypadá dobře, když jsou prázdné dlouhé ani když jsou 800px vysoké a obsah se do nich nevejde - je třeba scrollovat

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: