Gdzie popełniłem błąd? #html #css

pytanie zadane 27 lutego 2017 w HTML i CSS przez Shadox Nowicjusz (140 p.)
edycja 27 lutego 2017 przez HaKIM

Witam, jestem w trakcie pisania swojej strony, na ten moment robię layout lecz napotkałem problem z którym walczę od wczoraj i nie potrafię sobie z nim poradzić, załącze pliki index.php oraz style.css w których ten błąd wystąpił, bardzo proszę o pomoc :) Mianowicie kafelki układają się w nie taki sposób jaki planowałem.

Tutaj zamieszczam jaki był plan a co mi wyszło:

http://imgur.com/a/KwTJq

Tutaj zawartość moich plików-

HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Visca el Barca</title>
        <meta name="description" content="Sklep internetowy - Cule" />
        <meta name="keywords" content="kup,sprzedaj,sklep internetowy,online shop,shop,online,shop center,sklep,internet,gry" />
        <link rel="stylesheet" href="css/style.css" type"text/css" />
        <link href='http://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
 
    <div id="caly_blok">
        <div id="naglowek">
            <div id="logo">Visca el Barca</div>
            <div id="zegar">12:00:00</div>
            <div style="clear: both;"></div>
        </div>
 
        <div id="lewy">
                <a href="oferta-tworzenie" class="tilelinkhtml5">
                <div class="tile1">        
                <i class="icon-laptop"></i><br />Test1
                </div>
                </a>
                <a href="oferta-tworzenie-stron-www" class="tilelinkhtml5">
                <div class="tile1">
                <i class="icon-laptop"></i><br />Test2
                </div>
                </a>           
                <a href="oferta-tworzenie-stron-www" class="tilelinkhtml5">
                <div class="tile1">
                <i class="icon-laptop"></i><br />Test3
                </div>
                </a>
                <div style="clear:both;"></div>
        </div>
 
        <div id="srodek">
                <a href="kim-jestem" class="tilelinkhtml5">
                <div class="tile2">
                <i class="icon-user"></i><br />Kim jestem?
                </div>
                </a>
                <div style="clear:both;"></div>
        </div>
 
        <div id="prawy">
                <a href="oferta-tworzenie-stron-www" class="tilelinkhtml5">
                <div class="tile3">
                <i class="icon-laptop"></i><br />Test4
                </div>
                </a>
                <a href="oferta-tworzenie-stron-www" class="tilelinkhtml5">
                <div class="tile3">
                <i class="icon-laptop"></i><br />Test5
                </div>
                </a>
                <a href="oferta-tworzenie-stron-www" class="tilelinkhtml5">
                <div class="tile4">
                <i class="icon-laptop"></i><br />Test6
                </div>
                </a>
                <div style="clear:both;"></div>
        </div>
 
        <div id="naglowek">2017 Visca el Barca &copy; Wszystkie prawa zastrzeżone!</div>
    </div>
 
 
 
</body>
</html>

CSS:

body
{
background-color:#303030;
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
}
 
#caly_blok
{
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align:center;
}
 
#naglowek
{
width: 960px;
margin: 20px;
text-align: center;
}
 
#lewy
{
    width:150px;
    float: left;
}
 
#srodek
 {
    width:540px;
    text-align:center;
    float: center;
}
 
#prawy
{
    width:150px;
    float: right;
}
 
#stopka
{
    width:960px;
    margin:20px;
    text-align:center;
}
 
#logo
{
    float: left;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70px;
    width: 600px;
    text-align: left;
}
 
#zegar
{
    float: right;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70px;
    text-align: center;;
}
 
.tile1
{
    margin: 10px;
    width: 150px;
    height: 80px;
    background-color: #3095d3;
    float: left;
    text-align: center;
}
 
.tile2
{
    margin: 10px;
    width: 540px;
    height: 500px;
    background-color: #666666;
    float: left;
    text-align: center;
}
 
.tile3
{
    margin: 10px;
    width: 150px;
    height: 80px;
    background-color: #3095d3;
    float: left;
    text-align: center;
}

komentarz 27 lutego 2017 przez Boshi VIP (100,240 p.)

to nie problem php

pokolorwałbyś chociaż składnię css i html.

komentarz 27 lutego 2017 przez Shadox Nowicjusz (140 p.)

nie za bardzo rozumiem :)

komentarz 27 lutego 2017 przez HaKIM Szeryf (87,590 p.)

Problem dotyczy HTML/CSS, PHP nie ma nic do designu (Przynajmniej nie powinien).

Co do kolorowej składni: Nie ustawiłeś pliku jako format php w pastebin.

komentarz 27 lutego 2017 przez Shadox Nowicjusz (140 p.)

A wiesz może jak mógłbym dojść do zamierzonego efektu i gdzie popełniłem błąd?

komentarz 27 lutego 2017 przez HaKIM Szeryf (87,590 p.)

Dodatkowo, kod wrzucaj w bloczki, przeznaczne do tego. Kategorię zalecam ustawić na programowanie -> język - którego problem dotyczy,

Użytkownicy będą mogli szybciej Ci pomóc gdy kod wstawisz w odpowiednie temu bloczki. Przeczytaj FAQ.

komentarz 27 lutego 2017 przez Shadox Nowicjusz (140 p.)

Okej, już poprawiam :) Dzięki wielkie!

komentarz 27 lutego 2017 przez HaKIM Szeryf (87,590 p.)

Już wszystko zrobiłem. Po prostu przeczytaj FAQ, będę wdzięczny.

komentarz 27 lutego 2017 przez Shadox Nowicjusz (140 p.)

Okej, przepraszam za kłopot :)

2 odpowiedzi

odpowiedź 28 lutego 2017 przez pablop76 VIP (123,180 p.)

odpowiedź 27 lutego 2017 przez Kornelia Kobiela Nałogowiec (33,340 p.)

Hej, twój problem leży w css. Po pierwsze nie ma czegoś takiego jak:

float: center;

Jeśli nie jesteś pewien jakiejś właściwości, to patrz u źródeł, czyli w dokumentacji. Poza tym przeczytaj dokładnie, na czym polega float, bo jest tam kilka pułapek. Wiem, że przyszedłeś z konkretnym problemem, ale jeśli mogę ci sprzedać kilka rad odnośnie html/css. Jeśli nie, po prostu nie czytaj tekstu poniżej.

Float jest passe, a poza tym jak mówiłam, trzeba go dobrze zrozumieć. Dużo łatwiej jest używać obecnie modnego flexa.
Nie styluj po Id, od tego są klasy. Nawet jeśli jest tylko jeden element.
Moja ostatnia rada - naucz się semantyki html5.

I jeśli tu dotarłeś, to masz w jakimś stopniu fixnięte https://codepen.io/anon/pen/JWdVYv