| Autor | Zpráva | ||
|---|---|---|---|
| vozka Profil |
#1 · Zasláno: 3. 12. 2009, 16:26:30
Ahoj, asi jsem Lama, ale narazil jsem problém s divem.
Mám div zanořený do divu a ten ještě jednou zanořený viz ukázka: <html> <body> <div style="width: 996px; background:blue; margin: 0px; padding: 0px"> <div style="margin: 30px 0px 0px 20px; padding:0px; background: green;width:265px; height:370px;"> <div style="font-weight: bold; color: black; text-align:left; border:0px; width:210px; height:200px; background: red; margin: 50px 0px 0px 20px; padding: 10px 0px 0px 0px;"> </div> </div> pokus</div> </body> </html> Očekával bych, že modrý čtverec začne úplně nahoře, pak bude odsazený zelený 30 shora a 20zleva a pak bude červený zase posunutý shora od toho jeho nadřízeného o 50 a zleva o 20. Ovšem co se stane je to, že zleva mi to odskočí OK, ale shora se to celé posune o 50 včetně toho celkového modrého rámu. Poraďte prosím... |
||
| zvěřiňák Profil |
#2 · Zasláno: 3. 12. 2009, 20:06:26
vozka:
Dej do divů nějaký obsah nebo jim přidej border. <html> <body> <div style="width: 996px; background:blue; margin: 0px; padding: 0px">hokus <div style="margin: 30px 0px 0px 20px; padding:0px; background: green;width:265px; height:370px;">pokus <div style="font-weight: bold; color: black; text-align:left; border:0px; width:210px; height:200px; background: red; margin: 50px 0px 0px 20px; padding: 10px 0px 0px 0px;">fokus </div> </div> </div> </body> </html> |
||
| vozka Profil |
#3 · Zasláno: 4. 12. 2009, 09:01:49
Díky za radu, ale to mi moc nepomůže.
Mám to totiž udělané tak, že modrý rám zapozdřuje celou stránku, zelený je vlastně jen pozadí pro menu a text je až v červeném. Celé by se to dalo vyřešit paddingem a to paří, ale přijde mi dost divné, že margin se chova takto... přeci tam nemužu vkladat text kterej mi to posune někam, abych docilil toho, že se mi to vrati tam kde bych to očekaval :-( Nebo je to takto definovane jako vlastnost? Diky za radu Vozka |
||
| zvěřiňák Profil |
#4 · Zasláno: 4. 12. 2009, 10:15:15
Přidej horní border v barvě pozadí:
<div style="width: 996px; background:blue; margin: 0px; padding: 0px; border-top: solid blue;"> <div style="margin: 30px 0px 0px 20px; padding:0px; background: green;width:265px; height:370px; border-top: solid green;"> <div style="font-weight: bold; color: black; text-align:left; width:210px; height:200px; background: red; margin: 50px 0px 0px 20px; padding: 10px 0px 0px 0px; border-top: solid red;"> </div> </div> </div> |
||
| vozka Profil |
#5 · Zasláno: 4. 12. 2009, 11:08:46
Jo tak to funguje... super... diky!
Jen mi není jasné, proč se to takto chová? Je k tomu nějaký rozumný důvod, nebo to vzniklo zase jako chyba na kterou si všichni zvykli? :-( Díky H |
||
| zvěřiňák Profil |
#6 · Zasláno: 4. 12. 2009, 12:40:17
Nevím. CSS je pěkná alchymie. Třeba nám to někdo vysvětlí.
|
||
| Petr ZZZ Profil |
#7 · Zasláno: 4. 12. 2009, 15:36:23 · Upravil/a: Petr ZZZ
Nevím, zda to s daným problémem přímo souvisí, ale před pár dny jsem řešil něco podobného. IE mi jeden div roztahoval (na obrazovce) řekněme na 1 cm výšky, FF ho zobrazoval tak jak jsem chtěl: řekněme 1 mm. Po mnoha marných experimentech s hodnotami výšky divu a jeho marginu (a sousedních a obalujících divů) mě napadlo přiřadit zlobivému divu mrňavou velikost písma (konkrétně font-size:0.05em;) a ejhle: ve zlomku vteřiny se i v IE smrskl na požadovanou výšku (konkrétně height:2px; ). Přitom není v divu ani jediný (ani bílý) znak a jinak by velikost písma vůbec neměl deklarovanou. (Ten div mám místo hr, protože, pokud si dobře vzpomínám, se mi kdysi nepovedlo přiřadit tagu hr nulový margin, a v konkrétním případě jsem nulový odstup potřeboval.) V tomto příkladu zobrazí FF oba žluté proužky tence, IE6 zobrazí vrchní tence, spodní tlustě. Jak to dělají jiné verze IE nebo jiné prohlížeče, nevím (ale zajímalo by mě to, tak kdyby někdo řekl, budu rád). Žluté proužky jsou divy a liší se od sebe jen tím, že ten vrchní ma přiřazenu velikost písma, ten spodní ne. Jinak mají jen barvu a rozměry.
|
||
| Davex Profil |
#8 · Zasláno: 6. 12. 2009, 17:55:27
vozka:
Je to standardní chování, kterému se říká slučování okrajů. |
||
|
Časová prodleva: 14 let
|
|||
0