Nie wyśrodkowana stopka CSS

pytanie zadane 19 października 2016 w HTML i CSS przez Nowicjusz89 Obywatel (1,050 p.)

Witam,siedzę godzinę i nie widzę może ktoś zauważy szybciej.

Stopka jest nie wyśrodkowana,logo łapie center a stopkę nie.

Lecę z psem się przewietrzyć,wrócę może będzie odpowiedź albo znajdę szybciej.

Kod niżej.

HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>Jan Kowalski - Porfolio</title>

	<meta name="description" content="Stworzę dla Ciebie wyjątkowo stronę.Zatrudnij programistę webowego." />
	<meta name="keywords" content="zamów stronę,tworzenie www,programista,portfolio" />
	
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>

	<div id="container" >

	<div class="rectangle">
		<div id="logo">Jan Kowalski </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 class="yt">yt</div>
		<div class="fb">fb</div>
		<div class="gplus">gplus</div>
		<div class="tw">tw</div>
		<div style="clear:both;"></div>
	</div>
		<div style="clear:both;"></div>

	<div class="rectangle">2015 &copy; Jan Kowalski - Porfolio.Programista webowy zaprasza 
		do współpracy! jan.kowalski@adres.com </div>

	</div>	

</body>
</html>

CSS:

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;
	text-align: center;
}

.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;
}

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

.tile5
{
	margin: 10px;
	width: 480px;
	height: 304px;
	background-color: #666666;
	float: left;
}

.yt
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
}
.fb
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #4668b3;
	float: left;
}

.gplus
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d95333;
	float: left;
}

.tw
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #3095d3;
	float: left;
}

1 odpowiedź

odpowiedź 19 października 2016 przez HaKIM Szeryf (87,590 p.)

Dodaj po ludzku kolejną klasę o nazwie footer i z głowy.

<div class="footer">2015 &copy; Jan Kowalski - Porfolio.Programista webowy zaprasza 
do wsppracy! jan.kowalski@adres.com </div>

.footer{
  margin: 0 auto;
  width: 960px;
  height: 70px;
  text-align: center;
}

Poza tym:

~ http://tutorials.comandeer.pl/html5-blog.html

komentarz 19 października 2016 przez Nowicjusz89 Obywatel (1,050 p.)

Tak to ja wiem jak zrobić.Chce znaleźć błąd.

Górny .rectangle można wycentrować a dolny nie ? Dlaczego?

M.Zelent w filmiku na tym samym kodzie 33:45 s wychodzi mu dobrze widzicie?

komentarz 19 października 2016 przez HaKIM Szeryf (87,590 p.)

Błędem można nazwać to, że próbuje się wystylizować footer klasą, która została zaprojektowana dla innego elementu strony. Przynajmniej w moim odczuciu jest to błąd, a raczej nieporozumienie.

Jak już chcesz na siłę szukać bugów, to zważ, że po usunięciu witdh z rectangle, footer zaczyna „działać”.

Jest to jakiś początek.

Ja idę spać, w razie innych pytań, nie spodziewaj się odpowiedzi ode mnie, przynajmniej do jutra. Co innego z innymi użytkownikami forum. :p

Miłego i powodzenia.

1	komentarz 19 października 2016 przez pablop76 VIP (123,180 p.) </div> w 45 linijka html usuń :)

komentarz 19 października 2016 przez Nowicjusz89 Obywatel (1,050 p.)

Dzięki za pomoc nakierowałeś,ale liczę ,że ktoś mi to jeszcze wytłumaczy dlaczego na filmiku Kurs HTML odc.3 M.Zelenta to chodzi a mi nie chodzi? Czy mam jakiś błąd zrobiony?? Lece dalej z tematem.Ciekaw jestem.Pozdro

1	komentarz 19 października 2016 przez pablop76 VIP (123,180 p.) zamknąłeś <div class="square"></div> linijka 26 nie potrzebnie. On ma zamknięcie w linijce 45 I to jest twój błąd. reszta ok. TERAZ MASZ ODPOWIEDŹ.