Získej svůj iPhone v nové soutěži! Získej svůj iPhone v nové soutěži!
Nová překladatelská soutěž ITnetwork.cz o telefon iPhone, sluchátka Beats a další věcné ceny za 4 hodiny práce.
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
Avatar
Filip Miska
Člen
Avatar
Filip Miska:7. října 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. října 16:29
Avatar
Michael Nový:24. listopadu 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. listopadu 13:03
Avatar
David Omrai
Člen
Avatar
David Omrai:6. prosince 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. prosince 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.