Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   центрирование резинового сайта (https://javascript.ru/forum/xhtml-html-css/39782-centrirovanie-rezinovogo-sajjta.html)

dianitka 11.07.2013 18:15

центрирование резинового сайта
 
здравствуйте. подскажите, пожалуйста, можно ли как-нибудь оцентрировать содержимое такого сайта http://www.test.vlada-ltd.com/interior-salon.html (смотреть на широких мониторах). Резиновый макет, т.к. полосочки после каждых 3х новостей находятся в резиновой колонке.

Deff 12.07.2013 04:43

dianitka,
:D
Вставьте сразу за body
Цитата:

<style type="text/css">
 .wrap {
  display:inline-block;
}
.main_part,
#left_part {
  margin: 0 auto!important;
}
#pun-wrap { /*Доп. обертка, сразу после body;*/
 margin: 0 auto!important;
 display:inline-block;
}
body {
 text-align:center!important;
}
</style>
<div id="pun-wrap">

А перед тегом закрытия </body>: => </div>

danik.js 12.07.2013 08:55

dianitka, ну вот если за бить на эти полосочки, то решается довольно просто:
body{
    margin: 0px auto;
    width: 980px;
}
#left_part,
#main_part{
    margin-left: 0 !important; /* вобще конечно нужно просто убрать скрипт, выставляющий margin при загрузке */
}


Для тянущихся полосочек придется замудрить:

body{
  margin: 0 auto;
  width: 980px; /* для старых браузерах просто центрируем */
  width: -webkit-calc(100%); /* для новых будем смещать left_part, а body растянем на всю ширину */
  width: -moz-calc(100%);
  width: calc(100%);
}
#left_part{
  margin-left: -webkit-calc(50% - 490px);
  margin-left: -moz-calc(50% - 490px);
  margin-left: calc(50% - 490px);
}

Так мы получим тянущиеся полосочки во всех новых браузерах, а в динозаврах типа IE8 тоже все будет красиво, правда без полосочек. calc() - вобще штука мощная, но злоупотреблять тоже не стоит.
Скрипт опять же удалить. Запомните: нельзя решать проблемы верстки скриптами!

dianitka 12.07.2013 13:54

ну а все же можно скриптом - дело тут не только в полосочках, там на детальной странице новостей есть еще резиновый слайдер, не хотелось, чтобы он в ИЕ не так выглядел. Со скриптом проблема та, что, например, в хроме видно, что сначала отступ = 0, а потом сайт центрируется. как это можно исправить?

Deff 12.07.2013 15:14

Цитата:

Сообщение от dianitka
там на детальной странице новостей есть еще резиновый слайдер, не хотелось, чтобы он в ИЕ не так выглядел.

Имхо проблема надумана, скрипты центрирования - явно от больного воображения..., их долой и пробовать чисто- css, ибо проблему надумали
Убрать скрипты, - тогда можно убрать !important из css добавок, доцентрировать полоски, вставить слайдер и дать ссылку, если возникают проблемы

danik.js 12.07.2013 15:17

Чета в хроме слайдер не работает. Смотрел тут http://www.test.vlada-ltd.com/news-salon.html?n=7

dianitka 12.07.2013 15:41

подправила, теперь работает, нужно взять за стрелочку черную внизу и прокрутить

danik.js 12.07.2013 17:07

Цитата:

Сообщение от dianitka
нужно взять за стрелочку черную внизу и прокрутить

:lol: лол никогда бы не догадался)))
Я думал это чисто элемент декорации. Я думаю это бесполезная фишка - ей никто не будет пользоваться, поскольку она не очевидна.
И растянутый слайдер выглядит неопрятно, будто это косяк, а не задумка дизайнера.

dianitka 12.07.2013 17:19

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


Часовой пояс GMT +3, время: 05:08.