Bardzo dziękuję za wszystkie cenne wskazówki. Pojawił się też link do validatora który świetnie znajduje błędy, wskazuje niedomknięte znaczniki itp. Super, bardzo przydatne. Dopiero dziś znalazłem trochę czasu aby usiąść nad tą stroną. Wydaję mi się że udało mi się uporządkować trochę ten kod. Główne zmiany:
- px zamiast % (uważam że % nie mają sensu jeśli strona nie jest responsywna, jeśli jestem w błędzie proszę o sprostowanie)
- lista ul w menu zamiast div-ów z float:left;
- img w sqarach wpakowałem jako background-image (wydaje mi się to najlepszym wyjściem biorąc pod uwagę że nie jestem grafikiem, a nie znam innej metody aby dostosować rozmiar img do rozmiaru div-a. Jeśli istnieje to proszę o info. Mam też problem z ustawieniem alt="" jeśli img jest tłem div-a).
- wyrzuciłem img z tekstem wrzucając inne i nakładając na nie widniejący na gołym tle tekst (strona dzięki temu wygląda po prostu atrakcyjniej).
-starałem się lepiej wykorzystać kaskadowość
Wrzucam kod po poprawkach, proszę jeszcze o ewentualne wskazówki
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Kalistenika ćwiczenia</title>
<meta name="description" content="Ćwiczenia bez sprzętu"/>
<meta name="keywords" content="Kalistenika, street workout, trening bez sprzętu, pompki, brzuszki, podciąganie"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Rambla:400,700,700i&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="logo"><img src="cali.png" alt="Logo"/></div>
<div id="menu">
<ul>
<a id="link1" href="#pushup" class="link"><li class="tile">Push ups</li></a>
<a id="link2" href="#pullup" class="link"><li class="tile">Pull ups</li></a>
<a id="link3" href="#squat" class="link"><li class="tile">Squats</li></a>
<a id="link4" href="#abs" class="link"><li class="tile">ABS</li></a>
<a id="link5" href="#cardio" class="link"><li class="tile">Cardio</li></a>
</ul>
<div style="clar:both"></div>
</div>
<div id="opis"><span style="color:#BBFA00">BELIEVE</span> YOU CAN!<br> YOU ARE HALFWAY THERE...
</div>
<div class="rectangle">
<div class="square"><span>Push-ups</span>
as a symbol of health and wellness, nothing surpasses the simple push-up. The push-up is the ultimate barometer of fitness. It tests the whole body, engaging muscle groups in the arms, chest, abdomen, hips and legs. It requires the body to be taut like a plank with toes and palms on the floor. The act of lifting and lowering one’s entire weight is taxing even for the very fit.</div>
<div class="square">
<div id="pushup"></div></div>
</div>
<div class="rectangle">
<div class="square">
<div id="pullup"></div></div>
<div class="square"><span>Pull-ups</span>
variations are the best exercise in my world.I have a lot of experiences in work out choices, pull ups and all the variations of them are without question the best exercise in the world. They are the core of my workout. If I were born again as a certain animal, I would be probably born as a monkey. That kind of movement seems very natural for me. But it can be very hard for some people.</div>
</div>
<div class="rectangle">
<div class="square"><span>Squats</span>
-every gym has that one guy who can throw three or four plates on either side of the barbell and squat it like a boss. We've all seen him and thought, "Good golly, what a friggin' badass!" Well, that guy can be you. Although it might seem like squats are reserved for bodybuilders, power-lifters and pro athletes, the truth is anyone can do them. In fact, everyone should do them (and do them properly and safely).</div>
<div class="square">
<div id="squat"></div></div></div>
<div class="rectangle">
<div class="square">
<div id="ABS"></div></div>
<div class="square"><span>ABS</span>
- are the main muscle group in the core, which is the mid section of the body. Abdominal muscles support the upper and lower body increasing muscle control in running, twisting and turning motions used in all sports and other athletic competitions. Athletes strengthen abs for explosive performance and to help prevent injury.</div></div>
<div class="rectangle">
<div class="square">
<span>Cardio</span>
- the line between indoor and outdoor exercise continues to blur, what’s becoming clear is that mixing up indoor and outdoor sessions is a great way to keep exercise exciting and, most importantly, fun.</div>
<div class="square">
<div id="cardio"></div></div>
</div>
<div id="footer">© Calistenic Unit 2016</div>
</div>
</body>
</html>
body
{background-color: #222222;
margin: 0;
font-family: 'Rambla', sans-serif;
}
#container
{
width: 1200px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: #555555;
margin-top: 0;
font-size: 32px;
}
#logo
{
padding-top: 25px;
margin-bottom: 55px;
}
#menu
{
background-color: #FF3700;
min-height: 30px;
font-weight: 700;
font-size: 25px;
color: #444444;
}
.link
{
text-decoration: none;
color: #333;
}
.tile:hover
{
background-color:#EE2600;
}
.tile
{
float: left;
width: 20%;
}
#opis
{
font-family: 'Amatic SC', cursive;
font-weight: 700;
font-size: 100px;
letter-spacing: 2px;
background-image: url(strong.png);
background-repeat: no-repeat;
background-position: center top;
height: 800px;
}
.square
{
width: 600px;
float: left;
height: 400px;
display: block;
}
.rectangle
{
clear:both;
}
#footer
{
clear:both;
color: #FFF;
min-height: 20px;
text-align: center;
background-color: #222222;
}
ul
{
list-style-type: none;
}
#pushup
{
background-image: url(pushup.png);
weight: 600px;
height: 400px;
display: block;
}
#pullup
{
background-image: url(pullup.png);
weight: 600px;
height: 400px;
display: block;
}
#squat
{
background-image: url(squat.png);
weight: 600px;
height: 400px;
display: block;
}
#ABS
{
background-image: url(abs.png);
weight: 600px;
height: 400px;
display: block;
}
#cardio
{
background-image: url(cardio.png);
weight: 600px;
height: 400px;
display: block;
}
span
{
color: #DD1500;
font-weight: 700;
}
