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

Wyśrodkowanie divów w nawigacji

VPS Starter Arubacloud
+1 głos
279 wizyt
pytanie zadane 1 lipca 2017 w HTML i CSS przez Michał Wołoszyn Początkujący (380 p.)

Witam serdecznie... Jestem w trakcie tworzenia nowej strony na swoje potrzeby i mam problem z nawigacją. Chciałbym żeby obrazek (logo firmy)  był wyśrodkowany  i po lewej i po prawej żeby było menu. Kombinowałem już na rówżne sposoby i obecnie zrobiłem to na 3 divach ale dalej nie działa tak jak trzeba. 

http://www.bajkowykadr.pl/nowastrona/

 

Ktoś może podpowiedzieć jak to zrobić ? :) 

5 odpowiedzi

+1 głos
odpowiedź 1 lipca 2017 przez niezalogowany
Witaj, najważniejsze to NIE rób menu na divach, zrób na liście.
http://blog.rosedesign.pl/tag/menu/ podsyłam link, gdzie opisuje jak się to robi, żeby się nie powtarzać.
W razie czego pisz pomogę :)
komentarz 1 lipca 2017 przez Michał Wołoszyn Początkujący (380 p.)
Poprawiłem.... To teraz powiedz jak mogę zwiększyć wielkość obrazka zagnieżdżonego w liście... Zależy mi żeby był większy niż czcionka menu :)
komentarz 1 lipca 2017 przez niezalogowany
Utwórz dla obrazka z logo klasę, bo logo i obrazek pod logo dziedziczą po sobie style CSS i jak zmienisz style jednemu zmieniają się oba.
komentarz 1 lipca 2017 przez imklau Nałogowiec (42,090 p.)

to chyba wystarczy dodać klasę do tego logo i odpowiednio je powiększyć w CSS ;)

edit: sorry za mój opóźniony zapłon :D

komentarz 1 lipca 2017 przez Michał Wołoszyn Początkujący (380 p.)
No tak, ale jak to zrobić żeby listy się nie rozjechały ? To logo jest zagnieżdżone w listach a szerokość w liście jest określona natomiast  logo samo w sobie jest szersze niż docelowa szerokość.
komentarz 2 lipca 2017 przez pablop76 VIP (123,060 p.)
edycja 2 lipca 2017 przez pablop76

Witam.

li:nth-child(4){
width: 450px;
}
.podpis {
    height: 100%;
    width: 450px;
}

No i oczywiście należy poszerzyć nav.

Ale nie wiem czy to jest dobre zaprojektowanie menu.

Bo jak ułożysz je na mniejszych ekranach?

(flex daje możliwość zmiany kolejności elementów na stronie)

Myślę, że ten podpis nie powinien być częścią nawigacji tylko osobnym divem.

+1 głos
odpowiedź 2 lipca 2017 przez zgrybus Pasjonat (24,860 p.)
0 głosów
odpowiedź 2 lipca 2017 przez Strategiusz Dyskutant (9,220 p.)
Podziel menu na 3 kolumny i logo daj jako jedyny element do środkowej kolumny. Nie wiedzę innej sensownej możliwości.
0 głosów
odpowiedź 5 lipca 2017 przez EdeX Mądrala (5,110 p.)

Przy najechaniu na link lepiej zmienić kolor hiperłącz a nie tła znacznika <a>

nav powinno mieć 100% szerokości

do ol > li zmienić float:left; na display: inline-block;

i zamiast stylizować szytkie "img" w stylu lepeij jest stylizować ".logo img"

 o tym pod spodem img mówie i nie trzeba ustawiać height sam się ustawi i tu wstawić ".logo img" bez cudzysłowia

img  
{
     max-width: 100%;
    height: auto;
    
}

i wtedy ustawić width w .podpis

 

Jak czegoś nie rozumiesz to napisz smiley

komentarz 5 lipca 2017 przez EdeX Mądrala (5,110 p.)
a zapomniałem do ol dodaj padding: 0;
–1 głos
odpowiedź 1 lipca 2017 przez Krzysztof Drozdowski Użytkownik (830 p.)
Masz literówkę w id container w htmlu. Co do menu to proponowałbym listę. Jeżeli już tak bardzo chcesz zostać przy tych divach to na szybko polecam wsadzić <nav> w znaczniki <center>. Rozwiązanie archaiczne, ale rozwiązuje sprawę :P
komentarz 1 lipca 2017 przez imklau Nałogowiec (42,090 p.)

mały cytat o znaczniku <center>:

This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the CSS text-align property, which can be applied to the <div> element or to an individual <p>. For centering blocks, use other CSS properties like margin-left and margin-right and set them to auto (or set margin to 0 auto).

źródło oczywiście mdn

w tych czasach <center> nie używamy i nie polecamy :p

komentarz 1 lipca 2017 przez niezalogowany
Polecam stworzyć diva do "centrowania"

Podobne pytania

0 głosów
2 odpowiedzi 154 wizyt
pytanie zadane 8 listopada 2016 w HTML i CSS przez anhydryt Początkujący (290 p.)
0 głosów
1 odpowiedź 244 wizyt
pytanie zadane 17 lipca 2018 w HTML i CSS przez uszk Użytkownik (630 p.)
0 głosów
1 odpowiedź 113 wizyt
pytanie zadane 17 kwietnia 2018 w HTML i CSS przez P0Y3B Nowicjusz (220 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...