VPF::Ломаются div-ы - Форум программистов

Noviy

Дата 11.1.2009, 19:25 (ссылка)

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

Загрузка ...

Шустрый

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

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

Всем привет. На сайте есть горизонтальное меню, не резиновое, как и сам сайт. При попытке растянуть меню на всю ширину экрана:

Код


#site{
    width: 100%
}

меню начало ломаться (элементы меню начали соскакивать вниз), при сжатии окна. Шаблон сайта, полностью на дивах. Подскажите как это побороть. Вылаживаю ниже код:

Код


<div id="site">

<!-- шапка -->
   ......................................
<!--  ===== -->
    
<!-- Меню -->
    <div class="header_nav_bg">
        <div class="header_nav"><a href="/">Главная</a></div> 
        <div class="header_nav_line"></div>  
            <!-- Далее подобным образом -->
        </div>
</div>

Код


#site{

    width: 1004px;
}

div.header_nav_bg{ /*Фоновая картинка в шапке навигация*/
    width: 100%;
    height: 51px;
    background-image: url(images/header_bg_nav.jpg);
    background-repeat: repeat-x;
    BORDER-TOP: #FFFFFF 1px solid;
}

div.header_nav{
    float: left;
    text-align: center;
    padding-top:15px;
    width: 140px;
}

div.header_nav_line{/*Разделитель в навигации*/
   width: 4px;
    height: 51px;
    background-image: url(images/header_bg_nav_line.jpg);
    background-repeat: no-repeat;
    float: left;
    margin-left:10px;
    margin-right:10px;
}

Это сообщение отредактировал(а) Noviy - 11.1.2009, 19:26

WebMast

Дата 11.1.2009, 19:54 (ссылка)

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

Загрузка ...

Front-end developer

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

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

Верстай резиновые шаблоны ;).

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

Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome

Noviy

Дата 11.1.2009, 19:57 (ссылка)

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

Загрузка ...

Шустрый

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

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

пытался, выше написан результат smile

bars80080

Дата 11.1.2009, 21:20 (ссылка)

(голосов:1)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

сие произошло по причине, что пункты меню+разделители не влезли в получившуюся ширину. посчитай количество занимаемых ими пикселов, добавь ещё немного на погрешность и прикинь сколько ширина #site, если меньше, то придётся уменьшать ширину пунктов

также, при сужении страницы, по любому будет достигнут момент, когда они всё равно будут валиться. тогда придётся зафиксить минимальное значение ширины. #site { min-width: XXpx; } для всех браузеров, за исключением ИЕ6. для которого придётся засовывать блок с этой минимальной шириной width: XXpx под #site

Noviy

Дата 11.1.2009, 22:04 (ссылка)

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

Загрузка ...

Шустрый

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

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

спасибо - помогло smile

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