Дополнительная прокладка внутри дивана - PullRequest
Новая
       2

Дополнительная прокладка внутри дивана

1 голос
/ 07 июля 2010

У меня проблема с определением того, откуда в div добавлено дополнительное заполнение.

В div, содержащий текст «Название видео», добавлено слишком много отступов. Что очень нежелательно. И я понятия не имею, откуда придет этот дополнительный отступ.

Я добавил стили, HTML-коды и ссылку на страницу, используя этот образец страницы.

Пожалуйста, посмотрите, я схожу с ума.

Стиль - 

<style type="text/css">
    html *
    {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        vertical-align: baseline;
    }
    table.video_list
    {
        width: 100%;
        border-collapse: collapse;
    }

    table.video_list td
    {
        padding: 5px;
        width: 33%;
    }

    div.vid_container
    {

        /*float:left;*/
        /*margin-bottom:15px;
        margin-left:5px;
        margin-right:15px;*/
        position: relative;
        display: inline-block;
        /*width:242px;*/
        margin: 10px;
        /*width: 300px;*/
    }

    div.vid_container div.duration
    {
        /*background-color:#160A07;*/
        /*background-color: transparent;
        background-image: url(../images/backs/duration_back_58x24.png);
        background-position: center center;
        background-repeat: no-repeat;*/

        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;

        background-color: #1b1b1b;
        bottom:27px;
        color:#FFFFFF;
        float:right;
        font-size:14px;
        padding:4px;
        position:relative;
        right:2px;
        text-align:center;
        width:50px;
        filter: alpha(opacity = 85);
        opacity: 0.85;
        font-weight: bold;

    }

    div.vid_container div.info_holder
    {
        width: 248px;
        margin: auto;
        display: block;
    }

    div.vid_container div.thumb_holder
    {
        width: 244px;
        height: 184px;
        vertical-align: middle;
        border: solid 1px #323434;
        padding: 1px;
        margin: auto;
    }

    div.vid_container div.thumb_holder img.thumb
    {
        width: 236px;
        height: 176px;
        vertical-align: middle;
        border: solid 1px #323434;
    }
    div.vid_container a.title
    {
        color:#DBA0AC;
        display:block;
        font-size:14px;
        height:35px;
        overflow:hidden;
        text-decoration:none;
        white-space:pre-line;
        width:248px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    div.vid_container a.title:hover
    {
        text-decoration: underline;
    }

    div.vid_container div.info_holder div.info_text
    {
        margin-top:5px;
        text-align: left;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    div.vid_container div.info_holder div.time
    {
        color: #ccc;margin-top: 5px;font-size: 90%;
        text-align: left
    }




    /******************************************
        Videos list
    ******************************************/

    .vid_container .site_name
    {
        text-transform: capitalize !important;
    }

    .vid_container img.thumb
    {
        width: 242px !important;
        height: 182px !important;
        border:1px solid #323434 !important;
    }

    /******************************************
        List View
    ******************************************/

    div.vid_container_listview
    {
        width: 100% !important;
    }

    div.vid_container_listview div.thumb_holder
    {
        float: left !important;
    }

    div.vid_container_listview div.info_holder
    {
        float: left !important;
        margin-left: 10px;
    }

    div.vid_container_listview div.info_holder div.title_holder
    {
        min-height:30px;width:600px;
    }

    div.vid_container_listview div.info_holder div.info_text
    {
        color: #ccc;margin-top: 5px;
    }

    div.vid_container_listview div.info_holder div.info_text div.site_name
    {
        font-size: 100%;margin-top:15px;
    }

    div.vid_container_listview div.info_holder div.info_text div.likes_and_views
    {
        font-size: 100%;margin-top:15px;
    }

    div.vid_container_listview div.info_holder div.added_at
    {
        color: #ccc;margin-top: 5px;font-size: 100%;
    }

    div.vid_container_listview a.title
    {
        font-size: 16px;
        font-weight: bold;
    }

    .float_left
    {
        float: left;
    }

    .float_right
    {
        float: right;
    }

    .clear
    {
        clear: both;
    }
</style>

И HTML: 

<div class="vid_container">
    <div class="thumb_holder">
        <a href="#" title="Brunette Teen Paige Taylor">
            <img alt="Brunette Teen Paige Taylor" class="thumb" src="empty_thumb.png" norotate="1" />
        </a>

        <div class="duration">30:16</div>
    </div>

    <div class="info_holder">
        <div class="info_text">
            <a class="title" href="#" title="Brunette Teen Paige Taylor">Video Title</a>
        </div>  

        <div class="time">16 days  ago</div>                    

        <div style="color: #ccc;margin-top: 5px;">
            <div class="float_left site_name" style="font-size: 90%;">Youtube</div>
            <div class="float_right" style="text-align:right;padding-right: 2px;font-size: 90%;">1 likes — 140 views</div>
            <div class="clear"></div>
        </div>
    </div>
</div>

Ссылка на этот образец страницы: Пример страницы

Ответы [ 5 ]

3 голосов
/ 07 июля 2010

Вам необходимо изменить div.vid_container a.title правило

, удалить overflow:hidden и изменить height:35px на 

height:auto!important;
height:35px;
min-height:35px;

ОБНОВЛЕНИЕ

я вижу ... проблема в том, что поле .duration расположено относительно, и поэтому оно остается в потоке DOM .. это то, что занимает пространство над .title ..

вам нужно установить .duration на position:absolute и margin-top:-27px; (и удалить свойство bottom

, которое должно решать все проблемы ..

2 голосов
/ 07 июля 2010
  1. скачайте Firefox, если у вас его нет.
  2. установить firebug (аддон)
  3. Откройте Firebug в Firefox и загрузите свою страницу.
  4. щелкните правой кнопкой мыши по элементу div с заголовком видео и выберите элемент inspect
  5. посмотрите на стиль и вычисленные вкладки, чтобы увидеть, что влияет на заполнение.
2 голосов
/ 07 июля 2010

Согласно моему дополнению к Firebug, дополнительное заполнение вызвано этими двумя свойствами элемента <a>, содержащегося в <div>

div.vid_container a.title {
    height:35px;
    width:248px;
}

Отключение этих правил в редакторе css удалило лишние отступы (вверху и внизу).

Редактировать: Похоже, переполнение также может быть связано с этим свойством <div>: 

div.vid_container div.info_holder div.info_text {
    padding-top:1px;
}

Вы можете попробовать отключить это правило, если оно лучше соответствует вашим потребностям. Это удалит дополнительные отступы в верхней части div. Однако у вас все еще будет свободное место внизу заголовка, что вызвано высотой элемента <a>, как описано выше.

1 голос
/ 07 июля 2010

div.vid_container a.title имеет высоту 35 пикселей, что делает вашу ссылку больше.Я полагаю, что это то, что вызывает дополнительное пространство, которое вы не ожидаете (найден благодаря Firebug в Firefox).

Редактировать: Сначала даже не заметил горизонтального заполнения, но какThibault Falise, там тоже есть только ширина.

0 голосов
/ 07 июля 2010

в соответствии с Firebug (который я бы порекомендовал вам использовать) и проверкой предоставленной вами ссылки, что div имеет отступ 1px и верхнее поле 5px, как указано в css.Таким образом, сам по себе дополнительный отступ отсутствует.

Как и предполагалось, возможно, вы захотите изменить размер a.title (высота, ширина).

...