VPF::Выравнивание блоков по центру широкого блока

KonstRuctor

Дата 15.10.2009, 13:21 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

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

Привет!
Есть резиновая верстка, в ней есть подвал. Хочу в подвале красиво разместить 5 кнопок 80*31 и один баннер 468*60px. Так, чтобы между ними было 8px, по вертикали и горизонтали все блоки плавали бы по центру.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU">
<head>
<title></title>
</head>
<body>
<div id="wrap">
<p>.... Здесь идет вывод информации ... а далее мой подвал:</p>
<div id="footer">

<div id="container">
    <div class="knop"><img src="knop_1.gif" width="80" height="31" alt="" /></div>
    <div class="knop"><img src="knop_1.gif" width="80" height="31" alt="" /></div>
    <div class="knop"><img src="knop_1.gif" width="80" height="31" alt="" /></div>
    <div class="knop"><img src="knop_1.gif" width="80" height="31" alt="" /></div>
    <div class="knop"><img src="knop_1.gif" width="80" height="31" alt="" /></div>
    <div class="knopl"><img src="banner.gif" width="468" height="60" alt="" /></div>
</div><!-- end of container -->

</div><!-- end of footer -->
</div><!-- end of wrap -->
</body>
</html>

Далее мои стили:

Код


body {
    margin:0;
    padding:0;
    border:0;    
    width:100%;
}
#wrap {
    min-width: 980px;
    max-width: 1200px;
    width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 980 ? '980px' : (document.documentElement.clientWidth || document.body.clientWidth) > 1200 ? '1200px' : '100%' ); /* для ИЕ */
    margin: 0 auto;
}
#footer {
    clear:both;
    float:left;
    width:100%;
    text-align: center;
    background-color: #CCC;
}
#container {
    display: block;
    width: 100%; 
    overflow: hidden;
    margin: 0 auto;
    margin:30px 0 30px 0;
    text-align: center;
}
.knop, .knopl {
  display: inline;
  vertical-align: middle;
  border:1px solid #000;
}
.knop {
  width: 80px;
  height: 31px;
  margin: 0 8px 0 0;
}
.knopl{
  width: 468px;
  height: 60px;
}

У меня выравниваются блоки по горизонтали, но по вертикали выравниваются по низу друг друга.
Пробовал для кнопок делать display: inline-block, но такой подход не работает в IE6.
Кто как сделал бы красивее? Спасибо!

blah

Дата 15.10.2009, 13:57 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

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

Например так:

Код


<div id="container">
                <div class="btn-holder">
                    <div class="knop"><img src="knop_1.gif" width="80" height="31" alt="" /></div>
                    <div class="knop"><img src="knop_1.gif" width="80" height="31" alt="" /></div>
                    <div class="knop"><img src="knop_1.gif" width="80" height="31" alt="" /></div>
                    <div class="knop"><img src="knop_1.gif" width="80" height="31" alt="" /></div>
                    <div class="knop"><img src="knop_1.gif" width="80" height="31" alt="" /></div>
                    <div class="knopl"><img src="banner.gif" width="468" height="60" alt="" /></div>
                </div>
            </div><!-- end of container -->

Код


.knop, .knopl {
    vertical-align: middle;
    display:table-cell;
    height:60px;
}
.knop {
    width: 80px;
    padding: 0 8px 0 0;
}
.knop img{
    display:block;
    border:1px solid #000;
}
.knopl{
    width: 468px;
    height: 60px;
}
.btn-holder{
    width:920px;
    margin:0 auto;
    display:table;
}
* html .knop, .knopl,
* +html .knop, .knopl{
    float:left;
    height:auto;
    margin-top: expression(this.parentNode.offsetHeight > this.offsetHeight ? ((this.parentNode.offsetHeight-this.offsetHeight)/2 + "px") : "0");
}

Ну а экпрешены конечно лучше вынести.

KonstRuctor

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

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

Загрузка ...

Бывалый

В IE красиво, в FF3.5.3 все прыгает произвольным образом при перезагрузке страницы...

blah

Дата 15.10.2009, 16:40 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

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

Сорри, промазал

Код


.knop img,
.knopl img{
    display:block;
    border:1px solid #000;
}
.knopl{
    width: 468px;
    height: 60px;
}
.btn-holder{
    width:920px;
    margin:0 auto;
    display:table;
}
* html .knop,
* html .knopl{
    float:left;
    height:auto;
    margin-top: expression(this.parentNode.offsetHeight > this.offsetHeight ? ((this.parentNode.offsetHeight-this.offsetHeight)/2 + "px") : "0");
}
* +html .knop,
* +html .knopl{
    float:left;
    height:auto;
    margin-top: expression(this.parentNode.offsetHeight > this.offsetHeight ? ((this.parentNode.offsetHeight-this.offsetHeight)/2 + "px") : "0");
}

Хотя это все лирика, для данного случая проще сделать так:

Код


.knop,
.knopl{
    float:left;
    margin:14px 8px 0 0;
}
.knopl{margin:0;}
.knop img,
.knopl img{
    display:block;
    border:1px solid #000;
}
.btn-holder{
    width:920px;
    margin:0 auto;
    overflow:hidden;
}

Это сообщение отредактировал(а) blah - 15.10.2009, 17:33

KonstRuctor

Дата 17.10.2009, 06:15 (ссылка)

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

Загрузка ...

Бывалый

Замечательно!
Последний вариант работает изумительно! В IE6 еще надобно проверить
Спасибо! Как такая мысль не пришла в голову...
Вроде все просто smile

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