поззиционированние блоков

Общее
1

Подскажите пожалуйста.

Разбил страницу на два больших блока. Зафлочил один в лефт, другой в райт. Получились две колоночки. Добавил блок clearfix и сделал еще третий, горизонтальный как подвал сайта. Начал заполнять контентом правый блок. Добавил еще один блок в который впихнул img. Потом еще один блочок с текстом. Примерно так.

<div class="right-column">
	<div class="logo">
		<img width="200px" src="imeges/ogo.png">
	</div>
	
	<div class="text1">
		<h2>Зарегестрируйтесь, чтобы<br> смотреть фото и видео ваших<br> друзей.</h2>
	</div>
</div>

Таких блочков достаточно много , да еще и их обрамляет рамка. Ну соответственно надо сделать эту рамку.

123123.jpg374×704 39 KB

Я добавил блок сразу после основного(обернул все маленькие). И вот проблема с его выравниванием. Text-align не работает. Догадываюсь что он просто выравнивает относительно не большого правого блока, а основного. или в чем проблема?

123123123.jpg1600×860 79.3 KB

2

Весь код через песочницу продемонстрируйте, пожалуйста.

3 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Попробуем</title>
<style>
	.left-column {
		background: #e6ffff;
		height: 700px;
		width: 50%;
		float: left;
	}
	.right-column {
		background: #ccffcc;
		height: 700px;
		width: 50%;
		float: right;
	}
	.bottom-column {
		background:#ffe6ff;
		height: 100px;
		width: 100%;
		float: bottom;
	}
	.clearfix {
	    height: 0px;
		background: #e74c3c;
		clear:both;
		height: 0px;
	}
	.logo {
		background: red;
		text-align: center;
		margin: 0px 200px 0px 200px;
		padding-top: 50px;
	
		
	}
	.text1 {
		text-align: center;
		background: blue;
		color:#bfbfbf;
	}
	.cell {
		width: 300px;
		height: auto;
		border: 2px dashed;
		align: center;
	}
	
</style>
</head>
<body>
<div class="left-column">
	
</div>



<div class="right-column">
	<div class="cell">
	<div class="logo">
		<img width="200px" src="imeges/ogo.png">
	</div>
	
	<div class="text1">
		<h2>Зарегестрируйтесь, чтобы<br> смотреть фото и видео ваших<br> друзей.</h2>
	</div>
	
	
	
	
	</div>
</div>

<div class="clearfix"></div>

<div class="bottom-column">

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

я не совсем поняла, вы с помощью text-ailgn - текст внутри блока пытаетесь выровнять… или сами блоки?

5

Последнее значение - это отступ слева.
Блоки по горизонтали выравниваются так: margin: 0px auto;

1 лайк
6

спасибо

Еще вопрос. Как избежать промежутков между блоков?

логотив “инстаграм” и текста под ним, между ними есть промежуток. Хотелось бы чтобы блоки прилипали друг к другу.
Пытался применить прием font-size прировнять к 0 в общем блоке, но что-то не вышло.

7

Попробуйте обнулить отступ сверху у h2.

8

Подскажите пожалуйста.

12423535.jpg1600×860 88.7 KB

Как мне выровнить “ИЛИ”. В див загонял слово, тогда съезжает правая линия. Они зафлочены, левая к левой стороне, правая к правой. Есть мысль, слеарфикс применить, но что-то сомневаюсь, что это тут уместно.

И еще вопрос. Как мне выравнивать объекты относительно центра пунктирной рамки? Например кнопку. Я ее в ручную прописывал мерджин лефт, а хотелось бы более правильно, чтобы автоматически по центру выравнивалось. Алидж сентр не работает.
Кстати, касаемо кнопки, подскажите, пожалуйста, почему не прогрузилась картинка. Находится она в той же дериктории что и логотип, а он отображается.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Попробуем</title>
<style>
	.left-column {
		background: #e6ffff;
		height: 700px;
		width: 50%;
		float: left;
	}
	.right-column {
		background: #ccffcc;
		height: 700px;
		width: 50%;
		float: right;
	}
	.bottom-column {
		background:#ffe6ff;
		height: 100px;
		width: 100%;
		float: bottom;
	}
	.clearfix {
	    height: 0px;
		background: #e74c3c;
		clear:both;
		height: 0px;
	}
	.logo {
		background: red;
		text-align: center;
		
		padding-top: 50px;
	
		
	}
	.text1 {
		text-align: center;
		background: blue;
		color:#bfbfbf;
	
		
		
	}
	.cell {
		width: 400px;
		height: auto;
		border: 2px dashed;
		align: center;
		margin-left: 100px;
		margin-top: 50px;
	}
	.button1 {
		font-size: 15px;
		width: 350px;
		line-height: 30px;
		margin-left: 25px;
		
	}
	h2 {
		margin-top: 0px;
	}
	hr {
	width: 130px;	
	}
	.line1 {
		float: left;
	}
	.line2 {
		float: right;
	}
</style>
</head>
<body>
<div class="left-column">
	
</div>



<div class="right-column">
	<div class="cell">
	<div class="logo">
		<img width="200px" src="imeges/ogo.png">
	</div>
	
	<div class="text1">
		<h2>Зарегестрируйтесь, чтобы<br> смотреть фото и видео ваших<br> друзей.</h2>
	</div>
	
	<div>
	<button class="button1"><img src="imeges/zoz.png" class="face"> Войти через Facebook</button>
	</div>
	<br>
	<hr class="line1"> ИЛИ <hr class="line2">
	
	</div>
</div>

<div class="clearfix"></div>

<div class="bottom-column">

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

Только “право” и “лево” есть)

Я всё же попытаюсь еще раз попросить вас опубликовать код через песочницу, например codepen.io.
Будет гораздо удобнее разбирать.
Вопросов и ошибок достаточно много.
Лучше разбираться посредством диалога.
Напишите мне на почту, адрес есть в профиле.