Ширина DIV по ширине внутренних блоков

[AKyHuH]

Вопрос наверное глупый, но всё же...

Есть DIV заданной ширины, внутри него есть DIV контейнер, внутри контейнер располагается некоторое число блоков (неизвестное) заданной ширины.

Задача: сделать контейнер равный ширине содержащихся внутри него блоков (включая margin и padding), проще говоря, нужно растянуть контейнер горизонтально по содержимому, которым являются блоки фиксированной ширины.

В реальности нужно для следующего. Галерея. Cписок картинок. Если вход выполнен под суперюзером, под картинками появляется блок управления из иконок (иконки выполнены как <a href="" style="display: block; width:20px; height: 20px; background: transparent url('img/icon.gif') 0 -100;"></a>), но для разного уровня суперюзеров, иконок может быть разное кол-во от 2 до 5. Нужно, чтобы эти иконки были расположены по центру блока.

Как то так:

 /
 ——————————--
|	 ico1   ico2   ico3		| 
 ——————————--
/

Edited November 6, 2009 by AKyHuH

[rus]

Если честно, то ты странный человек, сам уходишь от лёгких путей в пользу трудных..хм..ну ладно, дело твоё...

Да ладно, ты сам себя то вспомни.

[psywalker]

Макс, а можешь его на php еще написать? А то у меня с js туго, а св-во так нужно!

Ну не знаю Рустамыч, это не просто, но я попробую конеш, отпишу в личку тада

[AKyHuH]

неа, ну просвети, коль не шутишь

[psywalker]

Да ладно, ты сам себя то вспомни.

Я как себя помню, всегда пытался инфу найти в инете, до сих пор ищу

[AKyHuH]

хм, чую в мой огород камень... а тут у нас что, не интернет?

[psywalker]

неа, ну просвети, коль не шутишь

набери в Гугле и прочитаешь

http://designformasters.info/posts/conditional-comments/ к примеру

Edited November 6, 2009 by psywalker

[AKyHuH]

набери в Гугле и прочитаешь

http://designformasters.info/posts/conditional-comments/ к примеру

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

[psywalker]

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

ххаах, слышал бы тебя кто нибудь..не комильфо Эти вещи специально придуманы для таких случаев, чтобы валидность сохранялась как раз, и ими пользовались всегда, пользуются и будут пользоваться, правда почитай внимательнее статьи, там всё поймёшь

[Justnewone]

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

Товарищь, хотите быть перфекционистом - делайте это самостоятельно. Как-то странно у Вас дорога выкладывается в светлое будущее единых стандартов, на плечах других людей, не комильфо.

Пробуйте, вставляйте, пытайтесь. Причем тут мы аще? Решение получил - все, распишись, свободен. Оценки выставлять за ответы = оценки выставлять за качество нашей работы, Вам такого права никто не давал, тем более то опыта у Вас, судя по постам, с Гульки нос.

[psywalker]

Justnewone

Даа тыы чёёё, он же на со школы из курса бейсика усвоил, что ты не прав

[AKyHuH]

Товарищь, хотите быть перфекционистом - делайте это самостоятельно. Как-то странно у Вас дорога выкладывается в светлое будущее единых стандартов, на плечах других людей, не комильфо.

Пробуйте, вставляйте, пытайтесь. Причем тут мы аще? Решение получил - все, распишись, свободен. Оценки выставлять за ответы = оценки выставлять за качество нашей работы, Вам такого права никто не давал, тем более то опыта у Вас, судя по постам, с Гульки нос.

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

ИМХО, вы менее всего помогли мне, так что вам конкретно себя ни чем обязанным не считаю.

Остальным спасибо! В споре рождается истина... и прошу заметить, не я это придумал

[Justnewone]

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

ИМХО, вы менее всего помогли мне, так что вам конкретно себя ни чем обязанным не считаю.

Остальным спасибо! В споре рождается истина... и прошу заметить, не я это придумал

Вы показали себя халявщиком, и я кому надо дал это понять. А до Вас лично мне никакого дела нету. Истина несимметричная получилась, для себя вы что-то выяснили, а ребятам за помощь еще и свое "не комильфо" показали. Жду Вас еще на форуме, приходите, спрашивайте, отвечайте.

[Searcher]

тут еще вариантик набросал:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

* { margin: 0; padding: 0; }

.icons {
	display: table;
	margin: 0 auto;
}

.icons_conteiner {
	border: 1px solid red;
	background-color: #ddd;
	padding: 20px 10px;
}

.icons_conteiner a
{
	margin: 0 1px;
	padding: 10px 13px;
	background-color: blue;
	color: white;
}

.icons_conteiner a:hover{
	background-color: red;
}
</style>

<!--[if IE 6]>
<style type="text/css">
	.icons_block {position:relative;}
	.icons {display: block; position: absolute; top:50%; left:50%;}
	.icons_conteiner {display: block; position: relative; left:-50%;}
</style>
<![endif]-->

</head>

<body>
		<div class="icons_block">
			<div class="icons">
				<div class="icons_conteiner">
					<a href="" alt="">1</a>
					<a href="" alt="">24654</a>
					<a href="" alt="">3</a>
				</div>
			</div>
		</div>
</body>
</html>

[psywalker]

воо,вот этот вариант надо взять на заметочку, спасибо друг

[AKyHuH]

Вы показали себя халявщиком, и я кому надо дал это понять. А до Вас лично мне никакого дела нету. Истина несимметричная получилась, для себя вы что-то выяснили, а ребятам за помощь еще и свое "не комильфо" показали. Жду Вас еще на форуме, приходите, спрашивайте, отвечайте.

Экай вы до чужого добра жадный и сами ничего не посоветовали и другим не даете... Ну да хватит о вас, ваша минута славы на сегодня закончена!

Searcher, у меня, если честно, в IE7 вложенные блоки по левому краю выровнялись... а вот в Опере и ФФ - прям как доктор прописал! Спасибо!

[psywalker]

В ие7 не пашет, потому что опятьже Уловные комменты не содержат уловий в заголовке

<!--[if lte IE 7]>

А насчёт способа не нравится то, что в ИЕ6-7 всё складывается когда окно сужаешь, видимо правда под -50% заделан

Вот это набросок, зацени:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

* { margin: 0; padding: 0; }



	.icons {
		position: relative;
		right: 50%;
		float: right;
	}
	.icons_conteiner {
		position: relative;
		z-index: 1;
		right: -50%;
	}
	a { display: inline-block; margin: 0 10px; border: 1px solid red;}


</style>




</head>

<body>

	<div class="icons">
		<div class="icons_conteiner">
					<a href="" alt="">1</a>
					<a href="" alt="">24654</a>
					<a href="" alt="">3</a>
		</div>
	</div>


</body>
</html>

Edited November 6, 2009 by psywalker

[Justnewone]

Экай вы до чужого добра жадный и сами ничего не посоветовали и другим не даете... Ну да хватит о вас, ваша минута славы на сегодня закончена!

Жадный. Было, есть и будет. Волк - лесной санитар. Хватит так хватит, прекращайте, сядьте, погуглите, найдите решение, поднимите самооценку, что Вы время тут со мной теряете.

[psywalker]

Воо смари, идеал прям решение:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

* { margin: 0; padding: 0; }

	ul.icons { position: relative; left: 50%; float: left;}
		ul.icons li { position: relative; left: -50%; float: left;}
			ul.icons li a { float: left; margin: 0 10px; border: 1px solid red;}
</style>




</head>

<body>

	<ul class="icons">
		<li><a href="" alt="">1</a></li>
		<li><a href="" alt="">2</a></li>
		<li><a href="" alt="">3</a></li>
		<li><a href="" alt="">4</a></li>
	</ul>


</body>
</html>

[AKyHuH]

psywalker, первое ощущение - реально работает, осталось прикрутить под реальную задачу и проверить ещё раз большое спасибо!

[psywalker]

psywalker, первое ощущение - реально работает, осталось прикрутить под реальную задачу и проверить ещё раз большое спасибо!

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

[Searcher]

да, отличное решение!

[psywalker]

да, отличное решение!

Есс сэр

[Searcher]

psywalker, ты такие рецептики складывай отдельно, когда накопится - можно будет создать сайтик, как тут уже предлагали, ну и я рад буду тебе посодействовать, если понадобится

[s0rr0w]

В процессе создания плагин к форуму, который будет публиковать рецептики на сайте.

Так что все можно будет сделать.

[Searcher]

эх, s0rr0w просто так не отпустит! :)