VPF::как можно выровнять слой по цетру страницы?

ThugAngel

Дата 21.7.2005, 11:47 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 54
Регистрация: 26.2.2004

Репутация: нет
Всего: нет

как можно выровнять слой по цетру? задание координат в процентах и пикселах не помогает.
к таблице слой никак не привязать? smile

Sardar

Дата 21.7.2005, 13:11 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 6
Всего: 317

Можно поставить на абсолютную позицию и задать margin-left: auto; margin-right: auto;. Но ИЕ при этом плевать хотел на такую конструкцию.

Можно сложней, положить слой на абслоютной позиции посередине экрана, вложить в него слой на релативной позиции, от которого будет считать координаты контентна, внутрь положить слой с контентом на абсолютной позиции, отцентровав его через негативные top/left

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<style type="text/css">
#anker {
  position: absolute;
  left: 50%;
  top: 50%;
  border: solid 1px red;
}

#cord_anker {
  position: relative;
}

#msg {
  position: absolute;
  width: 200px;
  height: 100px;
  top: -50px;
  left: -100px;
  border: 1px solid blue; 
}
</style>
</head>

<body>

<div id="anker"><div id="cord_anker"><div id="msg">
Text text text text text text text text text text text <br \>
text text text text text text text text text text text   
</div></div></div>

</body>
</html>

Так по идее везде должно работать.

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

ThugAngel

Дата 21.7.2005, 14:14 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 54
Регистрация: 26.2.2004

Репутация: нет
Всего: нет

Спасибо, Sardar, за классную идею, действительно нормально работает smile

o.s.a.

Дата 23.7.2005, 08:30 (ссылка)

(нет голосов)

Загрузка ...

Xo4y B MocKBy

Профиль
Группа: Участник
Сообщений: 312
Регистрация: 16.2.2005
Где: Ташкент

Репутация: 3
Всего: 15

Sardar я тут по-ковырялся в твоем скрипте - идея классная:
1-ый div для нахождения центра страницы;
2-ой, ИМХО, лишний (можно обойтись и без него);
3-ий отображает текст по центру

И еще рамка в 1-ом диве не нужна, т.к. она потом отображается точкой.

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#anker {
  position: absolute;
  left: 50%;
  top: 50%;
}
#msg {
  position: absolute;
  width: 200px;
  height: 100px;
  top: -50px;
  left: -100px;
  border: 1px solid blue; 
}
</style>
<script language="JavaScript" type="text/javascript">
 
</script>
</head>
<body>
 <div id="anker"><div id="msg">
  Text text text text text text text text text text text <br \>
  text text text text text text text text text text text 
 </div></div>
</body>
</html>

--------------------

Не могу стоять, пока другие работают, пойду полежу.

Sardar

Дата 23.7.2005, 12:49 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 6
Всего: 317

Цитата(o @ 23.7.2005, 07:30)

2-ой, ИМХО, лишний (можно обойтись и без него);

Не знал, я думал только от слоёв с релативной позицией отсчитываються координаты(offsetParent)

Цитата(o @ 23.7.2005, 07:30)

И еще рамка в 1-ом диве не нужна, т.к. она потом отображается точкой.

Бордер для примера, что бы видеть где что smile

--------------------

GAM

Дата 2.8.2005, 13:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 3.3.2005

Репутация: 2
Всего: 2

Тоже бился над этой проблемой и находил тоже такое же решение этой проблемы - используя отрицательное позиционирование, но получается небольшой баг при такой вёрстке.
Попробуйте уменьшить окно, чтобы появился скрол.
Верхняя часть дива уходит за окно браузера и его уже не увидишь.
Как это решить?
// заранее спасибо

GAM

Дата 3.8.2005, 09:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 3.3.2005

Репутация: 2
Всего: 2

Нашлось решение вот таким способом:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>vertical align</title>
<style type="text/css">
<!--
html,body{
    margin: 0px;
    padding: 0px;
    text-align: center;
}
#blockA{
    height:200px;
    width:300px;
    background-color: Silver;
}
#blockB{
    position:relative;
    top:50%;
    width: 100%;
    text-align:center;
}
#blockC{
    position:relative;
    top:-50px;
    width:50%;
    height:100px;
    margin: auto;
    background: White;
}
-->
</style>
<script type="text/javascript"> </script>
</head>
<body>

<div id="blockA">
    <div id="blockB">
        <div id="blockC">
            Text, text, text, text, text<br>Text, text, text, text, text
        </div>
    </div>
</div>

</body>
</html>

Дальше к этому уже можно прикреплять что душе угодно ;)

GAM

Дата 3.8.2005, 10:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 3.3.2005

Репутация: 2
Всего: 2

Так, появились новые ньюансы такой идеи:
При выставлении внутреннего блока в высоту, к примеру, 500, появляется скролл.
Чтобы этого избежать, надо добавить в стиль блока В (#blockB) такую строку:

Код


height: 50%;

Число можно подставить любое, но из диапазона 0%<N<50%
НО!!
этот ход не помогает в Mozilla Firefox / 1.0.4
в опере и в ie всё ok

o.s.a.

Дата 3.8.2005, 11:24 (ссылка)

(нет голосов)

Загрузка ...

Xo4y B MocKBy

Профиль
Группа: Участник
Сообщений: 312
Регистрация: 16.2.2005
Где: Ташкент

Репутация: 3
Всего: 15

Во-первых, то, что написали мы с Сардаром, работает везде !!!
Во-вторых, твой скрипт в ИЕ находится по центру только по-горизонтали,
а по-вертикали - он находится на самом верху

--------------------

Не могу стоять, пока другие работают, пойду полежу.

GAM

Дата 3.8.2005, 16:27 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 3.3.2005

Репутация: 2
Всего: 2

>>>Во-первых, то, что написали мы с Сардаром, работает везде !!!

А как же быть со скролом страницы, когда страницу сжимаешь и слой уходит вверх, а скрол туда не доходит?
Для примера изменить так:

Код


#msg {    
  position: absolute;    
  width: 200px;    
  height: 600px;    
  top: -300px;    
  left: -100px;    
  border: 1px solid blue;    
}

>>>Во-вторых, твой скрипт в ИЕ находится по центру только по-горизонтали, а по-вертикали - он находится на самом верху

А что мешает блок "А" сделать не 300х200, а на 100% окна и блок "С" будет уже по центру.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »