Przerabiam właśnie kurs Pana Zelenta, jestem na trzecim odcinku (nie cały skończony), robie własne portfolio. Mój kłopot polega na tym, że mimo iż w kodzie HTML i CSS mam zapisany container, którego przeglądarka (chrome) nie czyta, przez co strona się nie wyśrodkowuje. Nie mogłem znaleźć samodzielnie błędu, ani nigdzie w internecie nie znalazłem nic, co by mi pomogło (poza pytaniem na tym forum, ale sprawdzałem i nie widzę nigdzie nadmiarowej spacji). W CSS container wygląda dokładnie jak na filmie (zastosowałem tylko inną czcionke, niż na filmie, co widać w body):
body
{
background-color: #303030;
color: #ffffff;
font-family: 'Courgette', cursive;
font-size: 25px;
}
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.rectangle
{
width: 960px;
margin: 20px;
text-align: center;
}
.square
{
width: 50%;
float: left;
}
#logo
{
float: left;
font-family: 'Courgette', cursive;
font-size: 70px;
width: 600px;
text-align: left;
}
#zegar
{
float: left;
font-family: 'Courgette', cursive;
font-size: 70px;
text-align: left;
}
.tile1
{
text-align: center;
margin: 10px;
width: 230px;
height: 142px;
background-color: #3095d3;
float: left;
}
.tile2
{
text-align: center;
margin: 10px;
width: 230px;
height: 142px;
background-color: #666666;
float: left;
}
.tile3
{
text-align: center;
margin: 10px;
width: 230px;
height: 142px;
background-color: #93c748;
float: left;
}
.tile4
{
text-align: center;
border: 20px solid #ee5a32;
margin: 10px;
text-align: center;
width: 440px;
height: 142px;
background-color: #ee5a32;
}
.tile5
{
text-align: center;
border: 20px solid #666666;
margin: 10px;
width: 480px;
height: 304px;
background-color: #666666;
}
.github
{
text-align: center;
margin: 10px;
width: 160px;
height: 142px;
background-color: #24292e;
float: left;
}
.fb
{
text-align: center;
margin: 10px;
width: 160px;
height: 142px;
background-color: #4668b3;
float: left;
}
.mail
{
text-align: center;
margin: 10px;
width: 160px;
height: 142px;
background-color: #fbbc05;
float: left;
}
HTML:
<!DOCTYPE HTML> <!-- deklaracja, ze pracujemy na HTML 5 -->
<html lang ="pl"> <!-- deklaracja, ze strona jest w jezyku polskim -->
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/fontello.css" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
<meta charset="utf-8"/> <!-- System kodowania znakow, aktualnie najpopularniejszy utf-8 -->
<title>Łukasz Halicki - Portfolio</title> <!-- Tytul widoczny na karcie -->
<meta name="description" content =" To moje portfolio, które pokazuje jakie strony potrafie tworzyć. Ogólnie, uczę się HTML, CSS, JavaScript, C++ i Pythona" /> <!-- opis widoczny w wyszukiwarce -->
<meta name="keywords" content="html, front-end, nauka, portfolio, css, cpp, c++, python, javascript" /> <!-- tagi, dla pozycjonowania w wyszukiwarce -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1 /> <!-- XD zeby na IE stronka dzialala tak jak na innych przegladarkach -->
<body>
<div id="container">
<div class="rectangle">
<div id="logo">Łukasz Halicki</div>
<div id="zegar">21:37:15</div>
<div style="clear: both;"> </div>
</div>
<div class="square">
<div class="tile1"><i class="icon-user"></i> <br /> Kim jestem?</div>
<div class="tile1"><i class="icon-laptop"></i><br /> Co potrafię?</div>
<div style="clear: both;"></div>
<div class="tile2"><i class="icon-graduation-cap"></i> <br /> Moje CV</div>
<div class="tile3"><i class="icon-mail-alt"></i> <br /> Kontakt</div>
<div style="clear: both;"></div>
<div class="tile4">Talk is cheap. Show me the code! <br/>
- Linus Torvalds, twórca Linuxa</div>
</div>
<div class="square">
<div class="tile5">Kilka słów o mnie. blbelbelebleblebleb lebleblebleblebleblebl ebleblebleblbelbelbelbebleble blebleb kiedyś tu coś ciekawego będzie. </div>
<div class="github"><i class="icon-github-circled"></i></div>
<div class="fb"><i class="icon-facebook"></i></div>
<div class="mail"><i class="icon-mail"></i></div>
<div style="clear: both;"> </div>
</div>
<div class="rectangle">2020 © Łukasz Halicki - Portfolio.</div>
</div>
</body>
</html>
Co robie nie tak? dlaczego przeglądarka ignoruje diva z containerem? W jaki sposób mogę to poprawić?
