Jump to content

как отцентрировать <div> блоки?

DJ Sergeich

By DJ Sergeich,
in Goods and Services

 Share

Recommended Posts

DJ Sergeich Explorer

DJ Sergeich

Posted
Posted

Надо сделать "резиновую" страницу, чтобы в зависимости от ширины, выводилось столько <div> блоков, размером 200X200, сколько влезет в ширину.

Естественно, после ряда клеток остаётся пустое пространство, меньшее, чем 200 точек.

Для красоты хочу отцентрировать все <div> блоки. Но вот как это сделать - не понимаю...

вот как это выглядит сейчас:

http://i045.radikal.ru/0907/88/ec36a018f504.jpg

а вот так хочу, чтобы выглядело:

http://s41.radikal.ru/i094/0907/f5/709286ac1a41.jpg

Принимаются любые предложения. Не важно, как это сделано, главное, чтобы было по центру :D

Link to comment
Share on other sites
Justnewone Explorer

Justnewone

Posted
Posted
Надо сделать "резиновую" страницу, чтобы в зависимости от ширины, выводилось столько <div> блоков, размером 200X200, сколько влезет в ширину.

Естественно, после ряда клеток остаётся пустое пространство, меньшее, чем 200 точек.

Для красоты хочу отцентрировать все <div> блоки. Но вот как это сделать - не понимаю...

вот как это выглядит сейчас:

http://i045.radikal.ru/0907/88/ec36a018f504.jpg

а вот так хочу, чтобы выглядело:

http://s41.radikal.ru/i094/0907/f5/709286ac1a41.jpg

Принимаются любые предложения. Не важно, как это сделано, главное, чтобы было по центру :D

http://forum.htmlbook.ru/index.php?showtopic=15524

Поиск!

Link to comment
Share on other sites
Justnewone Explorer

Justnewone

Posted
Posted
Самое лучшее решение центровки общего слоя - применить атрибут align='center' . Этот и другие примеры центрирования см. http://www.htmlbook.ru/content/?id=95

а почему самый лучший? и лучше чем какие?

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted
Самое лучшее решение центровки общего слоя - применить атрибут align='center' . Этот и другие примеры центрирования см. http://www.htmlbook.ru/content/?id=95

Несогласен, атрибуты нынче не в моде. CSS уже давно доказал, что он лучший! :D

Link to comment
Share on other sites
DJ Sergeich Explorer

DJ Sergeich

Posted
  • Author
Posted
все свои дивы возьмите в один общий и задайте ему margin:0 auto;

И тогда все блоки выстроятся по центру... но один над другим!

Вариант с cross-browser-inline-block хорош, но у меня не 2 "окна", а намного больше, в результате, всё опять сбивается влево.

Короче, пока нифига не работает...

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted (edited)

DJ Sergeich

И тогда все блоки выстроятся по центру... но один над другим!

Как-же они интересно выстроятся? Может ты чё то не так делаешь, возьми Всю свою конструкцию, все 12 блоков или сколько там у тебя их и засунь в общий обрамляющий Див, пропиши ему Ширину и margin:0 auto; Должно работать :D

Вот тебе пример: http://psywalker.ru/table-div/

Edited by psywalker
Link to comment
Share on other sites
DJ Sergeich Explorer

DJ Sergeich

Posted
  • Author
Posted
DJ Sergeich

Как-же они интересно выстроятся? Может ты чё то не так делаешь, возьми Всю свою конструкцию, все 12 блоков или сколько там у тебя их и засунь в общий обрамляющий Див, пропиши ему Ширину и margin:0 auto; Должно работать :D

Вот тебе пример: http://psywalker.ru/table-div/

Ну вот что у меня не работает:

<html>
<body>
<div style="border: 1px solid; margin:0 auto; width: 100%;">
<div>
<div style="width: 200px; height: 250px; border: 1px solid; margin: 1px; padding: 5px;" class="alt1">
	<span class="smallfont"><!--<a href="http://www.modern-talking.ru/showthread.php?t=1618" target=_blank>--><center>
	<img src="http://www.bohlenworld.ru/disco/img/ta-gc1.jpg" border="1"><br>
	<b>Thomas Anders</b> <br>
	Good Carma [album]<br>
	<b>Release:</b> ??? <br><b>Label:</b>  <br><b>Catalog#:</b> 
	<br><br></center></a></span>
</div>
<div style="width: 200px; height: 250px; border: 1px solid; margin: 1px; padding: 5px;" class="alt1">
	<span class="smallfont"><!--<a href="http://www.modern-talking.ru/showthread.php?t=1618" target=_blank>--><center>
	<img src="http://www.bohlenworld.ru/disco/img/ta-gc1.jpg" border="1"><br>
	<b>Thomas Anders</b> <br>
	Good Carma [album]<br>
	<b>Release:</b> ??? <br><b>Label:</b>  <br><b>Catalog#:</b> 
	<br><br></center></a></span>
</div><div style="width: 200px; height: 250px; border: 1px solid; margin: 1px; padding: 5px;" class="alt1">
	<span class="smallfont"><!--<a href="http://www.modern-talking.ru/showthread.php?t=1618" target=_blank>--><center>
	<img src="http://www.bohlenworld.ru/disco/img/ta-gc1.jpg" border="1"><br>
	<b>Thomas Anders</b> <br>
	Good Carma [album]<br>
	<b>Release:</b> ??? <br><b>Label:</b>  <br><b>Catalog#:</b> 
	<br><br></center></a></span>
</div><div style="width: 200px; height: 250px; border: 1px solid; margin: 1px; padding: 5px;" class="alt1">
	<span class="smallfont"><!--<a href="http://www.modern-talking.ru/showthread.php?t=1618" target=_blank>--><center>
	<img src="http://www.bohlenworld.ru/disco/img/ta-gc1.jpg" border="1"><br>
	<b>Thomas Anders</b> <br>
	Good Carma [album]<br>
	<b>Release:</b> ??? <br><b>Label:</b>  <br><b>Catalog#:</b> 
	<br><br></center></a></span>
</div><div style="width: 200px; height: 250px; border: 1px solid; margin: 1px; padding: 5px;" class="alt1">
	<span class="smallfont"><!--<a href="http://www.modern-talking.ru/showthread.php?t=1618" target=_blank>--><center>
	<img src="http://www.bohlenworld.ru/disco/img/ta-gc1.jpg" border="1"><br>
	<b>Thomas Anders</b> <br>
	Good Carma [album]<br>
	<b>Release:</b> ??? <br><b>Label:</b>  <br><b>Catalog#:</b> 
	<br><br></center></a></span>
</div>
</div></div>
</body>
</html>

посмотрите, мож, где у меня рука в заднице застряла.... :D

В примере - таблицы...

Link to comment
Share on other sites
DJ Sergeich Explorer

DJ Sergeich

Posted
  • Author
Posted
Вот объясни мне, как может выравниваться блок - Шириной 100%??? <div style="border: 1px solid; margin:0 auto; width: 100%;">

Так это же основной блок, ВНУТРИ которого надо всё выровнять... Ему и положено быть во всю страницу...

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted (edited)
Так это же основной блок, ВНУТРИ которого надо всё выровнять... Ему и положено быть во всю страницу...

Так, хорошо, это основной блок, тогда Нахрена ему ставить ширину 100%, если он по умолчанию блочный элемент, у которого ширина 100%, да ещё и выравнивать его по середине?? И где внутри него блок, который Обрамляет всё содержимое в середине и выравнивается по центру?

Edited by psywalker
Link to comment
Share on other sites
DJ Sergeich Explorer

DJ Sergeich

Posted
  • Author
Posted
Так, хорошо, это основной блок, тогда Нахрена ему ставить ширину 100%, если он по умолчанию блочный элемент, у которого ширина 100%, да ещё и выравнивать его по середине?? И где внутри него блок, который Обрамляет всё содержимое в середине и выравнивается по центру?

Ладна, пошаманил ещё, но всёравно ничего не получилось. Может, ты дашь рабоающий код?

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted
Ладна, пошаманил ещё, но всёравно ничего не получилось. Может, ты дашь рабоающий код?

Вообще попробуй сам догадаться, сложного я ничего не вижу, даже для новичка.

1) Вот у тебя есть общий контейнер, в котором должно всё выравниваться: <div style="border: 1px solid; margin:0 auto; width: 100%;">

2) Зачем ему задавать Ширину 100%, если он и так по умолчанию 100%? А потом тебе не кажется странным, как ширина 100% от экрана будет выравниваться? Если учесть, что экран сам 100% :D

3) Да и потом должны в нём выравниваться блоки(3х3), и мы имеем внутренний div

<div style="border: 1px solid; margin:0 auto; width: 100%;">

<div>, который обрамляет всё содержимое, но болтается без дела собственно

4) Так вот не кажется ли тебе, что нужно перекинуть с главного Контейнера кое какие правила? Например margin:0 auto; и ещё ширину, только сделать её не 100%, а ровно столько, сколько нужно для твоих внутренних блоков :D

Link to comment
Share on other sites
DJ Sergeich Explorer

DJ Sergeich

Posted
  • Author
Posted

psywalker, т.е. ты предлагаешь вариант:

<div style="border: 1px solid;>

<div style="border: 1px solid; margin:0 auto; width: 800px;">

Но так тоже не работает! Все внутренние блоки слева один над другим.

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

Link to comment
Share on other sites
Justnewone Explorer

Justnewone

Posted
Posted
psywalker, т.е. ты предлагаешь вариант:

<div style="border: 1px solid;>

<div style="border: 1px solid; margin:0 auto; width: 800px;">

Но так тоже не работает! Все внутренние блоки слева один над другим.

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

Какая жалость, что вы не в состоянии осилить хотябы 1 из предложеных способов.

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted

раз такое дело, тогда я не понимаю, как они должны выравниваться, если блоки постоянно прибавляются и ширина постоянно гуляет, я бы делал так: Взял бы, посчитал ширину вот этих 4 блоков http://s41.radikal.ru/i094/0907/f5/709286ac1a41.jpg, и задал бы её обрамляющему диву, а потом выровнял бы всё это добро по середине.

А вопрос: У тебя получаеться, что Максимальная ширина - это ширина 4 блоков, да? а если экран сужается, то минимальная Один блок?

Link to comment
Share on other sites
DJ Sergeich Explorer

DJ Sergeich

Posted
  • Author
Posted (edited)

Господа, я просил дать ГОТОВОЕ решение! Вы сами-то можете решить задачу???

Напоминает мне знакомого линуксойда, который на любой вопрос выдаёт цитату из мана команды на надцать листов, вместо того, чтобы просто ответить, какой параметр нужно дать!

раз такое дело, тогда я не понимаю, как они должны выравниваться, если блоки постоянно прибавляются и ширина постоянно гуляет, я бы делал так: Взял бы, посчитал ширину вот этих 4 блоков http://s41.radikal.ru/i094/0907/f5/709286ac1a41.jpg, и задал бы её обрамляющему диву, а потом выровнял бы всё это добро по середине.

А вопрос: У тебя получаеться, что Максимальная ширина - это ширина 4 блоков, да? а если экран сужается, то минимальная Один блок?

Максимальная ширина - может быть и 8 блоков, если разрешение 1600*...

Вся завязка именно в РЕЗИНОВОСТИ конструкции и независимости от разрешения!

Неужели блоки нельзя тупо выстроить по центру, как обычные картинки в тэге <center>?

Edited by DJ Sergeich
Link to comment
Share on other sites
rash Explorer

rash

Posted
Posted
Господа, я просил дать ГОТОВОЕ решение! Вы сами-то можете решить задачу???

Не надо брать на "слабо". Не дети тут.

Нужно готовое решение? Их есть у нас. Сколько оно для вас будет стоить? Согласитесь, помочь - это одно, а сделать вашу работу - совсем другое.

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted

вот тебе тогда начало, а доработай сам

<!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>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
		ul { margin: 0 10%; text-align: center;}
			li { width: 200px; height: 200px; float: left; margin: 1px; background: #033;}

</style>
</head>

<body>
	<ul>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />h</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />h</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
		<li><img src="" />n</li>
	</ul>
</body>
</html>

Link to comment
Share on other sites
Searcher Explorer

Searcher

Posted
Posted
Я на слабо никого не беру. А то, что за ответ пытаются деньги вымогать... Ну это пусть останется на Вашей совести (конечно, если она у Вас есть).

Трындец! Что за привычка к халяве?! Вам дали кучу наводок, уже можно самому сообразить как это делается...

Видимо это у вас нет совести, поскольку вы считаете что тут вам ДОЛЖНЫ дать готовое решение. Нет, Ваше Величество, если вы хотите особого внимания к себе, то будте добры, компенсировать это. Хотя может и найдется благотворитель, ждите...

Link to comment
Share on other sites
Justnewone Explorer

Justnewone

Posted
Posted (edited)

DJ Sergeich, Ваша тема перенесена, в след. раз настоятельно рекомендую ознакомиться с "Культурой поведения в разделе" априори равносильно правилам в разделе "Для начинающих".

Edited by Justnewone
Link to comment
Share on other sites
rash Explorer

rash

Posted
Posted
Я на слабо никого не беру. А то, что за ответ пытаются деньги вымогать... Ну это пусть останется на Вашей совести (конечно, если она у Вас есть).

Вам ответов явно не хватает, хотя их дали достаточно.

Сделать за вас работу и дать ответ/совет - это разные вещи.

P.S.: А еще ответ на ваш вопрос находится в гугле на первом месте в результатах поиска. И вы считаете, что совести нет у меня?

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept