Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Проблема с версткой, display:inline-block 
:(
    Опции темы
sgustok
Дата 19.3.2009, 15:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 6
Регистрация: 6.9.2008

Репутация: нет
Всего: нет



У меня возникла проблема. есть страница http://www.sgustok.org/archive/demo/demo.html . справа идет ряд блоков (content-right-music). не могу разобраться почему под Firefox и Opera после каждого блока появляться ненужный пробел (отступ). Подскажите пожалуйста как его убрать!

CSS стиль блока content-right-music:

Код

        .content-right-music {            
            background-color:#f9abdd;
            width: 125px;
            margin: 0px 0px 30px 0px;
            padding:0px;
            display: -moz-inline-stack;
            display: inline-block;
            vertical-align: top;
            zoom: 1;
            *display: inline;
        }



HTM Код: 

Код


<div id="contener">

    <div class="content-box" id="content-box-music">
        <div class="content-left">
            <h1><a href="#">_Music</a></h1>
            <div class="content-left-categories">
                Categories 1<br />
                Categories 2<br />
                Categories 3<br />
            </div>    
        </div>        
        <div class="content-right">
        
            <div class="content-right-music">    
                <!-- IMG -->
                <div class="content-right-music-img">
                    <a href="#"><img src="zym019-con_cetta-sclerosis-125x125.jpg"></a>
                </div>
                <!-- Заголовок -->
                <div class="content-right-music-entry-title">
                    <h1><a href="#">Entry Title Entry Title Entry Title Entry Title</a></h1>
                </div>
            </div>    

            ...

            <div class="content-right-music">    
                <!-- IMG -->
                <div class="content-right-music-img">
                    <a href="#"><img src="zym019-con_cetta-sclerosis-125x125.jpg"></a>
                </div>
                <!-- Заголовок -->
                <div class="content-right-music-entry-title">
                    <h1><a href="#">Entry Title Entry Title Entry Title Entry Title</a></h1>
                </div>
            </div>    
            
        </div>    
        <div class="clear"></div>        
    </div>
    
</div>



PM MAIL   Вверх
webster
Дата 19.3.2009, 22:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34



Очевидно, что связано это с так называемыми "пробельными символами", если вы, например, напишете теги слитно:
Код

 </div><div class="content-right-music">

то подобная проблема исчезнет, но это не выход, правильнее использовать "плавающие блоки" одинаковой высоты, т.к. контент отдельных элементов у вас похожий.
PM MAIL   Вверх
sgustok
Дата 19.3.2009, 23:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 6
Регистрация: 6.9.2008

Репутация: нет
Всего: нет



спасибо помогло) 

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

если использовать "плавающие блоки" то этого не добиться. 

может есть какой-то другой способ избавиться от этих "пробельных символов"?

спасибо)

PM MAIL   Вверх
SelenIT
Дата 21.3.2009, 18:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



Универсального красивого решения, насколько мне известно, нет. Из некрасивых вариантов, кроме простого удаления пробелов, можно предложить следующее:
  • Обнулить размер шрифта для общего контейнера, для самих инлайновых блоков вернуть дефолтный (не панацея для старых Опер);
  • Задать общему контейнеру word-spacing: -0.3em, для самих инлайновых блоков вернуть word-spacing: 0;
  • Задать блокам margin-right: -0.3em;
  • Использовать не дивы, а список, воспользоваться опциональностью закрывающих тегов для LI (IE7-, как недавно выяснилось, в любом случае игнорирует закрывающие <li>);
  • Обернуть пробелы между тегами в комментарии (хотя это еще хуже, чем просто удалить их)...

На мой взгляд, простое удаление пробелов (поднять открывающие теги к предыдущему закрывающему) - наименьшее зло.


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Djigit
Дата 27.12.2011, 00:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 124
Регистрация: 10.11.2006

Репутация: нет
Всего: нет



для вёрстки по phoshop макету можно ли div'ы располагать inline-block,чем делать их плавающими? не является ли это чем-то в корне неверным?
--------------------
Бабло победит зло!!!
PM MAIL MSN   Вверх
SelenIT
Дата 27.12.2011, 04:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



Можно, не является, определяется задачей. У инлайн-блоков есть дополнительные бонусы по сравнению с "поплавками" (напр., их можно по-разному выравнивать по вертикали, центрировать по горизонтали и т.д.), но есть и трудности (та же значимость межтеговых пробелов).


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Djigit
Дата 27.12.2011, 05:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 124
Регистрация: 10.11.2006

Репутация: нет
Всего: нет



ну межтэговые пробелы можно по-старинке устранить,перенося строки в коде не как обычно,а "разрывая" тэг внутри

<div></div><div
></div>
--------------------
Бабло победит зло!!!
PM MAIL MSN   Вверх
SelenIT
Дата 27.12.2011, 06:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



Вариантов куча. Обычно такие блоки всё равно генерятся шаблонизатором и достаточно один раз его настроить.


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0713 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.