Jak podnieść wyżej menu?

pytanie zadane 19 stycznia 2018 w HTML i CSS przez Hipolit Roszkowski Obywatel (1,480 p.)
zmienione kategorie 19 stycznia 2018 przez Hipolit Roszkowski

 <div id="nav">
         <div class="navix">Home</div>
		 <div class="navix">Mecze</div>
		 <div class="navix">Drużyna</div>
		 <div id="logos"><img src="logo.png" height="70px" /></div>
		 <div class="navix"> Sklep</div>
		 <div class="navix">Partnerzy</div>
		 <div class="navix">Kontakt</div>
		 <div style="clear:both"></div>
   </div>

#nav
{
background-color:#000000;
color:#ffffff;
border-bottom: 4px solid #e4892e;
font-family: 'Oswald', sans-serif;
text-align:center;
font-size:20px;
	

.navix
{
display:inline-block;
padding-bot:10px;
padding-left:20px;
height:40px;
width:150;
margin-top:auto;
margin-bottom:auto;
}
 
 #logos
 {
display:inline-block;
 padding-left:20px; 
 }

Jak mogę podnieść zakładki tego menu (home itd) trochę do góry nie rozciągając czarnego paska?

komentarz 19 stycznia 2018 przez thryndl Nałogowiec (30,470 p.)

w sumie możesz dać górny margines ujemny, to też powinno załatwić sprawę.

komentarz 19 stycznia 2018 przez jaca121212 Nałogowiec (40,760 p.)

@Hipolit Roszkowski, Proszę zmienić kategorię pytania.

4 odpowiedzi

odpowiedź 19 stycznia 2018 przez thryndl Nałogowiec (30,470 p.)

na #nav daj position: relative;

a na .navix position: absolute;

po czym dodaj

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

komentarz 19 stycznia 2018 przez Hipolit Roszkowski Obywatel (1,480 p.)

Gdzie dodać ten top i left a gdzie transform: translate(-50%,-50%);?

komentarz 19 stycznia 2018 przez thryndl Nałogowiec (30,470 p.)

Do elementu, który chcesz wyśrodkować, w tym wypadku do .navix

komentarz 19 stycznia 2018 przez Hipolit Roszkowski Obywatel (1,480 p.)

Nie działa :(

odpowiedź 19 stycznia 2018 przez Filip31411 Dyskutant (8,820 p.)

odpowiedź 19 stycznia 2018 przez Zelek Użytkownik (960 p.)

No, a ja bym to zrobił tak:

#nav
{
background-color:#000000;
color:#ffffff;
border-bottom: 4px solid #e4892e;
font-family: 'Oswald', sans-serif;
text-align:center;
font-size:20px;
height:40px;
line-height:40px;
position:relative;
}

następnie logo:

 #logos
 {
display:block;
position:absolute;
left:0;
right:0;
margin:0 auto;
top:50%;
-webkit-transform:translateY(-50%) !important;
-moz-transform:translateY(-50%) !important;
-ms-transform:translateY(-50%) !important;
transform:translateY(-50%) !important;
}

komentarz 19 stycznia 2018 przez Hipolit Roszkowski Obywatel (1,480 p.)

Nie działa :(

odpowiedź 19 stycznia 2018 przez thryndl Nałogowiec (30,470 p.)

Nie wiem czemu robisz to na divach, zamiast w liście, ale ok. Właściwie najprościej będzie to wypozycjonować we flexie.

Podmień sobie css:



#nav {
    background-color: #000000;
    color: #ffffff;
    border-bottom: 4px solid #e4892e;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    font-size: 20px;
    display: flex;
    justify-content: center;

}

.navix {
    display: inline-block;
    padding-bot: 10px;
    padding-left: 20px;
    height: 40px;
    width: 150;
    margin-top: auto;
    margin-bottom: auto;
}

#logos {
    display: inline-block;
    padding-left: 20px;
}