Wyśrodkowanie diva

pytanie zadane 22 sierpnia 2018 w Sieci komputerowe, internet przez Marcin Ficek Obywatel (1,090 p.)

Cześć

Tworzę stronę internetową i na razie świetnie mi idzie. Oto rezultaty:

Jak widać, w nawigacji coś nie "pyknęło". Próbowałem użyć align: center oraz margin-left: auto oraz margin-right: auto, ale nic z tych sposobów nie zadziałał. Oto kod:

<!DOCTYPE HTML>

<html lang="pl">

<head>
	
	<meta charset="UTF-8" >
	<title="Magia Oprogramowania">
	<meta name="keywords"  content="programowanie, 3d, 2d, Blender, c++, c#, c, plus, python, Java, JavaScript, php, css, html, html5, web, master, webmaster, language, język, jezyyk, programowanie, grafika">
	<meta name="description" content="Interesujesz się tworzeniem stron Internetowych, programowaniem, grafiką komputerową? To strona dla ciebie, którą musisz odwiedzić! Najważniejsze technologie webowe, języki programowania oraz przydatne programy. To wszystko można znaleźć w jednym miejscu!" >
	<meta name="author" content="Marcin Ficek">
	<meta http-equiv="X-Ua-Compatible" content="IE=edge, chrome" >
		<link rel="stylesheet" href="style.css" >
		<link href="https://fonts.googleapis.com/css?family=Lato:400,900&amp;subset=latin-ext" rel="stylesheet">

</head>


<body>

<header>
	
	<div id="logo">
		<a href="index.html"> <h1>Magia Oprogramowania</h1> </a>
	</div>

	<nav>
		<div id="navigation">
		
		<a href=""> <div class="option"> Strona główna </div>	</a>
		<a href=""> <div class="option"> O witrynie</div>	</a>
		<a href=""> <div class="option"> O autorze </div>	</a>
		<a href=""> <div class="option"> Forum dyskusyjne </div> </a>
		<a href=""> <div class="option"> Kontakt </div> </a>

		</div>	
	</nav>
	
</header>

<div id="con">
	<main>
			
			<div class="arti">
			
			<header>
			<h2> Czym jest programowanie? </h2>
			</header>
			<article>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae facilisis sapien. Nullam aliquet finibus urna, quis blandit sapien luctus id. Cras in bibendum eros. Nulla arcu nibh, accumsan non erat vitae, accumsan efficitur felis. Phasellus efficitur mi at mollis sagittis. Fusce tempor nisl eu dignissim luctus. Aliquam in faucibus ex, sit amet dignissim nisl. Praesent nec urna a quam interdum efficitur. Maecenas commodo libero vitae risus iaculis consectetur.
			
			Vivamus vel orci hendrerit, consectetur augue sit amet, lobortis velit. Nunc porta eros libero, ac hendrerit odio luctus et. Nulla odio lectus, dapibus eget risus quis, eleifend tempor quam. Vestibulum ut ante in elit vestibulum rutrum eget sed ipsum. Donec vel placerat elit. Aliquam vel gravida eros. Vestibulum pretium luctus velit eu fermentum. Fusce ut enim eu nisl volutpat iaculis. Nullam hendrerit enim non libero pretium commodo. Pellentesque quam metus, lobortis eget malesuada nec, facilisis a neque.
			
			Ut at ultrices orci. Quisque varius dui ligula, nec sollicitudin erat aliquet sed. Duis dictum nunc non erat viverra blandit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse id lectus dignissim, molestie erat vel, porttitor dui. Donec vitae vestibulum augue. Curabitur purus enim, dignissim eget consequat eget, feugiat quis urna. Nunc condimentum interdum tellus, ac pretium nisi maximus a.
			
			Morbi ullamcorper, nisi vitae bibendum sollicitudin, tortor diam sodales ligula, pulvinar faucibus lorem ex quis sapien. Praesent a euismod tortor. Pellentesque a porttitor quam, ac cursus justo. Vestibulum nibh libero, commodo in orci in, condimentum porttitor dui. Nullam id mauris consectetur, varius neque nec, tempus massa. Fusce nec posuere lorem. Nulla pulvinar neque consectetur lobortis semper. Sed et porta quam. Aenean hendrerit massa a mattis hendrerit. Pellentesque ligula massa, lacinia vel est vel, elementum suscipit purus. Etiam feugiat, lacus a efficitur rhoncus, nibh turpis convallis diam, ac ultrices arcu velit sit amet nisl. Donec interdum cursus purus a rutrum.
			
			Aliquam erat volutpat. Cras sit amet purus faucibus, consequat felis mattis, condimentum lacus. Integer nisl nunc, porttitor quis augue posuere, pharetra pulvinar est. Morbi egestas id turpis ut suscipit. Fusce gravida, nulla quis congue aliquet, nunc dolor facilisis eros, sit amet iaculis justo ipsum at elit. Phasellus at sem eu lacus tincidunt accumsan. Nullam eu congue erat, nec imperdiet mauris. Ut lacinia bibendum dolor, eget tincidunt ex cursus at. In commodo molestie leo, et faucibus dui sollicitudin at. Pellentesque hendrerit commodo neque, eu cursus neque auctor sit amet.
			
			
			</article>
			
			</div>
			
			<div class="arti">
			
			<header>
			<h2> A czym jest grafika? </h2>
			</header>
			<article>
			
			Riquam erat volutpat. Cras situis blandit sapien luctus id. Cras in bibendum eros. Nulla arcu nibh, accumsan non erat vitae, accumsan efficitur felis. Phasellus efficitur mi at mollis sagittis. Fusce tempor nisl eu dignissim luctus. Aliquam in faucibus ex, sit amet dignissim nisl. Praesent nec urna a quam interdum efficitur. Maecenas commodo libero vitae risus iaculis consectetur.
			
			Ut at ultrices orci. Quisque varius dui ligula, nec sollicitudin erat aliquet sed. Duis dictum nunc non erat viverra blandit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse id lectus dignissim, molestie erat vel, porttitor dui. Donec vitae vestibulum augue. Curabitur purus enim, dignissim eget consequat eget, feugiat quis urna. Nunc condimentum interdum tellus, ac pretium nisi maximus a.
			
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae facilisis sapien. Nullam aliquet finibus urna, qor. Pellentesque a porttitor quam, ac cursus justo. Vestibulum nibh libero, commodo in orci in, condimentum porttitor dui massa. Fusce nec posuere lorem. Nulla pulvinar neque consectetur lobortis semper. Sed et porta quam. Aenean hendrerit massa a mattis hendrerit. Pellentesque ligula massa, lacinia vel est vel, elementum suscipit purus. Etiam feugiat, lacus a efficitur rhoncus, nibh turpis convallis diam, ac ultrices arcu velit sit amet nisl. Donec interdum cursus purus a rutrum.
			
			Aliquam erat volutpat. Cras sit amet purus faucibus, consequat felis mattis, condimentum lacus. Integer nisl nunc, porttitor quis augue posuere, pharetra pulvinar est. Morbi egestas id turpis ut suscipit. Fusce gravida, nulla quis congue aliquet, nunc dolor facilisis eros, sit amet iaculis justo ipsum at elit. Phasellus at sem eu lacus tincidunt accumsan. Nullam eu congue erat, nec imperdiet mauris. Ut lacinia bibendum dolor, eget tincidunt ex cursus at. In commodo molestie leo, et faucibus dui sollicitudin at. Pellentesque hendrerit commodo neque, eu cursus neque auctor sit amet.
			
			
			</article>
			
			</div>
			
	</main>
	
</div>
	
<footer>
	<div id="social"> 
		cocial
	</div>
	
	<div id="footerwlinks"> 
	test
	</div>
	
	<div id="footer"> 
	ostateczna stopka
	</div>
	
</footer>	

</body>
</html>


body
{
	margin: 0;
	background-image: 	url(binding_dark.png);
	/* Background pattern from Toptal Subtle Patterns */
	font-family: 'Lato', sans-serif;
}



article
{
	font-size: 18px;
	padding: 20px 60px;
	line-height: 30px;
}

.option
{
	display: inline-block;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	border-right: dotted #333333;
	font-size: 23px;
	padding: 10px 10px;

}

.option:hover
{
	background-color: #0077cc;	
}

.arti
{
	padding: 20px;
	margin-top: 50px;
	margin bottom: 50px;
	width: 1000px;
	min-height: 1000;
	margin-left: auto;
	margin-right: auto;
	background-color: #333333;
	color: #dddddd;
	text-align: justify;
	
}

#navigation
{
	
	background-color: #0088dd;		
	height: 90px;
	width: 100%;
	padding: 20;
	color: #eeeeee;
}

#logo
{
	background-color: #333333;
	padding: 20px;
}

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

#footerwlinks
{
	background-color: #0088dd;	
	margin-top: 20px;
	width: 100%;
	height: 80px;
	padding: 10px;
}

#footer
{
	width: 100%;
	height: 40px;
	margin-bottom: 0;
	padding: 10px;
	background-color: #333333;
}
	
h1
{
	font-size: 48;
	font-weight: 800px;
	color: #dddddd;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 10px;
}

h2
{
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 2px;
	text-align: center;
}

a
{
	text-decoration: none;
	color: #dddddd;
}

a:hover
{
	cursor: pointer;
}

Szukałem w internecie, lecz znalazłem tylko PODOBNE problemy, nie takie same. Dziękuję z góry za pomoc. Może być zamiast zwykłej odpowiedzi, tylko zwykły link.

komentarz 22 sierpnia 2018 przez shotokan Nałogowiec (39,660 p.)

Dlaczego w <a> dajesz jeszcze diva? Nie prościej zrobić z <a> element blokowy i nadać mu width i height lub line-height?
Po co w <nav> dajesz diva, którego stylizujesz? Przecież znacznik <nav> też można stylizować.
No i napisz konkretnie co nie "pyknęło" w tej nawigacji...
Przy okazji w necie można znaleźć sporo poradników jak się tworzy zarówno pionowe, jak i poziome menu :)

komentarz 22 sierpnia 2018 przez Marcin Ficek Obywatel (1,090 p.)

Dlaczego w <a> dajesz jeszcze diva? Nie prościej zrobić z <a> element blokowy i nadać mu width i height lub line-height?

Trudniej mi zrobić właśnie z <a> element blokowy, jeszcze nie mam doświadczenia w tworzeniu stron.

Po co w <nav> dajesz diva, którego stylizujesz? Przecież znacznik <nav> też można stylizować.

W sumie masz rację. Jak mówiłem, to jedna z moich pierwszych stron, robionych zupełnie od zera.

No i napisz konkretnie co nie "pyknęło" w tej nawigacji...

Pokazałem i napisałem co chciałem uzyskać. Wyśrodkowanie.

Przy okazji w necie można znaleźć sporo poradników jak się tworzy zarówno pionowe, jak i poziome menu :)

Wiem. Robiłem na podstawie divów.

komentarz 22 sierpnia 2018 przez shotokan Nałogowiec (39,660 p.)

Znacznik <a> jest elementem liniowym, znajduje się w divie o id = "navigation" więc wystarczy, że temu divowi dasz text-align:center.
Jednak proponuję menu tworzyć przy użyciu list <ul> i <li> a w nich dać <a>. No i potem jest całe pole do popisu, może być inline-block, float:left a nawet flexbox.

komentarz 22 sierpnia 2018 przez Marcin Ficek Obywatel (1,090 p.)

Jednak proponuję menu tworzyć przy użyciu list <ul> i <li> a w nich dać <a>. No i potem jest całe pole do popisu, może być inline-block, float:left a nawet flexbox.

Nawet wcześniej zrobiłem menu na podstawie list, ale wolałem mieć po najechaniu zmianę koloru tła wokół linka.

Znacznik <a> jest elementem liniowym, znajduje się w divie o id = "navigation" więc wystarczy, że temu divowi dasz text-align:center.

Użyłem wcześniej text-align: center, które nie działało.

komentarz 22 sierpnia 2018 przez shotokan Nałogowiec (39,660 p.)

Po uruchomieniu Twojego kodu u mnie text-align: center działa bez problemu.
Zachęcam mimo wszystko poczytać i pouczyć się tworzyć menu samemu, a nie korzystać z gotowych szablonów. Poczytaj sobie też o elementach liniowych oraz blokowych :)

komentarz 22 sierpnia 2018 przez Marcin Ficek Obywatel (1,090 p.)

Nie robiłem na podstawie żadnego szablonu, sam to wszystko wykombinowałem :p Sam już nie wiem jaki błąd zrobiłem, ale zauważyłem na poradniku pana Mirosława Zelenta, że posiadał menu rozwijane na podstawie listy, lecz z tym efektem, który posiadałem. Dzięki za porady :)

3 odpowiedzi

odpowiedź 22 sierpnia 2018 przez Greeenone Pasjonat (16,100 p.)
wybrane 23 sierpnia 2018 przez Marcin Ficek

Najlepsza

Nawigacje tworzy się na podstawie listy. Jest to jedyne poprawne rozwiązane, jeśli zrobisz inaczej, twoja strona będzie słabiej pozycjonowana.

A co do problemu, to jednym rozwiązaniem jest użycie pozycji relatywnej i przesunięcie obiektu o 50% -(50% jego szerokości.

<nav>
  <ul class="navigation">
    <li>Strona głównna</li>
    <li>O witrynie</li>
    <li>O autorze</li>
  </ul>
</nav>

.navigation{
  list-style-type: none;
  padding-left: 0;
  position: relative;
  left: 50%;
  display: inline-block;
  transform: translate(-50%);
}
.navigation li{
  display: inline-block;
  margin-right: 40px;
}
.navigation li:last-child{
  margin-right: 0px;
}

list-style-type : znak przed każdą listą (kropka, kwadracik itd)

Padding-left: 0; - Usunięcie domyślnego przesunięcia listy

Position: relative: Przesunięcie elementu relatywne. Relatywna pozycja jest brana pod uwagę przez inne elementy strony.

Left: 50%; Przesunięcie obiektu o 50% w lewo

Transform: translate(-50%); - Cofnięcie elementu o 50% jego szerokości. (Trzeba cofnąć ponieważ początek elementu będzie na środku)

li odnosi się do każdego elementu który jest w liście. Np. jak chcesz aby po najechaniu podświetlało linka, to dajesz hover

.navigation li:hover{

kod

}

last-child odnosi się do ostatniego elementu listy. Ustawiłem odstęp o szerokości 50px po prawej stronie każdego elementu (W tym ostatni tez go posiada lecz nie potrzebuje i dlatego użyłem last-child w którym usunąłem odstęp.

komentarz 22 sierpnia 2018 przez surfeliza Stary wyjadacz (11,260 p.)

Nawigacje nie tworzy się tylko na podstawie listy, nie jest to jedyny słuszne rozwiązanie i robiąc inaczej niekoniecznie twoja strona będzie słabiej pozycjonowana.

komentarz 22 sierpnia 2018 przez pablop76 VIP (123,540 p.)

@Greeenone, Przesuwanie elementów pozycjonowanych relatywnie to nie jest dobry pomysł ze względu na to, że zostaje po nich pusta przestrzeń, która przy responsywności stwarza niespodziewane problemy.

środkowanie

komentarz 22 sierpnia 2018 przez Greeenone Pasjonat (16,100 p.)

Tak, wiem o tym. Podałem tylko jedno z możliwych rozwiązań

komentarz 23 sierpnia 2018 przez Marcin Ficek Obywatel (1,090 p.)

To rozwiązanie podane powyżej u mnie najlepiej działa, ale jeśli będę potem problemy, to może spróbuję jeszcze raz stronę poukładać od nowa. Jest to właśnie witryna dla mnie, do nauki oraz testowania nowych sposobów. Po prostu spróbuję napisać wszystko od nowa, bo na szczęście to malutka strona. Dziękuję wszystkim za porady i pomoc :)