Stejná výška dvou divů – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Stejná výška dvou divů – CSS – Fórum – Programujte.comStejná výška dvou divů – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
micro.210
Návštěvník
15. 12. 2008   #1
-
0
-

Mam toto:



<div id="limiter">

<div id="content">
a
</div>

<div id="right_menu">
b
b
b
</div>

</div>


potřeboval bych vědět jak nastavit aby byly oba divy content i right_menu stejne vysoké, tzn. right_menu ná text navíce řádků a já chci aby i ten div content byl stejně vysoký v závislosti na tom sloupci right_menu a ne v zavislosti na textu co obsahuje..
Vyskoušel jsem už leccos co se mi podařilo vygooglit ale nic se nechytalo..

Předem děkuji za všechny odpovědi..

Nahlásit jako SPAM
IP: 84.244.85.–
Let me die happier..
Reklama
Reklama
Nefaritus
~ Redaktor
+2
Posthunter
15. 12. 2008   #2
-
0
-

To micro.21 : S tímhle jsem taky jednou bojoval...nakonec jsem jako takový kontejner stránek použil dvousloupcovou tabulku a je klid :)

Nahlásit jako SPAM
IP: 213.191.111.–
crAzY^
~ Moderátor
+10
Grafoman
15. 12. 2008   #3
-
0
-

To micro.21 : však ten limiter má nějakou určitou výšku ne?... pak by stačilo jenom contentu a right_menu nastavit height: 100%;

Nahlásit jako SPAM
IP: 89.190.64.–
All you need is vision and time.
micro.210
Návštěvník
15. 12. 2008   #4
-
0
-

bohuzel neslo ale uz jsem to zjistil bohuzel to nejde vyresit jinak musi se to obeji tak ze tomu limiteru date pozadi ktere budeslozene s tech dvou pozadi co meli byt v tech sloupcich a content a right_menu budou transparent

Nahlásit jako SPAM
IP: 84.244.85.–
Let me die happier..
JMM
~ Redaktor
0
Grafoman
15. 12. 2008   #5
-
0
-

No jelikož jsem se nudil tak sem zkoušel a nakonec mi vyšlo toto:

CSS

#container {

width: 600px;
height:100%;
}

#content {
background-color:red;
float:left;
width:300px;
height:100%;

}
#right_menu {
background-color:blue;
float:right;
width:300px;
height:100%;
}
HTML
 body>

<div id="container">
<div id="content">
dadsddasddasddasd
</div>

<div id="right_menu">
dsad
</div>

<hr style="border:0;color:white;height:0;clear:both;" />

</div>
</body>

Nahlásit jako SPAM
IP: 89.111.99.–
Jan Malý | web: www.malyphoto.cz, @malyphoto
Fugess0
Návštěvník
15. 12. 2008   #6
-
0
-

JMM:

Však tohle přece stejně nefunguje tak jak micro.21 chce ... jediné řešení je falešným backgroundem, ukončení obtékání na tuhle problematiku neplatí ...

rozvržení už je individuální ... jestli obalový element nastaví s přetékáním nebo bez, s height nebo min height .. vnitřní elementy se budou stále na výšku roztahovat podle jejich obsahu..

Nahlásit jako SPAM
IP: 80.78.156.–
Fugess
netman920
Super člen
15. 12. 2008   #7
-
0
-

tak ako by to teda bolo najvhodnejsie poriesit?

Nahlásit jako SPAM
IP: 87.244.226.–
Fugess0
Návštěvník
15. 12. 2008   #8
-
0
-

vyřešíš to opakovacím pozadím na výšku (po ose Y), tzv. falešnými sloupci. Můžeš se řídit podle tohohle: http://css.interval.cz/clanky/trisloupcovy-layout-svaty-gral/ a máš na výběr, jestli barvu pozadí nebo místo barvy vytvoříš obrázek který bude znázorňovat tři sloupce a bude se opakovat na výšku.

Nahlásit jako SPAM
IP: 80.78.156.–
Fugess
Wimby
~ Anonymní uživatel
50 příspěvků
15. 12. 2008   #9
-
0
-

Kdysi jsem řešil způsob, kterým by se to dalo udělat BEZ obrázku. Ne, že bych se chtěl vytahovat, ale přišel jsem na něj :-P Tedy jedná se spíše o chybu, ale zatím to zobrazil každý, mnou známý, prohlížeč stejně... :-)
Má to svá jistá omezení, ale pořád je to lepší než obrázek (alespoň se to může lépe přizpůsobit šířce)

<html>

<body>
<style type="text/css">
<!--
body
{
text-align : center; /* zarovnání na střed pro IE */
}
#OBAL
{
width : 80%;
background : blue; /* barva pozadí LEVÉHO divu */
margin : auto; /* zarovnání na střed pro nonIE */
text-align : left; /* soucast zarovnani pro IE */
}
#LEVY
{
width : 199px; /* myslim, ze tohle slo resit i lepe, ale ted si nemuzu vzpomenout, asi position : relative; a width : 100% */
float : left;
}
#OBSAH
{
margin-left : 200px; /* tohle urcuje sirku leveho divu */
background : red;
border-left : 5px solid black;
}
-->
</style>

<div id="OBAL">
<div id="LEVY">Tady je text leveho "panelu"</div>
<div id="OBSAH">Tady je text obsahu (pokud je potreba udelat treti panel, tak se situace trochu komplikuje, ale myslim, ze by mel fungovat stejny postup s tim, ze cely "komplex" divů bude vlozen do OBSAHU)<div style="clear:both;font-size:1px;">tohle je ten zazrak :-) Je nutne, aby tu byl nejaky text, staci i prazdna mezera, velikost pisma pak jde nastavit na nulu</div></div>
</div>
</body>
</html>

Nahlásit jako SPAM
IP: 83.208.196.–
Wimby
~ Anonymní uživatel
50 příspěvků
15. 12. 2008   #10
-
0
-

ten div s clear : both (teoreticky i clear : left) musí být uvnitř OBSAHu, a nejspíš tam musí být div - s tagem hr mi to nefungovalo v IE

Nahlásit jako SPAM
IP: 83.208.196.–
Fugess0
Návštěvník
15. 12. 2008   #11
-
0
-



člověče a všiml sis, že tohle tu vůbec neřešíme ?

Nahlásit jako SPAM
IP: 80.78.156.–
Fugess
Wimby
~ Anonymní uživatel
50 příspěvků
15. 12. 2008   #12
-
0
-

A neříkejte mi, že něco nejde vyřešit jinak než blablabla :-) Nejde je jenom jedno slovo z obrovského kvanta možností :-P

Nahlásit jako SPAM
IP: 83.208.196.–
Fugess0
Návštěvník
15. 12. 2008   #13
-
0
-

četl jsi vůbec co se tu řeší a jaké jsou závěry ?

Nahlásit jako SPAM
IP: 80.78.156.–
Fugess
Wimby
~ Anonymní uživatel
50 příspěvků
15. 12. 2008   #14
-
0
-

předpokládám, že:

>> potřeboval bych vědět jak nastavit aby byly oba divy content i right_menu stejne vysoké, tzn. right_menu ná text navíce řádků a já chci aby i ten div content byl stejně vysoký v závislosti na tom sloupci right_menu a ne v zavislosti na textu co obsahuje..

Pokud jsem to dobře pochopil, tak chce dva divy, které mají stejnou výšku v závislosti na obsahu alespoň jednoho z nich

Nahlásit jako SPAM
IP: 83.208.196.–
Fugess0
Návštěvník
15. 12. 2008   #15
-
0
-

jo, ale při prodloužení obsahu jednoho elementu potřebuje aby byly flexibilně stejně vysoké ... a tohle má pohodlné řešení barvou nebo backgroundem ...
tím horším jsou tabulky a podobné ..

Nahlásit jako SPAM
IP: 80.78.156.–
Fugess
Wimby
~ Anonymní uživatel
50 příspěvků
15. 12. 2008   #16
-
0
-

Zkoušel jsi to co jsem tu napsal? Možná je v tom někde chyba, ale mělo by se to zobrazit tak, jak chtěl. Obrázky maj nevýhodu v tom, že je striktně daná šířka.

Nahlásit jako SPAM
IP: 83.208.196.–
Fugess0
Návštěvník
15. 12. 2008   #17
-
0
-

popravdě nezkoušel, protože tam nikde nevidím nastavování výšky ... a bez toho se ty elementy nebudou flexibilně dorovnávat (podle toho který by měl delší obsah)

Nahlásit jako SPAM
IP: 80.78.156.–
Fugess
Wimby
~ Anonymní uživatel
50 příspěvků
15. 12. 2008   #18
-
0
-

Tak to zkus, třeba budeš mile překvapen :-)
BTW pokud bych zadal výšku přesně, tak by nebyla flexní

Nahlásit jako SPAM
IP: 83.208.196.–
DragonBehemont0
Super člen
16. 12. 2008   #19
-
0
-

To Fugess : To Wimby : Funguje to jenom napůl ... obsah musí být delší než menu.

Nahlásit jako SPAM
IP: 212.77.163.–
Nemusíte vědět vše, stačí jen, když víte, kde to najít, a jak to použít. Naučíte se to právě tím používáním ;-)
JMM
~ Redaktor
0
Grafoman
16. 12. 2008   #20
-
0
-

A ta moje verze nejde či co? sem úplně nečetl to co to má dělat.... ale pochopil jsem to tak že levej i pravej sloupec maj být stejně dlouhý

Nahlásit jako SPAM
IP: 89.111.99.–
Jan Malý | web: www.malyphoto.cz, @malyphoto
Wimby
~ Anonymní uživatel
50 příspěvků
16. 12. 2008   #21
-
0
-

To DragonBehemont : V kterém prohlížeči ti to nešlo? Asi jsem v tom teda udělal chybu... princip je takovej, že levej panel se neroztahuje, roztahuje se ten div "pod" ním, který má barvu levého panelu a obsah je taky uvnitř, ale nemá žádnej float, začíná vlevo od pravého panelu a roztahuje ten div "pod". No a k tomu, aby se zaručilo, že se roztahne levý panel vůči tomu pravému, tak je v tom pravým div se stylem clear:both...
zatim jsem to zkoušel na IE 5.5, 6, 7, Mozille 2, Opeře 9 a Safari 3, a oba divy se roztahly jak měly...

Nahlásit jako SPAM
IP: 83.208.196.–
Pepa Vrabec
~ Anonymní uživatel
1 příspěvek
12. 7. 2014   #22
-
0
-

Možná taky možnost kterou jsem to vyřešil já. Oba elementy mám v obalovacím divu, jelikož mám barvu obou elementů bílou ale potřebuji aby bylo pozadí mezi nimi barevně měnitelé z menu (je tam mezera) tak obrázek nemůžu použít.

Dal jsem obalu bílé pozadí, levému divu border-right:10px barvy pozadí, pravému to samé na levou stranu a dal margin -10px aby se "bordery" prekrývali, barvu borderu už měnit můžu a rozdíl ve výšce vidět neni.  
 

Nahlásit jako SPAM
IP: 176.12.115.–
peter
~ Anonymní uživatel
2551 příspěvků
14. 7. 2014   #23
-
0
-

Nejak nechapu, proc by nesel pouzit obrazek?
Udelas pruh, nastavis ho do obalovaciho divu jako pozadi. Background-repeat pro y, ale pro x ne. Pomoci background-position muzes dokonce menit jeho pozici zleva, kdyz by sis stam pridal JS nebo PHP kod.

Nahlásit jako SPAM
IP: 2001:718:2601:258:d135:b4...–
Zbyňas
~ Anonymní uživatel
7 příspěvků
2. 9. 2015   #24
-
0
-

Jste lamičky, všechno jde a naprosto bez problémů :)

.main-div    {
        display: block;
        position: fixed;
        width: 800px;
        margin: 0 auto;
        height: 100%;
        background-color: white;
        }


.left-menu    {;
         height: 100%;
        position: fixed;
        float: left;
        display: block;
        width: 170px;
        background-color: yellow;
        margin-left: 5px;
        }

.middle    {
        left: 170px;
        float: left;
        position: fixed;
         height: 100%;
        display: block;
        width: 440px;
        background-color: blue;
        margin-left: 5px;
        }

main-div obaluje ty vnořené další dva divy, je to jasné, ne? :D

Dost špatně se dává ještě něco pod ty dva oddíly dolů, ale jde to taky skoro snadno. Height 100 % se počítá až od obsahu, co je před ním, třeba banner :) Funguje easy všude. A pak že to nejde :)

Nahlásit jako SPAM
IP: 62.245.71.–
sir_arthur
~ Redaktor
0
Stálý člen
3. 9. 2015   #25
-
+1
-
Zajímavé

Dalo by sa pouzit napriklad iny display parameter.

#limiter {
	display: table;
}
#content,
#right_menu {
	display: table-cell;
}
Nahlásit jako SPAM
IP: 89.173.218.–
@mattonik
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 10 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý