Menu w css i html

Question

Dopiero zaczynam naukę html i css i natrafiłem na problem, którego nie potrafię rozwiązać. A mianowicie chcę aby menu poziome było wyśrodkowane w pionie na divie który ma 130px. Niestety menu jest blisko marginesu dolnego i za nic nie potrafię podnieśc tego menu do góry. Nie wiem już co mam zrobić. ?

*{
	margin:0;
	box-sizing:border-box;
}

#big{
	
	background-image: url("working.png");
	background-size:100%;
	width:100%;
	height:100vh;

}

header{
	 padding-top:30px;
	 padding-bottom:30px;
	 height:130px;
	 background-color:rgba(0,0,0,0.5);
 }
 
 
	header a{
	 color:white;
	 text-decoration:none;
	 text-transform:uppercase;
	 font-size:16px;	 
 }
 
 
  header ul{
	 padding:0;
	 margin:0;
  }
  
  
  header li{
	 display:inline-block;
	 margin:0 20px  20px;	
 }
 
 
 #h2{
	 color:white;
	 padding-left:40px;
	 font-size:25px;
	 padding-top:0;
 }
 
 header nav{
	 float:right;
	 margin-right:100px;
	 padding-right:200px;
 }

<div id="big">

<header>
<div id="menu">
<div id="h2">
<h2>THAPATECHNICAL</h2>
</div>
<nav>
<ul>
  <li class="current"><a href="HOME.html">HOME</a></li>
  <li><a href="SERVICES.html">SERVICES</a></li>
  <li><a href="WORKS.html">WORKS</a></li>
  <li><a href="ABOUT.html">ABOUT</a></li>
  <li><a href="BLOGS.html">BLOGS</a></li>
  <li><a href="CONTACT.html">CONTACT</a></li>
 </ul>
 
 </nav>
</div>
</header>

</div>

 

Comments

google nie boli

Answer 1

Środkowanie

Answer 2

Witaj

https://codepen.io/hello-michal/pen/RmaEOv

#h2 było elementem blokowym(domyślnie display: block), jeżeli coś jest elementem blokowym to inne elementy będą układać się pod nim(tak się działo z menu), gdy zmieniłem display na inline-block to #h2 nadal było blokiem(można mu było nadać wysokość szerokość itp) ale układającym się liniowo czyli inne elementy będą nie pod nim a obok niego 

Materiały na ten temat

https://www.youtube.com/watch?v=dL-_uVvbMU8

https://developer.mozilla.org/pl/docs/Web/CSS/display

Tak na marginesie, fajnie że chcesz się uczyć, ale Twój kod jest mega niepoukładany, ponadto masz tendencje do nadużywania divów - https://youtu.be/8Us9atGDQH4?t=374 posłuchaj tego, stylujesz po id, przez te mankamenty forumowicze nie chętnie Ci pomagali, ceni się, że kodzisz, jednak radziłbym Ci się zatrzymać, poukładać to trochę, znaleźć jakiś kurs, przerobić go całego ze zrozumieniem, dobre zrozumienie i poukładanie informacji na starcie dużo da w przyszłości ;)

Pozdrawiam

Comments

Teraz lepiej ?

<header id="wrapper">

<div class="menu">
  
     <h4>THAPATECHNICAL</h4>
   	

 <ul>
   <li><a href=index.html">Home</a></li>
   <li><a href="about.html">About</a></li>
   <li><a href="services.html">Services</a></li>
</ul>



</div>

</header>

 

---

Zakładam że <h4>THAPATECHNICAL</h4> być głównym nagłówkiem strony

a ul służy jako nawigacja, więc ja zrobił bym to tak

<header class="header">
    <h1>THAPATECHNICAL</h1>
    <nav class="navigation">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
      </ul>
    </nav>
  </header>

Tutaj jest fajny artykuł o semantyczności, polecam przeczytać