Diskuze: Nulová výška divu??

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Michal Kuba

Tvůrce

Michal Kuba:13.3.2016 13:50

Ahoj.

Mám zhruba takovou kostru:

<div class="obsah-hp">
        <div class="obsah-content">
            <div class="table-nabidky">
                <h3>NEJNOVĚJŠÍ <strong>NABÍDKY</strong></h3>
                <table class="table">
                    <thead>
                        <tr>
                            <th>ČÍSLO</th>
                            <th>TYP</th>
                            <th>ČÁSTKA</th>
                            <th>LOKALITA</th>
                            <th>DETAIL</th>
                        </tr>
                    </thead>
                    <tr>
                        ...
                    </tr>
                    <tr>
                        ...
                    </tr>
                    <tr>
                       ...
                    </tr>
                </table>
            </div>
            <div class="table-poptavky">
                <h3>NEJNOVĚJŠÍ <strong>POPTÁVKY</strong></h3>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ČÍSLO</th>
                            <th>TYP</th>
                            <th>ČÁSTKA</th>
                            <th>LOKALITA</th>
                            <th>DETAIL</th>
                        </tr>
                    </thead>
                    <tr>
                       ...
                    </tr>
                    <tr>
                       ...
                    </tr>
                    <tr>
                       ...
                    </tr>
                </table>
            </div>
        </div>
        </div>
            <div class="box-try">
                <p class="text-try">ZADEJ SVOJI <strong>POPTÁVKU</strong> HNED TEĎ ZCELA <span style="color:#DBAA34;">ZDARMA!</span>
            </div>

To jsou dvě části, které mám a chci mít nad sebou (dvě tabulky jsou vedle sebe, pod tím je box s nápisem, viz screen)

Styly jsou následující:

.obsah-hp {
    min-height: 400px;
    height: 550px;
    max-height: 550px;
}
.obsah-content {
    max-width: 960px;
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;
}
.obsah-content .table-nabidky, .obsah-content .table-poptavky {
    width: 456px;
    float: left;
    margin-left: 20px;
}
.box-try {
    margin-bottom: 40px;
}

Děje se to, že teď mám pro statickou variantu a doladění designu v tabulce deset řádků a box-try umístěný akorát pod tím, jenže pokud třeba napíšu do typu půjčky nějaký delší název, tak se tabulka natáhne logicky dolů, ale box-try tam zůstane a část tabulky je tím jakoby překrytá. Nejde mi nijak nastavit, aby výška celého obsah-content dědila podle výšky nejdelší tabulky a aby box-try držel pěkně pod tím, vždy stejně.. Pod tím je ještě patička, která jakoby drží v jednom bloku s box-try..

Když pak dělám responzivitu, musím box-try nastavit asi 20krát @media pro 20 různých šířek obrazovky, odstupnovaných po 20px aby ta stránka držela a obsah se nepřekrýval.. Jak mám docílit toho, aby ta výška obsah-hp držela pěkně a další věci, co jsou i v kodu v divech pod tím, byly až potom a nepřekrývaly se?

Díky!

Odpovědět

13.3.2016 13:50

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:13.3.2016 14:11

Za poslední koncovou značku

<div class="table-poptavky">

dáš

<div style="clear:both;"></div>

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

13.3.2016 14:11

Michal Kuba

Tvůrce

Michal Kuba:13.3.2016 14:13

No, právě že to ale nefunguje, to už jsem zkoušel všelijak :/

Nahoru Odpovědět

13.3.2016 14:13

Tomáš123

Člen

Tomáš123:13.3.2016 14:21

Dodaj prosím obšírnejší kód, ideálne ukážku, s ktorou sa bude dať pracovať.

Nahoru Odpovědět

13.3.2016 14:21

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Michal Kuba

Tvůrce

Michal Kuba:13.3.2016 14:23

Tak jsem trochu kecal! Musel jsem vymazat tu výšku toho divu a už to funguje

Nahoru Odpovědět

13.3.2016 14:23

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.

Nejčastěji vyhledáváné

Diskuze: Nulová výška divu??