LINUX.ORG.RU

Верстка div-ами, как достичь нужного результата?


1

1

Я обычно к разработке под веб имею мало отношения, но так как Google Reader уходит, то я делаю ему замену для своего личного потребления. Ну и немного современной верстки подучить неплохо будет.

Так вот вопрос, как не указывая конкретных значений в пикселях (что у гугла повсеместно и дизайн постоянно разъезжается на больших шрифтах) сделать строчку с названием папки или фида.

Структура какая (вся строка 100%): |10% пустота | иконка, размер по ширине картинки | название, если не помещается, то обрывается и заканчивается многоточием | число не прочитанных, размер по ширине, но имеет приоритет над названием | еще картинка для кнопки меню, всегда прижата вправо, размер по ширине|.

Вот картинка для примера: https://dl.dropbox.com/u/6121480/imgs/reader.png

PS: На языках разметки современных тулкитов такое делать 5 минут, а на div-ах черт ногу сломит.

★★★★

Задача сводится к следующему: есть div ширина которого определяется внешней разметкой, внутри него 2 div-a друг за другом. Нужно сделать так, чтобы если суммарная ширина 2-х div-ов больше ширины внешнего, то первый внутренний div должен обрезать свое содержимое так, чтобы оба он влезли.

alexru ★★★★
() автор топика
Ответ на: комментарий от special-k

Тогда по крайней мере в FF все обрезается как нужно, но родительский div все равно растягивается на всю длину текста.

alexru ★★★★
() автор топика
Ответ на: комментарий от special-k

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

Похоже играют роль какие-то другие стили или конструкции, на чистом примере воспроизвести не удается.

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

В принципе подойдет вариант, когда название просто подползает под счетчик, я так понимаю это можно сделать плавающими div-ами, но не знаю как именно.

alexru ★★★★
() автор топика
Ответ на: комментарий от alexru

Альтернативное решение: взять любое стандартное дерево и выводить счётчик перед названием канала :)

ollowtf ★★★
()

Я обычно к разработке под веб имею мало отношения

Тогда зачем тебе div ? сделай на table tr td. 10 минут работы.

anonymous
()
Ответ на: комментарий от alexru

Вопрос про форматирование одного элемента списка.

что значит одного? У тебя дерево. Это список из списков, который имеет разные CSS классы, ну или измени ему параметры в зависимости от вложенности.

xpahos ★★★★★
()
Ответ на: комментарий от xpahos

Сформировать нужно одну строку из приведенной каринки, например «Electronix.ru (1)». Каким боком тут ul?

alexru ★★★★
() автор топика
Ответ на: комментарий от alexru

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

xpahos ★★★★★
()
Ответ на: комментарий от xpahos

То что все боковое меню - это список я и так знаю, но делать одну строку из ul - это идиотизм.

alexru ★★★★
() автор топика
Ответ на: комментарий от alexru

так уж и быть:

<ul>
  <li class="title">New:</li>
  <li>
    <ul>
      <li>first feed</li>
      <li>second feed</li>
    </ul>
  </li>
  <li class="title">Feed:</li>
  <li>
    <ul>
      <li>first feed</li>
      <li>second feed</li>
    </ul>
  </li>
</ul>

Так понятнее?

xpahos ★★★★★
()
Ответ на: комментарий от xpahos

Читай внимательно, а не только картинки смотри. Вопрос был про то как сформировать «first feed», «second feed». Если не заметил, там не просто текст, там иконка, название, счетчик непрочитанных и т.д.

alexru ★★★★
() автор топика
Ответ на: комментарий от alexru

И еще если «<li>first feed</li>» превратится в «<li>very l[o 150 раз]ng feed</li>», то дизайн не должен разъехаться, и счетчик должен быть виден.

alexru ★★★★
() автор топика
Ответ на: комментарий от xpahos

Слив засчитан.

Для всего достаточно почитать, вопрос был к тем, кто знает как это сделать правильно, ты не один из них.

alexru ★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.