• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Logo i menu w jednym pasku

Object Storage Arubacloud
0 głosów
1,812 wizyt
pytanie zadane 2 września 2018 w HTML i CSS przez Szycha Gaduła (4,650 p.)

Witam.

Dawno nie pisałem w HTMLu, jestem teraz raczej początkujący. Chcę zrobić nawigacje z logiem w jednej lini tak żeby wyglądała podobnie jak na stronie: https://www.ubuntu.com. Tylko że logo textowe

mam coś takiego:

<nav>
         <div class="logo">
            <h1 class="menuNav">Sec0S</h1>
         </div>
         <div class="rightNav">
            <ol class="menuTop">
               <li><a href="#" class="menuLink">Team</a></li>
               <li><a href="#" class="menuLink">Developer</a></li>
               <li><a href="#" class="menuLink">Community</a></li>
               <li><a href="#" class="menuLink">Donate</a></li>
               <li><a href="#" class="menuLink">Download</a></li>
            </ol>
         </div>
 </nav>

Jak to ostylować żeby div 'Logo" układał się równo z "rightNav", przy użyciu display: inline-block; divy zachowują się bardzo dziwnie. Proszę o pomoc. 

4 odpowiedzi

+2 głosów
odpowiedź 2 września 2018 przez imklau Nałogowiec (42,090 p.)

Zdecydowanie odradzam tutaj stosowanie czegoś takie, jak float - krzywdzisz sam siebie :D
A to co polecam to flexbox, o którym wspomniał już @k.wichura. Dzięki niemu też fajnie sobie można "przestawiać" elementy na mobile. To tylko kilka dodatkowych właściwości CSS, a nie tylko menu sobie ustawisz, ale i inne elementy na stronie, właściwie nawet fajne galerie można na nim zbudować :)

Jeszcze uwaga, co do Twojego kodu. Nie używaj listy <ol> bo jest to lista ponumerowana, a przecież od razu widać, że ta numeracja nie jest potrzebna w przypadku menu. W takiej sytuacji używamy <ul>.

A no i klasa 'rightNav' też nie jest za bardzo poprawna. Staraj się tworzyć takie, które nie mówią nic o tym, jak element wygląda, czy gdzie się znajduje. Samo 'nav' byłoby zdecydowanie lepsze i prostsze :P

+1 głos
odpowiedź 2 września 2018 przez k.wichura Pasjonat (19,870 p.)
zainteresuj sie https://css-tricks.com/snippets/css/a-guide-to-flexbox/ .

display flex na ol i powinno smigac :)
+1 głos
odpowiedź 2 września 2018 przez Hoorder Początkujący (470 p.)
https://codepen.io/Hoorder/pen/QVpBJx  coś takiego ? albo ja coś źle zrozumiałem
0 głosów
odpowiedź 2 września 2018 przez Szycha Gaduła (4,650 p.)
@Noemi @k.wichura @Dzikus - Dzięki wam za odpowiedzi i pomoc.

Podobne pytania

0 głosów
2 odpowiedzi 329 wizyt
pytanie zadane 25 kwietnia 2016 w HTML i CSS przez 23yes Użytkownik (500 p.)
0 głosów
1 odpowiedź 228 wizyt
0 głosów
3 odpowiedzi 729 wizyt
pytanie zadane 9 listopada 2015 w HTML i CSS przez Mr Popcorn Bywalec (2,340 p.)

92,661 zapytań

141,557 odpowiedzi

319,999 komentarzy

62,028 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...