Подскажите как выровнять сайт по центру экрана.

12
S8
На сайте с 28.02.2012
Offline
41
15337

Вечер добрый, появился у меня вопрос по верстке, приходилось верстать не один сайт, но никогда не сталкивался с тем что макет нужно выровнять по центру экрана и по высоте и ширине. Подскажите как это сделать, ширина сайта будет min 1000px, max 1400px, высота 900px. В поиске пока подходящего ничего не нашел.

Хочешь все знать про SEO и создание сайтов? вступай (https://vk.com/pr_step_com)!!!
Olldman
На сайте с 21.04.2010
Offline
79
#1

body{max-width:1400px;margin:0px auto;min-width:1000px;min-height:100%;}
S8
На сайте с 28.02.2012
Offline
41
#2
Olldman:
body{max-width:1400px;margin:0px auto;min-width:1000px;min-height:100%;}

Это понятно, а как быть с высотой, вы привели пример только с шириной.

Olldman
На сайте с 21.04.2010
Offline
79
#3

А для вам высота? Она будет в зависимости от кол-ва контента.

S8
На сайте с 28.02.2012
Offline
41
#4
Olldman:
А для вам высота? Она будет в зависимости от кол-ва контента.

Нет высота будет фиксированная. Это для главной страницы.

LLIARK
На сайте с 29.02.2012
Offline
11
#5

Высота у сайта резиновая. как сказал Olldman она зависит от контента.

в css

{

margin: 0;
padding: 0;
border: 0;
}

HTML, body {
width: 100%;
height: 100%;
}

* HTML #container {
height: 100%;
}

body {
background: #fff;
Портфолио (http://lliark.ru)
DS
На сайте с 01.01.2011
Offline
24
#6
Sirega85:
Вечер добрый, появился у меня вопрос по верстке, приходилось верстать не один сайт, но никогда не сталкивался с тем что макет нужно выровнять по центру экрана и по высоте и ширине. Подскажите как это сделать, ширина сайта будет min 1000px, max 1400px, высота 900px. В поиске пока подходящего ничего не нашел.

Вариантов много... Думаю основная сложность именно в вертикальном позиционировании, так что остальным пренебрегу... Приведу способ, который использую сам (допилить и сделать кроссбраузерным думаю не составит труда)

HTML

<body>

<div id="cross"></div>
<div id="container">
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
1<br />
</div>
</body>

CSS


body {
padding: 0;
margin: 0;
width:100%;
display: table;
vertical-align: middle;
height: 100%;
text-align: center;
}
#cross {
display: inline-block;
height:100%;
vertical-align: middle;
}
#container {
display: inline-block;
vertical-align: middle;
width: 1000px;
text-align: left;
}
LLIARK:
Высота у сайта резиновая. как сказал Olldman она зависит от контента.

в css

{

margin: 0;
padding: 0;
border: 0;
}

HTML, body {
width: 100%;
height: 100%;
}
Либо у вас потерялся значимый кусок, либо ваш кусок не делает, ровным счетом, ничего...

* HTML #container {
height: 100%;
}

body {
background: #fff;
NW
На сайте с 08.12.2011
Offline
77
#7
Sirega85:
Вечер добрый, появился у меня вопрос по верстке, приходилось верстать не один сайт, но никогда не сталкивался с тем что макет нужно выровнять по центру экрана и по высоте и ширине. Подскажите как это сделать, ширина сайта будет min 1000px, max 1400px, высота 900px. В поиске пока подходящего ничего не нашел.

ну а что там ровнять если можно просто написать...

html - <div id="content"></div>

css - #content{background-position:center;}

Анкета для новичков и профессионалов, вопросы могут быть разными!
M8
На сайте с 09.09.2010
Offline
58
#8
Sirega85:
Вечер добрый, появился у меня вопрос по верстке, приходилось верстать не один сайт, но никогда не сталкивался с тем что макет нужно выровнять по центру экрана и по высоте и ширине. Подскажите как это сделать, ширина сайта будет min 1000px, max 1400px, высота 900px. В поиске пока подходящего ничего не нашел.

Сталкивался с такой проблемой, решал при помощи javascript. Как, вариант с css, посмотрите здесь.

Saitoff
На сайте с 27.05.2011
Offline
71
#9

По высоте попробуйте так:

position:absolute;

top:50%;

margin-top:-450px;

DiAksID
На сайте с 02.08.2008
Offline
236
#10

сделайте основной wrapper в виде таблицы с одной ячейкой и не партесь. слегка не кошерно, но зато работает всегда и везде...

show must go on !!!...
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий