none
Вопрос по HTML/CSS3 продолжение RRS feed

Ответы

  • Решение найдено, и довольно простое, нужно явно указать ширину родительскому div с классом tree, например в 3000px. Тогда все работает.
    • Помечено в качестве ответа Andrey Langovoy 11 декабря 2013 г. 14:25
    7 декабря 2013 г. 8:08

Все ответы

  • Код ХТМЛ

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="StyleSheet.css">
    </head>
    <body>
    
        <div class="tree" style=" overflow: scroll;">
    
            <ul>
                <li>
                    <a href="#">Parent</a>
                    <ul>
                        <li>
                            <a href="#" style="background-color:aquamarine">Grand Child</a>
                            <ul>
                                <li>
                                    <a href="#">Grand Child</a>
                                    <ul>
                                        <li>
                                            <a href="">Grand Child</a>
                                            <ul>
                                                <li>
                                                    <a href="">Grand Child</a>
                                                    <ul>
                                                        <li>
                                                            <a href="">Grand Child</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
    
    
    
                        </li>
                        <li>
                            <a href="#">Grand Child</a>
                            <ul>
                                <li><a href="#">Grand Child</a></li>
                                <li>
                                    <a href="#">Grand Child</a>
                                    <ul>
                                        <li>
                                            <a href="#">Great Grand Child</a>
                                        </li>
                                        <li>
                                            <a href="#">Great Grand Child</a>
                                        </li>
                                        <li>
                                            <a href="#">Great Grand Child</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#">Grand Child</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Grand Child</a>
                        </li>
                        <li>
                            <a href="#">Grand Child</a>
                        </li>
                        <li>
                            <a href="#">Grand Child</a>
                        </li>
                        <li>
                            <a href="#">A</a>
                            <ul>
                                <li><a href="#">Grand Child</a></li>
                                <li>
                                    <a href="#">Grand Child</a>
                                    <ul>
                                        <li>
                                            <a href="#">Great Grand Child</a>
                                        </li>
                                        <li>
                                            <a href="#">Great Grand Child</a>
                                        </li>
                                        <li>
                                            <a href="#">Great Grand Child</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#">Grand Child</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Grand Child</a>
                        </li>
                    </ul>
                </li>
            </ul>
    
        </div>
    </body>
    </html>
    
    2 декабря 2013 г. 20:21
  • ЦСС

    * {
        margin: 0;
        padding: 0;
    }
    
    .tree ul {
        padding-top: 20px;
        ;
        transition: all 0.5s;
    }
    
    .tree li {
        float: left;
        text-align: center;
        list-style-type: none;
        ;
        padding: 20px 5px 0 5px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }
    
        /*We will use ::before and ::after to draw the connectors*/
    
        .tree li::before, .tree li::after {
            content: '';
            ;
            top: 0;
            right: 50%;
            border-top: 1px solid #ccc;
            width: 50%;
            height: 20px;
        }
    
        .tree li::after {
            right: auto;
            left: 50%;
            border-left: 1px solid #ccc;
        }
    
        /*We need to remove left-right connectors from elements without 
    any siblings*/
        .tree li:only-child::after, .tree li:only-child::before {
            display: none;
        }
    
        /*Remove space from the top of single children*/
        .tree li:only-child {
            padding-top: 0;
        }
    
        /*Remove left connector from first child and 
    right connector from last child*/
        .tree li:first-child::before, .tree li:last-child::after {
            border: 0 none;
        }
        /*Adding back the vertical connector to the last nodes*/
        .tree li:last-child::before {
            border-right: 1px solid #ccc;
            border-radius: 0 5px 0 0;
            -webkit-border-radius: 0 5px 0 0;
            -moz-border-radius: 0 5px 0 0;
        }
    
        /*Скругление уголков рамки слева напрво*/
        .tree li:first-child::after {
            border-radius: 5px 0 0 0;
            -webkit-border-radius: 5px 0 0 0;
            -moz-border-radius: 5px 0 0 0;
        }
    
    /*Time to add downward connectors from parents*/
    .tree ul ul::before {
        content: '';
        ;
        top: 0;
        left: 50%;
        border-left: 1px solid #ccc;
        width: 0;
        height: 20px;
    }
    
    .tree li a {
        border: 1px solid #ccc;
        padding: 5px 10px;
        text-decoration: none;
        color: #666;
        font-family: arial, verdana, tahoma;
        font-size: 11px;
        display: inline-block;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }
    
        /*Time for some hover effects*/
        /*We will apply the hover effect the the lineage of the element also*/
        .tree li a:hover, .tree li a:hover + ul li a {
            background: #c8e4f8;
            color: #000;
            border: 1px solid #94a0b4;
        }
            /*Connector styles on hover*/
            .tree li a:hover + ul li::after,
            .tree li a:hover + ul li::before,
            .tree li a:hover + ul::before,
            .tree li a:hover + ul ul::before {
                border-color: #94a0b4;
            }
    2 декабря 2013 г. 20:22
  • Свойство оверфлов запхал 

    <div class="tree" style="">

    прям в ХТМЛ-е, т.к. в ЦСС не пойму, куда его засунуть.

    Вот что получается. При 100% масшабировании дерево ломаетсяю Слайдеры появились, но без ползунков.

    При масштабировании 75% дерево НЕ ломается... (слайдеры/оверфлов не работает)

    Как решить проблему ?

    Спасибо.


    2 декабря 2013 г. 20:22
  • Хорошо, что пример привели. Время будет посмотрю.

    Сделаем содержимое сообщества лучше, вместе!

    5 декабря 2013 г. 5:59
    Модератор
  • Спасибо :)
    5 декабря 2013 г. 21:20
  • Решение найдено, и довольно простое, нужно явно указать ширину родительскому div с классом tree, например в 3000px. Тогда все работает.
    • Помечено в качестве ответа Andrey Langovoy 11 декабря 2013 г. 14:25
    7 декабря 2013 г. 8:08