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

question-closed przerwa między zawartościami witryny.

VPS Starter Arubacloud
0 głosów
121 wizyt
pytanie zadane 14 września 2018 w HTML i CSS przez zxcc Nowicjusz (160 p.)
zamknięte 14 grudnia 2018 przez zxcc

Witam! jestem początkujący w htmlu i css, wiec jescze nie ogarniam co i jak. Moja sprawa dotyczy prostej strony, w której nie wiem czemu zaratości strony oddzielają mi się od siebie :v Po prostu nie chcę, żeby np. content było ddzielony tłem, tylo był pod samym menu. I to samo ze stopką. Bo już widzę, że to samo.

Poniżej to co do tej pory napisałem. Strona jest bardzo prosta, bo dopieor co zacząłem ją tworzyć. 

<!DOCTYPE html>
<html lang="pl">
<head>

	<meta charset="utf-8">
	<title>intrukcja obsługi</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">
	
	<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
	
	<link rel="stylesheet" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
	
	
</head>

<body>
	
	<div class="container">
	
		<header>
			<img src="neko2.jpg" />
		</header>
		
		<nav id="topmenu">
			<ul class="menu">
				<li><a href="#">strona glówna</a></li>
				<li><a href="#">instrukcja</a></li>
				<li><a href="#">zdjęcia</a></li>
				<li><a href="#">kontakt</a></li>
			</ul>
		</nav>
		
		<div class="content">
		
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum ut metus ac pulvinar. Proin rhoncus luctus ante, in cursus ex pellentesque eget. Nulla posuere nisi at massa euismod consequat. Pellentesque accumsan ante enim, ac porttitor diam finibus ac. Suspendisse egestas aliquam ipsum finibus rutrum. Aenean cursus ex purus, vel gravida est consectetur at. Aliquam dapibus rhoncus condimentum.</p>

			<p>Quisque tortor odio, vulputate eu eros eget, finibus maximus urna. Nunc vel bibendum felis. Nunc vehicula lorem nec fringilla lacinia. Proin quis nisl volutpat, aliquam ante at, sodales arcu. Donec porta fringilla augue at sollicitudin. Nulla libero ante, ornare vel condimentum id, pretium pulvinar magna. Nunc est leo, scelerisque vulputate scelerisque quis, interdum vel massa. Praesent fringilla pellentesque sem, id ultrices leo sagittis ac. Fusce quis elit risus. Morbi varius eros ac maximus bibendum. Donec blandit, eros nec consequat feugiat, nunc libero dignissim tellus, id tempus nibh justo luctus diam. Sed aliquam tempus elit, a tincidunt velit fringilla eu. Aliquam nec est vel sapien varius accumsan. Sed vitae porta ex, sed hendrerit lectus. Etiam convallis sollicitudin ligula et bibendum. Ut eget lorem eu libero blandit vehicula.</p>

			<p>Etiam sed gravida nulla. Nulla gravida facilisis consectetur. Fusce eu dui mauris. Vivamus sed arcu id eros tempus lacinia. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sit amet interdum massa. Mauris nec lacus accumsan, accumsan massa eget, congue nibh. Fusce ultricies mi odio, ut ullamcorper nulla viverra ut. Mauris tincidunt erat et velit dignissim, ut viverra orci vehicula. Vestibulum eleifend condimentum libero, non sodales lacus blandit eu.</p>

			<p>Phasellus diam tellus, convallis et posuere eget, mattis ac libero. Maecenas varius, lacus sed luctus fringilla, quam ex vulputate est, ut dignissim sem tortor ac purus. Aliquam non metus egestas, convallis eros ut, posuere elit. Maecenas commodo ligula felis, sit amet pharetra dolor fringilla egestas. Maecenas quam tortor, fermentum hendrerit ante in, ultrices volutpat ante. Suspendisse et quam libero. Nullam non pellentesque orci, id tincidunt elit. Etiam sed tortor finibus, pulvinar dolor quis, lobortis felis. Proin quam purus, fringilla eu tincidunt sit amet, elementum et sem. Vestibulum non sagittis leo, venenatis aliquet tellus. Nulla sed libero suscipit, auctor mi dignissim, egestas nisi. Donec egestas eu lorem ut auctor. Duis ornare varius porta. Nunc non ligula mauris. Nullam eu risus urna. Suspendisse faucibus lectus dolor, eget iaculis lectus luctus id.</p>

			<p>Cras euismod risus eu quam consequat, quis fringilla odio pretium. Curabitur enim dolor, dictum at scelerisque vitae, pulvinar sed neque. Vivamus euismod eget sem at tincidunt. Aliquam erat volutpat. Nullam in turpis scelerisque, lobortis urna ac, molestie metus. Donec volutpat nec tortor nec gravida. Curabitur interdum pellentesque purus, id dignissim mi lobortis non. Nullam tristique metus odio, et vehicula elit egestas a.</p>
			
		</div>
		
		<footer>
			<p> pppp </p>
		</footer>
		
	</div>

</body>
</html>

 

body
{
	background-image: url(pink.jpg);
	margin: 0;

}

header img
{
	display: block;
	width: 100%;
}

.content
{
	background-color: white;
	margin-top: 0;
}

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

#topmenu
{
	background-color: #fdf;
	text-align: center;
}

.menu
{
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
	font-size: 22px;
}

.menu > li
{
	display: inline-block;
}

.menu > li > a
{
	display: block;
	padding: 20px;
	text-decoration: none;
	text-align: center;
	background-color: #fdf;
	box-shadow: 0 0 0 0 1px #ffccff inset;
	color: black;
}

.menu > li:hover > a
{
    background-color:#ffccff;
    background-image:none;
	color: white;
}

komentarz zamknięcia: mam rozwiązanie

1 odpowiedź

+3 głosów
odpowiedź 14 września 2018 przez Greeenone Pasjonat (16,100 p.)

Po 1. zamiast używać różowego obrazku jako tła użyj:

background-color: pink;

Po 2. Odstęp ten pojawia się poprzez margin który jest domyślny dla tagów <p>. Aby usunąć margin:

p{
 margin-top: 0;
}

Poprawne wyjście to umieszczenie wszystkich paragrafów w div'a (w twoim przypadku są w .content) a następnie ustawienia dla nich paddingu.

.content{
padding: 40px;
}

 

Podobne pytania

0 głosów
1 odpowiedź 463 wizyt
pytanie zadane 30 kwietnia 2018 w HTML i CSS przez KonDZIKs Bywalec (2,770 p.)
0 głosów
5 odpowiedzi 3,254 wizyt
pytanie zadane 16 kwietnia 2017 w HTML i CSS przez JKluseczka Obywatel (1,430 p.)
0 głosów
2 odpowiedzi 465 wizyt
pytanie zadane 9 stycznia 2020 w HTML i CSS przez EmilB Użytkownik (980 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...