АРМАДА
Как сделать подскажите?
Новая тема Написать ответ Advanced Hosters - профессиональный хостинг

Antony
Свой
Зарегистрирован: 30.05.2007
Сообщений: 40
Обратиться по нику
# Добавлено:Пт Фев 08, 2008 1:52 amДобавить в избранноеОтветить с цитатой
Посдкажите как сделать есть ЦСС стиль

#wrap { background: #ffffff url(images/main.jpg) repeat-y center;
width: 800px;
padding: 0px;
margin: 0px auto;
}
#ad {
height: 100px;
margin: 0px auto;
width:800px;
text-align:center;
background: #fdc892;
}


#ad вложен в #wrap

<div id="wrap">
<div id="ad">

<?php ds('xxxxxxxxx); ?>

</div>

в <?php ds('xxxxxxxxx); ?> у меня пикса. Как сделать так что бы она выравнивась по вертикале посередине. В реале выравнена по верхнему краю.
Перепробовал все все равно упозает вверх
Буду благодарен за помощь

graphh
Опытный
Зарегистрирован: 27.06.2007
Сообщений: 213
Обратиться по нику
# Добавлено:Пт Фев 08, 2008 9:35 amОтветить с цитатой
центр определи маргином
Код:
 #wrap { background: #ffffff url(images/main.jpg) repeat-y center;
width: 800px;
padding: 0px;
margin: 0px auto;
}
#ad {
height: 100px;
margin-top:200px ;  //-------------определить эксперементально
width:800px;
text-align:center;
background: #fdc892;
}



Код:
<div id="wrap">
         <div id="ad">

<?php ds('xxxxxxxxx); ?>

         </div>
 </div>


graphh
Опытный
Зарегистрирован: 27.06.2007
Сообщений: 213
Обратиться по нику
# Добавлено:Пт Фев 08, 2008 9:40 amОтветить с цитатой
или же так
Код:
margin-top: 30%;


Taburetkin
Гуру
Зарегистрирован: 25.02.2007
Сообщений: 1426
Star (Сумма: 1)
Обратиться по нику
# Добавлено:Пт Фев 08, 2008 12:46 pmОтветить с цитатой
Вообще-то не тривиальная задача. Vertical align работает только в inline элементах.

graphh твой вариант не будет работать во всех броузерах.

вот более-менее приемлимый вариант работающий во всех броузерах:

Код:
<style type='text/css'>
#ad {
   height:100px;
   min-height:50px !important;
   background-color: #FF0000;
   text-align: center;
   width: 800px;
   margin-right: auto;
   margin-left: auto;
}
#ad img {position:relative;top:50%;margin-top:-30px; //---- половина высоты картинки в пикселях

}
</style>



Код:
<div id="ad"><?php ds('xxxxxxxxx); ?></div>


graphh
Опытный
Зарегистрирован: 27.06.2007
Сообщений: 213
Обратиться по нику
# Добавлено:Пт Фев 08, 2008 2:32 pmОтветить с цитатой
Удалено, как зловредный код


Последний раз редактировалось: graphh (Пт Фев 08, 2008 6:14 pm), всего редактировалось 1 раз

Taburetkin
Гуру
Зарегистрирован: 25.02.2007
Сообщений: 1426
Star (Сумма: 1)
Обратиться по нику
# Добавлено:Пт Фев 08, 2008 3:06 pmОтветить с цитатой
Где работает? Ни в осле, ни в мозилле, ни в О не работает твой код

graphh
Опытный
Зарегистрирован: 27.06.2007
Сообщений: 213
Обратиться по нику
# Добавлено:Пт Фев 08, 2008 6:15 pmОтветить с цитатой
блин, не то позиционировал

brush
V.I.P.
Зарегистрирован: 29.09.2005
Сообщений: 2572
Обратиться по нику
# Добавлено:Сб Фев 09, 2008 3:40 amОтветить с цитатой
Taburetkin писал(а):
вот более-менее приемлимый вариант работающий во всех броузерах:

стесняюсь спросить: min-height тоже во всех будет? :о)

ъъъ
Профессионал
Зарегистрирован: 07.08.2006
Сообщений: 663
Обратиться по нику
# Добавлено:Сб Фев 09, 2008 9:06 amОтветить с цитатой
Да, но нужно будет добавить хаков под ие.

http://www.cssplay.co.uk/boxes/minheight.html
search-this.com/2007/02/05/css-min-height-explained
mezzoblue.com/archives/2004/09/16/minheight_fi/
greywyvern.com/code/min-height-hack

Taburetkin
Гуру
Зарегистрирован: 25.02.2007
Сообщений: 1426
Star (Сумма: 1)
Обратиться по нику
# Добавлено:Сб Фев 09, 2008 10:09 amОтветить с цитатой
brush писал(а):
стесняюсь спросить: min-height тоже во всех будет? :о)



тот код будет работать в ИЕ6 и 7, О, ФФ и Сафари. Пример конктертно для не inline элемента. Для текста line-height.

Antony
Свой
Зарегистрирован: 30.05.2007
Сообщений: 40
Обратиться по нику
# Добавлено:Пн Фев 11, 2008 10:17 amОтветить с цитатой
Taburetkin, большое спасибо
Новая тема Написать ответ    ГЛАВНАЯ ~ ТЕХНИЧЕСКИЕ ВОПРОСЫ

Перейти:  





Генеральный спонсор



Партнеры