Kurs HTML odc.3 - problem.

pytanie zadane 6 stycznia 2020 w Nasze projekty przez Gościnnie Nowicjusz (150 p.)

Witam!

Pewnie mój problem to błahostka dla Was, ale mi już brakuje nerwów. Oglądam Kurs HTML odc.3 Pana Mirosława i natrafiłem na problem. Otóż w minucie 23:23 Pan Mirosław sprawdza co do tej pory zostało napisane, odświeża stronę i dwa divy są pod sobą. Później dodaje linijkę "float:left;" w css w classie "tile1" i div nagle jest jeden obok drugiego - u mnie niestety wszystko idzie jeden pod drugim. Zerknie ktoś?

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<title>Seriale</title>
	<meta name="description" content="Serwis poświecony linuxowi"/>
	<meta name="keywords" content="strona,www,internet"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
	<link rel="stylesheet" href="style.css" type="text/css"/>
	
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&display=swap&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>
		
		<div class="square"></div>
		<div style="clear: both;"></div>
	
		<div class="rectangle"></div>
	
		
	</div>


</body>
</html>

CSS.

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: 50px;
	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;
	
}

1 odpowiedź

odpowiedź 6 stycznia 2020 przez Michałełe Nałogowiec (25,600 p.)
wybrane 6 stycznia 2020 przez Gościnnie

Najlepsza

Witam patrząc na Twój kod zmieniłem w CSS dla klasy square szerokość - na 960px.

I oczywiście float: left do .tile1 ( chyba zapomniałeś tego wpisać).

Błąd polegał na tym, że szerokość .square była równa 50px - czyli oba div'y nie mieściły się w tych 50 px.

Zmieniłem na 960px ponieważ taką szerokość ma klasa rectangle.

Tutaj cały kod CSS:

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: 960px;
    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;
}

komentarz 6 stycznia 2020 przez Gościnnie Nowicjusz (150 p.)

Nie zapomniałem dodać tylko próbowałem różnych sposobów. W innych miejscach też dawałem "float: left;" żeby po prostu zobaczyć co się stanie.

Super, teraz mój kod działa. Bardzo dziękuje za pomoc. Tylko nie rozumiem dlaczego u Pana Mirosława to działa, a u mnie nie? Możliwe że niezbyt uważnie przepisywałem i popełniłem gdzieś błąd? Bo u niego na filmiku wszystko pięknie się mieści.