Jump to content
  • 0

Резиновый слой по центру окна броузера


abused
 Share

Question

Всем привет

Чтобы было понятнее, приведу пример: http://htmlbook.ru/layout/sloy-po-tsentru-veb-stranitsy

Нужно сделать слой по центру окна броузера, но не фиксированной ширины, а резиновое! Внутри окна будут выводиться данные в несколько колонок, поэтому важно чтобы ширина окна подстраивалась под выводимые данные. По центру-то я его размещаю без проблем (правда, не тем способом, который описан в примере):

div#main-window{
width: 500px; /* если убрать ширину, то получается говно */
margin-left: auto;
margin-right: auto;
}

Но вот ширина 500px смущает. Если убрать width, то слой распахивается на всю ширину окна, что не есть гуд. Можно конечно использовать max-width, но это тоже фигня, потому как количество колонок может быть разным, и данные могут не поместиться в окно.

Без таблиц реально такое сделать?

Спасибо

(а сам пишу и думаю, что напрочь забыл табличную верстку и то, вообще можно ли сделать такое при помощи таблиц, вроде можно)

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Как-то не совсем понятно. Вам надо чтобы слой тянулся во всю ширину колонок, но зафиксировать по центру. Обычно макеты с отцентрированным контентом встречаются именно с фикс размерами. По большому счету вам надо сделать отступы с флангов. Используйте вместо margin: 0 auto margin:0px 50px; или паддинг у родителей и ширину указывать не надо будет.

Link to comment
Share on other sites

  • 0

abused

поэтому важно чтобы ширина подстраивалась под выводимые данные.

Может так?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style>
*{padding:0;margin:0}
body{text-align:center}
div{display:inline-block;
height:50px;
background-color:red;
}
</style>
</head>

<body>
<div>
место контента
</div>
</body>
</html>

но способ Softlink лучше

Edited by dostel1
Link to comment
Share on other sites

  • 0
  Quote
Как-то не совсем понятно
Прошу пардона, видимо не удалось объяснить детально и сразу.

Прежде всего оговорюсь что это не сайт, а веб-приложение (монитор состояния промышленных объектов). В родительский блок выводятся данные, объем которых влияет на ширину окна (надо чтобы все помещалось — отсюда и требование к "резиновости"). При этом родительский блок надо разместить по центру броузера (достаточно выравнивания по горизонтали).

Такая "обертка" решает проблему:

<table id="main-window"><tr><td id="data-cell">
<!-- тут, собсно все и выводится -->
</td></tr></table>

#main-window{
margin: 60px auto;
}

...но головоломка в том, можно ли сделать то же самое БЕЗ таблицы-обертки?

Link to comment
Share on other sites

  • 0
  Quote
При этом родительский блок надо разместить по центру броузера (достаточно выравнивания по горизонтали).

Вам все равно не удается объяснить то, что вы хотите.

1) Какой ширины должен быть "резиновый" блок?

2) У него должны быть отступы от краев окна, какие: резиновые или фиксированные?

3) Есть ли у такого блока блоки-соседи? Под ним или над ним что-то есть или он единственный на странице?

4) Что-то кроме этого блока на странице вообще есть?

Link to comment
Share on other sites

  • 0
  On 12/20/2011 at 9:26 AM, hedgehog said:

в качестве обертки можно использовать div вместо body в варианте с inline-block. либо попробовать div с display-table

--приведи пример display-table плиз ,у меня не получается

Edited by dostel1
Link to comment
Share on other sites

  • 0
  On 12/20/2011 at 9:43 AM, dostel1 said:
приведи пример display-table плиз ,у меня не получается

http://jsfiddle.net/AvfhR/

думается мне, что это костыль :)

Собственно, если размер блока подстраивается под размер содержимого, то margin'ом его не выровнять, насколько я знаю (т.е. инлайновые блоки или блоки с float). Кто скажет, чем плох вариант с text-align: center для обертки и float: left или display: inline-block для выравниваемого блока?

Link to comment
Share on other sites

  • 0
  Quote
Кто скажет, чем плох вариант с text-align: center для обертки и float: left или display: inline-block для выравниваемого блока?

Ничем. Не считая того факта, что на блок с float: left это не подействует.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • 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