Jump to content
  • 0

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


bob_24
 Share

Question

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

Сделать фиксированный макет по центру, например шириной 960 пикселей, не трудно. На мониторах с шириной 1024 и 1280 такой сайт будет смотреться хорошо, но вот на мониторах с шириной 1680, и тем более 1920, уже не устраивает. Хотелось бы, что бы на больших расширениях сайт растягивался допустим до 1200 пикселей (не будем трогать тему удобочтения длинных строк), а на маленьких (1280, 1024) 960. Или как-то пропорционально растягивался с ростом расширения.

Недорешений несколько:

1. Как предлагают в большинстве статей: сделать сайт на всю ширину экрана. Такой вариант сразу отпадает.

2. Прописать свойства min-width:960px, max-width:1200. Но при таком подходе контент будет пытаться занять всю возможную ширину. К примеру при разрешении 1280 ширина сайт будет 1200 пикселей. Такое тоже не надо.

3. Если бы сайт был прижат влево, то можно было бы указать margin-right:*% и min-width:960px; max-width:1200. Этот margin бы сайт растягивал. Т.е. когда маленькое разрешение экрана он бы сужал его до min-width:960px, а когда больше растягивал бы до max-width:1200. Уже ближе, но сайт не по центру.

4. Теперь если сделать тоже самое, но указать margin: 0 *%; min-width:960px; max-width:1200... работает тоже только в сферическом мониторе в вакууме.

Приблизительно так. Думаю проблема актуальна, число ширикоэкранников растет, а маленькие мониторы ни куда не пропадают.

Если у кого есть мысли, ссылки или что-то еще, то прошу поделиться.))

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

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