Diskuze: Bootstrap BG image fix position

tbartolen

Člen

tbartolen:21.12.2017 21:07

Zdar!

Hraju si s bootstrapem, mimo jiné s návodem co tady na ITnetwork je.

Chtěl bych vedle mých containerů a columu dát obrázek ale tak, aby byl pouze jako pruh na jedné straně který by se objevoval v závislosti na velikosti zařízení uživatele. Je to možný dosáhnout?

Code:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
        <script>
            (function () {
                'use strict';

                window.addEventListener('load', function () {
                    var form = document.getElementById('needs-validation');
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                }, false);
            })();
        </script>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light" >
                <a class="navbar-brand" href="#">
                    <img src="http://hokejbal.cz/_is/pict/loga_oddilu/3202007.jpg"  class="d-inline-block align-top" width="32" height="32" alt="keltiLogo" />
                    Staň se Keltem!
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigacniLista" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navigacniLista">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Co je hokejbal <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Kdo jsme</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Věkové kategorie</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Kontakt</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Napište nám</a>
                        </li>

                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Hledat" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Hledat</button>
                    </form>
                </div>
            </nav>
        </header>


        <div class='container bg-light text-justify'>
            <h1 class="text-center">Proč být Keltem?</h1>
            <div class="row">

                <div class="col">
                    <p class=text-justify>Chceš si užít skvělou partu, spoustu zápasů a tréninků, ale i dalších akcí v klubu, jehož cílem je nejen sportovní vyžití hráčů? Baví Tě sportovat nebo prostě „jenom“ chceš hokejbal zkusit? Neváhej a přijď mezi nás. Rádi Tě uvidíme!

                        Máme širokou mládežnickou základnu, která zahrnuje tým v každé chlapecké kategorii. Hokejbal ale hrají výborně i dívky!</p>
                </div>
                <!--<div class="col">
                    <img src="http://skkelti.cz/wp-content/uploads/2017/12/Vrstva-2-2.png"  class="img-fluid"  alt="obrazekPrvni" />
                </div>-->
            </div>
        </div>

        <div class='container bg-light text-justify'>
            <h1 class="text-center">Co je Hokejbal?</h1>
            <p class=text-justify>Hokejbal je jeden z nejpříbuznějších sportů lednímu hokeji. Hlavním rozdílem mezi oběma sporty je, že hráči na hřišti nejezdí na bruslích, ale běhají. Hraje se speciálním plastovým míčkem oranžové barvy, který se hráči snaží dostat do soupeřovy branky hokejkami. Brankáři mají výstroj stejnou jako ti v ledním hokeji a rána míčkem bolí jenom o maličko méně než rána pukem. Povrch hřiště je tvořen speciálním plastovým povrchem nebo asfaltem a hrací plocha je ohraničena mantinely.</p>
        </div>

        <div class='container bg-lighttext-justify'>
            <h1 class="text-center">Kdo jsou Kelti?</h1>
            <p class=text-justify>Hokejbalový klub SK Kelti 2008 je největším zástupcem berounského okresu ve svazových soutěžích Českomoravského svazu hokejbalu. Jedním z hlavních cílů Keltů je dlouhodobá práce s mládeží od nejmenších kategorií tak, aby děti sport bavil a odchovanci v budoucnu tvořili základ pro fungování týmů dospělých</p>
        </div>

        <div class='container bg-light text-justify'>
            <h1 class="text-center">Věkové kategorie</h1>
            <table class="table">
                <tbody><tr>
                        <td><b>Minipřípravka</b> = ročníky 2009 a mladší</td><td><b>Starší žáci</b>= ročníky 2003 a 2004</td>
                    </tr>
                    <tr>
                        <td><b>Přípravka</b> = ročníky 2007 a 2008</td><td><b>Mladší dorost</b> = ročníky 2001 a 2002</td>
                    </tr>
                    <tr>
                        <td><b>Mladší žáci</b> = ročníky 2005 a 2006</td><td><b>Dívky</b> = ročníky 2005 a mladší</td>
                    </tr>

                </tbody></table>
        </div>

        <div class='container bg-light text-justify'>
            <h1 class="text-center">Správný Kelt</h1>
            <p class=text-justify>Chceš si užít skvělou partu, spoustu zápasů a tréninků, ale i dalších akcí v klubu, jehož cílem je nejen sportovní vyžití hráčů? Baví Tě sportovat nebo prostě „jenom“ chceš hokejbal zkusit? Neváhej a přijď mezi nás. Rádi Tě uvidíme!

                Máme širokou mládežnickou základnu, která zahrnuje tým v každé chlapecké kategorii. Hokejbal ale hrají výborně i dívky!</p>
        </div>


        <div class='container bg-light text-justify'>
            <h1 class="text-center">Rodič Kelta</h1>
            <p class=text-justify>Chceš si užít skvělou partu, spoustu zápasů a tréninků, ale i dalších akcí v klubu, jehož cílem je nejen sportovní vyžití hráčů? Baví Tě sportovat nebo prostě „jenom“ chceš hokejbal zkusit? Neváhej a přijď mezi nás. Rádi Tě uvidíme!

                Máme širokou mládežnickou základnu, která zahrnuje tým v každé chlapecké kategorii. Hokejbal ale hrají výborně i dívky!</p>
        </div>



        <div class='container bg-light text-justify'>
            <h1 class="text-center">Kontaktní ůdaje</h1>
            <p class=text-justify>Chceš si užít skvělou partu, spoustu zápasů a tréninků, ale i dalších akcí v klubu, jehož cílem je nejen sportovní vyžití hráčů? Baví Tě sportovat nebo prostě „jenom“ chceš hokejbal zkusit? Neváhej a přijď mezi nás. Rádi Tě uvidíme!

                Máme širokou mládežnickou základnu, která zahrnuje tým v každé chlapecké kategorii. Hokejbal ale hrají výborně i dívky!</p>
        </div>









        <div class="container">
            <h1>Kontaktní formulář</h1>
            <form id="needs-validation" novalidate="novalidate">
                <!--Jméno a příjmení v jedné řadě-->

                <div class="form-row">

                    <div class="form-group col-3">
                        <label for="Jmeno">Jméno:</label>
                        <input type="text" class="form-control" id="Jmeno">
                    </div>

                    <div class="form-group col">
                        <label for="Prijmeni">Příjmení:</label>
                        <input type="text" class="form-control" id="Prijmeni">
                    </div>

                </div>
                <!--Jméno a příjmení v jedné řadě-->

                <div class="form-group">
                    <label for="Datum">Datum Narození:</label>
                    <input type="date" class="form-control" id="Datum">
                </div>


                <div class="form-group">
                    <label for="Email">Email:</label>
                    <input type="text" class="form-control" id="Email">
                    <small class="form-text text-muted">Váš email nezneužijeme, ale musíme vědět, komu odepsat!</small>
                    <div class="invalid-feedback">
                        Zadejte prosím validní emailovou adresu.
                    </div>
                </div>


                <div class="form-check">
                    <label class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio" name="pohlavi" id="Muz" value="Muž" >
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Muž</span>
                    </label>
                </div>
                <div class="form-check">
                    <label class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio" name="pohlavi" id="Zena" value="Žena">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Žena</span>
                    </label>
                </div>

                <div class="form-group">
                    <label for="deti">Počet dětí:</label>
                    <!--<input type="number" class="form-control" id="deti"> -->
                    <select class="custom-select"  id="formular-select">
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                    </select>
                </div>

                <button type="submit" class="btn btn-primary">Odeslat</button>


            </form></div>

    </body>
</html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Odpovědět

21.12.2017 21:07

Navštiv www.fb.com/skkelticz

Jiří Fencl

Člen

Jiří Fencl:21.12.2017 21:29

Nejlepsi by bylo, kdyby jsi to zprovoznil v nejakem jsfiddle a k tomu dal nacrtek toho, co chces dosahnout - kazdej neni jak v matrixu, ze by koukal na zdrojak a videl vysledek

Editováno 21.12.2017 21:29

Nahoru Odpovědět

21.12.2017 21:29

tbartolen

Člen

tbartolen:21.12.2017 21:32

nooo kdyby si to hodil třeba do beansu tak ti to naběhne, nic tomu nechybí

jsfidle nevím, zkusím, podívám se

Nahoru Odpovědět

21.12.2017 21:32

Navštiv www.fb.com/skkelticz

tbartolen

Člen

tbartolen:21.12.2017 21:40

JS Fiddle nefunguje, neumí načíst zdroje z Bootstrapu.

JDe o to, že chci tento obrázek
http://skkelti.cz/…stva-2-2.png

Mít v boční pozici tak, aby se objevoval a mizel s velikostí okna. Tzn na malých screenech nebude vidět, na větších jen část, na velkých celý...

Nahoru Odpovědět

21.12.2017 21:40

Navštiv www.fb.com/skkelticz

tbartolen

Člen

tbartolen:21.12.2017 21:46

Dal bych to do jednoho, ale vypršel čas na editaci, opět

Nahoru Odpovědět

21.12.2017 21:46

Navštiv www.fb.com/skkelticz

Jiří Fencl

Člen

Jiří Fencl:21.12.2017 21:46

Beans... no fuj

Jestli jde o to mit container a vrapvo ten obrazek, tak do container dej jeste jeden div s nulovou vyskou, relativni + overflow visible a k tomu udelej pseudo before absolutne umisteny na top = 0 a left 100%, veliky jako ten obrazek a obrazek na pozadi. Ten zobraz pomoci media query jen od urcite velikosti

Nahoru Odpovědět

21.12.2017 21:46

Peter Sciranka

Tvůrce

Peter Sciranka:21.12.2017 21:47

Ahoj, na skrytie na malých obrazovkách môžeš použiť toto.
Obrázok by si mal dať do nejakého div a pozicovať ho vrámci neho a zároveň by si skrýval celý div.
Stačí to takto?

Nahoru Odpovědět

21.12.2017 21:47

Act as if it was Impossible to Fail

tbartolen

Člen

tbartolen:21.12.2017 22:01

No právě, že ne...Já chci mít ten main content jako hlavní stránku, uprostřed...a ten obrázek chci mít v pozici backgroundu. Jenže pokdu ho nastavím jako klasický background, tak ho budu muset na každé velikosti stránky pozicovat.

Případně, mužu background imgae Float left, no repeat a margin right tak, aby to vypadalo? ALe stejně si myslím, že mi bude plavat a měnit velikost dle velikosti screenu potom a to nechci

Nahoru Odpovědět

21.12.2017 22:01

Navštiv www.fb.com/skkelticz

tbartolen

Člen

tbartolen:21.12.2017 22:05

Takže bych měl udělat wrap okolo všech divů v Bootstrapu a vedle něho našulit ty obrázky before a after ?

Nahoru Odpovědět

21.12.2017 22:05

Navštiv www.fb.com/skkelticz

Jiří Fencl

Člen

Jiří Fencl:21.12.2017 22:07

pisu jeden div navic a v nem jednu pseudo. Container pouzit nemuzes ptz pouziva after a before jako cleaxfix

Nahoru Odpovědět

21.12.2017 22:07

tbartolen

Člen

tbartolen:21.12.2017 22:14

To je těžký no, já nevím co to je pseudo :-(

Nahoru Odpovědět

21.12.2017 22:14

Navštiv www.fb.com/skkelticz

Peter Sciranka

Tvůrce

Peter Sciranka:21.12.2017 22:22

Už asi rozumiem ako to chceš No popravde neviem ako to docieliť pomocou bootstrap (nemám s ním veľa skúsenosti). V normálnom HTML/CSS by to nemal byť problém, ale bootstrap neviem, tam sa ťažko nastavuje fixná veľkosť (ak to je vôbec možné).

Nahoru Odpovědět

21.12.2017 22:22

Act as if it was Impossible to Fail

tbartolen

Člen

tbartolen:21.12.2017 22:25

a mužu k bootstrap stránce nalinkovat tohle :

<link rel="stylesheet" href="C:\Users\ragulin\Disk Google\Tvorba stránek\Projekt ACEM\ACEM\public_html\style.css" >

A pak to tam dotlačit přes HTML a CSS?
To by neměl byt problém to propojit, ne?

Nahoru Odpovědět

21.12.2017 22:25

Navštiv www.fb.com/skkelticz

Peter Sciranka

Tvůrce

Peter Sciranka:21.12.2017 22:34

No bude ti to fungovať len u teba na PC, nikde inde. Ak tu stránku dáš niekde na hosting, tak tá cesta nebude platná. Bolo by dobré, aby si mal style.css v zložke kde máš aj html súbor. Potom obsah tej zložky dáš na hosting a všetko bude fungovať.

Nahoru Odpovědět

21.12.2017 22:34

Act as if it was Impossible to Fail

tbartolen

Člen

tbartolen:21.12.2017 22:45

Já to mám ve stejné složce, jen si nejsem jistý jak napsat tu cestu

Nahoru Odpovědět

21.12.2017 22:45

Navštiv www.fb.com/skkelticz

Peter Sciranka

Tvůrce

Peter Sciranka:21.12.2017 22:57

Jasné. No dajme tomu že máš zložku "MojeStránka" a v nej máš súbor index.html a style.css.

MojeStránka
  - index.html
  - style.css

V index.html nastavíš tzv. relatívnu cestu:

<link rel="stylesheet" href="style.css">

To je všetko

Ak by si mal v danej zložke nejaké iné zložky, napr. CSS.

MojeStránka
  - index.html
  CSS
    - style.css

Tak cestu nastavíš ako:

<link rel="stylesheet" href="css/style.css">

Ak si zatiaľ neprešiel tutoriál na HTML/CSS, tak tuto na ITnetwork je jeden výborný
Bootstrap je framework, ktorý slúži hlavne na urýchlenie tvorby webu, ale je vhodné, aby človek vedel poriadne základy "čistého" HTML/CSS.

Nahoru Odpovědět

21.12.2017 22:57

Act as if it was Impossible to Fail

tbartolen

Člen

tbartolen:21.12.2017 23:10

Já už jsem to četl, několikrát, ale prostě nedělám weby pořád, takže občas něco zapomenu, pak to zpětně hledám atp. Jsem zrovna v situaci kdy jsem dal v práci výpověd a chtěl bych zkusit někde pozici CSS HTML juniora, zkusit jestli na to mam. No uvidíme, děkuju za radu ohledně linkování

Chtěl bych se zeptat, jestli není trochu mišmaš bastlit bootstrap a vlastní style dohromady?

Nahoru Odpovědět

21.12.2017 23:10

Navštiv www.fb.com/skkelticz

Peter Sciranka

Tvůrce

Peter Sciranka:21.12.2017 23:19

Môžeš to kľudne takto spraviť, ale každopádne veľmi odporúčam začať tvoriť stránky bez akéhokoľvek frameworku, len čisté HTML/CSS, človek sa takto pri tvorení naučí najviac (aspoň ja mám takú skúsenosť) A potom sa naučiť JavaScript, prípadne nejaký framework typu Bootstrap.

Editováno 21.12.2017 23:20

Nahoru Odpovědět

21.12.2017 23:19

Act as if it was Impossible to Fail