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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
150 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ź 293 wizyt
pytanie zadane 8 lutego 2020 w HTML i CSS przez Arecky81 Nowicjusz (120 p.)
0 głosów
1 odpowiedź 1,534 wizyt
0 głosów
1 odpowiedź 755 wizyt

93,187 zapytań

142,203 odpowiedzi

322,022 komentarzy

62,513 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2345p. - dia-Chann
  2. 2306p. - Łukasz Piwowar
  3. 2295p. - Łukasz Eckert
  4. 2282p. - CC PL
  5. 2252p. - Tomasz Bielak
  6. 2219p. - Łukasz Siedlecki
  7. 2215p. - rucin93
  8. 2201p. - Michal Drewniak
  9. 2156p. - Marcin Putra
  10. 2152p. - Adrian Wieprzkowicz
  11. 2105p. - Mikbac
  12. 1941p. - Anonim 3619784
  13. 1733p. - rafalszastok
  14. 1480p. - Michał Telesz
  15. 1469p. - 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!

...