Wyśrodkowanie diva względem całej strony

pytanie zadane 3 maja 2018 w HTML i CSS przez kubusop Początkujący (420 p.)
edycja 3 maja 2018 przez kubusop

Witam. Oglądając kursy HTML p.Mirosława i postępując wg filmiku tworzył identyczną stronę i w trakcie zauważyłem, że moja strona jest "przyklejona" w górze, a na filmiku wszystko ładnie wyrównane do środeczka oraz ten div z filmiku jest większy. Jaka jest tego przyczyna? Podejrzewam kod CSS.

Oto on:

body
{
background-color: #383838;
color: white;
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
{
	float:left;
	width:50%;
} 

#logo
{
	float:left;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size:70px;
	width:600px;
	margin-top:10px;
	margin-bottom:10px;
	text-align:left;
}

#zegar
{
	float:left;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size:70px;
	margin-top:10px;
	margin-bottom:10px;
	text-align:left;
}


.tile1
{
	float:left;
	margin:10px;
	width:230px;
	height:142px;
	background-color:#3095d3;
	text-align:center;
}

.tile2
{
	float:left;
	margin:10px;
	width:230px;
	height:142px;
	background-color:#666666;
	text-align:center;
}

.tile3
{
	float:left;
	margin:10px;
	width:230px;
	height:142px;
	background-color:#93c748;
	text-align:center;
}

.tile4
{
	margin:10px; 
	width:420px;
	height:82px;
	background-color: #ee5a32;
	text-align:center;
	font-size:26px;
	padding:30px;
	line-height:150%;
}

.tile5
{
	margin: 10px; 
	width: 480px;
	height: 304px;
	background-color: #666666;
	text-align:center;
	}

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

.fb
{
	float:left;
	margin:10px;
	width:105px;
	height:142px;
	background-color:#3b5998;
}

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


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

HTML:

<!DOCTYPE HTML>
<html lang="pl">

<head>
		<meta charset="utf-8"/>
		<meta http-equic="X-UA-Compatible" content="IE-edge,chrome=1"/>
		<title>Jan Kowalski-Portfolio</title>
		<meta name="description" content="Jan Kowalski-Portfolio"/>
		<meta name="keyword" content="portfolio"/>
		<link rel="stylesheet" href="style.css"  type="text/css"/>
		<link rel="stylesheet" href="css/fontello.css"  type="text/css"/>
		<link href="https://fonts.googleapis.com/css?family=Lato|Yanone+Kaffeesatz:400,700&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">
				<i  class="icon-user"></i><br/>
				Kim jestem?
		</div>	
		<div class="tile1">
			<i class="icon-laptop"></i> <br/>
			Co oferuję?
		</div>
		<div style="clear:both;"></div>
		
		<div class="tile2">
			<i class="icon-graduation-cap"></i><br/>
			Curriculum vitae
		</div>
		<div class="tile3">
			<i class="icon-handshake-o"></i><br/>
			Kontak ze mną
		</div>
		<div style="clear:both;"></div> 
		
		<div class="tile4">
			<i>Talk is cheap! Show me the code!</i><br/>
			Linus Torvalds, twórca Linuxa
		
		</div>
	</div>
	
	<div class="square">
		<div class="tile5">tile5</div>
	
		<div class="yt">
			<i class="icon icon-youtube"></i>
		</div>
		<div class="fb">
			<i class="icon-facebook"></i>
		</div>
		<div class="gplus">
			<i class="icon-gplus"></i>
		</div>
		<div class="tw">
			<i class="icon-twitter"></i>
		</div>
		
	<div style="clear:both;"></div>
	
	</div>
	
	<div style="clear:both;"></div>
	
	<div class="rectangle">2015 &copy; Jan Kowalski-Portfolio. Programista webowy zaprasza do współpracy! jan.kowalski@adres.com</div>
	
	
	
</div>


</body>



</html>

komentarz 3 maja 2018 przez BT101 Stary wyjadacz (12,540 p.)

Wklej jeszcze html

komentarz 3 maja 2018 przez kubusop Początkujący (420 p.)

Gotowe

1 odpowiedź

odpowiedź 3 maja 2018 przez BT101 Stary wyjadacz (12,540 p.)

Nie wiem jak rozwiązał to MZ pewnie dodał margin-top: kilkaset PIKSELI :D ale możesz użyć position absolute do #container i możesz wtedy wyrzucić też to margin-left: auto, margin-right: auto

#container
{
    width:1000px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Wtedy cały ten kontener będzie dokładnie na środku niezależnie od rozdzielczości ekranu użytkownika, który wchodzi na tę stronę.

Kilka uwag co do tego kodu:

Nie styluj po ID tylko po klasach
Używaj rem zamiast pikseli

komentarz 4 maja 2018 przez kubusop Początkujący (420 p.)
edycja 4 maja 2018 przez kubusop

Ok. Dzięki, ale nadal pozostaje kwestia wielkości.

Dla porównania:

Jestem w minucie(taki powinno mieć wygląd): 46:06 w tym kursie https://www.youtube.com/watch?v=5y3Qc9Qs6TY.

I sprawdziłem jeszcze jedno. Ze strony z kursami pana MZ ściągnąłem całą gotową stronę z tego odcinka i ona także jest u mnie przyklejone w górze.