• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

wyśrodkowanie poziomego menu w pionie

VPS Starter Arubacloud
+1 głos
1,341 wizyt
pytanie zadane 15 listopada 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)

chciałbym wyśrodkować poziome menu w pionie danego elementu:

CSS:

*
{
    margin:0;
    padding:0;
    font-family: 'Titillium Web', sans-serif;
}
header
{
    width: 100%;
    height: 590px;
    background-color: #87509c;
}

.nav
{
    padding: 60px;
    background-color: aquamarine;
}

.nav ul
{
    list-style-type: none;
    float: right;
}
.nav ul li
{
    float:left;
    margin-left: 10px;
}
.nav ul li:first-child
{
    margin-left: 0px;
}
.nav ul li a
{
    text-decoration: none;
    color: white;
    display: block;
    padding: 5px 10px;
    border-radius: 5px;
}
.nav ul li a:hover
{
 background-color: #643a79;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
</head>
<body>
    <header>
        <div class="nav">
            <ul>
                <li><a href="">HOME</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">WORK</a></li>
                <li><a href="">BLOG</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </div>
    </header>
</body>
</html>

Dodam że po lewej stronie chciałbym dodać Logo które będzie większe niż menu

komentarz 15 listopada 2016 przez Michał Kazula Pasjonat (19,540 p.)
Stosujesz <!DOCTYPE html> czyli HTML5 a znaczników tej wersji brak!

Czemu korzystasz z listy ul? Ciężko jest nią operować.

Załóż sobie jakieś wymiary konkretne dla guzików menu (wysokość i szerokość).

Dlaczego blok div "nav" ma ustawiony padding zamiast height?
komentarz 15 listopada 2016 przez xandros Nałogowiec (29,450 p.)

Czemu korzystasz z listy ul? Ciężko jest nią operować.
 

Wat? 

3 odpowiedzi

0 głosów
odpowiedź 15 listopada 2016 przez pablop76 VIP (123,060 p.)
Witam. Proponuję, żeby  header był pojemnikiem dla obiektów logo i nav. Ustawić je obok siebie i wyśrodkować :)
0 głosów
odpowiedź 15 listopada 2016 przez kaeres Nowicjusz (140 p.)
edycja 15 listopada 2016 przez kaeres

Jeżeli nie musisz wspierać IE9 i starszych to najłatwiej będzie użyć flexbox'a. align-items: center; wyśrodkuje Ci elementy w pionie, poza tym justify-content: space-between spowduje, że 2 elementy wypchną się do prawej i lewej strony kontenera, więc po lewej z łatwością wstawisz logo, a po prawej będziesz miał menu.

Wystarczy, że w .nav dodasz sobie div'a z logo (czy tam img - jak wolisz), obok ul. 

.nav {
display: flex; 
align-items: center; 
justify-content: space-between;
}

Alternatywnie, jeśli wysokość .nav będzie stała to kod poniżej wyśrodkuje Ci elementy w pionie, ale wtedy jeszcze będziesz musiał kombinować z floatami lub czymś innym żeby umiejscowić logo po lewej, a menu po prawej.


.nav {
height: 60px
}

.nav ul {
line-height: 60px
}

Poza tym znajdzie się kilka innych sposobów, w tym wykorzystanie position: absolute; 

 

 

0 głosów
odpowiedź 15 listopada 2016 przez imklau Nałogowiec (42,090 p.)

Zdecydowanie zrób tak, jak pisze pablop76. Jeśli na tym kolorze Aquamarine ma być i logo i nawigacja to zrób na zasadzie dwóch obiektów ułożonych obok siebie.

Co do Twojego pytania "wyśrodkować poziome menu w pionie" to chodzi Ci o wyśrodkowanie pionowe właśnie w obszarze tego koloru aquamarine?

Jedna rzecz mnie w kodzie zastanawia:

.nav ul

float: right

.nav ul li

float:left;

Po co dwa?

 

komentarz 15 listopada 2016 przez Dynamic Bywalec (2,910 p.)
folat right przykleja mi całą liste do prawej strony

a float left uklada każdy element listy obok siebie :D
komentarz 16 listopada 2016 przez Dynamic Bywalec (2,910 p.)
narazie chciałbym wyśrodkować nawigacje w pionie na poziomie tego niebieskiego koloru
komentarz 16 listopada 2016 przez imklau Nałogowiec (42,090 p.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
</head>
<body>
	<div id="container">
		<header>
			<div class="nav">
				<ul>
					<li><a href="">HOME</a></li>
					<li><a href="">ABOUT</a></li>
					<li><a href="">WORK</a></li>
					<li><a href="">BLOG</a></li>
					<li><a href="">CONTACT</a></li>
				</ul>
			</div>
		</header>
	</div>
</body>
</html>
*
{
    margin:0;
    padding:0;
    font-family: 'Titillium Web', sans-serif;
}
#container
{
	background-color: #87509c;
	width: 100%;
    height: 590px;
}
header
{
    
	background-color: aquamarine;
	height: 100px;
}
 
.nav
{
	height: 30px;
	width: 400px;
	float: right;
	padding: 35px 0;
}
 
.nav ul
{
    list-style-type: none;
}
.nav ul li
{	
	float: left;
    margin-left: 10px;
}
.nav ul li:first-child
{
    margin-left: 0px;
}
.nav ul li a
{
    text-decoration: none;
    color: white;
    display: block;
    padding: 5px 10px;
    border-radius: 5px;
}
.nav ul li a:hover
{
 background-color: #643a79;
}

Ja potrafię tylko tak :D
- dałam Ci tam diva "container", w którym jest header i mógłby obejmować zarówno logo, jak i nawigację
- nav dodałam wymiary i dzięki temu możesz sobie ustawiać naigację paddingiem, jak tam Ci pasuje
Ale ja od razu bym tam wrzuciła logo, albo chociaż miejsce na nie, żeby od razu sobie to ustawić ;)

Podobne pytania

0 głosów
2 odpowiedzi 1,660 wizyt
0 głosów
4 odpowiedzi 12,042 wizyt
pytanie zadane 8 października 2016 w HTML i CSS przez redstar1 Bywalec (2,200 p.)
0 głosów
1 odpowiedź 537 wizyt
pytanie zadane 30 marca 2019 w HTML i CSS przez JakuBB Nowicjusz (220 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...