Autor Zpráva
quatzael
Profil
Mám trochu komplikovanější dotaz..

Mám nějakou takovou strukturu:

<div id="vnejsi">
<div id="vnitrni">
</div>
</div>

a styly:

#vnejsi
{
min-height: 50px;
}

a potřebuju, aby ten vnitřní <div> měl výšku automatickou podle obsahu a až do určité vlastní výšky (například 80px) přetékal ten vnější div (tudíž by ten vnější div měl furt konstantních 50px) a až teprve po překročení těch 80px by začal roztahovat i ten vnější <div>..

snad jsem to napsal srozumitelně..

je to nějak možné udělat pomocí CSS??
user243
Profil
hoj,
<div> by měl mít svoji výšku podle obsahu vždy, když ty neurčíš jinak; do určité výšky je vlastnost max-height, jestli Ti text přesahuje <div>, tak je potřeba nastavit overflow; v příkladu uvádíš pro vnější <div> min-height, ale pak píšeš, že chceš konstantní velikost, což je height; a ano, jde to udělat pomocí css
quatzael
Profil
user243:
možná jsi mě špatně pochopil... já potřebuju konstantní velikost vnějšího <div> zachovat právě do určitý velikosti vnitřního <div>, když výška vnitřního <div> přesáhne určitou velikost (například těch zmíněných 80px), tak potřebuju, aby se i ten vnější <div> začal roztahovat..

tzn. že např., že výška bude fungovat takto:

<div id="vnitrni">: 0px tak potom <div id="vnejsi">: 50px
<div id="vnitrni">: 10px tak potom <div id="vnejsi">: 50px
<div id="vnitrni">: 80px tak potom <div id="vnejsi">: 50px
<div id="vnitrni">: 90px tak potom <div id="vnejsi">: 60px
<div id="vnitrni">: 100px tak potom <div id="vnejsi">: 70px

napadlo mě, že bych to mohl taky udělat nějak přes jQuery, jako že vnitřní div budu mít předem s vlastností position: absolute; zjistím si výšku vnitřního <div> a pokud přesáhne těch 80px, tak zvětším vlastnost vnějšího <div> z min-height: 50px; na minheight: 50px + aktuální výška vnějšího <div> - 30px.

těch 30px je jako 80px - 50px..

spíš mě zajímalo jestli to nejde nějak jednoduše přes css, aby to fungovalo i když nejsou spuštěný scripty...
margin
Profil *
Nechápu, proč potřebuješ udělat obalový DIV menší. Vždyť jde udělat, aby to vizuálně vypadalo tak, že obalový DIV je menší.
quatzael
Profil
margin:
je to hodně specifickej problém... v tom obalovým divu je více vnitřních divů poskládaných vedle sebe, který ho taky můžou podle svý aktuální velikosti roztahovat, ale potřebuju, aby tenhle zmíněnej vnitřní <div> se choval tak, že do výšky 80px nebude vnější <div> roztahovat a bude ho pouze přetékat a když přesáhne těch 80px tak se začne roztahovat i ten vnější <div> ale jen o ten rozdíl tý skutečný výšky vnitřního <div> a těch původních 80px...
user243
Profil
já to také nechápu, ale ta minimální výška je min-height - tvých 50px a když chceš 30px odstup, tak přidej vnější spodní okraj tvému obalovacímu divu;
quatzael
Profil
prostě to tak potřebuju, aby se to tak chovalo... teď jestli mě opravdu chápete v tom jak se má to má chovat..


spodní okraj je padding-bottom, ne?? ale já potřebuju, aby <div>, kterej je pod tím zmíněným vnějším <divem> byl přímo pod ním, bez nějakýmho marginu nebo paddingu.. ten vnitřní <div> pokud by měl více jak 50px tak by pak částečně překrýval ten spodní div co je pod ním..
Překrýval by ho logicky 0 - 30px podle toho jak by ten vnitřní <div> byl velkej..

tzn. (za předpokladu, že ten vnější <div> bude mít min-height: 50px) když bude mít vnitřní <div>:

0 - 50px: tak vnitřní div <div> nebude nijak překrývat <div> pod ním a zároveň nebude nijak roztahovat vnější <div>

50 - 80px: tak vnitřní div <div> bude překrývat <div> pod ním o 0 - 30px a zároveň stále nebude nijak roztahovat vnější <div>

80 - kdovíkolikpx: tak vnitřní div <div> bude překrývat <div> pod ním přesně o 30px a zároveň BUDE roztahovat vnější <div> o velikost která je rovna: (aktuální výška vnitřního <div> mínus 80px)


myslím, že jsem to napsal dost srozumitelně, ne?? aspoň v rámci možností..
quatzael
Profil
tak jsem to nakonec vyřešil pomocí toho jQuery, akorát potřebuju aby ty divy byly místo identifikátorů definovány pomocí tříd, tak nevím jak se to bude chovat až tam budu mít víc prvků se stejnou třídou, protože to zjišťování výšky bude asi problém, když každá výška bude jinačí..
panther
Profil
quatzael:
drbeš se pravou nohou za levým uchem. Pokud chceš radu, ukaž přesně, co chceš udělat. Tahat do tohoto JavaScript bude zbytečné.
quatzael
Profil
panther:
tak tady jsem to nějak sestrojil. Myslím, že se to z toho dá pochopit.. Z pochopitelných důvodů tady nemůžu uvádět skutečnou doménu a už vůbec ne skutečnou ukázku..

živá ukázka

udělal jsem to tak, aby jste si mohli vyzkoušet různý výšky a viděli jak se ten vnější element chová.. Nějak se ta výška ale furt vrací na původní hodnoty, tak jsem tam dal window.alert
do inputu stačí zadat číslo, který uvádí výšku vnitřního elementu.. javascriptem se tam zvolí aktuální výška a podle toho se chová ten vnější obalovej div. Vnitřní div jsem dal ještě do obalovýho divu (.vnitrni-obal), který má position: relative, protože za ním na pravou budou floutovat dlaší elementy a já potřebuju, aby tam zůstalo prázdný místo ikdyž ten vnitřní element bude úplně prázdnej..

ještě jednou opakuju to požadovaný fungování výšek:


vnitrni div: 0 - 80px >>>>> potom výška vnejšího divu zůstává stále: 30px
vnitrni div: 80px a více >>>>> tak potom výška vnejšího divu se zvětší na rozdíl: výška vnitřního divu mínus 50


ještě doplňuju, že ten vnitřní div je posunutej trochu nahoru, protože to tak prostě potřebuju..
panther
Profil
quatzael:
není potřeba znát skutečná data ani doménu, o to nejde.

Potřebuju vědět, proč potřebuješ mít obal menší nebo jeho obsah. Co je důvodem toho? Nějaká grafika? Jaká? Něco jiného? Co?

Půjde to, pravděpodobně, bez JS, ale je potřeba vědět, co potřebuješ dělat. Bez toho ti nebude pomoci.
quatzael
Profil
panther:
je to prostřední část rámečku s nabídkou vnější div má proto jako background-image obrázek levé a pravé strany rámečku (1px vysokej, roztahuje se pomocí background-repeat: y-repeat)..
dole pod tím je část s tlačítkama, ale ty jsou jen nalevo a napravo a ten vnitřní div je mezi nima takže má více místa kam by až mohl zasahovat..

nakreslil jsem obrázek jak to zhruba asi zjednodušeně celý vypadá. Ve skutečnosti potřebuju, aby se takhle chovaly dva vnitřní divy (info2, info3)..
Jejich velikost je závislá podle obsahu (podle toho co si zákazník vybere)... Oba vnitřní divy mají pak ve vnitř vlastní strukturu (čili vlastní blokové divy, které mohou být zase různě velké a to kolik jich tam bude zase zavísí..)

Obrázek

celý je to daleko komplikovanější, proto mě místo celýho tohohle popisování zajímá jestli to co jsem v předchozím příspěvku zpracoval jako ukázku lze udělat pomocí css...

pomocí jQuery jsem si to už naprogramoval pro oba vnitřní divy, a funguje mi to, ale mám tam zatím jen jeden rámeček a těch nabídek tam bude pod sebou více a proto to budu muset asi zase nějak předělávat, protože ty divy mám identifikovány podle tříd a zjišťování výšky divu podle třídy asi nebude fungovat když jich tam bude víc...
panther
Profil
quatzael:
proto mě místo celýho tohohle popisování zajímá jestli to co jsem v předchozím příspěvku zpracoval jako ukázku lze udělat pomocí css...
css neumí dopočítávat ani podmínkovat, jestli se ptáš na tohle.

Ale jde udělat (a pravděpodobně půjde) to, že to bude vypadat, jako by byl obal nižší než jeho obsah, ale ve skutečnosti tomu tak nebude. Ale na to se nedá odpovědět bez konkrténí znalosti, konkrétního uvození, s jakými obrázky na pozadí pracujeme atp. V obecné rovině se na toto přesně odpovědět nedá.
quatzael
Profil
panther:

zapoměl jsem tam dát odkaz na ten obrázek, tak jsem ho tam dal až dodatečně.. To se nedá ani z toho obrázku usoudit jestli by to s tím CSS šlo??

mě to jinak zase tolik neva když to pojede přes ten javascript, protože je tam víc věcí udělaných pomocí jQuery (vysouvání/zasouvání, přepočítávání ceny apod..) takže když si nějakej expert vypne scripty tak bude tak jako tak nahranej... jenom bude problém zase s těma třídama, když tam bude více nabídek..

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:

0