Wyśrodkowanie divów w nawigacji

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

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,580 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.

odpowiedź 2 lipca 2017 przez zgrybus Pasjonat (24,860 p.)

odpowiedź 2 lipca 2017 przez Strategiusz Dyskutant (9,220 p.)

odpowiedź 5 lipca 2017 przez EdeX Mądrala (5,130 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

komentarz 5 lipca 2017 przez EdeX Mądrala (5,130 p.)

a zapomniałem do ol dodaj padding: 0;

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