Autor Zpráva
vytun
Profil
č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 *
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
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
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 *
vytun:
http://weblog.plavacek.net/2005-02.html
vytun
Profil
Díky moc za odpověď .... jen tak zběžně sem na to mrknul (ano je to to co chci) :)
vytun
Profil
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
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
vytun:
Jedná se předevšim o podporu IE8.
http://caniuse.com/calc
margin
Profil *
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
juriad:
ano, ale to už je velmi zastaralý prohlížeč ;)
a tabulka je velmi pěkná!! :)

margin:
No jo, ale pokrok nezastavíš ;) ...
margin
Profil *
vytun:
pokrok nezastavíš
Ale ani neurychlíš :-)
han5vk
Profil
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 *
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
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 ;)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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