• 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

+1 głos
72 wizyt
pytanie zadane 15 listopada 2016 w HTML i CSS przez użytkownika Dynamic Bywalec (2,290 punkty)

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 użytkownika Michał Kazula Mądrala (5,720 punkty)
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 użytkownika xandros Pasjonat (15,660 punkty)

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

Wat? 

3 odpowiedzi

0 głosów
odpowiedź 15 listopada 2016 przez użytkownika pablop76 Dyskutant (9,580 punkty)
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 użytkownika kaeres Nowicjusz (140 punkty)
edycja 15 listopada 2016 przez użytkownika 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 użytkownika Noemi Bywalec (2,840 punkty)

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 użytkownika Dynamic Bywalec (2,290 punkty)
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 użytkownika Dynamic Bywalec (2,290 punkty)
narazie chciałbym wyśrodkować nawigacje w pionie na poziomie tego niebieskiego koloru
komentarz 16 listopada 2016 przez użytkownika Noemi Bywalec (2,840 punkty)

<!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
4 odpowiedzi 94 wizyt
pytanie zadane 8 października 2016 w HTML i CSS przez użytkownika redstar1 Bywalec (2,050 punkty)
0 głosów
3 odpowiedzi 62 wizyt
pytanie zadane 27 października 2016 w HTML i CSS przez użytkownika Marchiew Początkujący (480 punkty)
0 głosów
2 odpowiedzi 47 wizyt
pytanie zadane 3 sierpnia 2016 w HTML i CSS przez użytkownika alus152 Bywalec (2,490 punkty)
...