• 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ę

VPS Starter Arubacloud
0 głosów
110 wizyt
pytanie zadane 14 marca 2021 w HTML i CSS przez Mitop Użytkownik (700 p.)
zamknięte 14 marca 2021 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 2021 przez niezalogowany
wybrane 14 marca 2021 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 2021 przez niezalogowany
Chodziło o pomarańczowy
1
komentarz 14 marca 2021 przez niezalogowany

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

Miłej Niedzieli winkyes

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

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

+2 głosów
odpowiedź 14 marca 2021 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 2021 przez Mitop Użytkownik (700 p.)
dziękuję, pomoglo

Podobne pytania

0 głosów
2 odpowiedzi 170 wizyt
pytanie zadane 31 lipca 2020 w HTML i CSS przez mi-20 Stary wyjadacz (13,190 p.)
+1 głos
3 odpowiedzi 470 wizyt
+2 głosów
1 odpowiedź 1,459 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...