Problém s absolutním pozicováním v CSS
Nevím si rady s následujícím problémem. Mám div se style="position: relative" sloužící jako kontejner pro prvky umísťované absolutně vzhledem k němu. Jedním z těchto prvků je i div s proměnlivou délkou textu, takže nevím jak vysoký musí být ten kontejner, aby celý ten vnitřní div obsáhl. Pokud u kontejnetu nezadám height, vykreslí se jen velmi úzký a další prvky stránky nacházející se za ním se vykreslí přes onen vnitřní absolutně pozicovaný div.
Asi to popisuju dost krkolomně, lepší bude když se podíváte na ukázku toho jak to myslím:
http://www.vsbcs.wz.cz/ukazka.html
Jde mi o to, aby text " Text co by měl být pod divem" byl až pod tím modrým obdélníkem, ale s tím, že nemůžu zadat natvrdo např. height: 50px u toho červeného divu, protože potřebná výška se bude měnit podle toho, jak dlouhý text bude v modrém divu ;-)
Možná na to jdu úplně špatně, nevím.
Asi to popisuju dost krkolomně, lepší bude když se podíváte na ukázku toho jak to myslím:
http://www.vsbcs.wz.cz/ukazka.html
Jde mi o to, aby text " Text co by měl být pod divem" byl až pod tím modrým obdélníkem, ale s tím, že nemůžu zadat natvrdo např. height: 50px u toho červeného divu, protože potřebná výška se bude měnit podle toho, jak dlouhý text bude v modrém divu ;-)
Možná na to jdu úplně špatně, nevím.
http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic=1950
není to něco podobného?
není to něco podobného?
dis - to mi teda moc nepomohlo, cituji z té stránky, mě se týká bod 4:
Misto pitvani vaseho webu na prvocinitele jenom obecne poznamky o vysce blokovych elementu, jako je treba div, ve strucnosti a zjednodusene:
1, pokud vysku neurcite (pres CSS vlastnost height) tak je vyska divu dana obsahem - pokud obsahu pribude tak se vyska zvetsi
2, to plati doslova jen pokud v tom divu (jeho obsahu) nemate elementy s vlastnosti float (left, right), nebo s position nastavenou na absolute nebo relative
3, pokud tam mate elementy s float, pak pod ne (pred konec toho divu co chcete natahnout) strcite element s clear nastavenou na both - to uz je normalni obsah, a clear zpusobi, ze je pod temi floaty takze se obalujici div natahne aby ho pojal
4, pokud tam mate elementy s position: absolute, tak vas potes panbu
Misto pitvani vaseho webu na prvocinitele jenom obecne poznamky o vysce blokovych elementu, jako je treba div, ve strucnosti a zjednodusene:
1, pokud vysku neurcite (pres CSS vlastnost height) tak je vyska divu dana obsahem - pokud obsahu pribude tak se vyska zvetsi
2, to plati doslova jen pokud v tom divu (jeho obsahu) nemate elementy s vlastnosti float (left, right), nebo s position nastavenou na absolute nebo relative
3, pokud tam mate elementy s float, pak pod ne (pred konec toho divu co chcete natahnout) strcite element s clear nastavenou na both - to uz je normalni obsah, a clear zpusobi, ze je pod temi floaty takze se obalujici div natahne aby ho pojal
4, pokud tam mate elementy s position: absolute, tak vas potes panbu
Nevím, jestli to pomůže, ale co to dát do odstavce?
<body>
<div style="position: relative; border: 1px solid red;">
<div style="position: absolute; left: 10px; top: 10px; border: 1px solid blue; width: 150px">div absolutně pozicovaný a s proměnnou délkou textu</div>
</div>
<p>
Text co by měl být pod divem
</p>
</body>
<body>
<div style="position: relative; border: 1px solid red;">
<div style="position: absolute; left: 10px; top: 10px; border: 1px solid blue; width: 150px">div absolutně pozicovaný a s proměnnou délkou textu</div>
</div>
<p>
Text co by měl být pod divem
</p>
</body>
Petr > Ne, nepomůže to.
Já už jsem se tomu problému vyhnul, udělal jsem to trochu jinak, ten div s proměnlivým obsahem totiž nemusel být absolutně pozicovaný (další dva sice ano, ale to už nevadí).
Stejně by mě ale zajímalo jestli ten problém (který jde vidět na té ukázce) jde nějak vyřešit.
Já už jsem se tomu problému vyhnul, udělal jsem to trochu jinak, ten div s proměnlivým obsahem totiž nemusel být absolutně pozicovaný (další dva sice ano, ale to už nevadí).
Stejně by mě ale zajímalo jestli ten problém (který jde vidět na té ukázce) jde nějak vyřešit.
Ať zkouším, jak zkouším, tak nic. Napadlo mě, že ten problém může zapříčinit, že ty DIVy jsou pozicovaný přes CSS. Je to nutný, aby to pozicování u obou DIVů bylo? Jinak takhle to funguje.
<body>
<div style="border: 1px solid red">
<div style="border: 1px solid blue; width: 150px">
div absolutně pozicovaný a s proměnnou délkou textu div absolutně pozicovaný a s proměnnou délkou textu div absolutně pozicovaný a s proměnnou délkou textu
</div>
</div>
<p>
Text co by měl být pod divem
</p>
</body>
<body>
<div style="border: 1px solid red">
<div style="border: 1px solid blue; width: 150px">
div absolutně pozicovaný a s proměnnou délkou textu div absolutně pozicovaný a s proměnnou délkou textu div absolutně pozicovaný a s proměnnou délkou textu
</div>
</div>
<p>
Text co by měl být pod divem
</p>
</body>
Petr > jistěže takhle to funguje, ale v tom příkladě o kterém mluvím je potřeba pozicovat uvnitř toho kontejneru několik prvků absolutně. To cos teď napsal jsou naprosto normální dva vnořené divy, u kterých je samozřejmě jasné že to fungovat bude.
Já v té ukázce mám jen jeden absolutně pozicovaný gif a to na pozici left:10, top:10, ale te jen ukázka principu. Prostě že když jsou uvnitř divu absolutně pozicovované prvky, tak ten vnější div není automaticky vysoký tak, aby další prvky stránky následující v kódu po něm se i nacházely na stránce až pod ním (resp. až pod jeho obsahem).
Já v té ukázce mám jen jeden absolutně pozicovaný gif a to na pozici left:10, top:10, ale te jen ukázka principu. Prostě že když jsou uvnitř divu absolutně pozicovované prvky, tak ten vnější div není automaticky vysoký tak, aby další prvky stránky následující v kódu po něm se i nacházely na stránce až pod ním (resp. až pod jeho obsahem).
no niesom si istý, ale pri použití absolútneho umiestňovania sa objekty vyjmú z toku dokumentu a to je potom ťažké, definovať to tak aby za nimi niečo nasledovalo.
buď aj ten text umiestniť absolútne, alebo to celé obaliť do nejakého divu, ktorý bude absolútne umiestnený a vňom budú tieto dve veci (div a text) normálne za sebou.
PMSN (IMHO)
buď aj ten text umiestniť absolútne, alebo to celé obaliť do nejakého divu, ktorý bude absolútne umiestnený a vňom budú tieto dve veci (div a text) normálne za sebou.
PMSN (IMHO)
Stanley > vypadá to, že to asi opravdu nějak vyřešit nejde. Jinak to cos psal taky není to pravé protože mi šlo o to, aby pak normálně mohl pokračovat tok stránky a kdybych následující prvek umístnil zase absolutně, tak by se poblém posunul zas pod něj. To by pak muselo být absolutně umístěné všecko, což je hloupost.
Jak říkám, můj problém jsem vyřešil protože jsem zjistil že jsem to dělal zbytečně komplikovaně a ten jeden div co má proměnlivou délku textu stačilo umístit vzhledem ke kontejneru jen pomocí padding, absolutní pozicování u něj nebylo potřeba. Další dva prvky co se asbolutně umísťují do kontejneru jsou vlastně umístěny přes něj a tudíž je to v pořádku.
Btw - co znamená PMSN? To mi trochu uniká.....
Jak říkám, můj problém jsem vyřešil protože jsem zjistil že jsem to dělal zbytečně komplikovaně a ten jeden div co má proměnlivou délku textu stačilo umístit vzhledem ke kontejneru jen pomocí padding, absolutní pozicování u něj nebylo potřeba. Další dva prvky co se asbolutně umísťují do kontejneru jsou vlastně umístěny přes něj a tudíž je to v pořádku.
Btw - co znamená PMSN? To mi trochu uniká.....
PMSN = podle mého skromného názoru
Aha to mě nenapadlo, že "IMHO" se používá i v českém ekvivalentu :-))))
autor: ... position: relative sloužící jako kontejner pro prvky umísťované absolutně vzhledem k němu
Toto je nelogický požadavek, je-li něco umístěno absolutně, nemůžou zde existovat žádné závislosti. Je to prostě jako když na stránku položíš průhlednou fólii a lepíš na ni další prvky. Vůbec nezáleží na tom, co je pod ní, ani kde je to zapsáno.
Jediná závislost je jen mezi pozicovanými součástmi a to pořadí vrstev určených vlastností z-index.
Toto je nelogický požadavek, je-li něco umístěno absolutně, nemůžou zde existovat žádné závislosti. Je to prostě jako když na stránku položíš průhlednou fólii a lepíš na ni další prvky. Vůbec nezáleží na tom, co je pod ní, ani kde je to zapsáno.
Jediná závislost je jen mezi pozicovanými součástmi a to pořadí vrstev určených vlastností z-index.
Proč by to měl být nelogický požadavek? Potřeboval jsem udělat obdélník se speciálním designem vyžadujícím absolutní pozicování dvou, případně alespoň jednoho prvku v tomto obdélníku. Tento obdélník jako celek by měl být normálně umístěn v toku stránky (tedy nikoliv pozicovaný), tak aby za ním mohly následovat další obdobné obdélníky nebo prostý text.
Prostě si musíš vybrat, jestli absolutně, nebo vzhledem k něčemu. Ono si to odporuje - absolutně je pouze vzhhledem k oknu.
Hm, nerad, ale beru zpět, pravdu mají ostatní.
Vnořovat jde, ale vnější DIV musí mít stanovenou výšku, proto to nejde řešit. Snad jedině pevná výška a rolovátko - overflow: auto; - ale to asi nechceš.
Omlouvám se. :(
Vnořovat jde, ale vnější DIV musí mít stanovenou výšku, proto to nejde řešit. Snad jedině pevná výška a rolovátko - overflow: auto; - ale to asi nechceš.
Omlouvám se. :(
Nové příspěvky
Smazani stranek
index.html )
HTML Tabulky
Zalamování textu pomocí CSS
Přesměrování
Arduino - 400 Bad Request
Nastavení českých písmen
POMOC! po druhé!
Pozicování (obrázek na střed).
Jak vycentrovat obrazek, ktery je v prikazu absolute ?
Použití tvůrce webu
katalog
async functions' is only available in es8 (use 'esversion: 8')
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Problém s načítáním
Div pro reklamu překrývá prvky webové stránky
Nezobrazuje se mi lišta s reklamou
ako nahrám na môj web favicon?
JavaScript - nečitelný soubor *.js - jak prohlížet/editovat
Problém s textem
videostream
index.html
GB///refresh///JS
Total Commander - server nenalezen
Mobilní verze webu
Další témata
STATUS
FTP
HTTP
SQL
PHP
© 2002 - 2024 Web zdarma s.r.o. — zvládnete to sami