Autor Zpráva
aha
Profil
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
aha - neverím, v akom prehliadači a aký kód? Pomohla by živá ukážka.
habendorf
Profil
Float a position se nedědí.
aha
Profil
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
aha - nerozumieš CSS selektorom, #telo div znamená pre všetky elementy <div> v elemente s id="telo"

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: