| Autor | Zpráva | ||
|---|---|---|---|
| Yuhů Profil |
#1 · Zasláno: 13. 2. 2006, 01:36:03
Dokážete prosím někdo logicky vysvětlit, jak Firefox a Opera počítají pozici prvku s classem hlavicka a logo (na stránce je to text Tunisko.rovnou.cz) na stránce
http://tunisko.rovnou.cz ? Ta stránka ještě není hotová, zatím si tam jenom tak hraju, ale tohle mě fakt zarazilo. Absolutní pozice hlavičky zde totiž závisí na marginu sousedního a nižšího (!!!) objektu. Něco mi říká, že se tady počítá slévání marginů, ale moc tomu nerozumím. Prosím o radu a případně rozbor situace. |
||
| Drag Profil |
#2 · Zasláno: 13. 2. 2006, 07:52:33
v absolutním pozicování se margin musí dávat vždy od krajů stránky používej relativní pozicování je to sice trochu těší umístit ale lepší v relativnim pozicování se margin počítá od předchozího prvku
|
||
| Plaváček Profil |
#3 · Zasláno: 13. 2. 2006, 08:41:53 · Upravil/a: Plaváček
Okraje absolutně pozicovaných prvků se neslučují. Absolutně pozicovaný prvek je vyjmut z toku dokumentu a neovlivňuje nijak jiné bloky a stejně tak by jiné bloky neměly ovlivňovat absolutně umístěný blok. Fakt ale je, že tento problém vykreslování ve Firefoxu a Opeře už jsem zažil. V tvém případě je na vině definovaný margin-top: 130px pro blok .obal2. Dle mého soudu se v tomto případě chová správně IE a margin bloku .obal2 ignoruje. Asi nejjednodušší řešení je takováto úprava CSS:
.obal2 {margin: 0 170px 70px 70px;padding-top:130px;} Ukázka Mimochodem - absolutně pozicovaným prvkům je lepší nastavovat pevné rozměry (alespoň šířku), jinak se mohou chovat dost nevyzpytatelně. |
||
| Yuhů Profil |
#4 · Zasláno: 13. 2. 2006, 13:10:55
Děkuju, Plaváčku. Měl jsem podezření, že se Opera a Firefox chovají v tomto případě chybně, ale zarazilo, že se chovají chybně oba podobně. Tak jsem si myslel, jestli za to nemůže Explorer.
Možná to je úkol pro Pixyho. |
||
| Oswald Profil |
#5 · Zasláno: 13. 2. 2006, 14:27:05 · Upravil/a: Oswald
Podle mě se chová chybně IE.
Div .hlavicka je pozicován absolutně, je tedy vyjmut z toku dokumentu a nijak ho neovlivňuje. V tu chvíli nic nebrání tomu, aby se horní okraje divů .obal1 a .obal2 sloučily. Výsledek tedy je stejný, jako kdyby měl .obal2 horní okraj 130px a vzhledem k tomu, že má zároveň position relative, tak vzniká to posunutí o 130px. Toto si lze ověřit přidáním pravidla: .obal1 {padding-top: 1px} což zabrání onomu sloučení okrajů mezi obaly. Update: Teď jsem to prozkoumal pořádně a všiml si, že .hlavička je v kódu úplně někde jinde, než jsem myslel (čekal jsem jí na začátku :-), takže to, co jsem napsal, nedává moc smysl. Přesto si myslím, že to sloučení je ve FF a Opeře v pořádku. |
||
| Plaváček Profil |
#6 · Zasláno: 13. 2. 2006, 14:56:52
Sloučení ano. Ale není v pořádku, že margin úplně jiného bloku ovlivňuje absolutně pozicovaný element, který je umístěn v bloku jiném, relativně pozicovaném a ze kterého tedy přebírá souřadnicový systém pro své umístění.
|
||
| Oswald Profil |
#7 · Zasláno: 13. 2. 2006, 16:00:18
"Ale není v pořádku, že margin úplně jiného bloku ovlivňuje absolutně pozicovaný element, který je umístěn v bloku jiném, relativně pozicovaném a ze kterého tedy přebírá souřadnicový systém pro své umístění"
Pokusím se to vysvětlit: On ten blok (.obal2) svým marginem neovlivňuje přímo ten absolutně pozicovaný element (.hlavicka). Ovlivňuje svého rodiče (.obal1) -- přidá mu horní margin a posune ho tím dolů. A protože ten rodič (.obal1) je zároveň rodičem toho abs. poz. elementu (.hlavicka) a má positon:relative, tak se jeho posunutím změní i souřadnicový systém pro ten abs. poz. element (.hlavicka). A ještě zjednodušené HTML:
|
||
| habendorf Profil |
#8 · Zasláno: 13. 2. 2006, 16:44:58
Takže můj názor: v úvahách je třeba zcela ignorovat div.hlavicka. Tento abs. pozicovaný div obsahuje jen další abs. pozicovaný prvek a to je jako by neobsahoval nic. Div.hlavicka má tedy nulovou šířku i výšku a jakoby tam nebyl (lze ověřit borderem nebo úplným odstraněním - nic se nezmění).
Problémem je horní margin obalu2, který se počítá od konce obsahu nadřazeného elementu. Jenže nadřazený element obal1 žádný obsah nemá. Důkazem budiž, že <div class="obal1"> <div class="obal2"> stačí upravit na <div class="obal1"> <div class="obal2"> a vše je v naprostém pořádku. Pokud by mezera vadila, stačí .obal1 {font-size:0; line-height: 0;} a pro .obal2 zas nastavit požadované hodnoty. Jinak ta konstrukce <div class="hlavicka"> <p class="logo"> <a href="http://tunisko.rovnou.cz">Tunisko.rovnou.cz</a> </p> </div> včetně použitého stylu je IMHO velmi nešťastná, osobně bych to napsal jen jako <a href="http://tunisko.rovnou.cz">Tunisko.rovnou.cz</a> a použil display:block; plus další potřebné vlastnosti. Toť můj názor na věc. |
||
| Oswald Profil |
#9 · Zasláno: 13. 2. 2006, 16:55:17
habendorf
Ono stačí přidat divu .obal1 horní padding nebo border a tím k tomu sloučení (a posunu výchozích souřadnic pro .hlavicku) nedojde. |
||
| habendorf Profil |
#10 · Zasláno: 13. 2. 2006, 17:04:07
Oswald: O .hlavicku vůbec nejde, ta je mimo hru. Nastav si pro ni border, ať ji vidíš, a koukni na to. Co se týče DOMu, tak sice .logo je uvnitř .hlavicky, ale co se týče layoutu, tak nikoliv.
|
||
| Oswald Profil |
#11 · Zasláno: 13. 2. 2006, 17:16:13
habendorf
Teď moc nerozmím, co se mi snažíš sdělit :-). Ten předchozí příspěvek jsme napsal pouze jako reakci na tohle: <div class="obal1"> <div class="obal2"> stačí upravit na <div class="obal1"> <div class="obal2"> |
||
| habendorf Profil |
#12 · Zasláno: 13. 2. 2006, 17:26:17
Oswald: No napsal jsi
Ono stačí přidat divu .obal1 horní padding nebo border a tím k tomu sloučení (a posunu výchozích souřadnic pro .hlavicku) nedojde. Tak jen říkám, že o.hlavicku tu vůbec nejde. |
||
| Oswald Profil |
#13 · Zasláno: 13. 2. 2006, 17:42:54
Vím, že ti o hlavičku nejde, proto jsem zmínku o ní dal do závorek :). V té větě není nijak důležitá. Předtím jsem se ale snažil Plaváčkovi popsat vztah mezi tím sloučením marginů a právě tou hlavičkou, proto jsem ji tam zmínil.
|
||
|
Časová prodleva: 19 dní
|
|||
| Wjenceslaw Profil |
#14 · Zasláno: 4. 3. 2006, 22:35:30 · Upravil/a: Wjenceslaw
Můžete mi prosím někdo vysvětlit proč mi tak šíleně blbne levé menu v Exploreru?
http://milersky.xf.cz/czech/zacatek.php a styly jsou na http://milersky.xf.cz/files/styles.css Díky! |
||
| Wjenceslaw Profil |
#15 · Zasláno: 4. 3. 2006, 23:00:19
Už jsem si to vyřešil pomoci
{ _margin-left: 45px; } pro IE :) |
||
|
Časová prodleva: 19 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0