Dlaczegoten kafelek 5 (szary na dole) nie chce przejść na prawo na górę, tak jak na filmiku ,,Kurs HTML odc.3"???

Pokaż 6 poprzednich komentarzy

komentarz 14 lipca 2015 przez Buby Pasjonat (19,590 p.)
edycja 14 lipca 2015 przez Buby

A gdy dodasz tą wartość także w tile4? I po tile5 pusty div z clear: both;

Poza tym masz błąd w css - klasa rectangle jest zdefiniowana błędnymi nawiasami - nie używa się kwadratowych, tylko klamrowe. Być może to powoduje błąd.

komentarz 14 lipca 2015 przez joker Nałogowiec (31,150 p.)

CSS:

...

.rectangle
{
width: 100%;
margin: 20px;
}

...

oraz dopisz float: left; do tile5

HTML:

...

...

komentarz 15 lipca 2015 przez tede774 Bywalec (2,650 p.)
edycja 15 lipca 2015 przez tede774

<div style="square">       Nie "style" tylko "class" ;-) ale to nie wszystko...
    <div class="tile5">5</div>
    </div>
      <div style="clear: both;"></div>

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

  </div>

Nie wiem po co dajesz "title 5" w osobny div "square". Chyba lepiej podać tak jak w poniższym kodzie. Moim zdaniem to powinno działać:

....

....

W CSS popraw oczywiście klamerki tak jak kolega powyżej Ciebie upomniał. Możnaby zrobić chyba też tak, że każdy div z title posiada swoje id "title1", "title2" itd. oraz każdy posiada wpólną klasę "title" czyli np. dla pierwszego by było

Dlaczego tak? Ponieważ dla każdego elementu w klasie title ustawiasz takie same wymiary, marginesy, paddingi itp., a dla poszczególnych id tylko kolor tła... Mi osobiście takie coś wydaje się być bardziej czytelnym zapisem, aczkolwiek twój sposób nie jest błędem i to co piszę jest tylko sugestią.

css wyglądałby tak:

.title
{
  margin: 10px;
  width: 230px;
  height: 142px;
  float: left;
}

#tile1
{
background-color: #3095d3;
}

#title2

itd...

Pozdrawiam :)

komentarz 15 lipca 2015 przez SG Nowicjusz (120 p.)

dzięki za pomoc udało się :) :) :)

komentarz 11 grudnia 2016 przez Codexter Użytkownik (990 p.)

Jeśli kafelek 5 miałby znaleźć się w drugiem "square", to kod HTML powinien wyglądać tak:

<!DOCTYPE HTML>
<html lang = "pl">
<head>
	<meta charset = "utf8"/>
	<title>Jan Kowalski - portfolio</title>
	<meta name = "description" content = "Stworzę  dla Ciebie wyjątkową stronę www!"/>
	<meta name = "keywords" content = "zamów, stronę, tworzenie stron"/>
	<meta http-equiv = "X-UA-Compatibile" 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&amp;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 class = "tile2">2</div>
			<div class = "tile3">3</div>
			<div style = "clear:both;"></div>
			
			<div class = "tile4">4</div>
		
		</div> <!-- TUTAJ KOŃCZY SIĘ DIV "SQUARE", wcześniej drugi DIV "SQUARE" zawierał się w pierwszym DIVie SQUARE, dlatego był wyświetlony pod TILE4 zamiast być przeniesionym na prawo [float: left;]  -->
		
		<div class = "square">
			
			<div class = "tile5">5</div>
			
		</div>
		
			<div style = "clear:both;"></div>
		
			<div class="rectangle"></div>
	</div>
	
	
</body>
</html>