Sprawdzenie kodu paska nawigacyjnego oraz problematyczne centrowanie div z inline-block

pytanie zadane 8 maja 2017 w HTML i CSS przez kevin Mądrala (5,010 p.)

Witam!

Czy mógłbym poprosić o sprawdzenie poprawności kodu strony https://jsfiddle.net/adriansikora344/ya09y8y6/ Głównie chodzi mi o pasek nawigacyjny czy nie ma w nim błędów i czy tak się kożysta z @media przy zmianie rozmiaru tak jak napisałem w CSS ? Niby display: inline-block jest nowsze od float: left a są z nim problemy... kiedy chcę mieć w jednym divie różne wielkości czcionki to całość się rozchodzi... i już się poważnie zastanawiam nad użyciem float: left dla tych divów ponieważ chcę mieć dwa divy obok siebie jeden ( lewy ) o stałym rozmiarze a rozmiar prawego diva jest inny dla każdej podstrony to co tutaj przedstawiam to jest szablon dla podstron. Chcę oba divy wycentrować, więc najłatwiej dać float: left dla obu a dla diva zawierającego display: inline-block; i text-align: center ? Do przykrycia problemów z float: left potrzebuję TYLKO stylu clear: both; ?

1 odpowiedź

odpowiedź 8 maja 2017 przez imklau Nałogowiec (42,090 p.)
edycja 8 maja 2017 przez imklau

/* nie lepiej zamiast tego dac te style do body ? */

takie coś znalazłam na początku CSS. To pytanie nadal aktualne? :P
bo HTML powinien być osobno, CSS osobno i JavaScript jeszcze w innym pliku.
Nie byłoby to zbyt czytelne gdybyś chciał dać CSS gdziekolwiek w pliku HTML ;)

czy tak się kożysta z @media przy zmianie rozmiaru tak jak napisałem w CSS

korzysta* raczej tak, ale najlepiej jakby te @media były na końcu CSS.

Jeśli chodzi o HTML, to masz tam diva class="header" co powinieneś zamienić na <header> skoro i tak korzystasz z HTML5.
Na dodatek o co chodzi z tymi inputami w nawigacji? Każdy input musi mieć label, a Ty ich nie masz.
To raczej powinna być zwykła lista ul > li > a.

Dodatkowo usunęłabym to <hr class="aa"/> w CSS to 10 linijek Ci zajmuje a mógłbyś dodać po prostu do nav:

border-bottom: 2px solid red;
padding-bottom: 5px;

A Twojego problemu z display: inline-block wybacz ale nie zrozumiałam ;)

komentarz 8 maja 2017 przez kevin Mądrala (5,010 p.)

Co do tego /* */ to miało być pytanie w pliku css :) Poprawiłem stronę według wskazówek https://jsfiddle.net/adriansikora344/fowfuhrt/ Ale dlaczego nie powinno się używać inputów w menu tylko a ? Co do tego paska to on ma się przesuwać pod element w menu który ma focus tylko nie wiem czemu nie idzie to przy selektorze ~