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

Background nie zajmuje całego diva

Object Storage Arubacloud
0 głosów
113 wizyt
pytanie zadane 20 kwietnia 2017 w HTML i CSS przez MahukaMK Nowicjusz (120 p.)
edycja 20 kwietnia 2017 przez MahukaMK

Komenda background-color nie zajmuje całego diva.Przerabiałem kurs 2 CSS po dłuższej przerwie. Na początku trochę na luzie "zgapiałem", ale w pewnym momenice (ok 38 min) zauważyłem, że moje tło menu wyświetla się tylko nad napisami, opcje w menu są na tle głównym. Zacząłem trochę kombinować. W końcu sprawdzałem krok po kroku i to jest finalna, nie działająca wciąż wersja. Podaję najpierw plik css, a potem html

Plik CSS:

body 
{
	background-color: grey;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
}
#conteiner{
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

#logo{
	color: white;
	margin-top: 20px;
	font-size: 44px;
	letter-spacing: 3px;
	font-weight: 900;
}

#menu{
	background-color: black;
	margin-top: 20px;
	color: white;
	padding: 10px;
}

#topbar{
	
}

#sidebar{
	
}

#content{
	
}

#footer{
	
}

.option{
	float: left;
	min-width: 50px;
	height: 25px;
	font-size: 18px;
	padding: 10px;
	border-right: 2px dotted #444444;
}

 

 

 

 

HTML

 

<!DOCKTYPE HTML>

	<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<title>Latina maka</title>
	<meta name="keywords" content="Karol, CV, życiorys" />
	<meta http-equiv="X-UA-Compatible" content=IE=edge, chrome=1/>
	<meta name"description" content="Zrobię dla Ciebie najlepszą stronę"/>
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<link href="https://fonts.googleapis.com/css?family=Lato:400,900,900i&amp;subset=latin-ext" rel="stylesheet" type='text/css'/>
</head>

<body>
	<div id="conteiner" >
	
		<div id="logo">
		Dux wulgx
		</div>
		<br/><br/><br/><br/>
		
		<div id="menu">
		<div class="option" >Consequat </div> 
		<div class="option" >Elementum</div> 
		<div class="option" >Molestie </div>
		<div class="option" >Magnis</div>
		<div style="float: both;" width="0" height="0"> </div>
		</div>
		
		<br/><br/><br/><br/>
		
		
		<div id="topbar">
				Lorem ipsum dolor sit amet <br/>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet consequat magna, vitae venenatis magna. Nullam sodales, augue sit amet tincidunt consequat, ante orci imperdiet sem, non porttitor ante urna pellentesque dui. Sed imperdiet feugiat ligula non faucibus. In vulputate ac sem euismod condimentum. Nulla vehicula in dolor a imperdiet. Fusce elementum faucibus elit, a molestie justo finibus ut. Curabitur et fermentum erat. Donec egestas facilisis pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque auctor dictum elit id mollis. Fusce ligula purus, iaculis facilisis vestibulum in, lacinia ut sem. Vestibulum sed efficitur massa, a vulputate mauris. Nunc eget tortor id neque feugiat vestibulum a ut mi. Phasellus tempor orci nec lectus faucibus, iaculis ornare mauris interdum.
		</div>
		
		
		<div id="sidebar">
		Strona gøowna<br/> Podstawowka<br/> Gimbaza<br/> O mnie
		</div>
		
		
		<div id="content">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod rhoncus mi sed vehicula. Integer vel metus nunc. Duis pharetra aliquet ligula, vestibulum convallis massa finibus eu. Nullam pretium non purus non ultricies. Curabitur nec nunc ante. Cras viverra, ex id porttitor aliquet, massa erat dignissim felis, sed dignissim augue felis eu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		<br/><br/>
				Duis fringilla ante id suscipit feugiat. Quisque lectus velit, tincidunt ut molestie sed, consequat in enim. Phasellus lacinia nunc ac vestibulum auctor. Pellentesque gravida lacus eget odio imperdiet sagittis. Integer molestie felis ut risus vehicula hendrerit. Praesent placerat sapien nec leo dictum, eget tempor libero ultricies. Aliquam tristique augue nec leo viverra auctor. Suspendisse tincidunt, lacus vel tristique bibendum, dui massa ultricies urna, ac pellentesque ligula nisi nec sem. Praesent luctus nibh sed arcu gravida vestibulum convallis at urna. Quisque tincidunt erat arcu, nec ultricies sapien dictum id. Nunc eu arcu iaculis, gravida est id, blandit arcu. Pellentesque et sem nibh. Sed interdum suscipit magna, ut sollicitudin lectus lacinia eget. Aliquam erat volutpat.
		<br/><br/>
				Nullam neque lectus, consectetur vel dignissim sit amet, suscipit at sem. Sed commodo neque massa. Phasellus leo sem, mollis vel consectetur a, facilisis at ex. Aliquam luctus ante vitae scelerisque vestibulum. Suspendisse interdum diam ut magna finibus imperdiet. In varius quam turpis, a dignissim nisi consectetur quis. Quisque ac dolor at dui lobortis gravida at et libero. Aenean fermentum diam nec nunc pellentesque sagittis. Nulla lorem sapien, facilisis sed hendrerit eget, laoreet ac nisi. Curabitur sed varius felis, dignissim dignissim ante. In dapibus non mi id tincidunt. Donec urna tortor, ultricies eget ipsum ullamcorper, venenatis rhoncus diam. Integer vehicula felis quam, et molestie purus molestie ac.
		</div>
		
		
		<div id="footer">
		Najlepsza osoba nStrona roku super hupea conetiner ma kakaszu &copy Wzelkie prawa zastrzezone
		</div>
		
		
	</div>
</body>
</html>

 

1 odpowiedź

0 głosów
odpowiedź 20 kwietnia 2017 przez Jasiulek Obywatel (1,090 p.)
Podpowiem Ci, że coś jest nie tak w pliku HTML w 27 linii.
1
komentarz 20 kwietnia 2017 przez MahukaMK Nowicjusz (120 p.)
No tak, niech sobie ta opcja pływa w obie strony :). Piękne dzięki

Podobne pytania

0 głosów
2 odpowiedzi 1,037 wizyt
pytanie zadane 3 listopada 2015 w JavaScript przez Wiciorny Ekspert (270,150 p.)
0 głosów
12 odpowiedzi 1,113 wizyt
pytanie zadane 20 września 2016 w HTML i CSS przez wgnsy123 Początkujący (410 p.)
0 głosów
1 odpowiedź 120 wizyt

92,572 zapytań

141,423 odpowiedzi

319,645 komentarzy

61,959 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...