Brak jednego marginesu.

pytanie zadane 3 maja 2018 w HTML i CSS przez kubusop Początkujący (420 p.)
zamknięte 3 maja 2018 przez Arkadiusz Waluk

Witam. Mam problem z marginesami. Kafelek youtube powinien być odsunięty od kafelka (czyli margines górny) tile5 o jeszcze jedno 10px lecz tak się nie dzieje pomimo, że w CSS są wpisane potrzebne wartości. Kod z kursu HTML odc.3.

Myślę, że wybrałem dobrą kategorię

Kod HTML:

<body>

<div id="container">
	
	<div class="rectangle">
		<div id="logo">Imie i nazwisko</div>
		<div id="zegar">12:00:00</div>
		<div style="clear:both;"></div> 
	</div>
	
	
	<div class="square">
		<div class="tile1">Jeden</div>	
		<div class="tile1">Jeden</div>
		<div style="clear:both;"></div>
		
		<div class="tile2">Dwa</div>
		<div class="tile3">Trzy</div>
		<div style="clear:both;"></div> 
		
		<div class="tile4">tile4</div>
	</div>
	
	<div class="square">
		<div class="tile5">tile5</div>
	
		<div class="yt">
		youtube
		</div>
	<div style="clear:both;"></div>
	
	</div>
	<div style="clear:both;"></div>
	
	<div class="rectangle"></div>
	
	
	
</div>


</body>

Kod CSS:

body
{
background-color: #383838;
color: white;
font-family: 'Lato', sans-serif;
font-size:20px;
}
#container
{
	width:1000px;
	margin-left:auto;
	margin-right:auto;
}
 
.rectangle
{
	width:960px;
	margin:20px;
}

.square
{
	float:left;
	width:50%;
} 

#logo
{
	float:left;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size:70px;
	width:600px;
	margin-top:10px;
	margin-bottom:10px;
}

#zegar
{
	float:left;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size:70px;
	margin-top:10px;
	margin-bottom:10px;
}


.tile1
{
	float:left;
	margin:10px;
	width:230px;
	height:142px;
	background-color:#3095d3;
}

.tile2
{
	float:left;
	margin:10px;
	width:230px;
	height:142px;
	background-color:#666666;
}

.tile3
{
	float:left;
	margin:10px;
	width:230px;
	height:142px;
	background-color:#93c748;
}

.tile4
{
	margin:10px; 
	width:480px;
	height:142px;
	background-color: #ee5a32;
}

.tile5
{
	margin: 10px; 
	width: 480px;
	height: 304px;
	background-color: #666666;
}

.yt
{
	margin:10px;
	width:105px;
	height:142px;
	background-color:#d94348;
	flaot:left;
}

komentarz zamknięcia: Rozwiązane - literówka

komentarz 3 maja 2018 przez kubusop Początkujący (420 p.)
edycja 3 maja 2018 przez kubusop

Problem rozwiązałem sam. W CSS w klasie .yt float:left; powinno być na pierwszym miejscu. Nie do końca wiem dlaczego, ale...

komentarz 3 maja 2018 przez Chess Szeryf (76,710 p.)

.yt
{
    margin:10px;
    width:105px;
    height:142px;
    background-color:#d94348;
    flaot:left;
}

Nie musi być na samej górze, tylko pomyliłeś litery, zamiast napisać "float", napisałeś "flaot".

komentarz 3 maja 2018 przez kubusop Początkujący (420 p.)
przeniesione 3 maja 2018 przez Arkadiusz Waluk

Kurdeee... Rzeczywiście. Dzięki

1 odpowiedź

odpowiedź 3 maja 2018 przez PolYGlok Pasjonat (19,450 p.)
edycja 3 maja 2018 przez PolYGlok

Podobne pytania

Zaloguj lub zarejestruj się, aby skomentować.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci