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

Tile nr 5 nie chce przejść na prawą stronę. HTML odc. 3

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
293 wizyt
pytanie zadane 8 lutego 2020 w HTML i CSS przez Arecky81 Nowicjusz (120 p.)

Wiem, że było już założonych kilka takich wątków, ale proszę o pomoc, bo jakoś nie mogę dojść dlaczego ten tile 5 nie chce przejść na drugą stronę (prawą). HTML odc. 3

<!DOCTYPE html>

<hmtl lang="pl"/>

<head>
	<meta charset="utf-8"/>
	<title>Jan Kowalski - Moje portfolio</title>
	<meta name="description" content="Portfolio nowego webmastera wykonane techniką kafelkową"/>
	<meta name="keywords" content="css, hmtl, portfolio, Marcin, Kowalski, zegar, strona, www"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
	<meta name="author" content="Plastikon"/>
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:800&display=swap" rel="stylesheet"/>
</head>

<body>

<div id="container">

	<div class="rectangle">
		<div id="name">Marcin Kowalski</div>
		<div id="clock">12:00:00</div>
		<div class="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">yt</div>
	</div>	

	<div class="rectangle"></div>

</div>	

</body>

</hmtl>

CSS

body
{
	background-color: #2F4F4F;
	color: white;
}

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

#name
{
	float: left;
	font-family: 'Open Sans', sans-serif;
	font-size: 60px;
	width: 600px;
}

#clock
{
	float: left;
	font-family: 'Open Sans', sans-serif;
	font-size: 60px;
}

#footer
{
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	text-align: center;
}

.rectangle
{
	width: 980px;
	margin: 10px;
}

.square
{
	width: 50%;
	margin: 10px;
	float: left;
}

.tile1
{
	width: 240px;
	height: 148px;
	margin: 5px;
	background-color: #3CB371;
	float: left;
}

.tile2
{
	width: 240px;
	height: 148px;
	margin: 5px;
	background-color: #2E8B57;
	float: left;
}

.tile3
{
	width: 240px;
	height: 148px;
	margin: 5px;
	background-color: #66CDAA;
	float: left;
}

.tile4
{
	width: 490px;
	height: 148px;
	margin: 5px;
	background-color: #20B2AA;
}

.tile5
{
	width: 490px;
	height: 286px;
	margin: 5px;
	background-color: #3CB371;
}

.yt
{
	width: 111px;
	margin: 5px;
	height: 148;
	background-color: #66CDAA;
}

 

1 odpowiedź

+2 głosów
odpowiedź 8 lutego 2020 przez Gamin Użytkownik (780 p.)
.square
{
    width: 50%;
    margin: 10px;
    float: left;
}

W pliku CSS w square usuń margin: 10px, powinno pomóc ;)

komentarz 8 lutego 2020 przez Arecky81 Nowicjusz (120 p.)
i faktycznie pomogło ;) Dzięki. Pytanie jeszcze tylko, jakie to miało znaczenie jeśli mógłbyś opisać. Prawdopodobnie chodziło o to, że się po prostu ten square tam nie mieścił, czy tak?!
komentarz 8 lutego 2020 przez Gamin Użytkownik (780 p.)
edycja 8 lutego 2020 przez Gamin
Dokładnie. W divie o szerokości bodajże 490px (square) chciałeś wcisnąć inny o tej szerokości (tile 5), ale w tym pierwszym 10px marginesu z lewej i prawej strony to uniemożliwiło. Powodzenia w dalszym kodowaniu. Pozdrawiam
komentarz 8 lutego 2020 przez SzkolnyAdmin Szeryf (89,030 p.)
Zainteresuj się technologiami FlexBox i GridBox, a wszystkie problemy z marginesami i divami, które "nie chcą" wejść na właściwe miejsce znikną. Opływanie (float) jako technologia konstrukcji układu strony to już przeżytek. Jako ćwiczenie przerób stronę w tych technologiach. Zobaczysz różnicę.

Podobne pytania

0 głosów
2 odpowiedzi 489 wizyt
0 głosów
1 odpowiedź 150 wizyt
0 głosów
2 odpowiedzi 606 wizyt
pytanie zadane 26 marca 2020 w HTML i CSS przez Moziu Początkujący (390 p.)

93,187 zapytań

142,201 odpowiedzi

322,012 komentarzy

62,514 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2127p. - dia-Chann
  2. 2092p. - Łukasz Piwowar
  3. 2079p. - Łukasz Eckert
  4. 2037p. - Tomasz Bielak
  5. 2006p. - Michal Drewniak
  6. 2006p. - rucin93
  7. 2005p. - Łukasz Siedlecki
  8. 1964p. - CC PL
  9. 1946p. - Adrian Wieprzkowicz
  10. 1901p. - Mikbac
  11. 1744p. - rafalszastok
  12. 1734p. - Anonim 3619784
  13. 1586p. - Dawid128
  14. 1520p. - Marcin Putra
  15. 1480p. - ssynowiec
Szczegóły i pełne wyniki

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...