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

css - dziwna przestrzeń w opcjach menu

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
472 wizyt
pytanie zadane 8 października 2016 w HTML i CSS przez Pieczenieg Początkujący (290 p.)
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
komentarz 8 października 2016 przez Pieczenieg Początkujący (290 p.)
Dziękuję wszystkim za pomoc i przepraszam za ignorancję, następnym razem z pewnością użyję listy ;)

3 odpowiedzi

+2 głosów
odpowiedź 8 października 2016 przez niezalogowany
<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

+2 głosów
odpowiedź 8 października 2016 przez winiardesign Gaduła (3,930 p.)

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;
}

 

+1 głos
odpowiedź 8 października 2016 przez Kamil Naja Nałogowiec (27,550 p.)
Menu jest spartolone, nigdy nie robi się go z elementów span, zawsze z listy. Problem pojawia się pewnie z powodu paddingu.
komentarz 8 października 2016 przez Pieczenieg Początkujący (290 p.)
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 :(
1
komentarz 8 października 2016 przez Kamil Naja Nałogowiec (27,550 p.)

Podobne pytania

0 głosów
1 odpowiedź 235 wizyt
pytanie zadane 28 grudnia 2016 w HTML i CSS przez kubekzone Użytkownik (620 p.)
0 głosów
1 odpowiedź 696 wizyt
pytanie zadane 2 stycznia 2019 w HTML i CSS przez Strugaczka Początkujący (260 p.)
0 głosów
0 odpowiedzi 251 wizyt
pytanie zadane 23 października 2017 w HTML i CSS przez lastavenger Obywatel (1,060 p.)

93,187 zapytań

142,203 odpowiedzi

322,022 komentarzy

62,513 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2581p. - dia-Chann
  2. 2528p. - Łukasz Eckert
  3. 2421p. - Łukasz Piwowar
  4. 2399p. - CC PL
  5. 2252p. - Tomasz Bielak
  6. 2219p. - Łukasz Siedlecki
  7. 2215p. - rucin93
  8. 2201p. - Michal Drewniak
  9. 2156p. - Marcin Putra
  10. 2152p. - Adrian Wieprzkowicz
  11. 2105p. - Mikbac
  12. 1941p. - Anonim 3619784
  13. 1733p. - rafalszastok
  14. 1480p. - Michał Telesz
  15. 1469p. - ssynowiec
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...