VPF::Меню div'ами - Форум программистов

Georgich

Дата 29.3.2008, 23:57 (ссылка)

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

Загрузка ...

Шустрый

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

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

Приветствую!
Встала передо мной такая проблема:
Есть блок меню, выполненный таблицей:

Код

        <table width="182"  border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td height="38" style="background-image:url({THEME}/images/ket_2.jpg)"><div class="style9" style="text-align:center;">ПОПУЛЯРНОЕ</div></td>
                      </tr>
                      <tr>
                        <td height="100%" align="left" valign="top" style="background-image:url({THEME}/images/rep_1.jpg) "><div style="padding-left:12px; padding-top:17px; padding-bottom:14px">
                          <table width="157"  border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <td height="20" align="left" valign="middle"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                                  <tr align="left" valign="middle">
                                    <td class="style3">
                                    {topnews}
                                    </td>
                                  </tr>
                              </table></td>
                            </tr>
                          </table>
                        </div></td>
                      </tr>
                      <tr>
                        <td height="4" align="left" valign="top" style="background-image:url({THEME}/images/bot_2.jpg);"></td>
                      </tr>
        </table>

Мне табличный метод не очень приятен и я решил сделать тоже самое, но div'ами. И столкнулся с тем, что не могу решить, как оптимально сделать слоем. Как видно из табличного представления, то, грубо говоря, блок делится на три ячейки : заголовок, тело и низ. Вот я и думаю, как это сделать дивом, да так, чтобы и кроссбраузерность была. Помогите, пожалуйста!
СПАСИБО!

Georgich

Дата 30.3.2008, 20:03 (ссылка)

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

Загрузка ...

Шустрый

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

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

Решил сделать так:

Код


#nav
{
margin-top:7px;
width:182px;
background:url(../images/bot_2.jpg) no-repeat bottom;
}

UL
{
padding-left:30px;
width:152px;
background:url(../images/rep_1.jpg) repeat-y;
}

LI
{
text-align:left;
}

H2
{
line-height:35px;
color:#FFFFFF;
font-size: 13px;
text-align:center;
font-weight:bold;
background:url(../images/ket_2.jpg) no-repeat;
}

Код

<div id="nav">
                <h2>НАВИГАЦИЯ</h2>
                    <ul class="style3">
                        <li><a href="">Пункт</a></li>
                        <li><a href="">Пункт</a></li>
                        <li><a href="">Пункт</a></li>
                        <li><a href="">Пункт</a></li>
                        <li><a href="">Пункт</a></li>
                        <li><a href="">Пункт</a></li>
                        <li><a href="">Пункт</a></li>
                    </ul>
            </div>

Но вот тут такая проблема. У #nav не видно бэкграунда. Наверное на наего накладывается UL. Прошу помощи...

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