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

3 ODC. HTML kafelek 5 nie chce przejść na prawą stronę PILNE !!!

HackNation - ogólnopolski hackathon
0 głosów
215 wizyt
pytanie zadane 24 kwietnia 2020 w HTML i CSS przez Memrus Nowicjusz (120 p.)

 

<DOCTYPE HTML>
<html>
<head>
<meta http-equiv"Content-Type" content="text/html; charset=utf-8">
<title>Chabówka</title>
<meta name="description" content="Chabówka jedno z najpiękniejszych miejsc naszej okolocy" />
<meta name="keywords" content="Chabówka,miejsca do zwiedzania,piękno przyrody,stok narciarski,stadion piłkarski,klub sportowy,KS Chabówka/>
<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/css?family=Josefin+Sans|Lato&display=swap" rel="stylesheet">
</head>

<body>
  <div id="container">
     
      <div class="rectangle">
         <div id="logo">Chabówka</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>
    <div class="tile5">5</div>
      

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



Mógłby ktoś znaleźć mój błąd bardzo proszę o pomoc.

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: 60%;
	float: left;
	
}
#logo
{
	float: left;
	font-family: font-family: 'Josefin Sans', sans-serif;
	font-size: 80px;
	width: 600px;
	margin-top: 10px;
	margin-bottom: 10px;
}
#zegar
{
	float: left;
	font-family: font-family: 'Josefin Sans', sans-serif;
	font-size: 80px;
	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 24 kwietnia 2020 przez Barbarossa Obywatel (1,650 p.)
Przelicz szerokości na nowo może gdzieś sie pomyliłeś w obliczeniach

1 odpowiedź

0 głosów
odpowiedź 24 kwietnia 2020 przez Rollczi Bywalec (2,400 p.)

Błąd znajduje się w klasie .square

(dwa divy po 60% to 120%)

lewa strona niech będzie miała klasę .square-left ,a prawa .square-right

.square-left
{
    width: 55%;
    float: left;
     
}
.square-right
{
    width: 45%;
    float: left;
}

width: i margin: powinieneś za mienić na wartości procentowe...

- w małych kwadratach

  1. margin: 2%;
  2. width: 46%;

- w dużych

  1. margin: 2%;
  2. width: 96%;

Popróbuj sobie wartości procentowych w innych divach (np, .rectangle #container). % dostosowują się do rozmiarów ekranów.

Podobne pytania

0 głosów
1 odpowiedź 435 wizyt
pytanie zadane 8 lutego 2020 w HTML i CSS przez Arecky81 Nowicjusz (120 p.)
0 głosów
1 odpowiedź 1,721 wizyt
0 głosów
1 odpowiedź 920 wizyt

93,626 zapytań

142,549 odpowiedzi

323,034 komentarzy

63,129 pasjonatów

Advent of Code 2025

Top 15 użytkowników

  1. 1452p. - dia-Chann
  2. 1437p. - DziarnowskiJ
  3. 1411p. - Łukasz Piwowar
  4. 1409p. - CC PL
  5. 1371p. - raydeal
  6. 1275p. - Maurycy W
  7. 1254p. - Adrian Wieprzkowicz
  8. 1219p. - robwarsz
  9. 1141p. - ssynowiec
  10. 1134p. - Tomasz Bielak
  11. 1116p. - rucin93
  12. 1100p. - Mariusz Fornal
  13. 885p. - Dominik Łempicki (kapitan)
  14. 847p. - Grzegorz Aleksander Klementowski
  15. 838p. - Wojciech Malicki
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

Kursy INF.02 i INF.03
...