Nawigacja się psuje gdy wstawię do niej logo.

pytanie zadane 14 maja 2016 w HTML i CSS przez R.orlinski Mądrala (5,490 p.)

Witam.

Mam problem, a mianowicie gdy wstawię grafikę do nawigacji, inne elementy idą w dól, próbuje z paddingami i rozmiarami i nic nie mogę zdziałać.

Tak to wygląda:

Kod HTML:

<div class="nav">
			<ul>
				<li>O NAS</li>
				<li>NASZE AUKCJE</li>
				<li style="padding: 10px 0 7px 0; height: 30px;"><img src="img/logotyp.png" height="30px"></li>
				<li>KOMENTARZE</li>
				<li>NAPISZ DO NAS</li>
			</ul>
		</div>

Tak wiem nie wolno stylizować in-line. To jest roboczo.

Kod CSS:

.nav
		{
			width: 1198px;
			height: 50px;
			background: rgba( 00, 00, 00, 0.5 );
			position: absolute;
			z-index: 10;
		}
		.nav > ul
		{
			height: 50px;
		}

		.nav > ul > li
		{
			display: inline-block;
			text-decoration: none;
			width: 216px;
			text-align: center;
			padding-left: 10px;
			padding-right: 10px;
			padding-top: 10px;
			padding-bottom: 7px;
			font-size: 20px;
			font-family: 'Oswald', sans-serif;
		}
		.nav > ul > li:hover
		{
			border-bottom: 3px solid #008CBA; 
		}

Pozdrawiam.

komentarz 14 maja 2016 przez Niespecjalny Gaduła (4,180 p.)

W pierwszej kolejności pozbądź się tego height="30px"

1 odpowiedź

odpowiedź 14 maja 2016 przez Ivan Maniak (60,650 p.)
wybrane 14 maja 2016 przez R.orlinski

Najlepsza

Logo ma wysokość 30 [Tak jak to ustaliłeś] + 10 paddingu top/bottom = 50px
Tekst: około 20px [font-size] + 10 padding top/bottom ~= 40px

Jak to naprawić? Można dodać padding. Ale według mnie łatwiej jest użyć flexbox-a, a wtedy po prostu dodać align-items: center i wszystko będzie wyrównane do środka [pionowo]. Tutaj masz podstawy na temat flexbox-a https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Mnie się nudzi, więc to możesz poprawić:

To nie jest tylko roboczo, bo potem zostawisz,
Możesz użyć HTML5 czyli nav zamiast div.nav
Jak mawiają "Nie krzycz", napisz normalnie "O nas", zamiast "O NAS". A następnie użyj text-transform: uppercase
Jeżeli stylizujesz padding-top, padding-right, padding-bottom, padding-left, użyj po prostu padding, jest wtedy mniej kodu do przesłania użytkownikowi