Diskuze: Bootstrap

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

Aktivity

Filip Miska

Člen

Filip Miska:7.10.2017 16:29

Zdravím,
tak nějak se po domácku učím s bootstrapem a CSSkem. Potřeboval bych poradit jak vyřešit problém viz. foto. Potřebuji toho "panáka" přemístit o trochu výše aby to vypadalo pěkně ale nějak v tom tápu. Napadá mě akorát vložit další <section> a udělat k tomu zvlášť CSS.

Můj druhý problém je, že to není responzivní. Je to dělané pouze podle mého monitoru. Na netu jsem četl jakési návody, ale moc se v tom nevyznám. Myslím si, že by mi pomohlo to vidět právě na tomto mém případu tak kdyby se našel někdo, kdo těch pár řádků napíše, byl bych mu velice vděčný.

Díky moc

Zdroják

<html>
<head>
    <meta charset="utf-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>První stránka ve vývoji</title>

</head>
<style>
    .uvod {
        height: 100%;
        width: 100%;
        background: url('https://wallpapercave.com/wp/g2lPjKN.jpg');
        background-size:cover;
        background-repeat: no-repeat;
    }

    .LevyText {
        text-align: left;
        margin-top: 33%;
        color: white;
        line-height: 30px;
    }

    .PravyText {
        text-align: right;
        margin-top: 33%;
    }

</style>
<body>

<section class="uvod">
    <div class="container">

        <section class="LevyText">

                <div class="row">
                    <div class="col-sm-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet dictum nulla, nec porta metus. Morbi in tempus arcu. Vivamus congue volutpat ligula, nec suscipit magna aliquet sit amet. Quisque molestie est in lobortis porttitor. Aenean ultricies, turpis quis faucibus vestibulum, felis libero luctus lectus, quis bibendum lectus tellus sit amet augue. Mauris et dignissim odio.</div>

                     <div class="col-sm-6">
                        <img src="https://cdn1.iconfinder.com/data/icons/amenities/500/man-512.png" class="img-rounded" alt="Ahoj" width="100%" height="50%">

                    </div>
                </div>
        </section>


    </div>
</section>


<div>
    <div class="souhrn">
        <div class="eq"><i>„Proti hluposti se bojovat musí, ale vyhrát se nedá!“ </i>Jan Werich</div>
    </div>
</div>
</body>

<script
        src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


</html>

Odpovědět

7.10.2017 16:29

Michael Nový

Člen

Michael Nový:24.11.2017 13:03

Zkus

img {
margin-bottom : 10px;
}

Popřípadě px si nastav kolik chceš aby ti to vyhovovalo. Snad pomůže a je to to co jsi chtěl.

Nahoru Odpovědět

24.11.2017 13:03

David Omrai

Člen

David Omrai:6.12.2017 16:18

Ahoj, co se tak koukám na ten zdroják, tak bych to asi celkově překopal. Máš tam nějaké zbytečnosti a ve výsledku to nevypadá hezky. Tvůj problém se dá vyřešit snadno snížením definovaného margin-top a doplnění jednoho margin-top pro text. Jen je potřeba najít správnou variaci hodnot. Pokud budu mít čas a bude zájem, tak bych zkusil přepsat stránky do responzivní podoby.

Nahoru Odpovědět

6.12.2017 16:18

I'm still alive

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 3 zpráv z 3.