| Autor | Zpráva | ||
|---|---|---|---|
| Honza1234 Profil |
#1 · Zasláno: 30. 5. 2009, 15:48:39
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 |
#2 · Zasláno: 30. 5. 2009, 16:16:34
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 |
#3 · Zasláno: 30. 5. 2009, 16:54:20 · Upravil/a: Honza1234
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 |
#4 · Zasláno: 30. 5. 2009, 17:36:06
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 |
#5 · Zasláno: 30. 5. 2009, 17:47:10
Když máš v css u hlavičky tohle width: 1650px; tak ti to na jiný rozlišení fungovat nebude.
|
||
| Honza1234 Profil |
#6 · Zasláno: 30. 5. 2009, 19:55:07 · Upravil/a: Honza1234
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 |
#7 · Zasláno: 30. 5. 2009, 20:23:55
Honza1234
http://www.jakpsatweb.cz/ |
||
| panther Profil |
#8 · Zasláno: 30. 5. 2009, 20:42:39
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 |
#9 · Zasláno: 31. 5. 2009, 20:52:56 · Upravil/a: Honza1234
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 |
#10 · Zasláno: 31. 5. 2009, 21:00:54
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 |
#11 · Zasláno: 31. 5. 2009, 21:16:43
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 |
#12 · Zasláno: 1. 6. 2009, 17:46:41
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 |
#13 · Zasláno: 1. 6. 2009, 19:31:07
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 |
||
|
Časová prodleva: 15 let
|
|||
0