Luka między borderem.

pytanie zadane 3 grudnia 2017 w HTML i CSS przez Patryk01 Obywatel (1,270 p.)

Witam, od niedawna uczę się podstaw HTML i CSS. Po obejrzeniu kursów stwierdziłem, że pora spróbować zrobić coś własnego. Wpadłem na pomysł, aby umieścić nawigację obok logo. Wszystko poszło w miarę dobrze (choć wiem, że można byłoby zrobić to lepiej), ale gdy w menu wstawiłem bordery między <li> to po dodaniu efektu hover (background-color) w niektórych miejscach po najechaniu na przycisk zostaje luka między borderem a samym "podświetlonym" przyciskiem. Myślę, że zrozumiecie o co mi chodzi, i bardzo prosiłbym o waszą pomoc. Oczywiście dodałem kod i proszę też o wyrozumiałość, gdyż jak wspominałem wcześniej, nie rozumiem jeszcze tego w pełni.

body
{
	margin:0;
	background-color: #191d21;
	color: #efefef;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
	
}

h1.logo
{
	font-size:50px;
	color:#00CC99;
	text-transform:uppercase;
	margin-left:35px;
	letter-spacing:5px;
	font-weight:500;
	width:450px;
	float:left;
}
nav
{
	text-align:center;
}
.menu
{
	list-style-type:none;
	font-size:20px;
	padding:10px;
	min-height:38px;
	line-height:200%;
}
.menu > li
{
	display:inline-block;
	border-right: 1px dashed #808080;
	padding-left:60px;
	padding-right:60px;
	margin-top:40px;
}
.menu > li:first-child
{
	border-left:1px dashed #808080;
}
.menu > li:hover
{
	background-color:#8c8e90;
	
}
.menu a
{
	text-decoration:none;
	color:white;
}
.menu > li:hover > a
{
color:#191d21;
}

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="description" content="Strona poświęcona mi!">
<meta name="keywords" content="Patryk R">
<meta name="author" content="Patryk R">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

<title> Patryk R </title>

<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">



</head>
<body>

	<header>
		<h1 class="logo">Patryk R</h1>
		
			<nav>
				
				<ul class="menu">
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Curriculum vitae</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
				
			</nav>
		
		</header>	
</body>


</html>

2 odpowiedzi

odpowiedź 3 grudnia 2017 przez gunaterek Bywalec (2,760 p.)

<ul class="menu">
                  <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Curriculum vitae</a></li><li><a href="#">Contact</a></li>
                </ul>

jesli masz w nawigacji odstepy miedzy kolejnymi elementami to ci czyta bialy znak

komentarz 3 grudnia 2017 przez Patryk01 Obywatel (1,270 p.)

Jezu dzięki wielkie! :)))))

komentarz 3 grudnia 2017 przez Patryk01 Obywatel (1,270 p.)

A jeszcze jedno, nie chcę nowego pytania tworzyć, jak zrobić, żeby wyświetlało link po najechaniu na ten cały przycisk a nie tylko na dane słowo?

komentarz 3 grudnia 2017 przez gunaterek Bywalec (2,760 p.)

musisz zrobic na samym znaczniku <a> bez <li> tu masz poradnik w ktorym jest tak zrobione 35:30

komentarz 3 grudnia 2017 przez Patryk01 Obywatel (1,270 p.)

Kurcze, nie rozumiem tego w pełni, mógłbyś mi to przybliżyć nieco dokładniej? Najlepiej na przykładzie mojego kodu. Z góry dziękuję.

komentarz 3 grudnia 2017 przez pablop76 VIP (123,120 p.)

Musisz poprostu nadać rozmiar odnośnikowi a nie itemowi li oraz usunąć te paddingi. I zamiast pozbywać się znków białych dla li lepiej dać im ujemny margines(margin: 0 -3px). Lepiej to wygląda w kodzie.

komentarz 3 grudnia 2017 przez pablop76 VIP (123,120 p.)

<nav class="nav">
<header>
<a href="#" class="logo">Patryk R</a>
</header> 
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Curriculum vitae</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

/* reset na nasze potrzeby*/
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
  box-sizing: border-box;
}
body {
  background-color: #191d21;
  color: #efefef;
/*   odsunięcie nawigacji od góry */
  padding-top: 3%; 
}

.nav {
  width: 100%;
  height: 60px;
}

.logo {
font-size:50px;
color:#00CC99;
text-transform:uppercase;
letter-spacing: 5px;
font-weight: 500;
width: 25%;
text-align: center;
float:left;
}

.menu {
  /* wycentrowanie li */
  text-align: center;
}

.menu > li {
  display: inline-block;
  border-right: 1px dashed #808080;
 /* skasowanie białych znaków inline-block */
  margin: 0 -2px;
}

.menu > li:first-child {
  display: inline-block;
  border-left: 1px dashed #808080;
}
.menu > li > a {
  display: block;
  width: 200px;
  height: 60px;
  font-size: 20px;
  line-height: 3;
  color: #fff;
}

.menu > li > a:hover {
  background-color:#8c8e90;
  color:#191d21;
}

odpowiedź 4 grudnia 2017 przez Zubru22 Bywalec (2,670 p.)

Jest to pewien błąd istniejący w HTML i CSS od dłuższego czasu. Używając

display: inline-block

sprawiasz, że elementy listy (które domyślnie są blokami) są traktowane jako elementy wewnątrz liniowe. Błąd polega na tym, że sam kod wewnątrz listy jest interpretowany jako jeden tekst, włącznie ze znacznikami HTML (które nie są wyświetlane ale są renderowane). Jeżeli pomiędzy elementami, które mają atrybut "display: inline-block" będzie biały znak taki jak spacja, tabulator czy znak nowej linii to na stronie zostanie wy-renderowany niewielki odstęp pomiędzy blokami POMIMO, że odstęp ten jest poza znacznikami <li></li>.

Rozwiązania są trzy:

Usunąć wszystkie odstępy z pomiędzy znaczników <li></li>, sprawiając, że wszystkie elementy są wyświetlone w jednej linii bez odstępów. Generalnie nie polecam tego rozwiązania gdyż zmniejsza to czytelność kodu.

Wstawić pusty komentarz pomiędzy znacznikami w ten sposób

<ul>
    <li>Jeden element</li><!--
   --><li>Drugi element</li><!--
   --><li>Trzeci element</li>
</ul>

Lub nadać rodzicowi (w Twoim przypadku tagowi <ul>) atrybut "font-size: 0", który wyzeruje odstępy między elementami listy, ale również zniknie tekst z nawigacji. Nadaj dzieciom (w Twoim przypadku <li>) atrybut "font-size" taki jaki chcesz.

Które z rozwiązań wybrać? Pierwsze rozwiązanie zdecydowanie jest najmniej praktyczne. Drugie rozwiązanie jest dobre przy niewielkich listach, które nie są generowanie dynamicznie (są na stałe zapisane w Twoim HTML, a nie generowane np. przez skrypt PHP). Trzecie rozwiązanie przydaje się do długich list, lub takich, które są dynamicznie generowane aby unikać ręcznego wpisywania  pomiędzy elementami listy.

komentarz 4 grudnia 2017 przez jaca121212 Nałogowiec (40,760 p.)

Można to na flex -sie to zrobić

/* reset na nasze potrzeby*/
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
box-sizing: border-box;
}
body {
background-color: #191d21;
color: #efefef;
/* odsunicie nawigacji od gry */
padding-top: 3%; 
}

.nav {
width: 100%;
height: 60px;

}

.logo {
font-size:50px;
color:#00CC99;
text-transform:uppercase;
letter-spacing: 5px;
font-weight: 500;
width: 25%;
text-align: center;
float:left;
}

.menu {
/* wycentrowanie li */
text-align: center;
width:60%;
  display: flex;
}

.menu li {
display: flex;
border-right: 1px dashed #808080;
/* skasowanie biaych znakw inline-block */

flex-direction: row-reverse;
}

.menu > li:first-child {

border-left: 1px dashed #808080;
}
.menu > li > a {
display: flex;
width: 200px;
height: 60px;
font-size: 20px;
line-height: 3;
color: #fff;
 justify-content:center;
}

.menu > li > a:hover {
background-color:#8c8e90;
color:#191d21;
}

pozostała część kodu HTML jest taka sama.

komentarz 4 grudnia 2017 przez Zubru22 Bywalec (2,670 p.)

Też można, wszystko zależy od tego do jakich przeglądarek strona ma być kierowana. Jeżeli autor pytania nie zawraca sobie głowy starszymi wersjami przeglądarek to flex jest jak najbardziej rekomendowany :)