Показано с 1 по 15 из 15

Тема: Несколько вопросов

  1. #1

    Регистрация
    14.04.2007
    Сообщений
    136
    1. Есть список с ссылками (распространненая конструкция):

    и с помощью CSS нужно добится, чтобы ссылки шли в строчку через разделитель |. Как можно добится? (1 прикрепление = Безымянный)
    2. Можно ли сделать горизонтальную черточку (<hr>) не сплошную, а в точку (2 прикрепление - sfg).
    3. Нужно сделать вот такую штуку (3 прикрепление - gsafgsf). колонки имитируем фоном родительского бокса, но вот как тогда сделать заукругленные края - я не знаю.

  2. #2

    Регистрация
    06.06.2007
    Сообщений
    104
    1. А зачем список, если такая структура?
    Вообще, display: block; float: left; padding-left: 10px; background: url(marker.gif) left no-repeat;
    2. Можно.
    3. Не въехал в вопрос

  3. #3

    Регистрация
    14.04.2007
    Сообщений
    136
    1. Ну по смысла CSS - что оформлением занимается CSS. в HTML чаще всего меню идет именно списком. Если так, как вы сказали - слева перед первым пунктом будет палочка. Нам нужно только посредине.
    2. Как?
    3. Как мне сделать такое как на скришноте? (средний скриншот). Три колонки в квадрате с заокругленными краями.

    еще к первому. Хочу как здесь:
    Одна из самых важных (хоть и не единственная) целей CSS — отделение средств оформления страницы (CSS) от задания ее структуры (HTML). Это дает большие плюсы в процессе разработки и поддержки сайта, от возможности полностью раздать программирование и верстку разным людям до возможности иметь разный дизайн страниц с одинаковым HTML одновременно (я как раз сейчас занят одним таким проектом, где движок и структура HTML’а одна, но сидит он на разных сайтах).

    Структура HTML для “Мегакорпорации” задана с самого начала, и не меняется. Некий гипотетический проектировщик решил, что блоки #main, #sections и #news равнозначны, и объединил их в один контейнер. Лишний контейнер, объединяющий #sections и #news изменит эту структуру, и хоть это и подойдет текущему дизайну, это не подойдет какому-нибудь другому, который решит визуально выделить #sections, а #main и #news расположить в колонках.

    Другими словами, меняя структуру HTML исключительно ради визуального оформления мы уничтожаем этот конкретный плюс CSS’а. В принципе, если мы готовы отказаться от разделения структуры и оформления, то стоит вообще подумать, не надо ли нам верстать таблицами, потому что они, как инструмент, часто куда надежнее и проще CSS’ных раскладок.

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

    Но вот так без оглядки “просто добавить div” — это не CSS-верстка :-)
    [Только зарегистрированные пользователи могут видеть ссылки. ]

  4. #4

    Регистрация
    06.06.2007
    Сообщений
    104
    1.
    Если так, как вы сказали - слева перед первым пунктом будет палочка. Нам нужно только посредине.
    Тогда это точно не список...
    Для первого li пишете background: none; padding-left: 0px;

    2. border: 0px; border-top: 1px dotted #ccc; height: 1px; ИЕ только гавно тут. Точки точками становятся только при 2пикс+

  5. #5

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    Originally posted by yanagee@Jun 28 2007, 09:07
    [b]1. А зачем список, если такая структура?
    затем, что так семантически верно

    а реализация подобного меню подробно описана здесь [Только зарегистрированные пользователи могут видеть ссылки. ]

  6. #6

    Регистрация
    14.04.2007
    Сообщений
    136
    А как насчет третьего?
    Хоть бы теоретически напишите, что да как, я с кодом уже я разберусь

  7. #7

    Регистрация
    06.06.2007
    Сообщений
    104
    Zigzag
    дзякуй за ссылка! Ступил насчёт background-image.. Конечно, border..
    Код:
     #nav{
     * overflow:hidden;
     * width:100%;
    }
     * #nav li{
     * margin-left:-1px;/
    }
    а я уж было подумал, что без класса нельзя...

    KukMan
    А как насчет третьего?
    Хоть бы теоретически напишите, что да как, я с кодом уже я разберусь
    Ну, блин, сложно это сделать просто... Ну не таблицей же честное слово...
    Тут или бамбить дивов нереальное количество... или под индивидуальный случай... Короче, вот как я себе это представляю, но проблемы с размерамиотступамибордера ми...

  8. #8

    Регистрация
    14.04.2007
    Сообщений
    136
    в ФФ немного коряво. И ни могу исправить эту корявость. А чисто CSS&#39;ом как я понял, сделать нереально.

  9. #9

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by yanagee@Jun 28 2007, 12:07
    Вообще, display: block; float: left; padding-left: 10px; background: url(marker.gif) left no-repeat;
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    float: left; уже сам по себе подразумевает display: block; )

    Originally posted by yanagee@Jun 28 2007, 14:52
    Ступил насчёт background-image.. Конечно, border..
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Не обязательно border. Сдвигать меню для достижения обсуждаемого эффекта можно и при использовании background-image...

    Originally posted by KukMan@Jun 28 2007, 21:30
    в ФФ немного коряво. И ни могу исправить эту корявость. А чисто CSS&#39;ом как я понял, сделать нереально.
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Все реально. Верхние закругленные края можно пустить, например, фоном заголовков. А нижние – например, фоном футера. Сложность выполнения этой задачи зависит от разных факторов. Например, от "резиновости" колонок. Но нерешаемой CSS-раскладки не бывает...

  10. #10

    Регистрация
    14.04.2007
    Сообщений
    136
    Я ждал ответа Aykroyda. Сори за оффтоп.
    Но нерешаемой CSS-раскладки не бывает...
    Даже если без изменений html файла?

  11. #11

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by KukMan@Jun 29 2007, 03:03
    Даже если без изменений html файла?
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Иногда, конечно, приходится и дополнительный див добавить. Это извечный вопрос "цели и средств". Мы всегда должны стремиться обходиться без этих "лишних" дивов. Но что делать, если, например, необходимо добавить закругленные углы "резиновому" блоку? Или вынести основной контент в коде наверх? Пока эти задачи, к сожалению, решаются только вставкой дополнительных элементов. И от этого никуда не денешься...

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

  12. #12

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    Originally posted by Aykroyd@Jun 29 2007, 01:00
    [b]...именно вот это умение увидеть это "обойтись" приходит только со временем. С опытом и практикой...
    истину глоголишь, отец наш!

  13. #13

    Регистрация
    06.06.2007
    Сообщений
    104
    float: left; уже сам по себе подразумевает display: block; )


    Не обязательно border. Сдвигать меню для достижения обсуждаемого эффекта можно и при использовании background-image...
    Конечно можно, но бордером-то проще

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

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

  14. #14

    Регистрация
    14.04.2007
    Сообщений
    136
    Ясненько. ответ получил в полной мере. топ клоуз

  15. #15

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by yanagee@Jun 29 2007, 16:50

    Конечно можно, но бордером-то проще
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Иногда вместо "палочек" маркеры бывают. Недавно верстал сайт для кофейной компании – там как раз обсуждалось кофейное зернышко в качестве разделителя пунктов горизонтального меню. При этом перед первым пунктом это зернышко заказчик не хотел... Также не всегда бордер удачно выравнивается по вертикали по отношению к тексту пунктов. С бэкграундом такой проблемы нет...

    Originally posted by yanagee@Jun 29 2007, 16:50
    Ну с нерезиновыми блоками всё просто... Я хотел растягивающийся во всех направлениях* *
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    В каких это направлениях? Там задача была поставлена – колонки с Faux Columns. При данной технике они по умолчанию вниз тянутся. )

Похожие темы

  1. несколько вопросов
    от prodesigner в разделе Флейм
    Ответов: 11
    Последнее сообщение: 02.12.2008, 05:33
  2. Несколько вопросов о Photoshop 7.0
    от OZz. в разделе Софт и железо
    Ответов: 1
    Последнее сообщение: 13.04.2008, 20:47
  3. несколько вопросов
    от Вишенка в разделе Печать и препресс
    Ответов: 10
    Последнее сообщение: 27.10.2007, 05:55
  4. Несколько вопросов по Illustratory
    от Oldboy в разделе Векторная графика
    Ответов: 4
    Последнее сообщение: 17.08.2007, 16:36
  5. Несколько вопросов
    от _Mr.D._ в разделе Вёрстка сайта
    Ответов: 3
    Последнее сообщение: 03.01.2007, 15:11

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •