NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Michal Kuba
Tvůrce
Avatar
Michal Kuba:12.10.2015 21:59

Ahoj.
Opět zápolím s bootstrapem. Leč je to povedená vychytávka, stále se mi nedaří stoprocentně si s ní rozumět. Mám stránku, zatím jen statickou. Všechny elementy atd jsem si prozatím jakš-takš poskládal, ale při zvětšení to dělá trošku ještě neplechu, což by nevadilo tolik, jako že menu se najednou roztáhne někam pryč, místo toho, aby se udělalo jako collapse (zůstane jen rozklikávací lišta). To se později stane, ale to tlačítko na rozevření (tři vodorovné čárky nad sebou) jsou úplně někde pryč.

Zde je kód začátku stránky s navbarem:

    <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet"  href="styl.css" type="text/css">
         <!-- Latest compiled and minified CSS -->
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

         <!-- jQuery library -->
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

         <!-- Latest compiled JavaScript -->
           <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>
    <body>
       <div class="container">

            <nav class="navbar navbar-default">
                <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-left">
          <li><a href="#">POLOŽKA 1</a></li><li><img class="menu-kladivo" src="./img/kladivo2.PNG"></li>
                    <li><a href="#">POLOŽKA 2</a></li><li><img class="menu-kladivo" src="./img/kladivo2.PNG"></li>
                    <li><a href="#">POLOŽKA 3</a></li><li><img class="menu-kladivo" src="./img/kladivo2.PNG"></li>
                    <li><a href="#">POLOŽKA 4</a></li><li><img class="menu-kladivo" src="./img/kladivo2.PNG"></li>
                    <li><a href="#">POLOŽKA 5</a></li></ul>
                    <a href="#"><img id="logo" src="./img/logo.PNG"></a>
                   <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">POLOŽKA 6</a></li><li><img class="menu-kladivo" src="./img/kladivo2.PNG"></li>
                    <li><a href="#">POLOŽKA 7</a></li><li><img class="menu-kladivo" src="./img/kladivo2.PNG"></li>
                    <li><a href="#">POLOŽKA 8</a></li><li><img class="menu-kladivo" src="./img/kladivo2.PNG"></li>
                    <li><a href="#">POLOŽKA 9</a></li><li>
                    <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
        </ul>
  </div> </div>
</nav>

a zde CSS, doufám že to je vše potřebné k této části HTML:

#logo{
    position: absolute;
        top: -15px;
       left:420px;
         // polovina max. šířky
    width: 124px;
    height: 75px;
    z-index: 4;
}
body,html{
    width: 960px;
    margin:0 auto;
    background-color: grey;
    z-index: -20;
    background-image: url("./img/pattern.JPG");
    background-repeat: repeat;
}

.navbar {
    margin-top:40px;
    z-index: 4;
    width: 960px;
}
.navbar-default .container-fluid{
    background-color: #008f3e;
    border-radius: 4px;
    z-index: 4;
}
.navbar-nav a{
    font-size: 12px;
}
#myNavbar .navbar-nav li a{
    color:white;
}
.menu-kladivo{
    margin-top:20px;
    z-index: 4;
}
.container{
       background-color: grey;
        background-image: url("./img/pattern.JPG");
    background-repeat: repeat;
       z-index: -20;
    max-width:960px;
    margin:0 auto;
}

Napadlo mě, že možná mám chybu někde v divech a nejsem schopný ji dohledat tím, že na ten kód zírám každý den a přijde mi to jako správně.

Má někdo nějaký nápad, proč se to tak chová? :/

 
Odpovědět
12.10.2015 21:59
Avatar
P(r)D
Člen
Avatar
Odpovídá na Michal Kuba
P(r)D:12.10.2015 22:12

Ahoj, nezkoušel sem to (takže nevim, jestli to vyřeší tvuj problém), ale v ukázce kódu nemáš ukončenej jeden div. Většinou když mi bootstrap dělám bordel, tak je to tim ;)

 
Nahoru Odpovědět
12.10.2015 22:12
Avatar
P(r)D
Člen
Avatar
Odpovídá na P(r)D
P(r)D:12.10.2015 22:14

Jo koukam, že píšeš "kód začátku stránky" takže container bude ukončenej asi někde dál..

 
Nahoru Odpovědět
12.10.2015 22:14
Avatar
Michal Kuba
Tvůrce
Avatar
Odpovídá na P(r)D
Michal Kuba:12.10.2015 22:25

Přesně tak, ohledně ukončení divů by to mělo být ok, tohle mi celkem spolehlivě hlásí NetBeans.

 
Nahoru Odpovědět
12.10.2015 22:25
Avatar
P(r)D
Člen
Avatar
Odpovídá na Michal Kuba
P(r)D:12.10.2015 23:10

hele odzkoušel jsem to a nevim přesně kde je problém. při full screen se mi to zorazí trochu ošklivě(protože celý to menu nevejde do containeru vedle sebe) - nějak se odřádkuje, ale když zmenšim okno, tak collapse funguje. tlačítko vidim nevidim problém. napadá mě jedině, že by problém moh bejt ve verzi jquery. dej si tam nejnovější. měla by to bejt 2.1.4

 
Nahoru Odpovědět
12.10.2015 23:10
Avatar
Michal Kuba
Tvůrce
Avatar
Odpovídá na P(r)D
Michal Kuba:13.10.2015 21:12

zkusil jsem i to změnit, ale stále to nedělá co má. Přitom paralerně s tím dělám i jiný web, kde jsem taky čerstvě dal bootstrap a tam to jede normálně.. nemůže být problém v tom, že nemám menu od začátku na celou šířku ale mín?

 
Nahoru Odpovědět
13.10.2015 21:12
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 6 zpráv z 6.