| Autor | Zpráva | ||
|---|---|---|---|
| aha Profil |
#1 · Zasláno: 15. 4. 2009, 19:02:39
Zdravím, při návrhu stránky jsem zjistil, že po vnoření dvou divů do jiného, zdědily od svého rodiče, kt. měl nastaveny vlastnosti float:left; position:relative, obě tyto vlastnosti a jejich hodnoty.
V přehledu vlastností CSS (Marek Prokop: CSS kaskádové styly pro webdesignéry), se přitom uvádí, že tyto vlastnosti nejsou dědičné. Jak tomu mám rozumět? |
||
| tiso Profil |
#2 · Zasláno: 15. 4. 2009, 19:08:34
aha - neverím, v akom prehliadači a aký kód? Pomohla by živá ukážka.
|
||
| habendorf Profil |
#3 · Zasláno: 15. 4. 2009, 19:10:33
Float a position se nedědí.
|
||
| aha Profil |
#4 · Zasláno: 17. 4. 2009, 11:59:35
Omlouvám se, že pokračuji až dnes, nebyl čas.
Kód viz. níže. Je to z Petr Staníček- CSS hotová řešení-Svatý Grál. Jde o to, že vlastnosti float:left a position:relative má nastaven pouze #telo div a když stránku procházím Firebugem, tak i divy #stred, #levy je mají stejné a chovají se tak, ačkoli nikde nejsou pro ně deklarovány. Jinak, souhlasím s habendorfem (nicjinýhominezbejvá :-)), že nejsou dědičné. Proto mě to zaráží a nemůžu přijít na to kde je zakopán pes. Určitě to bude něco triviálního <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>Svatý grál bez paddingu</title> <style type="text/css"> /* LS = Levy sloupec PS = Pravy sloupec */ body { min-width: 550px; /* 2x LS width + PS width */ } #telo { padding-left: 200px; /* LS width */ padding-right: 150px; /* PS width */ } #telo div { position: relative; float: left; } #stred { width: 100%; } #levy { width: 200px; /* LS width */ right: 200px; /* LS width */ margin-left: -100%; } #pravy { width: 150px; /* PS width */ margin-right: -150px; /* -PS width */ } #paticka { clear: both; } /* Kvuli chybe IE6 */ * html #levy { left: 150px; /* PS width */ } /* ************************ */ /* JEN ESTETICKA ZALEZITOST */ /* ************************ */ * { padding: 0; margin: 0; } #hlavicka { background: violet; } #paticka { background: black; color: white; } #stred { background: yellow; } #levy { background: red; } #pravy { background: blue; } </style> </head> <body> <div id="hlavicka">Hlavička</div> <div id="telo"> <div id="stred">Střední sloupec<br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer condimentum arcu non augue. Donec pharetra pharetra risus. Proin dictum. Integer est odio, tempor in, accumsan eget, laoreet vitae, risus. Sed et nisi at dolor ultrices adipiscing. Nulla posuere mollis erat. Nulla dignissim euismod mauris. In sit amet tellus in sem dapibus iaculis. Nunc est. Phasellus arcu augue, convallis vitae, posuere in, consequat vitae, risus. Vivamus bibendum nulla in urna. Nullam lacus. Vestibulum est. Phasellus vel quam. Maecenas pellentesque convallis magna.</div> <div id="levy">Levý sloupec<br /> Nunc est. Phasellus arcu augue, convallis vitae, posuere in, consequat vitae, risus. Vivamus bibendum nulla in urna. Nullam lacus. Vestibulum est. Phasellus vel quam. Maecenas pellentesque convallis magna.</div> <div id="pravy">Pravý sloupec<br /> Nunc est. Phasellus arcu augue, convallis vitae, posuere in, consequat vitae, risus. Vivamus bibendum nulla in urna.</div> </div> <div id="paticka">Patička</div> </body> </html> |
||
| tiso Profil |
#5 · Zasláno: 17. 4. 2009, 12:30:26
aha - nerozumieš CSS selektorom, #telo div znamená pre všetky elementy <div> v elemente s id="telo"
|
||
|
Časová prodleva: 15 let
|
|||
0