Problem z 5 kwadratem - Kurs HTML odc.3

pytanie zadane 25 sierpnia 2018 w HTML i CSS przez FiQu Nowicjusz (150 p.)
edycja 25 sierpnia 2018 przez FiQu

Witam Serdecznie, od ponad godziny próbuję odnaleźć błąd w kodzie - mianowicie kwadrat 5 nie wyświetla się po prawej stronie. Temat wałkowany na forum nie jednokrotnie, jednakże żadna z rad podanych w dyskusji mi nie pomogła. Byłbym wdzięczny za pomoc :)

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <title></title>
    
    <meta name="description" content="Opis w Google" />
    <meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
    
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="stylesheet" href="css/fontello.css" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&amp;subset=latin-ext" rel="stylesheet">
    <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 id="logo">Jan Kowalski</div>
        <div id="zegar">12:00:00</div>
        <div style="clear:both;"> </div>
    </div>

    <div class="square">
        <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>
    <div class="square">
        <div class="tile5">5</div>
        <div class="yt"><i class="icon-youtube"></i></div>
        <div class="fb">fb</div>
        <div class="g">g</div>
        <div class="tw">tw</div>
        <div style = "clear:both;"></div>
    </div>
    <div style = "clear:both;"></div>
    <div class="rectangle"> 
    2018 &copy; Jan Kowalski - Portfolio
    </div>
</div>
</body>
</html>

body
{
	background-color: #303030;
	color: #ffffff;
	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:letf;
}
#logo
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	width: 600px;
	margin-top: 10px;
	margin-bottom: 10px;
}
#zegar
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.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: 130px;
	background-color: #ee5a32;
}
.tile5
{
	margin: 10px;
	width: 480px;
	height: 304px;
	background-color: #666666;
}

komentarz 25 sierpnia 2018 przez NorbiOlek Nowicjusz (180 p.)

Może to dlatego że nie zamknąłeś tagiem </div> diva container?

Edit1: Sprawdż czy dobrze policzyłeś co do piksela, szerokości div-ów.

komentarz 25 sierpnia 2018 przez FiQu Nowicjusz (150 p.)

rzeczywiście container nie był zamknięty oraz była literówka - jednak nie naprawiło to błędu

komentarz 25 sierpnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Po pierwsze to najlepiej wrzuć to na codepen, tam podepnij fontello i wszystko co potrzeba aby ułatwić innym szukanie błędu. Dając takie coś zmuszasz kogoś aby sam to robił co jest wg mnie stratą czasu - pozwól skupić się faktycznie na szukaniu błędu.

Po drugie to szczerze radzę odpuść sobie te kursy... wiem, że to Mirka forum i nie do końca wypada się tak ostro o nich wypowiadać, ale moim zdaniem kursy html/css i js są bardzo słabe, niejednokrotnie już się o tym wypowiadałem tu i na FB i będę trwać przy swoim.

Poszukaj choćby na udemy za parę zł fajnych kusów albo po prostu czytaj sobie kursy i tutki w necie, ale nie te Mirka i z pasji informatyki. Niepotrzebnie nauczysz się wielu bardzo złych praktyk.

1 odpowiedź

odpowiedź 25 sierpnia 2018 przez Dawid Sobieszczuk Mądrala (6,240 p.)
edycja 25 sierpnia 2018 przez Dawid Sobieszczuk

Najlepsza

Zrobiłeś literówkę.

.square
{
    width: 50%;
    float:letf; /* << tutaj */
}

Powinno być left a nie letf.

komentarz 25 sierpnia 2018 przez FiQu Nowicjusz (150 p.)

Rzeczywiście - rozwiązało to problem. Dziękuję ślicznie :)

Podobne pytania

Problem z 5 kwadratem - Kurs HTML odc.3

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci