Форум Пользователи Пыхослёт
новые сообщения ответы на мои сообщения избранное скрытые темы случайный топик открыть всё в новых вкладках

Форум → Разработка → Клиентская сторона → Верстка и оформление → CSS: выравнивание по вертикали

CSS: выравнивание по вертикали

  • krasun

    Сообщения: 1370 Репутация: N Группа: Джедаи

    Spritz 14 июля 2010 г. 3:08



    как мусорку выровнять по вертикали относительно первого div`а? 


        ul.notes li div.note {
            background-color: #ECD078;
            font: 10pt Georgia;
            color:  #542437;
            width: 400px;
            padding: 10px; 
            margin-top: 10px;
            float: left;
        }

        ul.notes li div.control {
            float: left;
           
            margin-top: 10px;
            margin-left: 10px;
        }



    <ul class="notes">
        <li>
            <div class="note">
                asda sd sdas dasd asd asd asd asd 
            </div>
            <div class="control">
                <a href="#delete"><img src="/images/delete.png" /></a>
            </div>
            <div class="clear"></div>
        </li>
    </ul>


    ничего не получается, блин
    Спустя 30 сек.
    мусорка в control

  • artoodetoo

    Сообщения: 5147 Репутация: N Группа: в ухо

    Spritz 14 июля 2010 г. 6:25, спустя 3 часа 16 минут 36 секунд

    <table> или CSS display: table-cell
    ιιlllιlllι унц-унц

  • Nyaah

    Сообщения: 574 Репутация: N Группа: Джедаи

    Spritz 14 июля 2010 г. 7:55, спустя 1 час 30 минут 6 секунд

    для внешнего блока (li) укажи display: block, а то у тебя два блочных элемента внутрри инлайн элемента, поэтому марджины для внутренних элементов не работают, либо вместо марджина юзай паддинг, должно помочь
    Work, buy, consume, die

  • artoodetoo

    Сообщения: 5147 Репутация: N Группа: в ухо

    Spritz 14 июля 2010 г. 8:22, спустя 26 минут 45 секунд

    Перечитал еще раз.
    как мусорку выровнять по вертикали относительно первого div`а?

    Сделай padding у блока .control таким же, как у .note всего делов!
    Вообще вынеси общее для них:

    .notes div {float: left; margin-top: 10px; padding: 10px;}
    ιιlllιlllι унц-унц

  • phpdude

    Сообщения: 26646 Репутация: N Группа: в ухо

    Spritz 14 июля 2010 г. 8:25, спустя 2 минуты 54 секунды

    твиттер пишешь?
    Сапожник без сапог

  • artoodetoo

    Сообщения: 5147 Репутация: N Группа: в ухо

    Spritz 14 июля 2010 г. 9:32, спустя 1 час 7 минут 20 секунд

    развеял скуку :) воспользовался inline-block
    с гребаным IE пришлось поработать особо


    я немного упростил твою разметку

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <style>

        .notes {
            list-style: none;
         }

         .notes li {
            background-color: #EEA;
            display: block; 
            padding: 5px 0;
        }

        a.control, div.note {
            display: inline-block;
            vertical-align: middle;
        }

        a.control img {
            border: none;
            padding: 10px;
        }

        div.note {
            width: 400px;
            padding: 10px;
            background-color: #ECD078;
            font: 10pt Georgia;
            color:  #542437;
        }
     
    </style>
    <!–[if IE]><style>
       a.control, div.note { display: inline; }
    </style><![endif]–>
    </head>
    <body>
    <ul class="notes">
        <li>
            <div class="note">
                asda sd sdas dasd asd asd asd asd
            </div>
            <a class="control" href="#delete"><img src="delete.png" /></a>
        </li>
        <li>
            <div class="note">
                asda sd sdas dasd asd asd asd asd<br/>
                asda sd sdas dasd asd asd asd asd<br/>
                asda sd sdas dasd asd asd asd asd<br/>
                asda sd sdas dasd asd asd asd asd<br/>
            </div>
            <a class="control" href="#delete"><img src="delete.png" /></a>
        </li>
        <li>
            <div class="note">
                asda sd sdas dasd asd asd asd asd
            </div>
            <a class="control" href="#delete"><img src="delete.png" /></a>
        </li>
    </ul>
    </body>
    </html>

    ιιlllιlllι унц-унц

  • krasun

    Сообщения: 1370 Репутация: N Группа: Джедаи

    Spritz 14 июля 2010 г. 12:03, спустя 2 часа 31 минуту 11 секунд

    спасибо, сейчас буду смотреть ибо вечером пробовал display: table-cell, vertical-align: middle - и ничего не получалось.


    твиттер пишешь?

    я бы не писал, не вижу в этом смысла

  • artoodetoo

    Сообщения: 5147 Репутация: N Группа: в ухо

    Spritz 14 июля 2010 г. 12:09, спустя 5 минут 35 секунд

    значит плохо писАл )))
    ιιlllιlllι унц-унц

  • krasun

    Сообщения: 1370 Репутация: N Группа: Джедаи

    Spritz 14 июля 2010 г. 18:56, спустя 6 часов 46 минут 55 секунд

    artoodetoo, Nyaah, большое вас спасибо, как же я счастлив ))

  • krasun

    Сообщения: 1370 Репутация: N Группа: Джедаи

    Spritz 14 июля 2010 г. 19:04, спустя 8 минут 20 секунд

    * вам

    Спустя 85 сек.
    а реально ли теперь через css сделать, что бы мусорка была скрыта, а на hover по div.note она показывалась

  • Nyaah

    Сообщения: 574 Репутация: N Группа: Джедаи

    Spritz 14 июля 2010 г. 20:30, спустя 1 час 26 минут 12 секунд

    Везде кроме осла шестого
    .notes .control
    {
        display: none;
    }

    .notes:hover .control
    {
        display: block;
    }
    Work, buy, consume, die

  • artoodetoo

    Сообщения: 5147 Репутация: N Группа: в ухо

    Spritz 14 июля 2010 г. 22:39, спустя 2 часа 9 минут 1 секунду

    а про IE6 можно нагуглить лекарство про hover. скорее бы сдох уже!
    ιιlllιlllι унц-унц

  • krasun

    Сообщения: 1370 Репутация: N Группа: Джедаи

    Spritz 14 июля 2010 г. 23:16, спустя 36 минут 47 секунд

    Nyaah, спс.

    artoodetoo, я даже и не думаю о его поддержке, нафиг оно надо. Минимум IE9

  • Sinkler

    Сообщения: 7958 Репутация: N Группа: в ухо

    Spritz 15 июля 2010 г. 0:29, спустя 1 час 12 минут 37 секунд

    а чего, уже девятая версия вышла? о_О

  • artoodetoo

    Сообщения: 5147 Репутация: N Группа: в ухо

    Spritz 15 июля 2010 г. 6:57, спустя 6 часов 28 минут 44 секунды

    а реально ли теперь через css сделать, что бы мусорка была скрыта, а на hover по div.note она показывалась



        a.control {visibility: hidden;}
        li:hover a.control {visibility: visible;}

    в данном случае visibility уместнее чем display - место выделяется полюбому, ничего не "раздвигается" при появлении
    ιιlllιlllι унц-унц

Пожалуйста, авторизуйтесь, чтобы написать комментарий!

наше все Форум Пользователи Пыхослёт Slack Тикеты
социализация
(ц) пыха.ру / с 2007 года         Total: 0.009s         Часовой пояс — Europe/Moscow
ПИПИСЬКА