Ustawienia diva zawsze na środek ekranu

pytanie zadane 23 lutego 2017 w HTML i CSS przez Yorweth Obywatel (1,310 p.)

Czesc,

Przychodzę z problemem ustawienia diva na środku ekranu ( nawet po max oddaleniu przeglądarki ) tak jak tutaj http://eune.leagueoflegends.com/pl.

Zrobiłem na początek diva który ma 100% szerokości i automatyczną wysokość. W nim po lewej jest div z ikonami socials. i chciałbym żeby obok po prawej znajdował się właśnie zawsze wyśrodkowany div content jak na podanej wyżej stronie, patrzyłem na kod poprzez zbadaj element, lecz nie bardzo rozumiem ( nie mam takiej wiedzy)

Mam jeszcze pytanie czy jeśli te 2 divy są w jednym pojemniku, czy mogę jakoś ustawić ich odległość między sobą, która będzie stała również przy oddaleniu widoku przeglądarki, powiedzmy aby od środkowego divu content. div social był oddalony zawsze o daną liczę px czy %.

body
{
	background-image: url("img/black_scales.png");
	font-size: 24px;
	color: white;
	text-align:center;
	margin: 0 !important;
}

.header
{
	width: 100%;
	height:50px;
	background-color: #990033;
	font-family: 'Barrio', cursive;
	letter-spacing:3px;
}
.logo
{
	width:95%;
	height:30px;
	padding: 10px;
	font-size: 30px;
}
.icon-home
{
	width: 5%;
	height: 50px;
	float:left;
	text-decoration:none;
	color: white;
	border-right: 2px dotted #660033;
	font-size: 35px;
}
.icon-home:hover
{
	background-color: #cc0033;
	color: yellow;
}
.container
{
	margin-top:20px;
	width:100%;
	height: auto;
	
}
.socials
{
	width:60px;
	height:260px;
	margin-top: 200px;
	margin-left: 0.5%;
	float:left;
}
.icon-facebook-circled
{
	width: 50px;
	height: 50px;
	background-color: #3B5999;
	display:block;
	color: white;
}
.icon-facebook-circled:hover
{
	background-color: #2a4888;
}
.icon-youtube-play
{
	margin-top: 20px;
	width: 50px;
	height: 50px;
	background-color: #D52323;
	display:block;
	color: white;
}
.icon-youtube-play:hover
{
	background-color: #C41212
}
.icon-instagram-1
{
	margin-top: 20px;
	width: 50px;
	height: 50px;
	background-color: #A44E97;
	display:block;
	color: white;
}
.icon-instagram-1:hover
{
	background-color: #a33d86;
}
.icon-twitter-circled
{
	margin-top: 20px;
	width: 50px;
	height: 50px;
	background-color: #2BA8E2;
	display:block;
	color: white;
}
.icon-twitter-circled:hover
{
	background-color: #0aa6b0;
}
.content
{
	height: auto;
	width: 900px;
	border: 2px solid white;
}

4 odpowiedzi

odpowiedź 23 lutego 2017 przez Yorweth Obywatel (1,310 p.)

odpowiedź 23 lutego 2017 przez imklau Nałogowiec (42,090 p.)

odpowiedź 23 lutego 2017 przez Mr Popcorn Bywalec (2,340 p.)

Odp. na pytanie 2.
Jak masz 2 divy obok siebie, stykające się ze sobą, to wystarczy dodać do lewego diva np.

margin-right: 20px;

lub do prawego diva

margin-left: 20px;

co spowoduje, że zrobisz odstęp 20px pomiędzy nimi.

Odp. na pytanie 3.
Możesz zrobić tak jak Noemi zrobiła, a możesz też zrobić tak, żeby menu to było cały czas w tym samym miejscu, dodając np:

.menu {
position: fixed;
left: 0;
top: 25%;
}

co spowoduje, że MENU będzie zawsze przylegało do lewej części ekranu, na wysokości 1/4 twojego ekranu.

komentarz 23 lutego 2017 przez Yorweth Obywatel (1,310 p.)

3 jeszcze nie sprawdzałem, ale co do punktu 2, to chyba nie mogę zrobić jak mówisz, bo srodkowy div mam wyśrodkowany przez margin: auto;, i jeśli daje margin-left/right to prawy nie jest do niego przyczepiony.

.container
{
	margin-top:20px;
	width:100%;
	height: auto;
	
}
.socials
{
	width:60px;
	height:260px;
	margin-top: 200px;
	float: left;
}
.content
{
	font-size: 20px;
	height: auto;
	width: 800px;
	border: 2px solid white;
	border-radius: 25px;
	margin: auto;
}