float: left nie wczytuje się!

pytanie zadane 11 sierpnia 2016 w HTML i CSS przez Mateusz Bogumił Obywatel (1,380 p.)
edycja 11 sierpnia 2016 przez Mateusz Bogumił

Witam! Mam kolejny problem tym razem z float: left; zdaję sobie sprawe, że było wiele takich tematów, ale one mi nie pomogły. Po prostu divy zamiast byc obok siebie są pod sobą.

<!doctype HTML>
<html lang="pl">
<head>
 <meta charset="utf-8" />
 <title>SkirFace!</title>
 <meta name="description" content="SkirFace - Dowiedz się co słychać u Skirima!"/>
 <meta name="keywords" content="Portal, społeczność, Youtube, Skirim, Face, Twarz, SkirFace" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <meta name="author" content="Skirim Play/Mateusz Bogumił"/>
 <link rel="stylesheet" href="style.css" type="text/css"/>
 <link href='https://fonts.googleapis.com/css?family=Lato:400,100|Josefin+Sans:400,100&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
 </head>
 
 <body>
   
    <div id="container">
   
        <div class="rectangle">
		    <div id="logo">Skirim Play</div>
            <div id="zegar">12:00:00</div>
            <div style="clear: both;"></div>
        </div>
       
        <div class="square">
       
        </div>
        <div class="square">
       
        <div style="clear: both">
       
        </div>
       
        <div class="rectangle">

        </div>
    </div>
    </div>
   
   
 </body>
 </html>

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: 50%;
	float: left;
}

#logo
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	width: 600px;
}

#zegar
{
    float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
}

komentarz 11 sierpnia 2016 przez Vento Pasjonat (17,120 p.)

Dodaj HTML..

komentarz 11 sierpnia 2016 przez Mateusz Bogumił Obywatel (1,380 p.)

Dodałem.

komentarz 11 sierpnia 2016 przez Vento Pasjonat (17,120 p.)

Tutaj wszystko jest ok. Chyba, że chodzi o coś innego..

http://codepen.io/thevento/pen/wWRyjm

Zobacz czy na 100% masz dobrze podpięty plik stylów.

komentarz 11 sierpnia 2016 przez Mateusz Bogumił Obywatel (1,380 p.)

Raczej mam dobrze.Znaczy ja zrobiłem tak jak na filmiku to podpięcie wyglądało w sposób wpisania takiej linijki

<link rel="stylesheet" href="style.css" type="text/css"/>

komentarz 11 sierpnia 2016 przez Vento Pasjonat (17,120 p.)

A plik style.css masz w tym samym katalogu co index?

komentarz 11 sierpnia 2016 przez Mateusz Bogumił Obywatel (1,380 p.)

Tak

2 odpowiedzi

odpowiedź 11 sierpnia 2016 przez Comandeer Guru (601,590 p.)

Chyba wystarczy tylko Css

Nie, nie wystarczy, bo jak chcę zobaczyć przykład na żywo, to mam problem.

Nawet nie wiadomo, o jakie divy chodzi.

komentarz 11 sierpnia 2016 przez Mateusz Bogumił Obywatel (1,380 p.)

Dodałem

komentarz 11 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

Dodałem

No ale nie wskazałeś o które divy się rozchodzi ;-; Jeżeli o #zegar i #logo to po wklejeniu kodu na codepen'a wszystko wygląda normalnie (te dwa divy są obok siebie).

komentarz 11 sierpnia 2016 przez Mateusz Bogumił Obywatel (1,380 p.)

Chodzi mi właśnie o te divy. To nwm ja mam zle ustawione.

odpowiedź 11 sierpnia 2016 przez niezalogowany
edycja 11 sierpnia 2016

Jak masz style.css i index.html w jednym folderze to to zadziała. Prawdopodobnie schowałeś pliki .css do folderu "css" w folderze "website". W takim przypadku musisz zmienić ścieżkę do pliku css na:

<link rel="stylesheet" href="css/style.css"> <!-- zawrzyj po prostu ścieżkę do pliku -->

Atrybut "type" od dłuższego czasu jest niepotrzebny więc stosowanie go jest niewskazane.

EDIT: meta tag keywords też już nic nie wnosi i możesz się go usunąć.

komentarz 11 sierpnia 2016 przez Mateusz Bogumił Obywatel (1,380 p.)

Nope. To wygląda tak https://scr.hu/4nYD6k

komentarz 11 sierpnia 2016 przez uMAXa Gaduła (4,290 p.)

Podaj cały kod html i css

komentarz 11 sierpnia 2016 przez niezalogowany

Masz tu codepen w którym wszystko działa jak należy tylko kod troszkę uporządkowałem i dodałem kolorki by potwierdzić że działa. Te div'y nie nachodzą na siebie tylko jeden jest tuż obok drugiego, bo oba mają "float: left;".

komentarz 11 sierpnia 2016 przez Mateusz Bogumił Obywatel (1,380 p.)

Nie rozumiem. One nie są obok siebie właśnie tylko pod sobą, a bym chciał obok siebie. Na tym Codepenie jest tak jak chce, ale u mnie normalnie jest inacze

komentarz 11 sierpnia 2016 przez niezalogowany

copy-paste my code ;) przy tak małych bugach może to być cokolwiek a stracisz na szukanie więcej czasu niż korzyści Ci to przyniesie. Jak rozumiesz co napisałem na codepen'ie i jest to klarowne - skopiuj bo masz praktycznie to samo

Cieszę się że mogłem pomóc

komentarz 11 sierpnia 2016 przez Mateusz Bogumił Obywatel (1,380 p.)

Dzięki kolego! :) Zastanawiam się jeszcze tylko czy te tagi co miałem i wgl (to co na poczatku kursu HTML kodowal Mirosław Zelent) nie powinny się w tym kodzie znajdować.

komentarz 11 sierpnia 2016 przez niezalogowany

To co napisałem w poście jest do wyrzucenia. Musisz pamiętać, że materiały Pana Mirosława mogą już nie być aktualne, bo w programowaniu sieciowym dość dużo (i szybko) się zmienia. W kodzie możesz je wkleić, tylko nie ma to najmniejszego sensu ;)