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

Niechciany margines dolny w menu poziomym

Aruba Cloud - Virtual Private Server VPS
0 głosów
167 wizyt
pytanie zadane 2 grudnia 2020 w HTML i CSS przez Mavert Nowicjusz (120 p.)

Hej, chciałem troszkę inaczej zrobić menu główne przedstawiane w 3. odcinku kursu CSS, a mianowicie tak żeby po najechaniu na daną opcję podświetlała się cała, bez dolnego i górnego marginesu. I nie mam pojęcia jak rozwiązać ten problem z dolnym marginesem, przecież nigdzie nie jest od zdefiniowany.

 

KOD HTML:

<!DOCTYPE HTML>

<html lang="pl">

	<head>

		<title>SONGWORLD.PL</title>
		<meta charset="utf-8" />
		<meta name="description" content="Blog o artystach, nowościach w polskiej muzyce, czołówce najpopularniejszych najpopularniejszych wokalistów" />
		<meta name="keywords" content="songcord, songworld.pl, muzyka, polska muzyka, artyści, pop, piosenki" />
		<link rel="stylesheet" href="style.css" type="text/css" />
		<link rel="stylesheet" href="css/fontello.css" type="text/css" />
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&family=Open+Sans+Condensed:wght@300;700&display=swap" rel="stylesheet">

	</head>
	

	<body>
	
		<div class="wrapper">
		
			<div class="header">
			
				<div class="logo">
					
					<div style="float: left;"><img src="icon.png" style="height: 80px;"></div>
					<div style="float: left; margin-top: 10px;">SONGWORLD.PL</div>
					<div style="clear: both;"></div>
				</div>
			
			</div>
			
			<div class="nav">
			
				<ol>
				
					<li><a href="#">Strona główna</a></li>
					<li><a href="#">Nowe płyty</a></li>
					<li><a href="#">Nowe piosenki</a></li>
					<li><a href="#">Plotki</a></li>
					<li><a href="#">Spis artystów</a></li>
					<li><a href="#">O blogu</a></li>
				
				</ol>
			
			</div>
			
			<div class="content">
			
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut arcu urna, pretium non odio venenatis, pellentesque blandit sem. Maecenas congue sem vitae lorem ullamcorper, quis posuere quam aliquet. Vestibulum luctus dignissim erat, at congue massa euismod in. Nulla vitae facilisis nulla. Morbi non accumsan nisi. Cras consectetur, mi ac luctus mattis, ante tellus vestibulum nisi, sed facilisis nunc ex ac enim. Etiam non egestas neque. Integer sodales lacinia sollicitudin.</p>

			<p>Quisque et pulvinar sem. Donec sed volutpat mi. Nam ante sem, vestibulum at varius id, iaculis eget velit. Proin suscipit, libero placerat sodales pulvinar, mi nisl faucibus ante, in sollicitudin lacus mauris dictum eros. Curabitur sagittis accumsan sem condimentum consectetur. Sed sit amet purus non ante faucibus consequat. Praesent rhoncus hendrerit mauris quis euismod. Pellentesque euismod ullamcorper risus, quis euismod augue accumsan eget. Aliquam iaculis ex non blandit pretium. Vivamus id eros non ipsum dictum pellentesque vitae eget lorem. Morbi sit amet nisi ex. Quisque consectetur mauris turpis, id ullamcorper neque dapibus mollis. Vivamus sit amet magna sit amet augue eleifend porttitor id ut magna. Nunc orci ex, viverra et risus nec, tincidunt faucibus dui. Ut gravida tincidunt diam sed luctus.</p>

			<p>Nullam vestibulum neque eget eros lacinia fermentum. Praesent eleifend convallis lobortis. Nullam non nunc egestas, pulvinar elit eu, tincidunt turpis. Vivamus consectetur, nisi fringilla sollicitudin mattis, leo tellus viverra nunc, in sollicitudin odio nunc nec nunc. Duis ut urna vitae lacus feugiat euismod id in nibh. Quisque aliquam, risus eget malesuada pretium, eros turpis aliquet tortor, vitae mollis dolor enim non augue. Vivamus lacinia arcu sed tincidunt pharetra. Sed sodales auctor quam, non feugiat ligula rhoncus vitae. Fusce malesuada convallis elementum. Vivamus a porttitor lacus, id placerat nisl. Sed sed rutrum velit, eget rhoncus enim.</p>

			<p>Quisque id dignissim ex. Sed tincidunt tempus felis sed consequat. Sed pellentesque tempus felis eget ornare. Duis et orci mattis, varius ex a, lacinia elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed auctor enim nec eros efficitur lacinia. Phasellus venenatis tellus vitae maximus viverra. Pellentesque sem enim, porta et molestie ut, iaculis nec orci. Aliquam erat volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer at enim facilisis, placerat ex ac, volutpat dolor. Phasellus metus nulla, convallis non porta eu, cursus non quam. Quisque finibus porttitor justo, ac blandit ligula cursus quis. Aenean lorem orci, rhoncus in nibh in, interdum rhoncus velit.</p>

			<p>Duis hendrerit, dolor sit amet rhoncus rhoncus, massa lacus fringilla turpis, ut maximus neque erat at sem. Mauris vehicula blandit faucibus. Fusce eu lorem sed erat commodo faucibus varius eu urna. Aliquam ac tellus erat. Cras vel urna accumsan, rhoncus velit eget, dictum nisi. Vestibulum lacinia dictum nisi, eget pretium sapien porta eget. Sed eget turpis ut mi ultricies lacinia at non tortor. Proin volutpat sem vel iaculis finibus. Vivamus venenatis vel arcu et sagittis. Praesent viverra, arcu in sagittis tincidunt, dui tortor maximus lectus, in euismod urna urna non ex. Curabitur tempus metus augue, eu consectetur ante posuere in. Nulla et leo tellus. Nunc vitae sollicitudin mi.</p>
			
			</div>
			
			<div class="socials">
			
				<div class="socialdivs">
				
					<div class="fb"><i class="icon-facebook"></i></div>
					<div class="in"><i class="icon-linkedin"></i></div>
					<div class="yt"><i class="icon-youtube"></i></div>
					<div class="tw"><i class="icon-twitter"></i></div>
					<div style="clear: both;"></div>
				
				</div>
			
			</div>
			
			<div class="footer">Songcord.pl &copy;2020 Wszelkie prawa zastrzeżone</div>
		
		</div>


	</body>

</html>

 

KOD CSS:

body
{
	background-color: #303030;
	color: white;
	font-family: 'Comfortaa', cursive;
	font-size: 20px;
	margin: 0 !important;
}

.wrapper
{
	width: 100%;
}

.header
{
	width: 100%;
	margin-top: 10px;
	padding: 20px 0;
}

.logo
{
	width: 500px;
	font-size: 48px;
	margin-left: auto;
	margin-right: auto;
}

.nav
{
	width: 100%;
	background-color: #c34f4f;
	text-align: center;
	border-top: 1px solid #751b1b;
	border-bottom: 1px solid #751b1b;
	position: sticky;
	top: 0;
	left: 0; 
}

.content
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	padding: 15px 0;
	z-index: 1000;
}

.socials
{
	width: 100%;
	text-align: center;
	background-color: #292929;
}

.socialdivs
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.fb
{
	width: 250px;
	height: 155px;
	float: left;
}

.fb:hover
{
	background-color: #4668b3;
}

.in
{
	width: 250px;
	height: 155px;
	float: left;
}

.in:hover
{
	background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf)
}

.yt
{
	width: 250px;
	height: 155px;
	float: left;
}

.yt:hover
{
	background-color: #d94348;
}

.tw
{
	width: 250px;
	height: 155px;
	float: left;
}

.tw:hover
{
	background-color: #3095d3;
}

.footer
{
	text-align: center;
	background-color: #222222;
	padding: 30px;
}

/* .sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
} */

ol
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 18px;
	line-height: 200%;
	display: inline-block;
}

ol a
{
	color: #ffffff;
	text-decoration: none;
	display: block;
}

ol > li
{
	margin: 0;
	float: left;
	width: 150px;
	padding: 10px;
	border-right: 1px dashed #751b1b;
}

ol > li:first-child
{
	border-left: 1px dashed #751b1b;
}

ol > li:hover
{
	background-color: #cf6969; 
}

P.S. Tak wiem że wstawiłem linkedin zamiast instagrama laugh

1 odpowiedź

+1 głos
odpowiedź 2 grudnia 2020 przez niezalogowany

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

wink

komentarz 2 grudnia 2020 przez Mavert Nowicjusz (120 p.)

Wstawiłem to box-sizing: border-box; do ol:

ol
{
    padding: 0;
    margin: 0;
	box-sizing: border-box;
    list-style-type: none;
    font-size: 18px;
    line-height: 200%;
    display: inline-block;
}

I ciągle nie działa :/

Chyba że o coś innego chodziło?

komentarz 2 grudnia 2020 przez niezalogowany

Wstaw reset na samym początku CSS'a 

{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

Jeśli nie działa to sprawdź swój kod powoli i cierpliwie ...cool

Podobne pytania

0 głosów
2 odpowiedzi 206 wizyt
pytanie zadane 5 czerwca 2020 w HTML i CSS przez WiktroH Mądrala (6,550 p.)
0 głosów
2 odpowiedzi 256 wizyt
pytanie zadane 26 września 2017 w HTML i CSS przez StanD Użytkownik (930 p.)
0 głosów
1 odpowiedź 412 wizyt
pytanie zadane 28 kwietnia 2018 w HTML i CSS przez uszk Użytkownik (630 p.)

93,332 zapytań

142,325 odpowiedzi

322,402 komentarzy

62,669 pasjonatów

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!

...