NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.
Avatar
Roman Duchoň
Člen
Avatar
Roman Duchoň:15.8.2018 18:29

Ahoj,
nějak mi konkrétně nejde jedna stránka s flexboxem v Chromu (a možná dalších...)
Nějak se pokusím osekat to podstatné z kódu (snad nebude nic přebývat, snad nebude nic chybět).
index.php:

<?php
?>
<!DOCTYPE html>
<html lang="cs-cz">
    <head>
        <meta charset="UTF-8">
        <link type="text/css" rel="stylesheet" href="css.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    <body>
        <header>
        <?php
        ?>
        </header>
        <aside>
            <!--MENU-->
            <?php
            ?>
        </aside>
        <!--MAIN CONTENT-->
        <div id="container">
            <div id="space">
                <?php
                include 'neco.php';
                ?>
            </div>
            <div id="content">
                <?php
                include 'neco.php';
                ?>
            </div>
            <!--SIDE CONTENT-->
            <div id="bests">
                <?php
                include 'neco.php';
                ?>
            </div>
        </div>
        <footer>
        </footer>
    </body>
</html>

css.css

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
header {
    flex: 5 1 0;
}
h3, h2 {
    margin-top: 0;
}
header {
    background: #C8DBF2;
}
aside {
    flex: 2 1 0;
    background: #95B6DD;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap-reverse;
}
#container {
    flex: 50 1 0;
    width: 100%;
    background: #C8DBF2;
}
footer {
    flex: 0.5 1 0;
    background: #95B6DD;
}
@media only screen and (min-width: 1000px){
    #container {
        display: flex;
        flex-direction: row-reverse;
    }
    #bests {
        flex: 50 1 0;
    }
    #content {
        flex: 3 1 0;
    }
    #space {
        flex: 1 1 0;
    }
}

Zkusil jsem: Dle rad internetu různě v kódu min-height: 0, min-width: 0, prefixes... různě googlit a žádné řešení mi nepomohlo. Třeba jsem jen dělal špatně.

Chci docílit: V osekaném kódu mi štve různá šířka obsahu.
To ani není tak podstatné, jako responzivní zobrazení např. ve smartfónu - a neroztahování aside dle obsahu (odkazů).
To je nežádoucí a chtěl bych se toho zbavit.
Příkládám i obrázky - kdy vždy č.1 je Firefox (funkční) a č.2 Chrome.

Děkuji moc za pomoc a jen podotýkám, že nejde o nic komerčního, jen můj pokus o hru za účelem vzdělávání se. :)

Odpovědět
15.8.2018 18:29
RD
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 1 zpráv z 1.