Возможно ли горизонтальное центрирование блока относительно соседних блоков

Belovsan · August 3, 2010

Вот пытаюсь понять как "думает" CSS. Есть три блока, которые выстроены по горизонтали. Ширина страницы резиновая. Значит как я их выстраиваю. Один блок float:right; второй - float:left;. Тот что посредине - падает в середину сам при заданном margin:0 auto;

И всё бы хорошо, но центрирование среднего блока происходит не относительно соседних, а относительно общей ширины страницы. А мне бы хотелось чтобы отступы от соседних блоков до центрального были одинаковыми. Можно это как-то сделать?

На пальцах рассказал, а вот сам код CSS:

#telo {width:100%; height:150px; background:#00FF33;}

#blok1 {width:100px; height:80px; border: 1px solid #000000; float:left; margin:0 10px;}

#blok2 {width:150px; height:15px; border: 1px solid #000000; float:right; margin:0 10px;}


#blok3 {width:250px; height:100px; border: 1px solid #000000; margin:0 auto;}

А это HTML:

<body>

<div id="telo">

<div id="blok1"></div>

<div id="blok2"></div>

<div id="blok3"></div>
</div>


</body>

radist2s · August 3, 2010

Можно попробовать задать padding в процентах для правого и левого края, левого и правого блока соответственно.

psywalker · August 3, 2010

среднему блоку overflow:hidden;

Belovsan · August 3, 2010

psywalker said:
среднему блоку overflow:hidden;

Реально помогло. Спасибо.

Только ж вот хочу разобраться и не могу понять почему ж таки оно помогло ?

Читаю про overflow: Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

Читаю про hidden: hidden Отображается только область внутри элемента, остальное будет скрыто.

Походу ничего о позиционировании не пишется. Если можно, объясните принцип работы этого заклинания . Или дайте "наколочку", где почитать об этом.

И ещё вопросик. Вот смотрите. Если у меня в третьем блоке записаны такие параметры: #blok3 {width:250px; height:100px; border: 1px solid #000000;} Почему получается так, что этот третий блок "налазит" на первый, а не становится рядом с ним? Ведь вроде не задано никакое позиционирование и следовательно блоки не должны наезжать друг на друга.

Ещё хочу конечно же извиниться за такие вопросы, но чувствую без понимания этого, нет смысла двигаться дальше

Edited August 3, 2010 by Belovsan

Great Rash · August 3, 2010

Quote
Походу ничего о позиционировании не пишется. Если можно, объясните принцип работы этого заклинания . Или дайте "наколочку", где почитать об этом.

Спецификация W3C по CSS2.1, раздел 9.5:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space.

s0rr0w · August 3, 2010

Опоздал с ответом

psywalker · August 3, 2010

s0rr0w said:
Опоздал с ответом

Ну ничего страшного, а объясни плиз своими словами, как ты себе это представляешь, вот что на самом деле происходит?

Belovsan · August 3, 2010

psywalker said:
Ну ничего страшного, а объясни плиз своими словами, как ты себе это представляешь, вот что на самом деле происходит?

Ага, и если можно - по русски. Стыдно признаться, но с английским не сложилось у меня по жизни.

Но в принципе, с помощью онлайн-переводчика мне удалось немного понять смысл написанного

Правда читая перевод онлайн переводчика я теперь начинаю понимать почему китайцы не отвечали на мои письма о сотрудничестве, написанные на русском языке и переведённые на англ с помощью онлайн-переводчика. Ведь не исключено, что они мои письма тож переводили с помощью такой программки, но, правда уже на китайский

Edited August 3, 2010 by Belovsan

Belovsan · August 3, 2010

Ещё такой вопрос возник по данной раскладке. Если, например, я начинаю уменьшать размер экрана, то до тех пор, пока блоки вмещаются на экране, они как бы нормально расположены в один ряд. Ну а когда им становится мало места, они начинают смещаться один под другого. Но это же не всегда уместно. Я нашёл такое решение, как задать параметр min-width. Вот интересно, правильное ли это решение, и самое главное -есть ли другие (более красивые) способы решить данный вопрос?

s0rr0w · August 3, 2010

Belovsan said:
Ещё такой вопрос возник по данной раскладке. Если, например, я начинаю уменьшать размер экрана, то до тех пор, пока блоки вмещаются на экране, они как бы нормально расположены в один ряд. Ну а когда им становится мало места, они начинают смещаться один под другого. Но это же не всегда уместно. Я нашёл такое решение, как задать параметр min-width. Вот интересно, правильное ли это решение, и самое главное -есть ли другие (более красивые) способы решить данный вопрос?

Это правильное решение.

Great Rash · August 3, 2010

min-width - самое правильное и красивое решение. Только оно в ИЕ6 не работает... там его придется эмулировать экспрешнами или распоркой (распорка мне лично нравится больше).

Belovsan · August 3, 2010

Great Rash said:
min-width - самое правильное и красивое решение. Только оно в ИЕ6 не работает... там его придется эмулировать экспрешнами или распоркой (распорка мне лично нравится больше).

По поводу распорки - имеется ввиду однопиксельная картинка? Или можно и просто блок вставить? Сейчас пробую блок, что-то не выходит пока ничего

Блин, не могу понять. Сделал ещё один блок <div id="rasporka"></div>

Задал ему фикс ширину. Уменьшаю размер окна. Когда ширина окна становится меньше ширины распорки, то появляется гориз полоса прокрутки. Но блоки всё равно друг под друга выстраиваются. Что я не так делаю?

Edited August 3, 2010 by Belovsan

Belovsan · August 3, 2010

Друзья, помогите пожалуйста, а то уже мозг плавится, не могу понять в чём дело

psywalker · August 3, 2010

Belovsan said:
Друзья, помогите пожалуйста, а то уже мозг плавится, не могу понять в чём дело

Дай ссылку на страницу с примером.

Belovsan · August 3, 2010

psywalker said:
Дай ссылку на страницу с примером.

Да это не страница, а просто позиционированные блоки.

Вот CSS:

html, body {width:100%; height: 100%; margin:0; padding:0;}

#telo {min-width:550px; width:100%;  height:150px; background:#00FF33; }

#blok1 {width:100px; height:80px; border: 1px solid #000000; float:left; margin:0 10px;}

#blok2 {width:150px; height:15px; border: 1px solid #000000; float:right; margin:0 10px;}


#blok3 {width:250px; height:100px; border: 1px solid #000000; margin:0 auto; overflow:hidden;}

#rasporka {width:550px; border: 1px solid #000000;}

А это html:

<body>

<div id="telo">


<div id="blok1"></div>

<div id="blok2"></div>

<div id="blok3"></div>

<div id="rasporka"></div>
</div>

</body>

Получается, что при уменьшении ширины есть прокрутка, а блоки всё равно в ИЕ6 один под другого становятся .

Edited August 3, 2010 by Belovsan

psywalker · August 3, 2010

Так естественно, выше же дружище написал, что min-width в ИЕ6 не пашет.

Great Rash · August 3, 2010

Вот самая лучшая кроссбраузерная реализация min-width, которую я встречал. Пользуйтесь, дарю:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			font-size: 100.1%;
		}

		body {
			margin: 20px;
			font: 62.5% 'Trebuchet MS', Arial, Tahoma, Verdana, sans-serif;
		}

		.wrapper {
			overflow: hidden;
			min-width: 950px;
			margin: 0 auto;
			font-size: 1.4em;
		}

		.left {
			float: left;
			width: 178px;
			padding: 10px;
			background: #abcdef;
			border: #123456 1px solid;
		}

		.right {
			margin-left: 210px;
			padding: 10px;
			background: #abcdef;
			border: #123456 1px solid;
		}
	</style>

	<!--[if lt IE 7]>
	<style type="text/css">
		.ie-hack-table {
			width: 100%;
			border: 0;
			border-spacing: 0;
			border-collapse: collapse;
		}

		.ie-min-width {
			overflow: hidden;
			width: 950px;
			font-size: 0;
			line-height: 0;
		}
	</style>
	<![endif]-->
</head>

<body>

	<!--[if lt IE 7]>
	<table class="ie-hack-table" cellspacing="0"><tr><td><div class="ie-min-width"></div>
	<![endif]-->

	<div class="wrapper">
		<div class="left">
			text text text
		</div>
		<div class="right">
			text text text
		</div>
	</div>

	<!--[if lt IE 7]>
	</td></tr></table>
	<![endif]-->

</body>
</html>

psywalker · August 3, 2010

Нуу, ради ИЕ6 я такое бы делать не стал.

Great Rash · August 3, 2010

Аргументируй.

Belovsan · August 3, 2010

psywalker said:
Так естественно, выше же дружище написал, что min-width в ИЕ6 не пашет.

Так понятно, что не пашет. Но я ж поставил распорку. Только она почему-то не работает (. И я не могу понять почему блоки один под другого подлазят при наличии этой распорки и что характерно ещё и полосы прокрутки.

Edited August 3, 2010 by Belovsan

psywalker · August 3, 2010

Great Rash said:
Аргументируй.

А чё тут аргументить то, ведь ты прячешь таблицу он всех браузеров по сути, кроме ИЕ6, так?

Ну вот мне это само по себе не нравиться.

Great Rash · August 3, 2010

Хорошо, тогда приведи работающий пример при доктайпе XHTML 1.0 Strict.

(экспрешны, как ты конечно же помнишь, вешают ИЕ6 при этом доктайпе)

Belovsan · August 3, 2010

Great Rash said:
Хорошо, тогда приведи работающий пример при доктайпе XHTML 1.0 Strict.
(экспрешны, как ты конечно же помнишь, вешают ИЕ6 при этом доктайпе)

Я конечно извиняюсь, а вот Вы говорили о распорке. И я читал, что вроде её как-то ставят. Причём вроде ставят див распорки или картинки прозрачные. Но мне вроде как див показалось наиболее интересное. Как видите, сам пока что криво это сделал. Я походу вообще не правильно всё понял да?

Или лучше всего именно табличная, которую Вы выложили?

Edited August 3, 2010 by Belovsan

psywalker · August 3, 2010

Мой пример таков, что я как правило всегда прописываю минимальную ширину body. Считаю это правильным вариантом. И для ИЕ6 также есть проверенный годами эксрешан.

Great Rash · August 3, 2010

Quote
И для ИЕ6 также есть проверенный годами эксрешан.

Он вешает браузер Internet Explorer 6 при доктайпе XHTML 1.0 Strict! Могу по слогам повторить

Quote
Я конечно извиняюсь, а вот Вы говорили о распорке. И я читал, что вроде её как-то ставят. Причём вроде ставят див распорки или картинки прозрачные. Но мне вроде как див показалось наиболее интересное. Как видите, сам пока что криво это сделал. Я походу вообще не правильно всё понял да?

См. сообщение №17

psywalker · August 3, 2010

Great Rash said:
Он вешает браузер Internet Explorer 6 при доктайпе XHTML 1.0 Strict! Могу по слогам повторить

Да ни хрена он не вешает, у меня все работы на нём сделаны и ни одна не повисла, вот тебе пример любой http://psywalker.ru/Portfolio/BestHome/main-page.html

А вот экспрешан, который тут используется для ИЕ6

*html body { width:expression(document.documentElement.clientWidth < 750 ? "750px" : "auto");}

Проверяй

Sign In

Возможно ли горизонтальное центрирование блока относительно соседних блоков

Question

Link to comment

Share on other sites

39 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information