Срочно прошу помощи! Вопрос про центрирование и поз-е в HTML
От: XJess  
Дата: 29.07.09 13:16
Оценка:
Привет всем!
У меня проблема такая. Есть веб-проект, который изначально писала не я — теперь его передали полностью мне. Есть див, который описывает tabcontrol сторонних производителей (т. е. этот див автоматом превращается в табконтрол при показе путем каких-то не нами написанных манипуляций), который изначально располагался внутри другого дива, у которого стояло align=center. Соответственно, все замечательно выравнивалось по центру (табконтрол). Соответственно, у таба есть корешки (3 штуки), а сам он довольно длинный в длину — 1000 пикселей. Корешки места занимают мало, а рядом в той же строке с ними пустое пространство. Потом понадобилось воткнуть на ту же страницу еще одну группу элементов — надпись, рядом ссылка, рядом комбобокс (это все как одна группа элементов). Так вот, моему начальству пришло в голову, что в той строке, где корешки табов, как раз пропадает место, и было дано задание воткнуть эту группу именно туда и выровнять вправо, чтобы эта группа упиралась в правую границу таб контрола. Идея хорошая — места как раз достаточно в принципе... Но... Я сделала это так: создала еще один див шириной в 600 пикселей, в который воткнула эту группу (надпись, рядом ссылка, рядом комбобокс). 600 — это чтобы див не наезжал на корешки. Задала нужные z-index для табконтрола и этого нового дива и задала абсолютную (теперь уже) позицию (position:absolute) сверху для табконтрола и этого нового дива (там известно, сколько нужно отступить), потому что если новому диву не задать абсолютную позицию сверху, то он не будет в той же строке... Но из-за того, что я задала абсолютную позицию, съехало выравнивание по центру. Пришлось в итоге выравнивать по центру руками через window.screen.width. Так вот, все бы ничего — вроде бы все выравнялось, но я не учла одного — что при изменении размера страницы ничего автоматом теперь не сдвигается, как было раньше при align=center у верхнего дива.

Вообщем, помогите сделать так, чтобы оно выравнивалось автоматом и расположить все так, как надо. Объясняю, возможно, слишком подробно, но это чтобы все поняли, что я делаю, а может делаю не так, как надо...

Браузеры — IE 7, FF 3.0.12.

Пожалуйста, помогите советом... Что-то я делаю не так, видимо, потому что должен же быть способ достичь всего этого одновременно...
Re: Срочно прошу помощи! Вопрос про центрирование и поз-е в
От: Centaur Россия  
Дата: 29.07.09 14:29
Оценка: 3 (1)
Здравствуйте, XJess, Вы писали:

XJ>У меня проблема такая. Есть веб-проект, который изначально писала не я — теперь его передали полностью мне. Есть див, который описывает tabcontrol сторонних производителей (т. е. этот див автоматом превращается в табконтрол при показе путем каких-то не нами написанных манипуляций), который изначально располагался внутри другого дива, у которого стояло align=center. Соответственно, все замечательно выравнивалось по центру (табконтрол). Соответственно, у таба есть корешки (3 штуки), а сам он довольно длинный в длину — 1000 пикселей. Корешки места занимают мало, а рядом в той же строке с ними пустое пространство. Потом понадобилось воткнуть на ту же страницу еще одну группу элементов — надпись, рядом ссылка, рядом комбобокс (это все как одна группа элементов). Так вот, моему начальству пришло в голову, что в той строке, где корешки табов, как раз пропадает место, и было дано задание воткнуть эту группу именно туда и выровнять вправо, чтобы эта группа упиралась в правую границу таб контрола. Идея хорошая — места как раз достаточно в принципе...


Ниасилил, ибо многабукоф. Вот так, что ли?

.------.------.------.
| Tab1 | Tab2 | Tab3 |              Label Link [x]
|      `------------------------------------------.
|                                                 |
|                                                 |
|                                                 |
|                                                 |
|                                                 |
|                                                 |
|                                                 |
|                                                 |
|                                                 |
|                                                 |
`-------------------------------------------------'


XJ>Но... Я сделала это так: создала еще один див шириной в 600 пикселей, в который воткнула эту группу (надпись, рядом ссылка, рядом комбобокс). 600 — это чтобы див не наезжал на корешки. Задала нужные z-index для табконтрола и этого нового дива и задала абсолютную (теперь уже) позицию (position:absolute) сверху для табконтрола и этого нового дива (там известно, сколько нужно отступить), потому что если новому диву не задать абсолютную позицию сверху, то он не будет в той же строке... Но из-за того, что я задала абсолютную позицию, съехало выравнивание по центру. Пришлось в итоге выравнивать по центру руками через window.screen.width. Так вот, все бы ничего — вроде бы все выравнялось, но я не учла одного — что при изменении размера страницы ничего автоматом теперь не сдвигается, как было раньше при align=center у верхнего дива.


У, как всё сложно, а значит — неправильно.

Во-первых, если можно, нужно положить группу непосредственно внутрь табконтрола и прибить её гвоздями к правому верхнему углу:
<style type="text/css">
#tabs { position: relative; }
#group { position: absolute; top: 0px; right: 0px; }
</style>
<div id="tabs">
<div id="group"><label>Label <a href="#">Link</a> <input type="checkbox"></label></div>
</div>


Во-вторых, так может оказаться нельзя, если код табконтрола делает что-то нетривиальное с внутренностями и разбираться в этом некогда. Тогда можно обернуть группу и табконтрол в общий контейнер и группу прибить к контейнеру:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Test</title>
<style type="text/css">
#container
{
    position: relative; /* чтобы работало position: absolute для #group */
    margin-left: auto; margin-right: auto; /* центрируем весь контейнер */
    border: 1px solid green;
    width: 600px; height: 400px;
}
#tabs
{
    border: 1px solid red;
    width: 100%; height: 100%; /* табы растягиваем на весь контейнер */
}
#group
{
    position: absolute; top: 0px; right: 0px; /* группу прибиваем вверх вправо */
    border: 1px solid blue;
}
</style>
</head>
<body>
<div id="container">
    <div id="group"><label>Label (<a href="#">link</a>) <input type="checkbox"></label></div>
    <div id="tabs"></div>
</div>
</body>
</html>
Re[2]: Срочно прошу помощи! Вопрос про центрирование и поз-е
От: XJess  
Дата: 29.07.09 14:36
Оценка:
Здравствуйте, Centaur, Вы писали:

C>Ниасилил, ибо многабукоф. Вот так, что ли?


C>
C>.------.------.------.
C>| Tab1 | Tab2 | Tab3 |              Label Link [x]
C>|      `------------------------------------------.
C>|                                                 |
C>|                                                 |
C>|                                                 |
C>|                                                 |
C>|                                                 |
C>|                                                 |
C>|                                                 |
C>|                                                 |
C>|                                                 |
C>|                                                 |
C>`-------------------------------------------------'
C>


Да, именно так.
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.