Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > DIV-вы в FireFox, IE, Opera


Автор: Enya 21.11.2006, 16:48
Я не много делаю div-вами, но порой приходиться к ним прибегать.
Вот сейчас мне нужно поле для бокового меню. я делаю в CSS
Код

div.NavBar{
    border: 1px solid #337935;
    background-color: White;
    width: 15%;
    height: 15%;
}
в html-е пишу так
Код

<div class="NavBar">
                  <li><a href="" class="NavBarItem">Статьи</a>
                    <li><a href="" class="NavBarItem">Форум</a>
                    <li><a href="" class="NavBarItem">F. A. Q. </a>
                    <li><a href="" class="NavBarItem">Помощь</a>
                    <li><a href="" class="NavBarItem">О нас</a>
                </div>
В IE хотя бы за границы не вылазит содержимое, а в FireFox вообще свиста-пляска. Что делать? нужно же чтобы во всех браузерах одинаково показывало.

Автор: S.A.P. 21.11.2006, 16:59
Enya, не забываем заключать элементы списков в контейнеры. Например
Код

<div class="NavBar">
    <ul>
        <li><a href="" class="NavBarItem">Статьи</a>
        <li><a href="" class="NavBarItem">Форум</a>
        <li><a href="" class="NavBarItem">F. A. Q. </a>
        <li><a href="" class="NavBarItem">Помощь</a>
        <li><a href="" class="NavBarItem">О нас</a>
    </ul>
</div>

Автор: alergi 21.11.2006, 16:59
попробуй так
Код

<ul class="NavBar">
                    <li><a href="" class="NavBarItem">Статьи</a>
                    <li><a href="" class="NavBarItem">Форум</a>
                    <li><a href="" class="NavBarItem">F. A. Q. </a>
                    <li><a href="" class="NavBarItem">Помощь</a>
                    <li><a href="" class="NavBarItem">О нас</a>
</ul>

Хотя в блочной вёрстке многое зависит от соседних элементов...

Автор: Nuxx 28.11.2006, 15:04
Решение простое: использовать разметку, которую подсказал нам 
S.A.P., так как списки обычно оформляются вкупе с 'обертывающими' тегами <ul> или <ol> - к которым и применяются стили списка,
а для придания формы списку (размеров) пользуйтесь внешним блоком-контейнером. Тогда у вас текст будет вмещаться в размеры этого блока.

Автор: Panoramix 17.3.2007, 22:36
Зравствуйте, господа Винградчане! Первый мой пост здесь, ура!)
Ну, ближе к делу. Не стал создавать новую тему, так как моя проблема относится тоже к различному отображению DIV'ов разными браузерами.
Есть код меню:
Код
<div class="menu">
    <div class="menu_item" style="margin-top:0px;" onmouseover="this.className='menu_item-hover';" onmouseout="this.className='menu_item';" onclick="window.location.href='#';"><a class="menu_link" href="#">Главная</a></div>
    <div class="menu_item" style="margin-top:3px;" onmouseover="this.className='menu_item-hover';" onmouseout="this.className='menu_item';" onclick="window.location.href='#';"><a class="menu_link" href="#">Форум</a></div>
    <div class="menu_group" style="margin-top:3px;" onmouseover="this.className='menu_item-hover';" onmouseout="this.className='menu_group';" onclick="window.location.href='#';"><a class="menu_link" href="#">События</a></div>
    <div class="menu_subitem" style="margin-top:0px;" onmouseover="this.className='menu_subitem-hover';" onmouseout="this.className='menu_subitem';" onclick="window.location.href='#';"><a class="menu_link" href="#">Новости портала</a></div>
    <div class="menu_subgroup" style="margin-top:0px;" onmouseover="this.className='menu_subitem-hover';" onmouseout="this.className='menu_subgroup';" onclick="window.location.href='#';"><a class="menu_link" href="#">Новости проекта</a></div>
        <div class="menu_subitem" style="margin-top:0px; margin-left:15px;" onmouseover="this.className='menu_subitem-hover';" onmouseout="this.className='menu_subitem';" onclick="window.location.href='#';"><img src="./img/dot.gif" width="5" height="5" style="margin-right:5px; margin-bottom:2px;"><a class="menu_link" href="#">Subitem1</a></div>
        <div class="menu_subgroup" style="margin-top:0px; margin-left:15px;" onmouseover="this.className='menu_subitem-hover';" onmouseout="this.className='menu_subgroup';" onclick="window.location.href='#';"><img src="./img/dot.gif" width="5" height="5" style="margin-right:5px; margin-bottom:2px;"><a class="menu_link" href="#">Subitem2</a></div>
            <div class="menu_subitem" style="margin-top:0px; margin-left:30px;" onmouseover="this.className='menu_subitem-hover';" onmouseout="this.className='menu_subitem';" onclick="window.location.href='#';"><img src="./img/dot.gif" width="5" height="5" style="margin-right:5px; margin-bottom:2px;"><a class="menu_link" href="#">Subitem1</a></div>
            <div class="menu_subitem" style="margin-top:0px; margin-left:30px;" onmouseover="this.className='menu_subitem-hover';" onmouseout="this.className='menu_subitem';" onclick="window.location.href='#';"><img src="./img/dot.gif" width="5" height="5" style="margin-right:5px; margin-bottom:2px;"><a class="menu_link" href="#">Subitem2</a></div>
    <div class="menu_item" style="margin-top:3px;" onmouseover="this.className='menu_item-hover';" onmouseout="this.className='menu_item';" onclick="window.location.href='#';"><a class="menu_link" href="#">Контакты</a></div>
</div>


Вот стили к нему:
Код
body
{
    font-size:12pt;
}
.menu
{
    background-color:#FBFBFB;
    width:150px;
    border-width:1px;
    border-style:solid;
    border-color:black;
    padding:3px;
}
.menu_link
{
    color:black;
    text-decoration:none;
}
.menu_item
{
    border-width:1px;
    border-style:solid;
    border-color:black;
    padding:1px;
    padding-left:8px;
    background-color:#E0E0E0;
    margin:0px;
    width:100%;
    cursor:pointer;
}
.menu_item-hover
{
    border-width:1px;
    border-style:solid;
    border-color:black;
    padding:1px;
    padding-left:10px;
    background-color:#F3F3E0;
    margin:0px;
    width:100%;
    cursor:pointer;
}
.menu_group
{
    border-width:1px;
    border-style:solid;
    border-color:black;
    padding:1px;
    padding-left:8px;
    background-color:#EFEFEF;
    margin:0px;
    width:100%;
    cursor:pointer;
}
.menu_subitem
{
    padding:0px;
    padding-left:5px;
}
.menu_subitem-hover
{
    padding:0px;
    padding-left:7px;
    text-decoration:underline;
}
.menu_subgroup
{
    padding:0px;
    padding-left:5px;
}


Проблема в следующем.
IE, как ни удивительно, воспринимает все правильно:
user posted image

А вот Opera/Firefox ведут себя странно - дивы выскакивают за пределы своего родителя, причем сам родительский DIV больше, чем должен быть.
user posted image

Полный код страницы в html:
Код
<html>
<head>
<style>
body
{
    font-size:12pt;
}
.menu
{
    background-color:#FBFBFB;
    width:150px;
    border-width:1px;
    border-style:solid;
    border-color:black;
    padding:3px;
}
.menu_link
{
    color:black;
    text-decoration:none;
}
.menu_item
{
    border-width:1px;
    border-style:solid;
    border-color:black;
    padding:1px;
    padding-left:8px;
    background-color:#E0E0E0;
    margin:0px;
    width:100%;
    cursor:pointer;
}
.menu_item-hover
{
    border-width:1px;
    border-style:solid;
    border-color:black;
    padding:1px;
    padding-left:10px;
    background-color:#F3F3E0;
    margin:0px;
    width:100%;
    cursor:pointer;
}
.menu_group
{
    border-width:1px;
    border-style:solid;
    border-color:black;
    padding:1px;
    padding-left:8px;
    background-color:#EFEFEF;
    margin:0px;
    width:100%;
    cursor:pointer;
}
.menu_subitem
{
    padding:0px;
    padding-left:5px;
}
.menu_subitem-hover
{
    padding:0px;
    padding-left:7px;
    text-decoration:underline;
}
.menu_subgroup
{
    padding:0px;
    padding-left:5px;
}
</style>
</head>
<body>
<div class="menu">
    <div class="menu_item" style="margin-top:0px;" onmouseover="this.className='menu_item-hover';" onmouseout="this.className='menu_item';" onclick="window.location.href='#';"><a class="menu_link" href="#">Главная</a></div>
    <div class="menu_item" style="margin-top:3px;" onmouseover="this.className='menu_item-hover';" onmouseout="this.className='menu_item';" onclick="window.location.href='#';"><a class="menu_link" href="#">Форум</a></div>
    <div class="menu_group" style="margin-top:3px;" onmouseover="this.className='menu_item-hover';" onmouseout="this.className='menu_group';" onclick="window.location.href='#';"><a class="menu_link" href="#">События</a></div>
    <div class="menu_subitem" style="margin-top:0px;" onmouseover="this.className='menu_subitem-hover';" onmouseout="this.className='menu_subitem';" onclick="window.location.href='#';"><a class="menu_link" href="#">Новости портала</a></div>
    <div class="menu_subgroup" style="margin-top:0px;" onmouseover="this.className='menu_subitem-hover';" onmouseout="this.className='menu_subgroup';" onclick="window.location.href='#';"><a class="menu_link" href="#">Новости проекта</a></div>
        <div class="menu_subitem" style="margin-top:0px; margin-left:15px;" onmouseover="this.className='menu_subitem-hover';" onmouseout="this.className='menu_subitem';" onclick="window.location.href='#';"><img src="./img/dot.gif" width="5" height="5" style="margin-right:5px; margin-bottom:2px;"><a class="menu_link" href="#">Subitem1</a></div>
        <div class="menu_subgroup" style="margin-top:0px; margin-left:15px;" onmouseover="this.className='menu_subitem-hover';" onmouseout="this.className='menu_subgroup';" onclick="window.location.href='#';"><img src="./img/dot.gif" width="5" height="5" style="margin-right:5px; margin-bottom:2px;"><a class="menu_link" href="#">Subitem2</a></div>
            <div class="menu_subitem" style="margin-top:0px; margin-left:30px;" onmouseover="this.className='menu_subitem-hover';" onmouseout="this.className='menu_subitem';" onclick="window.location.href='#';"><img src="./img/dot.gif" width="5" height="5" style="margin-right:5px; margin-bottom:2px;"><a class="menu_link" href="#">Subitem1</a></div>
            <div class="menu_subitem" style="margin-top:0px; margin-left:30px;" onmouseover="this.className='menu_subitem-hover';" onmouseout="this.className='menu_subitem';" onclick="window.location.href='#';"><img src="./img/dot.gif" width="5" height="5" style="margin-right:5px; margin-bottom:2px;"><a class="menu_link" href="#">Subitem2</a></div>
    <div class="menu_item" style="margin-top:3px;" onmouseover="this.className='menu_item-hover';" onmouseout="this.className='menu_item';" onclick="window.location.href='#';"><a class="menu_link" href="#">Контакты</a></div>
</div>
</body>
</html>


Посмотреть страницу можно тут - http://ogre3d-images.narod.ru/js_menu.html


Помогите, пожалуйста, исправить это безобразие! smile

Автор: Georgio 18.3.2007, 12:30
а по-моему очень даже неплохо смотрится! Советую второй вариант оставить )))

Автор: Mymik 18.3.2007, 12:51
Panoramix, убери в классах .menu_item и .menu_group width:100%; дело в том, что padding как бы увеличивает размеры div'а т.е. если ты задашь четкие размеры div'a  и после этого поставишь padding то размеры данного блока увеличатся на параметры padding.

когда у div'а нет размера он всегда по ширине растягивается до максимальных размеров. только если у него float не указан.

Добавлено @ 12:52 
Georgio,  smile  smile 

Автор: SelenIT 18.3.2007, 14:31
Panoramix, дело в странной для многих боксовой модели от WWW-консорциума - паддинги и бордеры плюсуются к ширние/высоте. IE в режиме совместимости со стандартом (при соответствующем DOCTYPE) ведет себя так же.

А javascript тут совершенно не нужен, раз уж дивы и CSS в ход пошли. Делайте нужные ссылки блоковыми и все дела. Как-то так:
Код

<div class="menu">
    <div class="menu_item"><a class="menu_link" href="#">Главная</a></div>
    <div class="menu_item"><a class="menu_link" href="#">Форум</a></div>
    <div class="menu_group"><a class="menu_link" href="#">События</a></div>
    <div class="menu_subitem"><a class="menu_link" href="#">Новости портала</a></div>
    <div class="menu_subgroup"><a class="menu_link" href="#">Новости проекта</a></div>
        <div class="menu_subitem margin30"><img src="./img/dot.gif" width="5" height="5"><a class="menu_link" href="#">Subitem1</a></div>
        <div class="menu_subgroup margin30"><img src="./img/dot.gif" width="5" height="5"><a class="menu_link" href="#">Subitem2</a></div>
            <div class="menu_subitem margin30"><img src="./img/dot.gif" width="5" height="5"><a class="menu_link" href="#">Subitem1</a></div>
            <div class="menu_subitem margin30"><img src="./img/dot.gif" width="5" height="5"><a class="menu_link" href="#">Subitem2</a></div>
    <div class="menu_item"><a class="menu_link" href="#">Контакты</a></div>
</div>

Код

.menu
{
    background-color:#FBFBFB;
    width:150px;
    border-width:1px;
    border-style:solid;
    border-color:black;
    padding: 0 3px;
}
.menu_link
{
    color:black;
    text-decoration:none;
}
.menu_item a
{
    display: block;
    margin: 3px 0;
    border-width:1px;
    border-style:solid;
    border-color:black;
    padding:1px;
    padding-left:8px;
    background-color:#E0E0E0;
    cursor:pointer;
}
.menu_item a:hover
{
    border-width:1px;
    border-style:solid;
    border-color:black;
    padding:1px;
    padding-left:10px;
    background-color:#F3F3E0;
    cursor:pointer;
}
.menu_group a
{
    display: block;
    border-width:1px;
    border-style:solid;
    border-color:black;
    padding:1px;
    padding-left:8px;
    background-color:#EFEFEF;
    margin: 3px 0;
    cursor:pointer;
}
.menu_subitem
{
    padding:0 0 0 5px;
    margin: 0 0 0 15px;
}
.menu_subitem a:hover
{
    padding:0px;
    padding-left:7px;
    text-decoration:underline;
}
.menu_subgroup
{
    padding:0px;
    padding-left:5px;
    margin-top:3px;
    margin-left:15px;
}
.margin30 {
    margin: 0 0 0 30px;
}
.menu img {
    margin-right:5px;
    margin-bottom:2px;
}

А еще правильнее, с точки зрения логической разметки, делать такое меню на вложенных списках (ul - li)...

Автор: Panoramix 18.3.2007, 22:25
Mymik, SelenIT, спасибо вам огромное! smile
Всё теперь работает как надо))

Цитата(Georgio @  18.3.2007,  12:30 Найти цитируемый пост)
а по-моему очень даже неплохо смотрится! Советую второй вариант оставить ))) 
да мне, кстати, такая фишка тоже приглянулась, но вот заказчику оно бы не понравилось) smile


Цитата(SelenIT @  18.3.2007,  14:31 Найти цитируемый пост)
Делайте нужные ссылки блоковыми и все дела. Как-то так:
А вот за этот код вообще отдельное большое спасибо! Я знал, что-как-то можно ведь зделать подклассами CSS, но ничего не получилось, и я, не мудрствуя лукаво, сбацал на яваскрипте))

 smile

Автор: Del_Flg 30.3.2007, 15:50
насчет события onClick в опере:
на страничке есть див, который надо показывать по нажатию на ссылку. то есть “развернуть форму” - форма разворачивается.
изначально у дива стоит display:none, по онклику скриптом ставится display:block.
в ие и фоксе все прекрасно работает, а вот опера капризничает. она на время показывает этот див, но тут же его скрывает. и в полученном коде страницы стоит все тот же display:none. как это исправить?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)