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

HTML - strona nie ładuje się tak jak powinna

VPS Starter Arubacloud
0 głosów
134 wizyt
pytanie zadane 23 września 2019 w HTML i CSS przez MrZax Nowicjusz (120 p.)

Witam,

jestem na 3 odc. kursu html. W kursie pan Mirosław wstawia <div> tworząc w ten sposób kafelkowy wygląd strony jak w Windowsie. Piszę swoją stronę stosując się do tego kursu, a pomimo tego strona nie wygląda jak powinna.

Efekt jest taki, że pomiędzy dwoma divami tile1 pojawia się tile4, a powinien się pojawiać pod divami tile2 i tile3.

 

A w kursie wygląda to tak:

<!DOCTYPE HTML>
<html lang="pl-PL">
	<head>
		<meta charset="UTF-8" />
			<title>Programista - portfolio</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		
		<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans+Condensed:300&display=swap&subset=latin-ext" rel="stylesheet">
		<link rel="stylesheet" href="style.css" type="text/css">
		
	</head>

	<body>
	
		<div id="container">
			
			<div class="rectangle">
				<div id="logo">Gal Anonim</div>
				<div id="clock">12:00:00</div>
				<div style="clean:both;"></div>
			</div>
			
			<div class="square">
				<div class="tile1">1</div>
				<div class="tile1">1</div>
				<div style="clean:both;"></div>
				
				<div class="tile2">2</div>
				<div class="tile3">3</div>
				<div style="clean: both;"></div>
				
				<div class="tile4">4</div>
				
				
			</div>
			<div class="square"></div>
			<div style="clean:both;"></div>
			
			<div class="rectangle"></div>
			
		</div>
	
	</body>
</html>
body
{
	background-color: #303030;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	color: white;
}

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

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

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

#logo
{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 75px;
	letter-spacing: 2px;
	width:600px;
	float: left;
}

#clock
{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 75px;
	letter-spacing: 2px;
	float: left;
}

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

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

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

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

Kompletnie utknąłem - liczę na pomoc.

1 odpowiedź

+1 głos
odpowiedź 23 września 2019 przez Michałełe Nałogowiec (25,600 p.)
edycja 24 września 2019 przez Michałełe

Witam

Masz zwykłą literówkę w kodzie, tj. clear: both a nie clean: both

Min. tutaj

            <div class="rectangle">
                <div id="logo">Gal Anonim</div>
                <div id="clock">12:00:00</div>
                <div style="clean:both;"></div> <-----
            </div>

 

komentarz 23 września 2019 przez Chess Szeryf (76,710 p.)
Na przyszłość. Jest w opcji bloku z kodem możliwość zaznaczenia linii. Następnym razem zamiast pisać "<---", możesz skorzystać z tej funkcjonalności jak chcesz.
komentarz 24 września 2019 przez Michałełe Nałogowiec (25,600 p.)
Dzięki, nie wiedziałem o tej opcji :D

Podobne pytania

0 głosów
1 odpowiedź 365 wizyt
pytanie zadane 6 grudnia 2018 w HTML i CSS przez hiveplay Początkujący (430 p.)
0 głosów
3 odpowiedzi 275 wizyt
pytanie zadane 8 października 2018 w HTML i CSS przez Paweł Szewczyk Obywatel (1,410 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...