Форум

monolithed · #41 (**permalink**) 09.01.2011, 16:53

x-yuri
А свойство zoom (его кстати Safari 4+ поддерживает) вы разве не относите к хакам (я к счастью его еще ни разу не использовал)?

Shaci , вот тут я теоретически не могу пояснить эти нюансы

Вам нужно то, всего лишь понять поведение position:relative; и overflow: hidden; Откройте firebug, включите опции браузера и поиграйтесь со значениями.

ктати вот, довольно интересный пример с clear:

<style type="text/css">
div {
    border: 1px solid;
    position: relative; /* в нормальных браузерах не обязательно, но желательно */
    overflow: hidden; /* в нормальных браузерах не обязательно, но желательно */
}
</style>

<div>text1</div>
<div style="float: left;">text2</div>
<div style="clear: both">text3</div>

x-yuri · #42 (**permalink**) 09.01.2011, 21:04

Сообщение от Shaci

я вот этот пример имел ввиду, и его поведение при

так ты убери оттуда все лишнее и сам поймешь. В конце концов, ты же хочешь чтобы кто-нибудь обратил на твой вопрос внимание? Сделай, чтобы другим было максимально просто разобраться. И тебе полезно будет

Сообщение от monolithed

x-yuri
А свойство zoom (его кстати Safari 4+ поддерживает) вы разве не относите к хакам (я к счастью его еще ни разу не использовал)?

хм, может действительно надо было конкретизировать. Я в первую очередь имел в виду, когда пытаются эмулировать conditional comments внутри css, всякие * html {}, *:first-child+html {} * html {}. Особенно те из них, которые работают в текущих версиях браузеров. Потому что выйдет новая версия и поведение исправят, а сайт поломается

zoom: 1... я бы это отнес скорее к vendor-specific css properties (-moz-, -o-, -webkit-). И непонятно, зачем такое выносить в отдельный css файл. Я вижу одну причину выноса в отдельный файл - чтобы использовать conditional comments. Вот мне и интересно, когда без них не обойтись...

а вынос в отдельный файл провоцирует на добавление в него правил, без которых можно обойтись. Да и работать с двумя файлами неудобно

Сообщение от monolithed

ктати вот, довольно интересный пример с clear:

а что там интересного? Уличная магия с position: relative и overflow: hidden, которая там на всякий случай... вдруг поможет в каком-нибудь браузере?

micscr · #43 (**permalink**) 10.01.2011, 11:53

Сообщение от monolithed

в ЛС выслал остальной материал...

так кинь и сюда, другим тоже интересно

.

monolithed · #44 (**permalink**) 11.01.2011, 12:18

Сообщение от micscr

так кинь и сюда, другим тоже интересно .

ну я выслал интерфес, который мне нужно было сверстать для прохождение профессионального конкурса, поэтому в паблик не могу выложить, т.к. оно в работе сейчас, кто знает вдруг пойдет по рукам, сами понимаете...
А если что-то конкретное интересует, спрашивайте тут.

micscr · #45 (**permalink**) 12.01.2011, 14:56

а понятно, я думал по верстке что то еще ты писал.

Shaci · #46 (**permalink**) 16.01.2011, 22:05

попробовал сделать подменюшку динамическую)), в ie верстка разваливается,
в firefox работает

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru">
    <head>

        <style type="text/css">
            #wrap, #content, ul, ul li {
                overflow: hidden;
                position: relative;
            }

            #wrap {                
                margin:0 auto;
                background: gray;
                width: 408px;
                height: auto;
            }

            #content {
                background: #330033;
                margin: 40px auto;
                width: 300px;
                height: 80px;
            }

            ul, ul li {
                margin: 0px;
                padding: 0px;
            }

            ul {
                width: 408px;
                height: 20px;
            }

            ul li {
                background: #35C;
                border: solid 1px;
                border-color: #46F #238 #238 #46F;
                display: block;
                list-style: none;
                text-align: center;
                float: left;
                width: 100px;
            }

            ul li a {
                color: #fff;
                font: 300 14px/14px arial, tahoma, verdana, sans-serif;
                text-decoration: none;
            }

            #first, #second, #third, #fourth {
                height:20px;
                border:solid 0px 1px 0px 1px;
                background:#330066;
            }

            #submenu {
                position:absolute;
                height:0px;
                overflow:visible;
            }

        </style>
        <script type="text/javascript">
            window.onload = function() {
                //addEvent
                function addEvent(elem, type, handler){
                    if (elem.addEventListener){
                        elem.addEventListener(type, handler, false)
                    } else {
                        elem.attachEvent("on"+type, function () {handler.apply(elem)})
                    }
                }

                var childs = document.getElementById("submenu").getElementsByTagName("li");
                for (var i = 0; i < childs.length; i++) {
                    childs[i].style.height = "0px";
                }

                var animating = false;
                var menuLi = document.getElementById("menu").getElementsByTagName("li");
                var submenu, str, id;
                for (var i = 0; i < menuLi.length; i++) {
                    var a = menuLi[i].getElementsByTagName("a")[0];
                    addEvent(a, "click", incDec);
                }

                function incDecInner() {
                    if (str == "+") {
                        if (submenu.style.height != "20px") {
                            submenu.style.height = parseInt(submenu.style.height) + 2 + "px";
                        }
                        else {
                            animating = false;
                            clearInterval(id);
                        }
                    }
                    else {
                        if (submenu.style.height != "0px") {
                            submenu.style.height = parseInt(submenu.style.height) - 2 + "px";
                        }
                        else {
                            animating = false;
                            clearInterval(id);
                        }
                    }
                }

                function incDec(event) {
                    event = event || window.event
                    if (event.preventDefault) {
                        event.preventDefault()
                    } else {
                        event.returnValue = false
                    }
                    if (animating) return;
                    else {
                        animating = true;
                        var array = /#(.+)/.exec(this.href);
                        var pointer = array[1];
                        submenu = document.getElementById(pointer);
                        if (submenu.style.height == "0px") {
                            str = "+";
                            id = setInterval(incDecInner,50);
                        }
                        else {
                            str = "-";
                            id = setInterval(incDecInner, 50);
                        }
                    }
                }

            }
        </script>
    </head>
    <body>
        <div id="wrap">
            <ul id="menu">
                <li><a href="#first">1</a></li>
                <li><a href="#second">2</a></li>
                <li><a href="#third">3</a></li>
                <li><a href="#fourth">4</a></li>
            </ul>
            <ul id ="submenu">
                <li id="first"><a href="#">1</a></li>
                <li id="second"><a href="#">2</a></li>
                <li id="third"><a href="#">3</a></li>
                <li id="fourth"><a href="#">4</a></li>
            </ul>
            <div id="content"></div>
        </div>
    </body>
</html>

ksa · #47 (**permalink**) 16.01.2011, 22:22

Сообщение от Shaci

в ie верстка разваливается

Вижу 2 проблемы...
1. отступ сиреневого блока сверху
2. не верное позиционирование субменю

Как вариант (смотрел в ИЕ7 и Опере)

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">
            #wrap, #content, ul, ul li {
                overflow: hidden;
                position: relative;
            }

            #wrap {                
                margin:0 auto;
                background: gray;
                width: 408px;
                height: auto;
            }

            #content {
                background: #330033;
                margin-left: auto;
                margin-right: auto;
                width: 300px;
                height: 80px;
            }

            ul, ul li {
                margin: 0px;
                padding: 0px;
            }

            ul {
                width: 408px;
                height: 20px;
            }

            ul li {
                background: #35C;
                border: solid 1px;
                border-color: #46F #238 #238 #46F;
                display: block;
                list-style: none;
                text-align: center;
                float: left;
                width: 100px;
            }

            ul li a {
                color: #fff;
                font: 300 14px/14px arial, tahoma, verdana, sans-serif;
                text-decoration: none;
            }

            #first, #second, #third, #fourth {
                height:20px;
                border:solid 0px 1px 0px 1px;
                background:#330066;
            }

            #submenu {
                position:absolute;
				top: 22px;
				left: 0;
                height:0px;
                overflow:visible;
            }
			#tab {
				height: 40px;
			}
        </style>
        <script type="text/javascript">
            window.onload = function() {
                //addEvent
                function addEvent(elem, type, handler){
                    if (elem.addEventListener){
                        elem.addEventListener(type, handler, false)
                    } else {
                        elem.attachEvent("on"+type, function () {handler.apply(elem)})
                    }
                }

                var childs = document.getElementById("submenu").getElementsByTagName("li");
                for (var i = 0; i < childs.length; i++) {
                    childs[i].style.height = "0px";
                }

                var animating = false;
                var menuLi = document.getElementById("menu").getElementsByTagName("li");
                var submenu, str, id;
                for (var i = 0; i < menuLi.length; i++) {
                    var a = menuLi[i].getElementsByTagName("a")[0];
                    addEvent(a, "click", incDec);
                }

                function incDecInner() {
                    if (str == "+") {
                        if (submenu.style.height != "20px") {
                            submenu.style.height = parseInt(submenu.style.height) + 2 + "px";
                        }
                        else {
                            animating = false;
                            clearInterval(id);
                        }
                    }
                    else {
                        if (submenu.style.height != "0px") {
                            submenu.style.height = parseInt(submenu.style.height) - 2 + "px";
                        }
                        else {
                            animating = false;
                            clearInterval(id);
                        }
                    }
                }

                function incDec(event) {
                    event = event || window.event
                    if (event.preventDefault) {
                        event.preventDefault()
                    } else {
                        event.returnValue = false
                    }
                    if (animating) return;
                    else {
                        animating = true;
                        var array = /#(.+)/.exec(this.href);
                        var pointer = array[1];
                        submenu = document.getElementById(pointer);
                        if (submenu.style.height == "0px") {
                            str = "+";
                            id = setInterval(incDecInner,50);
                        }
                        else {
                            str = "-";
                            id = setInterval(incDecInner, 50);
                        }
                    }
                }

            }
        </script>
    </head>
    <body>
        <div id="wrap">
            <ul id="menu">
                <li><a href="#first">1</a></li>
                <li><a href="#second">2</a></li>
                <li><a href="#third">3</a></li>
                <li><a href="#fourth">4</a></li>
            </ul>
            <ul id ="submenu">
                <li id="first"><a href="#">1</a></li>
                <li id="second"><a href="#">2</a></li>
                <li id="third"><a href="#">3</a></li>
                <li id="fourth"><a href="#">4</a></li>
            </ul>
			<div id='tab'></div>
            <div id="content"></div>
        </div>
    </body>
</html>

B~Vladi · #48 (**permalink**) 17.01.2011, 08:57

x-yuri,

Вот буквально на днях был косяк с ишаком (6-8). Если я пишу:

.class {
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 40);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
  opacity: 0.4;
}

ломается синтаксис CSS. Конкретно в IE, при просмотре в отладчике, несколько свойств сливаются в один и не работают. Вынос в отдельный файл решает проблему и всё начинает работать.

monolithed · #49 (**permalink**) 17.01.2011, 09:36

B~Vladi, да так-то в нем много косяков, просто с ходу не получается вспомнить. К примеру в ie6 border co значением transparent нужно через фильтр назначать ...

Сообщение от B~Vladi

ломается синтаксис CSS

а для чего так вообще использовать filter и -ms-filter вместе, да еще с одинаковыми значениями?

B~Vladi · #50 (**permalink**) 17.01.2011, 10:13

-ms-filter для IE8, filter для 7-6. Для 5-ого там другое, но я не увлекаюсь некрофилией.

Форум

Справочник

Discord чат

Курсы javascript