Tło w html nie wyświetla się

Question

<div class="socials">
				<div class="socialdivs">
						<div class="fb"><i class="icon-facebook-squared"></i></div>
						<div class="yt"><i class="icon-youtube-squared"></i></div>
						<div class="insta"><i class="icon-instagram"></i></div>
						<div class="sc"><i class="icon-soundcloud"></i></div>
						<div style="clear;both"></div>
				</div>
		</div>

 .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;
 }
 
 .yt
 {
	 width: 250px;
	 height: 155px;
	 float: left;
 }
 .yt:hover
 {
	 background-color: #d94348;
 }
.insta
 {
	 width: 250px;
	 height: 155px;
	 float: left;
 }
 .insta:hover
 {
	 background-color: #9e32d1;
 } 
.sc
 {
	 width: 250px;
	 height: 155px;
	 float: left;
 }
 .sc:hover
 {
	 background-color: #f45e07;
 }
	 

Mój problem polega na tym, że tło dla klasy socials nie zmienia się. Proszę o pomoc. 

Comments

<div style="clear;both"></div>

Popraw na 

<div style="clear:both;"></div>

 

Answer 1

Tło się nie wyświetla, ponieważ div jest "pusty". Wpisz coś pomiędzy znacznikami <div class="socials"> a <div class="socialdivs"> a zobaczysz efekt, czyli tło docelowo zmieni się na żądany kolor :)

Comments

Jeżeli tak zrobię to faktycznie tło się pojawia, ale <div class="socials"> nie powinien być pusty, ponieważ znajduje się w nim <div class="socialdivs">

		<div class="socials">
			<div class="socialdivs">
				<div class="fb"><i class="icon-facebook-squared"></i></div>
				<div class="yt"><i class="icon-youtube-squared"></i></div>
				<div class="insta"><i class="icon-instagram"></i></div>
				<div class="sc"><i class="icon-soundcloud"></i></div>
				<div style="clear;both"></div>
			</div>	
		</div>
		
			
		
			<div class="footer">POPkulturalnie.com &copy; 2017 I can't wait to show you my toys ;-) </div>
	</div>

Tło w <div class="socials"> jest takie samo jak w footerze. Jak to zmienić?

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

 

---

Nie wiem już teraz o co do końca Tobie chodzi. Spójrz, tutaj jest efekt, kiedy div "socials" jest pusty: 

Natomiast tutaj jest div "socials", że tak napiszę "wypełniony":

Zauważ, że możesz zagnieżdżać nawet milion divów, ale jeżeli nie "wywołasz" żadnego, mimo posiadania styli css (np. kolor tekstu) to div nie pojawi się na stronie. Z definicji div jest elementem blokowym ( poniżej wyjaśnienie ).

" Element blokowy to taki, który zajmuje całą szerokość elementu, w którym się znajduje (tzw. rodzica), pod warunkiem, że zostanie wypełniony treścią."

Ja zawsze jak zaczynałem robić strukturę strony, a gubiłem się w divach, robiłem tak, że po prostu każdemu divowi dawałem inny kolor i jakiś napis. Wtedy wiedziałem jak mniej więcej wygląda strona. Chociaż zapewne nie jest to dobrą praktyką :D

Może podeślij mi na PW kod całej strony, albo zostaw gdzieś pliki na githubie i razem jakoś uda nam się coś zdziałać ;) Też jestem początkującym, więc chętnie pomogę, może czegoś się jeszcze nauczę :D

PS. Polecam skorzystać z narzędzia dostępnego do pobrania w sieci nazywającego się "Brackets". Znajdziesz go tutaj. Jest to edytor tekstu, który na bieżąco zmienia Tobie elementy strony, więc nie musisz za każdym razem odświeżać strony po jednorazowej zmianie, tylko widzisz od razu co się dzieje na stronie. Można fajnie się pobawić np. właściwością display :)

Answer 2

<div style="clear:both"></div>

Literówka ;)

Answer 3

Tak jak pisze  FaloZ przyczyną takiej sytuacji jest brak wypełnienia zawartością elementów blokowych div. Albo div o klasie "socials" albo któryś z elementów wewnątrz niego musi mieć jakąś treść inaczej nie będzie widoczny.

Uzupełniłem Twój kod HTML treścią. Spróbuj na spokojnie go przeanalizować, zapisz go w swoim edytorze i uruchom w przeglądarce, poeksperymentuj trochę, wtedy na pewno Ci się rozjaśni. 

        <div class="socials">
        Tu zaczyna się div o klasie "socials"<br/>
        Tu zaczyna się div o klasie "socials"<br/>
        Tu zaczyna się div o klasie "socials"<br/>
        <div class="socialdivs">Tu zaczyna się div o klasie "socialdivs".<br/>
                                              Tu zaczyna się div o klasie "socialdivs".<br/>
                                              Tu zaczyna się div o klasie "socialdivs".<br/>
        
            <div class="fb">Tu jest div o klasie "fb"<br/>Tu jest div o klasie "fb"<br/>Tu jest div o klasie "fb"<br/><i class="icon-facebook-squared"></i></div>
            <div class="yt">Tu jest div o klasie "yt"<br/>Tu jest div o klasie "yt"<br/>Tu jest div o klasie "yt"<br/><i class="icon-youtube-squared"></i></div>
            <div class="insta">Tu jest div o klasie "insta"<br/>Tu jest div o klasie "insta"<br/>Tu jest div o klasie "insta"<br/><i class="icon-instagram"></i></div>
            <div class="sc">Tu jest div o klasie "sc"<br/>Tu jest div o klasie "sc"<br/>Tu jest div o klasie "sc"<br/><i class="icon-soundcloud"></i></div>
            <div style="clear;both"></div>
       Tu kończy się div o klasie "socialdivs" </div>    
    Tu kończy się div o klasie "socials" </div>
     
         
     
        <div class="footer">POPkulturalnie.com &copy; 2017 I can't wait to show you my toys ;-) <br/>
                                        POPkulturalnie.com &copy; 2017 I can't wait to show you my toys ;-) <br/>
                                        POPkulturalnie.com &copy; 2017 I can't wait to show you my toys ;-) <br/>
                                        POPkulturalnie.com &copy; 2017 I can't wait to show you my toys ;-) <br/>
                                        POPkulturalnie.com &copy; 2017 I can't wait to show you my toys ;-) <br/>
                                        POPkulturalnie.com &copy; 2017 I can't wait to show you my toys ;-) <br/>
        
        </div>
</div>

Comments

Jest to screen z poradnika css na yt. Wydaje mi się, że mam wszystko tak samo, ale tamta osoba ma inny kolor tła w <div class="socials">. Chciałbym uzyskać taki efekt:

A uzyskuje taki: 

---

Wklej mi proszę Twój kod jako code snippet. Wtedy będę mógł go szybko skopiować i zreprodukować we własnym edytorze.