Страница 1 из 2 12 ПоследняяПоследняя
Показано с 1 по 20 из 29

Тема: как такое сделать на div?

  1. #1

    Регистрация
    16.02.2007
    Сообщений
    14
    собственно вот: (черт, я один сталкиваюсь с тем, что в IE 7.0 перестает работать ENTER?

    Резиновость во всех направлениях должна присутствовать... Буду благодарен за ссылку на пример где то сделано... Если нет, то придется воевать таблицами

    neocrome.ru/datas/users/157-window.jpg

  2. #2

    Регистрация
    06.02.2007
    Адрес
    Kazan
    Сообщений
    186

    Смущение

    Резиновость во всех направлениях должна присутствовать... Буду благодарен за ссылку на пример где то сделано...
    [Только зарегистрированные пользователи могут видеть ссылки. ] - изначально все было резиновым, но потом сказали немного переделать.. в общем, подправить что-то не проблема..
    [Только зарегистрированные пользователи могут видеть ссылки. ] -резина

    к тому же полно css-галерей, где можно посмотреть примеры, ну, например, из "наших" -http://cssbox.ru
    ... Если нет, то придется воевать таблицами
    забудьте вы про таблицы, есди они используются не по назначению..

    у меня все..

  3. #3

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    вот что-то похожее, урок от Дэна Седерхольма.

    XHTML:
    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head>
    <title></title>
    <style>
    @import url("style.css"); 
    </style>
    </head>
    <body>
    <div class="container">
    ****<p class="desc">This box is:</p>
    ****<p class="link">[Только зарегистрированные пользователи могут видеть ссылки. ]</p>****
    </div>
    </body>
    </html>
    CSS:
    Код:
    .container {
    ****float: left;
    ****color: #666;
    ****background: url(images/rounded-right.gif) no-repeat top right;
    }
    .desc {
    ****margin: 0;
    ****padding: 9px 9px 0 9px;
    ****background: url(images/rounded-left.gif) no-repeat top left;
    }
    .link {
    ****margin: 0;
    ****padding: 0 0 0 9px;
    ****background: url(images/rounded-left.gif) no-repeat bottom left;****
    }
    .link em {
    ****display: block;
    ****padding: 0 9px 9px 0;
    ****font-style: normal;
    ****background: url(images/rounded-right.gif) no-repeat bottom right;****
    }
    .container a {
    ****font-size: 130%;
    ****color: #E70;
    }
    IMAGES:
    [attachment=5564:attachment]
    [attachment=5565:attachment]

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

    удачи...

  4. #4

    Регистрация
    06.02.2007
    Адрес
    Kazan
    Сообщений
    186
    Но такой способ подходит не всегда
    Zigzag, а можно узнать, в каких лучаях вы применяете "sliding doors" и в каких случаях 2ой способ?

  5. #5

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by Zigzag@Feb 28 2007, 12:36
    я обычно чтобы сделать скругленные углы при резиновости блока по всем осям, в этот блок вкладываю маленькие изображения уголков которые абсолютным позиционированием расставляю по углам, не забыв при этом указать для самого блока position: relative;
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Имхо, наиболее предпочтительный способ.
    Позволяет обойтись без большого фонового изображения.

  6. #6

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    ответ вам дал Aykroyd

  7. #7

    Регистрация
    16.02.2007
    Сообщений
    14
    да боюсь с данным рисунком он не катит... приведенный код - я так кнопки сделал, оно же в высоту не тянется?!

    вот что хрестоматия о таблицах говорит:

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

  8. #8

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by booka@Mar 1 2007, 03:35
    оно же в высоту не тянется?!
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Всё тянется. Причем любым из предложенных способов.

  9. #9

    Регистрация
    16.02.2007
    Сообщений
    14
    ладно... сделал пока таблицей, там просто изврат получится если на div... результат тут:

    booka.jino-net.ru/booka/index.html

  10. #10

    Регистрация
    16.02.2007
    Сообщений
    14
    кстати - кто тут админит? по крайней мере в IE 7 хедер и футер косячат углами

  11. #11

    Регистрация
    21.08.2005
    Сообщений
    1,390
    booka
    скажу по-секрету... скоро всё будет идеально
    а этим дизайном уже нет смысла заниматься... ну изжил он себя

  12. #12

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by booka@Mar 3 2007, 11:19
    ладно... сделал пока таблицей, там просто изврат получится если на div... результат тут:

    booka.jino-net.ru/booka/index.html
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Не смотрел, не интересно...
    Позволю себе процитировать недавнюю проповедь своего коллеги:

    <div class='quotetop'>Цитата</div>
    Да пребудет с вами сила великих (X)HTML и CSS, да не отрекайтесь от основ истинных отца нашего W3C, да не ленитесь проверять дело рук ваших инструментом отца нашего, да приложите сил к прочтению талмудов наших от евангелиста нашего Зельдмана! И воздастся вам тогда точно по делам вашим![/b]
    © Zigzag

    :read:

  13. #13

    Регистрация
    16.02.2007
    Сообщений
    14
    ну хорошо если так вопросик опять у меня... посмотрел на свою ссылку в IE 6 - почему-то блоки справа сползают вниз... у левого div ширина 70%, у правого margin в 75%... таблицы если удалить, то все в норме... от чего так может быть?

  14. #14

    Регистрация
    16.02.2007
    Сообщений
    14
    с ентим разобралсо... и в чем нелюбовь такая к таблицам, без них же иногда никак...

  15. #15

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by booka@Mar 3 2007, 17:33
    в чем нелюбовь такая к таблицам, без них же иногда никак...
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Ну опять пошло-поехало...
    На самом деле в данном контексте совершенно не применимы такие понятия как "любовь" или "нелюбовь". Примерно таким же вопросом задавался в свое время и я сам. Не далее, чем минувшей осенью. Без таблиц никак только в том случае, если они используются по своему прямому назначению – для представления табличных данных. Но не для раскладки элементов на странице...

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

  16. #16

    Регистрация
    16.02.2007
    Сообщений
    14
    вечный спор мне кажется надо подписать "биль о свободной верстке"... я согласен, что на div получается короче намного, но я свой извращенский блок пока не придумал как сделат ьбез таблиц...

  17. #17

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by booka@Mar 3 2007, 18:40
    вечный спор мне кажется надо подписать "биль о свободной верстке"...
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Никакого спора. Просто есть стандарты, есть понятие "семантики", есть мнения многих авторитетных людей... А как кому верстать – профессионально и по стандартам или таблицами "по старинке" – это уже личное дело каждого...

    Originally posted by booka@Mar 3 2007, 18:40
    я согласен, что на div получается короче намного
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Не только короче. То, что короче – это далеко не самое главное преимущество блочной модели. Есть много других важных причин, по которым CSS-верстка гораздо предпочтительнее макетных таблиц...

    Originally posted by booka@Mar 3 2007, 18:40
    но я свой извращенский блок пока не придумал как сделат ьбез таблиц...
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    А и не надо изобретать велосипед. Все уже изобретено. Если Вам, конечно, не лень почитать соответствующую специализированную литературу...

  18. #18

    Регистрация
    24.02.2007
    Сообщений
    2
    Originally posted by Aykroyd@Feb 28 2007, 11:51
    Имхо, наиболее предпочтительный способ.*
    Позволяет обойтись без большого фонового изображения.
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Что то я не понял ..
    А разве при увеличении / уменьшении блока , те абсолютные дивы с уголками будут двигаться вместе с ним ? Или я туплю ?

  19. #19

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    конечно будут, т.к. они будут абсолютном позиционированием прикреплены к координатной сетке родительского блока

  20. #20

    Регистрация
    11.11.2007
    Сообщений
    29
    как сделать такого плана вложенные закругленные блоки?
    [Только зарегистрированные пользователи могут видеть ссылки. ]

Страница 1 из 2 12 ПоследняяПоследняя

Похожие темы

  1. Можно ли сделать такое?
    от Vadikov в разделе Векторная графика
    Ответов: 15
    Последнее сообщение: 29.03.2007, 09:59
  2. Как такое сделать в IE ?
    от Konstantin S. в разделе Вёрстка сайта
    Ответов: 20
    Последнее сообщение: 03.07.2006, 20:45
  3. Как сделать такое подчёркивание ссылки
    от nezl в разделе Веб-программирование
    Ответов: 2
    Последнее сообщение: 11.12.2005, 11:58
  4. Как бы такое сделать?
    от Степан в разделе Вёрстка сайта
    Ответов: 5
    Последнее сообщение: 03.02.2005, 21:36
  5. Как сделать такое?
    от sigma в разделе Веб-программирование
    Ответов: 1
    Последнее сообщение: 20.09.2004, 12:50

Ваши права

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