| Autor | Zpráva | ||
|---|---|---|---|
| Werner Profil * |
#1 · Zasláno: 30. 6. 2006, 12:30:01
Mám ve zdrojovém kódu:
<div id="text"> ......................................... ................................................... ...................................... ......................................... ................................................... ...................................... ......................................... ................................................... ...................................... ......................................... ................................................... ...................................... ......................................... ................................................... ...................................... </div> <div id="menu"> ---------------------------------------------------------------------- ------------------------------------ </div> Potřeboval bych pomocí CSS tyto dva prvky přehodit, aby se nejprve (v prohlížeči) zobrazilo Menu a po něm Text, je to nějak možné pomocí CSS vlastností? Díky |
||
| Schampik Profil |
#2 · Zasláno: 30. 6. 2006, 12:37:27
musis u tech prvku nastavit style="position:absolute" a pak definovat kde se bude nachazet (margin ...... ) :0)
|
||
| WanTo Profil |
#3 · Zasláno: 30. 6. 2006, 12:42:30
Jak to vypadá v prohlížeči? Jsou vedle sebe nebo pod sebou?
Myslím, že dobré řešení (bez absolutní pozice) existuje v obou případech. |
||
| Dero Profil |
#4 · Zasláno: 30. 6. 2006, 12:49:47
Myslím, že dobré řešení (bez absolutní pozice) existuje v obou případech.
I pod sebou? V takovém případě bych věděl asi o jediném řešení bez absolutní pozice, ale to rozhodně nepatří do základní webkodérské výbavy. Předpokládám samozřejmě, že ani #text, ani #menu nemají určenou výšku a šířka je rovna šířce nadřazeného prvku. Jak bys to tedy řešil Ty? |
||
| habendorf Profil |
#5 · Zasláno: 30. 6. 2006, 13:02:47
Buď chápu otázku blbě já, nebo všichni předchozí. Werner podle toho jak se ptá nechce, aby bylo menu nad nebo vlevo od textu, on chce aby se vykreslovalo nejprve ... a po něm Text. A protože browser vykresluje postupně tak, jak mu natékají data (zjednodušeně řečeno, jsem si vědom), tak bude vždycky vykreslovat prvně text.
|
||
| Dero Profil |
#6 · Zasláno: 30. 6. 2006, 13:18:27
habendorf: Ano, podle toho, jak se ptá, by se dalo usuzovat, že mu jde o dřívější vykreslení. Ale stejně si přesto myslím, že je to jen nevhodně formulováno a že mu jde o pozici prvku na stránce.
Však si počkáme na reakci. |
||
| habendorf Profil |
#7 · Zasláno: 30. 6. 2006, 13:21:18
Pokud by to bylo tak, tak menu vlevo by nebyl problém. Menu nad by nebyl problém při použití abs. pozice, bez ní bych se musel zamyslet.
|
||
| WanTo Profil |
#8 · Zasláno: 30. 6. 2006, 13:23:28 · Upravil/a: WanTo
Dero
Zklamu tě, musím se totiž přiznat, že nevím jak na to. Původně jsem uvažoval o záporném marginu pro menu. Bohužel až při čtení Tvého příspěvku mi došlo, že neznám výšku obsahu. Každopádně když už jsem řekl, že řešení znám, a já ho neznám, tak se o něj alespoň pokusím. Když na něj přijdu, určitě dám vědět. |
||
| WanTo Profil |
#9 · Zasláno: 30. 6. 2006, 14:30:03
Musím se pochlubit, přišel jsem na to :-)
Stačí uzavřít oba prvky do obalu, kterému se nastaví display: table. Divu #menu se pak nastaví display: table-caption. <div style = "display: table;"> Text <div style = "display: table-caption;">Menu</div> </div> |
||
| Dero Profil |
#10 · Zasláno: 30. 6. 2006, 14:31:44
WanTo: Nefunguje v IE, dodejme. AFAIK tedy... již jsem si s tím kdysi hrál.
|
||
| Werner Profil * |
#11 · Zasláno: 30. 6. 2006, 14:32:59
Chci aby bylo menu NAD. Zkrátka jde mi o to, aby vyhledávač viděl nejprve text a až po něm menu, zatímco náývštěvník viděl menu a pak text. Omloluvám se, že nejsem schopen se vyjádřit, ale jde mi o toto, jak udělat z:
<div id="text"> .... </div> <div id="menu"> --- </div> pomocí CSS obdobu tohoto: <div id="menu"> .... </div> <div id="text"> --- </div> Hmm a nejlépe bez absolutní pozice + oba prvky mohou mít nastavenou šířku (oba stejnou - vizuálně pod sebou), výška se může měnit.. Uff? |
||
| WanTo Profil |
#12 · Zasláno: 30. 6. 2006, 14:34:12
Dero
Taky na to teďka koukám. Ještě se zamyslím, jestli neexistuje nějaké řešení i pro IE. |
||
| habendorf Profil |
#13 · Zasláno: 30. 6. 2006, 14:50:36
WanTo: Pro IE jsem to vyřešil já, je to primitivní :o)
|
||
| WanTo Profil |
#14 · Zasláno: 30. 6. 2006, 14:58:16
Už se o to nebudu dál snažit, jsem rád, že jsem to vymyslel alespoň pro ne-IE prohlížeče :-) Podívám se na řešení ostatních, tedy Dera a habendorfa.
|
||
| habendorf Profil |
#15 · Zasláno: 30. 6. 2006, 15:02:15
Pro IE:
.obal, .menu, .text {filter:FlipV;width:100%;} V jednoduchosti je síla. Prvně se obal převrátí vzhůru nohama, takže menu je nahoře a text dole. A aby to bylo čitelné, menu a text se znovu převrátí. |
||
| Dero Profil |
#16 · Zasláno: 30. 6. 2006, 15:07:16
habendorf: Šibalské řešení. :o)
Řekl bych, že v kontextu stránky to ale tak snadné nebude. Jako cvičení však hezké. |
||
| WanTo Profil |
#17 · Zasláno: 30. 6. 2006, 15:20:19
habendorf
Zkombinoval jsem své řešení s nadpisem tabulky (display: table-caption;) s Tvým pomocí filtrů. Mělo by to fungovat všude, jen můj Linuxový IE emulovaný pod wine ty filtry prostě nezobrazí :-( |
||
| habendorf Profil |
#18 · Zasláno: 30. 6. 2006, 15:37:42
WanTo: ani se nedivím. Jinak to tvoje !IE řešení je bezva, obávám se že, bych na to v životě nepřišel.
Dero: dozrál čas na vytasení žolíka z rukávu, který rozhodně nepatří do základní webkodérské výbavy. Napadá mě jen nechat blok nějak záměrně přetéct s tím, že by se mohl nějak podsunout, ale nemám chuť si s tím hrát. Zajímalo by mě tvoje řešení. |
||
| WanTo Profil |
#19 · Zasláno: 30. 6. 2006, 15:42:36
habendorf
Procházel jsem si seznam (snad úplně všech) CSS vlastností. Narazil jsem na vlastnost caption-side (nicméně jsem ji nepoužil), která mě dovedla až k display: table-caption. |
||
| habendorf Profil |
#20 · Zasláno: 30. 6. 2006, 15:46:18
WanTo: pěkný odkaz, jde do favorites, dík
|
||
|
Časová prodleva: 19 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0