Pytanie dotyczy ułożenia pozycji kafelka w odpowiednim miejscu podczas pisania strony w html.

pytanie zadane 6 maja 2017 w HTML i CSS przez Vistim Nowicjusz (120 p.)
zmienione kategorie 6 maja 2017 przez Arkadiusz Waluk

Witam.

Chciałbym odnieść się do filmu na YT pt.: Kurs html cz.3, próbowałem stworzyć podobną stronę krok po kroku wedle instrukcji z filmu, lecz niestety w pewnym momencie się zatrzymałem i nie potrafię rozwiązać problemu. Chodzi o to, że chciałbym aby kafelek nr 5 znajdował się pod zegarem, niestety nie mogę znaleźć problemu w kodzie. Wszystko pokazane jest w obrazie. Podeślę również kod, może komuś uda się znaleźć błąd. Dziękuje serdecznie i pozdrawiam.

komentarz 6 maja 2017 przez criss Mędrzec (172,590 p.)

Zdecydowanie nie ta kategoria :) Zmień na HTML i CSS.

komentarz 6 maja 2017 przez Arkadiusz Waluk Ekspert (287,950 p.)

I zdecydowanie nie przeczytałeś, że kod na forum wstawiamy jako tekst, w przeznaczone do tego bloczki. Łatwiej wtedy pomóc, np. testować u siebie - nikt nie będzie tego przepisywał ze screena.

komentarz 6 maja 2017 przez Vistim Nowicjusz (120 p.)

<!DOCTYPE HTML>
<html lang="pl">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  
  <title> Mateusz Grabowski - Portfolio</title>
  
  <meta name="description" content="Nie mam pojęcia gdzie jest błąd."/>
  <meta name="keywords" content="błąd,kod" />

  <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">Mateusz Grabowski</div>
	   <div id="zegar">12:00:00</div>
	   <div style="clear: both;"></div>
	   
	 </div> 
	   
	 <div class="square"></div>
	   <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>
	 <div style="clear: both;"></div>
	 
	 <div class="rectangle"></div>
	
   </div>	
</body>
</html>

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: 50%;
   float: left;
}

#logo
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	width: 600px;
	margin-top: 10px;
	margin-bottom: 10px;

}
 
#zegar
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	margin-top: 10px;
	margin-bottom: 10px;

	

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

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

1 odpowiedź

odpowiedź 6 maja 2017 przez Mateusz Patalan Bywalec (2,140 p.)

Mógłbyś dać kod, normalnie(tzn. nie na zdjęciach)? Ja na razie, spróbowałbym zmienić szerokość square, na px. Może zadziała.

komentarz 6 maja 2017 przez Vistim Nowicjusz (120 p.)
edycja 6 maja 2017 przez Arkadiusz Waluk

<!DOCTYPE HTML>
<html lang="pl">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
  <title> Mateusz Grabowski - Portfolio</title>
 
  <meta name="description" content="Nie mam pojęcia gdzie jest błąd."/>
  <meta name="keywords" content="błąd,kod" />

  <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">Mateusz Grabowski</div>
       <div id="zegar">12:00:00</div>
       <div style="clear: both;"></div>
       
     </div>
       
     <div class="square"></div>
       <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>
     <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: 50%;
   float: left;
}

#logo
{
    float: left;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70px;
    width: 600px;
    margin-top: 10px;
    margin-bottom: 10px;

}
 
#zegar
{
    float: left;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70px;
    margin-top: 10px;
    margin-bottom: 10px;

    

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

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

komentarz 6 maja 2017 przez Shaoi Mądrala (7,020 p.)
przeniesione 8 maja 2017 przez Shaoi

<div class="square"></div>

Ten tag jest pusty, przez co źle Ci się układa. Usuń </div> z kodu wyżej i będzie działać.

komentarz 6 maja 2017 przez Mateusz Patalan Bywalec (2,140 p.)

Ok. Nie domknąłeś diva square(tego pierwszego). Tak więc z jakiegoś powodu drugi, "ulotnił" się z container.

Widzę że jesteś tu nowy. Spoko, nic strasznego. Zapamiętaj że kod dodajemy, klikając

[....]

code

A poprawiony kod wygląda tak:

<!DOCTYPE HTML>
<html lang="pl">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
  <title> Mateusz Grabowski - Portfolio</title>
 
  <meta name="description" content="Nie mam pojęcia gdzie jest błąd."/>
  <meta name="keywords" content="błąd,kod" />

  <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">Mateusz Grabowski</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">5</div>
     </div>
     <div style="clear: both;"></div>
    
 </div>
     
     
</body>
</html>