| Autor | Zpráva | ||
|---|---|---|---|
| vytun Profil |
#1 · Zasláno: 2. 1. 2014, 09:39:35
čau, jedná se o to, že jakmile dám jednomu DIVu výšku na 100%, tak musím nastavit position: absolute a pak se mi pod ním už nechce zobrazit další, když odeberu position: absolute, tak mi to nedá pevnou velikost, ale zobrazí se druhý DIV. Když dám výšku v pixelech (odeberu position: absolute), tak se pod ním zobrazí a nemůžu přijít na to proč mi to nechce fungovat i s procenty (i když mám zkušenosti, že html má velké problémy s výškou v procentech). .... jsem teprve začátečník (2 měsíce), tak budu rád za každou radu
přidávám odkaz na web: Web se stránkou |
||
| margin Profil * |
#2 · Zasláno: 2. 1. 2014, 10:25:44
vytun:
Popsané chování je logické. „i když mám zkušenosti, že html má velké problémy s výškou v procentech“ Procentní výška se počítá z výšky nadřazeného elementu. Pokud má se deklazuje procentní výška elementu umístěném přímo v body, pomůže:
html, body {height: xx%}Raději popiš, čeho chceš svými "kouzly" dosáhnout, zpravidla se najde standardní řešení. |
||
| _es Profil |
#3 · Zasláno: 2. 1. 2014, 10:45:00
vytun:
„jsem teprve začátečník (2 měsíce), tak budu rád za každou radu“ Pozri si ako funguje CSS vlastnosť position. |
||
| vytun Profil |
#4 · Zasláno: 2. 1. 2014, 13:39:59
Margin:
Je logické, že se percentuální výška počítá z výšky nadřazeného elementu (v tomto případě - HTML, BODY, DIV id=obal) ale to stejně neřeší můj problém. Chci dosáhnou řešení problému uvedeného v nadpisu, tedy - dva DIVy pod sebou ..... jelikož takto mi překrývá jeden div druhý (jak jsem pochopil z vysvětlivek u vlastnosti position, ale pokud position: absolute nenastavím, tak se mi sice nepřekrývají a jsou pod sebou, ale nefunguje mi počítání výšky pomocí procent. _es: Díky, sice už jsem si to párkrát četl, ale vždy po půlnoci, takže jsem to tentokrát lépe pochopil. ;) A teď k mému nápadu: Napadlo mne, že bych mohl druhý div nastavit také jako position: absolute ale tak, aby se přichytil na konec dokumentu. Jaký na to máte názor? |
||
| anonymníí Profil * |
#5 · Zasláno: 2. 1. 2014, 13:42:10
|
||
| vytun Profil |
#6 · Zasláno: 2. 1. 2014, 13:50:54
Díky moc za odpověď .... jen tak zběžně sem na to mrknul (ano je to to co chci) :)
|
||
| vytun Profil |
#7 · Zasláno: 3. 1. 2014, 01:39:53
Tak nakonec jsem to vyřešil s kámošem a je to velmi jednoduché oproti návodu na weblog-plovacek.
Přidávám kompletní kód: HTML <html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="obal">
<div id="stred">text</div>
<div id="footer"></div>
</div>
</body>
</html>--------------------------------------- CSS html{
height: 100%;}
body{
height: 100%;
margin: 0;}
#obal{
width: 950px;
margin: 0px auto;}
#stred{
position: relative;
background-color: #111;
color: #fff;
width: 950px;
height: calc(100% - 40px);}
#footer{
background-color: #333;
width: 950px;
height: 40px;} |
||
| jenikkozak Profil |
#8 · Zasláno: 3. 1. 2014, 01:52:39
U tohoto řešení je nutné počítat s tím, že cca 30 % dnes používaných prohlížečů
calc nepodporuje a budou tedy nastavení výšky stredu ignorovat.
|
||
| vytun Profil |
jenikkozak:
dovolím si nesouhlasit, jelikož tento kód byl vyzkoušen na prohlížečích: IE, Firefox, Chrome a Opera (více jsem nezkoušel, jelikož to dle mého názoru nemá ani cenu, až na Safari samozřejmě) a to jsou dle mne nejpoužívanější prohlížeče ... |
||
| juriad Profil |
#10 · Zasláno: 3. 1. 2014, 20:15:13
|
||
| margin Profil * |
#11 · Zasláno: 3. 1. 2014, 21:36:47
vytun:
„IE, Firefox, Chrome a Opera“ Zkoušel jsi novou "chromovanou" Operu, která s původní Operou mí společné jen jméno a základní myší gesta. Ve standardní Opeře 12.16 s jádrem Presto calc také nefunguje (čekal jsem to, ale pro jistotu jsem si ověřil), jak je uvedeno i v http://caniuse.com/calc |
||
| vytun Profil |
#12 · Zasláno: 3. 1. 2014, 22:38:12
juriad:
ano, ale to už je velmi zastaralý prohlížeč ;) a tabulka je velmi pěkná!! :) margin: No jo, ale pokrok nezastavíš ;) ... |
||
| margin Profil * |
#13 · Zasláno: 4. 1. 2014, 02:10:00
vytun:
„pokrok nezastavíš“ Ale ani neurychlíš :-) |
||
| han5vk Profil |
#14 · Zasláno: 4. 1. 2014, 16:02:31
„ale to už je velmi zastaralý prohlížeč“
Ale stále ho mám v čerstvej inštalácii Win7 SP1. Nemám dôvod zháňať nový. V škole je všade IE6. Myslíš že používateľov IE<9 je fakt tak málo, že sa ich oplatí odpísať? |
||
| margin Profil * |
#15 · Zasláno: 4. 1. 2014, 17:50:53
han5vk:
„Myslíš že používateľov IE<9 je fakt tak málo, že sa ich oplatí odpísať?“ V tom pomůže třebas tento článek: http://jecas.cz/prohlizece-optimalisace Též se nemusí volit pouze odepsat/stejný vzhled všude jinde. Jsou techniky graceful degradation a progressive enhancement popis třeba tady, s trochou zjednodušení jde o to, že web vypadá dobře, ale nevypadá všude stejně vymazleně. V tomto případě by třebas patička mohla být hned podle (ne)podpory calc buďto za obsahem; nebo vždy dole. |
||
| vytun Profil |
#16 · Zasláno: 4. 1. 2014, 19:08:49 · Upravil/a: vytun
nevím zda je moudré požívat IE a to se raději nebavím o verzích 8 a níž ... navíc to v mém řešení dělá pouze to, že pokud není podpora calc, tak se patička nezobrazí na spodní straně (pokud není obsah delší než 100%) což nijak neomezuje funkčnost, ale pouze vzhled ;)
jistě, dá se to udělat i univezálně, ale na co bych to dělal (a učil se) složitě, když to jde i jednoduše a všechny moderní prohlížeče to už podporují :) ... nemá to pro mě význam .. když budu chtít, tak to udělám i jinak, ale zatím to pro mě opravdu nemá význam ;) |
||
|
Časová prodleva: 10 let
|
|||
0