Pozycjonowanie listy w pionie obok logo HTML i CSS

0

Witam,
na początku chciałbym wszystkich przywitać. Uczę się HTML i CSS i tworzę swoje projekty w celach nauki. Mam problem, z którym walczę już od jakiegoś czasu i
nie mogę uzyskać zadawalającego efektu. Chodzi o wyrównanie w pionie listy z której tworzę menu strony do dołu.
Założenie jest takie aby po lewej stronie było logo (skalowane przez div-a) a obok w następnym div-ie menu główne strony.

Chcę jeszcze zadbać o poprawną semantykę i tu też moje pytanie czy dobrzę to chcę zrobić.

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>BDS - Budj Dobrze i Super</title>
	<meta name="description" content="Budowa wszystkiego" />
	<meta name="keywords" content="budowa, itp"; />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>

<div id="container">
	<header>		
		<div class="logo_img">
			<img src="img/logo.png" alt="BDS Logo"/>
		</div>		
		<div id="menu_top">
		<nav>
			<ol>
				<li><a>O firmie</a></li>
				<li><a>Technologia</a></li>
				<li><a>Realizacje</a></li>
				<li><a>Nasz zakład</a></li>
				<li><a>F.A.Q</a></li>
				<li><a>Kontakt</a></li>
			</ol>
		</nav>
		</div>
		
		<div style="clear: both"></div>
	
	
	</header>
 
	<main>
Główna treść strony
	</main>
 
	<footer>
Stopka - dane kontaktowe itd.
	</footer>

</div>




</body>

</html>


body
{
	/* Background pattern from Subtle Patterns */
	margin: 0px;
	background-image: url("img/tlo.png");
	font-size: 20px;
}

#container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#header
{
	text-align: bottom;
}

.logo_img
{
	max-width: 150px;
	float:left;
}

.logo_img > img
{
	max-width: 100%;
}

#menu_top
{
	
}


ol
{
	list-style-type: none;	
		
}

ol > li
{
	float: left;
	width: auto;
	margin-left: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
0

Wrzuć to na fiddla czy coś to szybciej uzyskasz pomoc tutaj. Swoją drogą skąd się uczysz? Bo widzę przestarzała wiedza

0

Dzięki za odpowiedź!
Przerobiłem kursy na youtube Mirosława Zelenta, googl-uje i "próbuje" szukać. Kursy są na yt parę lat. Może podpowiesz mi gdzię szukać nowych rozwiązań tak aby uczyć się w sumie obecnych standardów?

Pozdrawiam,
Marcin

0

@axelbest: @goku54
Chodzi mi o korzystanie z float Prawdę mówiąc to nie wiem skąd się uczyć może ktoś inny obeznany doradzi w tym temacie. W każdym razie poczytaj o flex i grid. Za ich pomocą stworzysz wszystko

1

Floaty nie są przestarzałe, tylko są używane często niezgodnie z przeznaczeniem, z tego powodu, że CSS przez wiele lat się strasznie powoli rozwijał i niewiele co miał i ludzie musieli robić haki.

Chodzi o wyrównanie w pionie listy z której tworzę menu strony do dołu.

używając flex można łatwo coś wyśrodkować:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ol > li
{
    float: left;

To zły pomysł. Tworzysz ogólny selektor, który łapie wszystkie elementy danego rodzaju (tutaj: elementy <li> zawarte w <ol>) w sytuacji kiedy tak naprawdę chcesz się dobrać do tej jednej konkretnej listy. Pół biedy letter-spacing: 2px; bo to jeszcze może mieć sens, jeśli chcesz, żeby twoje listy miały spójny wygląd.

Ale jak ustawiasz float:left, to jak będziesz chciał zrobić drugą listę ol, to od razu na wstępie każdy element li w takiej liście będzie miał float: left. To może ci potem przeszkadzać w wypozycjonowaniu.

Więc lepszym pomysłem byłoby nadanie elementom li odpowiedniej klasy np.

<li class="my-cool-menu-item">

i potem zrobić

.my-cool-menu-item {
}

ew. dać klasę na ol:

<ol class="my-cool-menu">
<li></li>
<li></li>
</ol>

i pozycjonować tak:

.my-cool-menu > li
0

Kolega wyżej dobrze napisał. Możesz jeszcze na li dać display: block;

0

Wielkie dzięki za pomoc i wszystkie porady, na flex-ie już udało mi się uzyskać taki efekt, ale jeszcze dokładnie o nim poczytam i pozwolę sobie wrzucić to co "wystukam".

Jeszcze raz wielkie dzięki! ;)

1 użytkowników online, w tym zalogowanych: 0, gości: 1