| Autor | Zpráva | ||
|---|---|---|---|
| Joan Profil |
#1 · Zasláno: 19. 5. 2011, 15:32:06 · Upravil/a: Joan
Zdravím,
potřebuji ještě doladit pozicování obrázků vytvořených pomocí document.createElement("img") v tomto mém příkladu: Obecná kostra je <div id="blok1"> <a href="A1.jpg"><img src="A1_th.jpg" width="60px"></a> <a href="A2.jpg"><img src="A2_th.jpg" width="60px"></a> </div> <div id="tady1"></div> kde z jednotlivých bloků (zde pro příklad jenom jeden) beru náhledy a javascriptem (onclickem) je otevírám ne do nového okna, ale samostatně na stránce. Klíčová je pro mě deklarace pro vertikální umístění: .uprav1 {margin-top: -34em;}
a tato je zjištěná experimentálně. Jednak si neumím vysvětlit, proč tam musí být záporný margin-top a navíc tak velký (když obrázek začíná vlastně na začátku stránky) a proč se úplně jinak zachová "margin-bottom: 34em". Nerozumím tomu, od jaké pozice se to vlastně počítá. Mým přáním je, aby se zvětšenina zobrazovala vždy v určité výšce na obrazovce vzhledem k náhledu obrázku (v podstatě vedle něj), tj. absolutně vůči realivní pozici výchozího bloku "blok1" atd. Ráda bych, aby mi stačil jeden margin-top stejný pro všechny zvětšované obrázky bez ohledu na jejich počet. Jenomže deklarace #blok1 {position: relative;}
.uprav1 {position: absolute; margin-top: 2em;}Když totiž nějaký obrázek přidám (a samozřejmě upravím skript na správný počet bloků), tak se mi rozsype pracně odhadnuté svislé pozicování dosavadních obrázků :-( Děkuji za nápovědu! |
||
| Jozin Profil |
#2 · Zasláno: 20. 5. 2011, 08:59:31
Zdravím,
začnu tím, u čeho vím, co chceš: 1. záporný margin posune blok nahoru, kdežto kladný ho posune dolů. Vůči spodnímu marginu je tedy efekt jiný. Spodní dává odsazení od bloku, co bude pod ním (nemusí to být bloky) 2. pokud dáváš position: relative|absolute; tak je vhodné potom použít "top|left|right|bottom", příklad top: 10px u position: absolute dá blok 10px vlevo nahoře. 3. proč vlastně vytváříte obrázek? když tam máte <div id="tady1"></div>, tak tam dejte i obrázek a pak to bude například document.getElementById('uprav'). Potom při ladění prostě dáte barevné pozadí tomu divu a napozicujete si ho jak chcete a máte hotovo. Jozin. |
||
| Joan Profil |
#3 · Zasláno: 20. 5. 2011, 12:41:52
Jozin:
Díky za snahu! Změna margin-top na margin je opravdu markantní, ale pořád se mi nedaří dosáhnout toho, aby se mi onclickem zobrazený obrázek ukázal v konkrétní absolutní pozici oproti relativně pozicovanému bloku, ve kterém je nakódován náhled. Vytvoření elementu přes document.createElement("img") mi bylo poraděno a skript funguje. Že by se pozicovací vlastnosti takto vytvořeného elementu výrazně lišily od normálního elementu v tagu IMG? Ostatní deklarace totiž fungují přesně, jak potřebuji. |
||
| Jozin Profil |
#4 · Zasláno: 20. 5. 2011, 13:13:03
Nemyslím si, že by se ty vlastnosti lišili, jen mám rád, když už předem vím, jak to bude vypadat a poté do toho zasahuji logikou.
Snad se nemýlím: absolutní pozicování je vůči celému oknu nikoli elementu ve kterém je. Bude podle mě potřeba relativně napozicovat. |
||
| panther Profil |
#5 · Zasláno: 20. 5. 2011, 13:32:33
Joan:
„Jednak si neumím vysvětlit, proč tam musí být záporný margin-top a navíc tak velký (když obrázek začíná vlastně na začátku stránky) a proč se úplně jinak zachová "margin-bottom: 34em"“ dolní margin a horní záporný margin jsou dvě odlišné deklarace, není důvod, aby byly stejné. Dolní margin udělá mezeru pod elementem, záporný horní margin posune element nahoru, jako by byl pozicován relativně se záporným topem. Měla bys někde ukázku, jak výsledné HTML vypadá? nebo „obecná kostra“ v [#1] je toto? Jozin: „Snad se nemýlím: absolutní pozicování je vůči celému oknu nikoli elementu ve kterém je.“ souřadnice [0,0] absolutně pozicovaného elementu je v levém horním rohu posledního (nejbližšího) nadřazeného elementu, který je též pozicovaný. Může to být i body. |
||
| Joan Profil |
#6 · Zasláno: 20. 5. 2011, 14:24:02 · Upravil/a: Joan
panther:
Dolní margin udělá mezeru pod elementem, záporný horní margin posune element nahoru, jako by byl pozicován relativně se záporným topem. Á, už rozumím, díky. Ale taky je potřeba vědět, od kterého elementu se záporný margin odrazí nahoru - asi to nemusí být vždy od spodního okna prohlížeče, že? Měla bys někde ukázku, jak výsledné HTML vypadá? nebo „obecná kostra“ v [#1] je toto? Přesně tak! Chci přijít na princip, jak jedinou deklarací svislého pozicování nastavit všechny zvětšené obrázky vzhledem k poloze náhledu. Díky! EDIT: změnila jsem <div id="tady1"></div> <img id="tady1"></div> a vložila v kódu dovnitř DIVu "blok1" v domnění, že createElementem vytvořený obrázek může mít vůči pozicování nějaké výhrady, ale houbeles. Skript po nutné drobné úpravě zobrazuje nemlich stejně jako při použití createElementu("img"). Pročpak se mi absolutně pozicovaný obrázek v relativně pozicovaném DIVu neustále zobrazuje vhledem k oknu prohlížeče anebo vzhledem k poslednímu prvku na stránce? Něco jsem nepochopila? |
||
| panther Profil |
#7 · Zasláno: 20. 5. 2011, 15:13:30 · Upravil/a: panther
Joan:
„od kterého elementu se záporný margin odrazí nahoru“ s nulovým marginem má element nějakou pozici. Záporný horní margin posouvá element od této „defaultní“ pozice. „margin: -2px 0 0“ tak posune element o 2px nahoru, zatímco „margin: 0 0 2px“ nechá element na své pozici a udělá pod ním 2px mezeru. Promiň, přehlédl jsem odkaz. Všechny obrázky se ti otevírají v „#tady3“, který je na spodku dokumentu (a je tedy nutné jej násilně přesunout nahoru na požadovanou pozici), namísto v (asi) chtěném „#tady1“, resp. „#tady2“. |
||
| Joan Profil |
#8 · Zasláno: 20. 5. 2011, 15:21:24
panther:
Všechny obrázky se ti otevírají v „#tady3“ No já bych zase řekla že ne, protože zvětšeniny se na ukázkové stránce otevírají vždy VEDLE náhledů. Kdyby byly otevírané všechny v "#tady3", tak by se zobrazovaly všechny úplně vespod, ne? Kdyby tak obrázky šly aspoň napozicovat od horní hrany okna a ne od dolní (záporným obrovským marginem), tak bych mohla přidávat další obrázky bez rozsypání původních deklarací... Chci jim prostě vnutit hranice bloků "blok1", "blok2" atd. - jde to prosím Tě vůbec? |
||
| panther Profil |
#9 · Zasláno: 20. 5. 2011, 15:28:09 · Upravil/a: panther
Joan:
dle firebugu se otevírají všechny v „#tady3“. „protože zvětšeniny se na ukázkové stránce otevírají vždy VEDLE náhledů“ ano, za to může ten různě velký záporný horní margin. Je to 9em pro „C“ obrázky, 23em „B“ obrázky a 34em pro „A“ obrázky. „Chci jim prostě vnutit hranice bloků "blok1", "blok2" atd. - jde to prosím Tě vůbec?“ otevírat je v bloku s příslušným indexem :-). Záporný margin budeš muset použít i tak, ale pro všechny bloky stejný (a pravděposobně to bude stejný, jako je teď u „C“ obrázku). |
||
| Joan Profil |
#10 · Zasláno: 21. 5. 2011, 21:56:48
panther:
otevírat je v bloku s příslušným indexem :-) No však právě o to se celou dobu snažím, ale nějak mi nezapaluje, jak :-). Ve skriptu mám uvedeno, že se mají náhledy z "blok1" otevírat v "tady1" (a obdobně další), tak proč se mi vše láduje do toho posledního umístění? |
||
|
Časová prodleva: 13 let
|
|||
0