Autor Zpráva
Bruinee
Profil *
#1 · Zasláno: 15. 2. 2007, 04:24:12
Odpovědět Citovat
Zdravím, mám dotaz ohledně layoutu stránky vytvářeného pomocí plovoucích divů.

Konkrétně ho chci aplikovat třeba na www.brtnik.eu

Četl jsem, že když mám stránky pomocí divu, tak divy můžu načitat v libovolném pořadí. Jenomže mě to nedává smysl.

Pokud totiž načtu například první obsah, tak nemám páru o tom, jak poskládat stránku tak, aby vypadala stejně jako vypadá. Ony se ty divy totiž logicky skládají za sebe tak, jak je vkládám. Je jasné, že pokud bych měl absolutní pozicování, tak je to vpohodě, ale těžko udělám absolutní pozici na patičku, která se zobrazuje za - pokaždé jinak vysokým - obsahem.

Zobrazte si možná CSS, layout je v něm hned na začátku a lépe tak asi vše pochopíte.

Dík
Joker
Profil
#2 · Zasláno: 15. 2. 2007, 07:57:36
Odpovědět Citovat
Ona je otázka, proč se vůbec snažit ty <div>y přeházet, pokud to takhle funguje?

Ale ta změna pořadí se hlavně týká těch plovoucích prvků, tj. třeba menu v kódu dřív než obsah anebo menu později než obsah.
Railbot
Profil
#3 · Zasláno: 15. 2. 2007, 08:01:04
Odpovědět Citovat
Většinou je dobré mít sloupec s menu jak první, poté obsah a potom případně další sloupec. U velkých projektů se musí jako poslední sloupec načítat ten, kde bude nejvíc reklam, ale to je trošku mimo, ne tento případ :))
nothrem
Profil
#4 · Zasláno: 15. 2. 2007, 09:06:49
Odpovědět Citovat
Railbot: sloupec s menu jako první...

Podle mě je z hlediska přístupnosti lepší mít na začátku skrytý odkaz na menu, pak mít vlastní obsah a pak teprve menu... ale to záleží na každém jak mu to přijde vhodnější.

Ohledně uspořádání za nejlepší považuji asi tohle (ale někomu se to nemusí líbit): 

<div id="skryty_uvod">...<!-- tady jsou věci, které se musí zobrazit bez stylů; např. rychlé menu --></div>

<div id="obsah_stranky">...</div>

<div id="menu">...</div>

<div id="reklamy">...</div>

#skryty_obsah {display:none;}

#obsah_stranky {width:100%; margin-left:200px;margin-top:150px} /* šířky sloupců samozřejmě dle přání... */

#menu {width:200px; position:absolute;left:0;top:0;} /* pokud má stránka titulek, top bude příslušně posunut */

#reklamy {width:150px;position:absolute;right:0;top:0;}

V tomhle layoutu musí být patička uvnitř obsah_stranky (pro případ kdy bude menu/reklama delší než tělo stránky).
pozn: #obsah_stranky je dobré nastavit {position:relative;} aby se případné pozicování provádělo pouze uvnitř bloku.
Bruinee
Profil *
#5 · Zasláno: 15. 2. 2007, 14:34:11
Odpovědět Citovat
Prilis jsem to nepochopil, zkusim tedy jeste jednou lepe formulovat otazku.

Pomozme si obrazkem


Jediny zpusob jak toto nakodovat je

<div style="width:800px;"> cele obalene v divu pro potreby horizontalniho centrovani, atd...
<div id="hlavicka" style="position:relative; top:0; left:0; width:800px; height:200px;">...</div>
<div id="reklamy" style="position:relative; top:0 left:0; width:50px; float:left;">...</div>
<div id="menu" style="position:relative; top:0; left:0; width:200px; float:left;">...</div>
<div id="main" style="position:relative; top:0; left:0; width:550px; float:left;">...</div>
<div id="paticka" style="position:relative; top:0; left:0; width:800px; clear:"left">...</div>
</div>

Neco jsem psal zbytecne, aby bylo videt, jak to myslim.

Otazky.
1) Je tento kod spravne z optimalizacniho a logickeho hlediska?
2) Da se to udelat jinak lepe?
3) Chcu nahrat prvni id-main ... jak to udelam?
4) Jde vubec napsat poradi tech divu nejak jinak pri podmince, ze chci zachovat graficke rozvrzeni viz obrazek?
5) nejake dalsi pripominky k tomu?
tiso
Profil
#6 · Zasláno: 15. 2. 2007, 14:51:53
Odpovědět Citovat
Bruinee
1) nie, lepšie je hlavicka-main-menu-reklamy-paticka (alebo posledne 2 naopak)
2) určite áno, pomocou float miesto position
3) viď 1+2
4) -//-
5) pozri si layouty robené pomocou float..
Bruinee
Profil *
#7 · Zasláno: 15. 2. 2007, 14:55:02
Odpovědět Citovat
Boze muj, nez takovou pomoc, tak to mi radsi nedavej zadnou....

Ocenil bych, kdybys tady napsal kod, podkladu pro to je dost...
A ja tam vidim float v tech divech, ty ne?
tiso
Profil
#8 · Zasláno: 15. 2. 2007, 15:03:20
Odpovědět Citovat
Bruinee ten float som si nevšimol, nepredpokladal som totiž že za position bude i nejaký float...
Joker
Profil
#9 · Zasláno: 15. 2. 2007, 15:03:49
Odpovědět Citovat
Jediny zpusob jak toto nakodovat je
Neřekl bych jediný. Pokud jsou ty rozměry takhle "natvrdo" dané, dalo by se dát tomu pravému sloupci float:right a případně prostřední neplovoucí. No a v tom případě ty tři hlavní sloupce můžete do kódu dát v libovolném pořadí.
Bruinee
Profil *
#10 · Zasláno: 15. 2. 2007, 15:11:03
Odpovědět Citovat
Joker: Dekuju.

Mel jsem namysli, jediny zpusob KTERY ME NAPADL, jak toto nakodovat je...

Jeste budu trosku rypavy, protoze bych rad nejake koncepcni reseni. Teoreticky bych tam tech sloupcu mohl mit treba 7 a chtel bych prvni nacist ten 4., coz uz by timhle neslo.
Nebo bych treba chtel nacist prvni patku (neni duvod badat nad tim proc, jde mi ciste o logicke reseni problemu).
Joker
Profil
#11 · Zasláno: 15. 2. 2007, 15:21:30
Odpovědět Citovat
To už je otázka toho konkrétního řešení.

To třísloupcové "float:left - float:none - float:right" řešení by zase bylo lepší třeba v případě, kdy chcete mít na každé straně třeba 200px sloupec a prostřední sloupec nechat vyplnit zbytek obrazovky. To by se myslím s "float:left - float:left - float:left" dělalo těžko.
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0