FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Michal Kuba
Tvůrce
Avatar
Michal Kuba:5.10.2015 20:55

Ahoj.
Chci pomocí bootstrapu udělat navigaci na webu zhruba tak, jak je v přiloženém obrázku.

Tedy: Mám několik položek, dejme tomu pět a pět a mezi to chci dát logo, které nyní představuje ten zelený obdélník s šedým okrajem. Logo je dejme tomu dvojnásobné výšky oproti výšce navigační lišty. Jde toho nějak rozumně docílit nebo spíš mám posadit obrázek nahoru doprostřed webu samostatně a položky nějak donutit, aby pod logo nelezly při větším přiblížení?

Díky za info :)

 
Odpovědět
5.10.2015 20:55
Avatar
Michal Kuba
Tvůrce
Avatar
Odpovídá na Michal Kuba
Michal Kuba:5.10.2015 21:03

Nyní to dělá to, že když dokážu vše nacpat na jeden řádek, tak celou tu výšku navigace roztahuje to prostřední logo.. Což nechci, chci právě, aby to logo drželo jakoby takhle nad tou navigací.. Mám uprostřed navbaru použít nějak navbar-header třídu a tu ve svém styl.css externě dostylovat jak potřebuji?

 
Nahoru Odpovědět
5.10.2015 21:03
Avatar
adder
Člen
Avatar
adder:5.10.2015 21:32

Ahoj,
vyhovovalo by řešení. Že bys měl:

<nav>
        <ul1>...položky...</ul>
        <a>..logo..</a>
        <ul2>...položky...</ul>
</nav>

Dále css:

nav {
        ..clearfix..
        position: relative;
}

ul1,
ul2 {
        box-sizing: border-box;
        width: 50%;
        float: left;
}

ul1 {
        padding-right: 75px; // nebo v procentech
}

ul2 {
        padding-left: 75px; // nebo v procentech
}

logo {
        position: abasolute;
        top: -20px;
        left: 50%;
        margin-left: -75px; // polovina max. šířky
        ...
}

Že by jsi pomocí paddingu na box vlevo a vpravo vytvořil prostor mezi, kde by mohlo být logo absolutně pozicované. Snad mi rozumíš. :)

Snad chápeš ten pseudo po mně. :P

Editováno
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
5.10.2015 21:32
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Michal Kuba
Tvůrce
Avatar
Odpovídá na adder
Michal Kuba:5.10.2015 21:37

Zkoušel jsem něco podobného, udělat bootstrap navbar left a right a mezi to vložit logo.. Zkusím to, ale nechci to mít takto napevno, ale při každém zmenšení aby se to přizpůsobilo, takže se obávám, že při jiném zobrazení už to nebude sedět, ne?

 
Nahoru Odpovědět
5.10.2015 21:37
Avatar
adder
Člen
Avatar
Odpovídá na Michal Kuba
adder:5.10.2015 21:47

Tak jestli nastavíš padding relativně v procentech např. na 5% na každé straně, tak máš možnost dát <a> šířku na 10%. Poté logu (pakliže je <img>) nastavíš max-width: 100% a bude se přizpůsobovat bez deformace.

Ještě je možné centrovat obrázek, tak že nastaví <a> i výšku (což budeš, podle tohoto řešení, muset nastavit) a <img> dáš:

img {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
}

To ti vycentruje img přímo v <a>. A myslím, že by to nemělo zasahovat do ani jednoho menu (jak na levé, tak ani na pravé straně). Chce vyzkoušet, když tak dej ještě vědět. Rád se dovím, jak jsi to nakonec řešil. ;)

Nahoru Odpovědět
5.10.2015 21:47
I’m going to lay this brick as perfectly as a brick can be laid.
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 5 zpráv z 5.