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

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

  • krasun

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

    Spritz 13 июля 2010 г. 16: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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Spritz 13 июля 2010 г. 22: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 г. 1:03, спустя 2 часа 31 минуту 11 секунд

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


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

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

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

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

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

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

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

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

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

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

    * вам

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

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

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

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

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

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

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

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

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

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

    Nyaah, спс.

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

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

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

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

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

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

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



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

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

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