HTML odc. 3 - Kafelki

pytanie zadane 21 lipca 2017 w HTML i CSS przez flewMaster Nowicjusz (190 p.)

Witam Serdercznie

Jezeli temat byl poruszany i zamkniety przepraszam. Mam problem z kafelkami mianowicie z numerem 4 (pomaranczowy) gdyz robiac krok po kroku zgodnie z filmikiem pana Miroslawa nie chce sie ulozyc jak nalezy.

Rowniez ciekawi mnie dlaczego 'jan kowalski' ulozony zostal automatycznie do lewej strony jak i kafelki a nie po srodku. Dopiero dodajac (w logo css) margin left;300px; zostaje on wyrownany do srodka ale wtedy kafelki zyja wlasnym zyciem. Prosze o pomoc

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	
	<title>Jan Kowalski - Portfolio</title>
	<meta name=description" conent="Stworzę dla Ciebie wyjątkową strone www!."/>
	<meta name="keywords" conent="zamów, stronę,tworzenie,www,programista"/>
	
	<link rel="stylesheet" href="style.css" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&amp;subset=latin-ext" rel="stylesheet">
	
	
	
	
	
	
	
	
	</head>
	
	
	
	
	
	
	<body>
	<div id="container>
	<div class="rectangle"></div>
		<div id="logo">Jan Kowalski</div>
		<div id="zegar">12:00:00</div>
		<div style:"clear:both;"></div>
		
		
		
	<div class="square"></div>
	<div class="tile1">1</div>
	<div class="tile1">1</div>
	<div style="clear:both;"></div>
	
	<div class="tile2">2</div>
	<div class="tile3">3</div>
	<div style:"clear:both;"></div>
	
	<div class="tile4">4</div>
	
	
	
	
	
	
	
	<div class="square"></div>
	
	<div style="clear:both;"></div>
	
	<div class="rectangle"></div>
	
	
	
	</div>
	
	
	
	
	
	</body>
	
	
	
	
	
	
	</html>

body
{
	background-color:#303030;
	color:#ffffff;
	font-family:font-family: 'Lato', sans-serif;
	font-size:20px;
}


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

.rectangle
{
	width:960px;
	margin:20px;
}

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

#logo
{
	float:left;
	font-family:'Josefin Sans', sans-serif;
	font-size:70px;
	width:600px;
	
	

}

#zegar
{
	float:left;
	font-family: 'Josefin Sans', sans-serif;
	font-size:70px;
}

.tile1
{
	margin:10px;
	width:230px;
	height:142px;
	background-color:#3095d3;
	float:left;
}
.tile2
{
	margin:10px;
	width:230px;
	height:142px;
	background-color:#666666;
	float:left;
}
.tile3
{
	margin:10px;
	width:230px;
	height:142px;
	background-color:#93c748;
	float:left;
}
.tile4
{
	margin:10px;
	width:480px;
	height:142px;
	background-color:#ee5a32;
}

1 odpowiedź

odpowiedź 21 lipca 2017 przez imklau Nałogowiec (42,090 p.)
wybrane 22 lipca 2017 przez Arkadiusz Waluk

Najlepsza

<div class="tile2">2</div>
<div class="tile3">3</div>
<div style:"clear:both;"></div>

porównaj sobie te 3 elementy. Nawet widać różnicę w podświetleniu składni, class to atrybut i jest zaznaczony delikatnym szarym kolorem (podpowiem, że style to też atrybut i też powinien mieć tak samo), a wartość atrybutu tutaj jest podświetlana na niebiesko, więc szuuukaj tu błędu

komentarz 21 lipca 2017 przez flewMaster Nowicjusz (190 p.)

Faktycznie zadzialo. Dziekuje. Nie wiem dlaczego ale moja skladnia w note++ nie podswietla sie, wszystko jest w tym samym kolorze dlatego przeoczylem to. Jeszcze ten jak kowalski mnie nurtuje gdzie jest po lewej stronie automatycznie a powinien byc wysrodkowany.

komentarz 21 lipca 2017 przez imklau Nałogowiec (42,090 p.)

Nie pamiętam już, jak to było w tym odcinku.
Ogólnie to chyba musisz poprawić kod HTML bo masz diva o klasie square a w środku nic nie masz?
Wydaje mi się, że te kafelki (tzn divy o klasie tile) powinny być w środku square. Tak samo masz diva .rectangle i w środku pusto? A nie tam powinno być logo i zegar?

Jeśli dobrze mówię to popraw to, a jakbyś nadal nie uzyskał efektu o który Ci chodzi to oznacza, że w CSS coś namieszałeś ;)