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

question-closed CSS dziwnie układa mi stronę

0 głosów
71 wizyt
pytanie zadane 14 marca w HTML i CSS przez Mitop Użytkownik (700 p.)
zamknięte 14 marca przez Mitop

Witam, robie kurs z youtubem, ale nie rozumiem dlaczego pomiędzy zóltym kafelkiem a gornymi jest mniejszy odstęp niż pomiędzy tymi wyższymi. Margin wszędzie jest taki sam. Nie mogę znaleźć błędu, wszystko zrobiłem tak jak na kursie, widzi ktoś jakiś bląd? 

 

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

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

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

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

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

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<title>Tytul strony</title>
	<meta name = "description" content="Najlepsza strona jest to wlasnie"/>
	<meta name = "keywords" content = "cos, jeszcze, tag, hehe"/>
	<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/css2?family=Josefin+Sans&family=Lato:wght@700&display=swap" rel="stylesheet">
</head>

<body>
	<div id="container">
		<div class="rectangle">
			<div id="logo">Michał Top</div>
			<div id="zegar">12:00:00</div>
			<div style="clear:both"/>
		</div>
		<div class="square">
			<div class="tile1">1</div>
			<div class="tile1">1</div>
			<div style="clear:both;"/>
			<div class="tile2">2</div>
			<div class="tile3">3</div>
			<div style="clear:both;"/>
			<div class="tile4">4</div>
		</div>
		<div class="square">
			<div class="tile5"></div>
		</div>
		<div style="clear:both;"/>
		<div class="rectangle"></div>
	</div>
</body>


</html>

 

komentarz zamknięcia: mam odpowiedź

2 odpowiedzi

0 głosów
odpowiedź 14 marca przez niezalogowany
wybrane 14 marca przez Mitop
 
Najlepsza
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8" />
    <title>Tytul strony</title>
    <meta name="description" content="Najlepsza strona jest to wlasnie" />
    <meta name="keywords" content="cos, jeszcze, tag, hehe" />
    <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/css2?family=Josefin+Sans&family=Lato:wght@700&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    <div id="container">
      <div class="rectangle">
        <div id="logo">Michał Top</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"></div>
      </div>
      <div style="clear: both;"></div>
      <div class="rectangle"></div>
    </div>
  </body>
</html>
body {
  background-color: #303030;
  color: #ffffff;
  font-family: "Lato", sans-serif;
}

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

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

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

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

Błędy znajdują się HTML w Lini numer : 18 , 23, 26, 32

Pozdrawiam wink

Ps . Ja nie widzę żółtego kafelka !? Czy dobrze widzę ?

cool

 

 

1
komentarz 14 marca przez niezalogowany
Chodziło o pomarańczowy
1
komentarz 14 marca przez niezalogowany

No to Fajnie bo się przestraszyłem że oczy już nie telaugh.

Miłej Niedzieli winkyes

komentarz 14 marca przez niezalogowany
Wzajemnie!
komentarz 14 marca przez Mitop Użytkownik (700 p.)
dziękuję, pomoglo
1
komentarz 14 marca przez niezalogowany

Nie ma za co wink Cała przyjemność po mojej stronie ...yes

+2 głosów
odpowiedź 14 marca przez niezalogowany

Witam!

Błąd w 26 linijce kodu html, div 

<div style="clear:both;"/>

nie jest zamknięty, powinno być tak:

<div style="clear:both;"/></div>

Pozdrawiam

komentarz 14 marca przez Mitop Użytkownik (700 p.)
dziękuję, pomoglo

Podobne pytania

0 głosów
2 odpowiedzi 112 wizyt
pytanie zadane 31 lipca 2020 w HTML i CSS przez mi-20 Stary wyjadacz (12,550 p.)
+1 głos
3 odpowiedzi 416 wizyt
+2 głosów
1 odpowiedź 1,378 wizyt
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

85,725 zapytań

134,512 odpowiedzi

298,568 komentarzy

56,634 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...