css - dziwna przestrzeń w opcjach menu

Question

No cześć :) Po krótce, sprawa wygląda tak, że piszę projekt księgarni internetowej do szkoły i wszystko idzie całkiem całkiem, poza tym jednym małym mankamentem. Zrobiłem sobie fajne menu, dopisałem hovery do każdej z opcji, ale kiedy najadę na daną opcję, to zawsze (z wyjątkiem pierwszej opcji) pozostaje mały prostokątny obszar, który się nie podświetla, jest traktowany jakby nie był częścią tej opcji. Nie wiem czy dobrze to opisałem, nie wiem też jak to inaczej opisać, więc wrzucam kod:

http://codepen.io/anon/pen/KgQOGB

Kombinowałem, ale za cholerę nie mogłem do tego dojść ;/ Próbowałem zrobić to menu w inny sposób, za pomocą display block i float left, dodać kolejnego diva w którym te opcje będą siedzieć i zrobić dla niego auto marginesy, tylko problem polega na tym, że ten div musiałby mieć ustaloną szerokość, a dla zalogowanego użytkownika dochodzą nowe opcje w menu. Z góry dziękuję za pomoc, a jak namodziłem to przepraszam ;p

Comments

Dziękuję wszystkim za pomoc i przepraszam za ignorancję, następnym razem z pewnością użyję listy ;)

Answer 1

<span class = "option">
	<a href = "books.php">Książki papierowe</a>
</span>

<span class = "option">
	<a href = "ebooks.php">E-booki</a>
</span>

span to element liniowy. ^ Jeżeli pomiędzy tymi elementami wystąpią białe znaki ( w tym przypadku masz 2x \n ), zostanie to odzwierciedlone na stronie jako spacja, stąd to 'dziwne' puste pole.

Można rozwiązać to tak:

><span class = "option">
	<a href = "books.php">Książki papierowe</a>
</span
  
><span class = "option">
	<a href = "ebooks.php">E-booki</a>
</span>

lub dodać do CSSa odpowiedni ujemny margin

Answer 2

Tak jak kolega wyżej napisał, nie robi się menu z znaczników span tylko najlepiej z listy. Ale skoro sie uparłeś to ok. Element a jest wyświetlany jako liniowy, co za tym idzie jak ustawisz tło to będzie ono opływało tylko napis, który tam umieściłeś. Po drugie elementy listy span umieść w dodatkowym divie, dzięki czemu będziesz mógł nadać mu wyświetlanie inline-block, i wyśrodkować go względem strony. Po trzecie źle podomykałeś divy. Masz kod który ci lekko zmodyfikowałem.

<div id = "menu">
			<div class="menu1">
				<span class = "option" id = "prawy">
	<a href = "index.php">Strona główna</a>
</span>

<span class = "option">
	<a href = "books.php">Książki papierowe</a>
</span>

<span class = "option">
	<a href = "ebooks.php">E-booki</a>
</span>

<span class = "option">
	<a href = "audiobooks.php">Audiobooki</a>
</span>

<span class = "option">
	Kontakt
</span>
</div>
  <div class = "clear"></div>

</div>
		</div>
	

Kod CSS

.option
{

  vertical-align: center;
	float:left;
	border-right:white dotted 1px;
	padding:5px;
	padding-top:10px;
	text-align:center;
	height:44px;
}

.option a {
  display:block;
  width:100%;
}

.option a:hover {
 display: block;
}
.option:hover
{
	background-color:red;
	color:black;
	opacity:0.5;
	cursor:pointer;
}

#menu
{
	background-color:black;
	color:white;
	font-size:20px;
	letter-spacing:2px;
	height:44px;
	text-align:center;
	display: block;
}

#prawy
{
	border-left:white dotted 1px;
	
}
a
{
  color:inherit;
  text-decoration:none;
}
.menu1 {
  display:inline-block;
  text-align:center;
}

 

Answer 3

Menu jest spartolone, nigdy nie robi się go z elementów span, zawsze z listy. Problem pojawia się pewnie z powodu paddingu.

Comments

Dlaczego? Dla mnie wygodniej było użyć spanów, jeśli jest jakiś znaczący powód, dla którego powinno się wybierać listę, proszę podziel się nim :) "Pewnie z powodu paddingu" - czyżbyś próbował rozwiązać problem, nawet mu się nie przyglądając? Poszedłem tym tropem i usunąłem cały padding z klasy option, ale problem nadal pozostaje :(

---

http://codepen.io/KamilNaja/pen/vXRByJ