Autor Zpráva
janek
Profil
#1 · Zasláno: 20. 4. 2005, 14:56:51 · Upravil/a: janek
Odpovědět Citovat
Ahoj,
vždycky jsem si myslel, že lze pro formátování využít jednu nějakou jednotku (např. width: 560px; apod.), až jsem zcela náhodou a narazil na situaci, kdy lze výhodně využít i kombinace jednotek: width: 100%px.
Jak je to možné? Nevím, třeba mi odpovíte vy! Buď jsem objevil ameriku, a nebo jsem narazil na něco, co už dávno znáte a využíváte, já nevím. Pokud se jedná o mou neznalost, pak mi prosím můj příspěvek odpusťe.

Dokládám to následujícím jednoduchým příkladem řešení patičky ve webové stránce:

externí stylopis styl1.css:
/* Příklad formátování patičky při procentuálním šířce nadřazeného divu*/

/* pozice */
* {-moz-box-sizing: border-box}
body {background-color: #CCCCCC; text-align: left;}
.vrch {background-color: #6699FF; position: relative; width: 100%; height: 100px; top: 10px; text-align: left; margin: auto;}
.menu {background-color: #000099; position: absolute; text-align: left; width: 155px; top: 100px; left: 0px; padding-left: 5px;}
.hlavni {background-color: #D5D8E8; position: absolute; top: 100px; left: 0px; width: 100%; text-align: left; padding-top: 10px; padding-left: 165px;}
.patka {background-color: #6699FF; height: 30px; width: 100%px; margin-left: -165px; text-align: right;}

Upozorňuji, že těch 100%px u width v .patka není chyba!

Dále zdrojový kód stránky index.html:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Příklad na formátování patičky</title>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-type" content="text/html; charset=windows-1250">
<link rel="stylesheet" href="styl1.css" type="text/css">
</head>

<div class="vrch">
<div class="hlavni">
<p>Nějaký text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div class="patka"></div>
</div>
<div class="menu">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
</html>

Teď když si vyzkoušíte změnit těch 100%px třeba buď jen na %, nebo jen na px, vždycky to bude patičku zobrazovat jinak. Přičemž těch 100%px je docela výhodné, protože to vykreslí patičku v přesně takové šířce dokumentu, jaká je šířka nadřazeného divu. Teď Vás asi napadne, že to je stejný jako když zadáte 100%, ale není to pravda, protože ten nadřazený div má padding-left, tudíž se procenta vypočítávají z jeho šířky bez padding. Račte vyzkoušet. Lze to výhodně využít při procentuálně zadané šířce nadřazeného divu. Testoval jsem to v IE6, Opeře 7.54 a Firefox 1.0.2
Kdyžtak mi to prosím testněte i ve starších verzích IE.

Zdar
Plaváček
Profil
#2 · Zasláno: 20. 4. 2005, 18:35:30
Odpovědět Citovat
Ani to neni třeba to testovat, protože pokud ten zápis width: 100%px vynecháš, bude se patička chovat úplně stejně. Protože zmíněný zápis je v CSS nesmyslný, všechny prohlížeče ho ignorují a stane se to, co je standardní chování blokového prvku - to jest roztáhne se na dostupnou šířku v nadřazeném bloku (čili bude kratší o ten zmíněný padding nastavený nadřazenému bloku). Takže bohužel žádná Amerika :)
Časová prodleva: 19 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0