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

Luka między borderem.

0 głosów
240 wizyt
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

0 głosów
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 (119,100 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 (119,100 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;
}

 

0 głosów
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:

  1. 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.
  2. Wstawić pusty komentarz pomiędzy znacznikami w ten sposób
    <ul>
        <li>Jeden element</li><!--
       --><li>Drugi element</li><!--
       --><li>Trzeci element</li>
    </ul>
  3. 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.

1
komentarz 4 grudnia 2017 przez jaca121212 Nałogowiec (40,780 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 :)
1
komentarz 4 grudnia 2017 przez jaca121212 Nałogowiec (40,780 p.)

Pierwszy link z góry  flex IE więc rozwiązanie jest OK

Podobne pytania

+1 głos
1 odpowiedź 90 wizyt
pytanie zadane 6 kwietnia 2021 w HTML i CSS przez Bakkit Mądrala (7,020 p.)
0 głosów
2 odpowiedzi 88 wizyt
pytanie zadane 15 lutego 2017 w HTML i CSS przez Allen Obywatel (1,010 p.)
0 głosów
3 odpowiedzi 93 wizyt
pytanie zadane 15 grudnia 2020 w HTML i CSS przez kacper1445 Gaduła (4,390 p.)

86,460 zapytań

135,216 odpowiedzi

300,377 komentarzy

57,209 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...