За последние 24 часа нас посетили 17497 программистов и 1721 робот. Сейчас ищут 1662 программиста ...

Не могу сделать резиновую шапку (width: 100%)

Тема в разделе "HTML и CSS", создана пользователем Makaroff, 17 мар 2012.

  1. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    я вот тут http://www.blogohelp.ru/primery-verstki-shapok-dlja-sajtov вычитал примерно такое описание верстки резиновой шапки как писал igordata но этот вариант мне не подходит. YSandro а как Вы думаете это не нормальный вариант как я указал
    Код (Text):
    1.  
    2. <div style="width: 100%; height: 30%">
    3.     <img src="/images/hrsite.jpg" width="100%" height="100%">
    4. </div>
    ведь все работает как я и хотел...
     
  2. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    ты потом покажи че получилось, не стесняйся.
     
  3. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Если именно такого вы и хотели, то всё нормально. Просто именно это вариант не приходит в голову, и вам советуют другое, потому что так шапки не делают обычно :)
    Кстати, вот этот <div style="width: 100%; height: 30%"> контейнер находится в теге body или ещё в каком-то контейнере со своим стилем?
     
  4. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    Что Вы подразумеваете под тем что картинку будет плющить? Она такая же на шапке как и в оригинале и масштабируеться на ура! когда по ширине окно браузера тягаю то она стает меньше/больше по ширине и длине. класс =) ! а вот про совет по расчинению картинки спасибо - полезно для начинающего верстальщика.
     
  5. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Если вы будете растягивать и плющить именно ту картинку, которую показали, что это иногда называют "порнография". Я вспомнил, всё же видел такое очень давно, на народе.ру попадались.
     
  6. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    человек все получилось на ура, шас сайт на локалке, попсже как заработает я тебе ссылку скину.
    Ну да канешно не приходит в голову т.к уже 2 дня мучался, а это решение вот тут час назад вычитал http://web-silver.ru/forum/html-css-javascript/10203-massht ... v-css.html . Скажите коль уж это не тривиальное решение то как увеличивать/уменьшать картинку которая в шапке сайта с помощью тривиального решения?
    Кстати только что проверил сайт в opera, chrome, ie - и все работает отлично.
     
  7. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    ты не мне, ты в топик ссылку кинуть не забуть. через годик почитаешь, посмеешься...
     
  8. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    над чем смеяться буду?над перепиской? все четко работает во всех браузерах, аж мило любоваться =)
     
  9. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Если нужно именно увеличивать картинку, то делать это нужно хотя бы пропорционально, чтобы ничего там не искажалось.
    Браузеры увеличивают-уменьшают картинки очень некачественно, по ускоренному алгоритму, потому в качественной вёрстке такого не встретишь.
    Чтобы увеличить картинку пропорционально достаточно указать только ширину, высоту картинки браузер сам подгонит. Так делали в давние времена.
    Лучше будет, если те фиолетовые картинки сделать отдельными картинками. Левую прижать к левому краю. Правую - к правому краю. Между ними пустота, значит, вообще картинка не нужна, там только текст "Шапка сайта", который можно выровнять по центру. Ниже идёт фиолетовая полоса, она тоже делается без текстуры (картинки), просто блок с заливкой бэкграунда.
    Пример делать не буду, сразу пишу ;)
     
  10. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    покаж скриншот плс
     
  11. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    Все очень понятно описали за что поклон перед вами, суть того что Вы написали похожа на то что писал igordata, но у меня есть один момент - нижняя полоска это у меня тоже картинка которая должна прикасаться левого и правого углов, вот как быть с ней вот это надо придумать

    Добавлено спустя 3 минуты 3 секунды:
    как сайт доделаю то все покажу в рабочем виде. Кстати почему ты то есть в сети( на форуме) то офлайн? нет глючит чтоли?
     
  12. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    Нет, не "похожа". Это именно то же самое =)

    для этого я и просил ее показать. то решение что предлагаю тебе я, то решение, что предлагает тебе Сандро, исходят из того, что у тебя такая картинка как ты показал =)

    круг замкнулся.
     
  13. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Если там повторяющийся узор, то делается фрагмент и в этой длинной полоске (див-контейнере) стилем указывается, что нужно клонировать картинку по оси Х
    Код (Text):
    1. <div style="background:url('адрес.картинки') repeat-x center 0;"></div>
    Если там картинка не повторяющаяся, то можно сделать её очень широкой, чтобы под любой браузер влезла, например, шириной 2500px.
    Код (Text):
    1. <div style="background:url('адрес.картинки') no-repeat center 0;"></div>
     
  14. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    забавно ми тут общаемся =) особенно сегодняшнее общение мне очень понравилось, Вы меня сегодня неплохо просветили, теперь буду чатиться с вами на форуме чуть ли не каждый день, а сейчас пора уже спать ложиться. кстати ребята у вас сколько время то сейчас?
     
  15. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    пять утра, спокойной ночи.
    да, там в моих примерах нужно ещё высоту контейнерам задать...
     
  16. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    Если там картинка не повторяющаяся, то можно сделать её очень широкой, чтобы под любой браузер влезла, например, шириной 2500px.
    Код (Text):
    1. <div style="background:url('адрес.картинки') no-repeat center 0;"></div>
    [/quote]
    Этот вариант мне бы подошел только не ясно если я ее вставлю в блок <div> то будет ли она вся отображаться? или будет некий кусок центра или левой строны торчать ?

    Добавлено спустя 1 минуту 6 секунд:

    спокойной ночи ребята. спасибо за помощь!
     
  17. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    на прозрачных пнгшках можно сделать так что не подкопаешься. это я тебе уже говорил. но ты ж сам должен всё прочухать. так что вперед =) тренируйся на кошках. только прозрачные пнгшки не пашут в ie6...
     
  18. sobachnik

    sobachnik Старожил

    С нами с:
    20 апр 2007
    Сообщения:
    3.380
    Симпатии:
    13
    Адрес:
    Дмитров, МО
    Пара строчек JS кода - и прекрасно пашут :)
    Я не знаю - ты открывал мой JS Tetris или нет, но там есть прозрачная PNG, которая в добавок перемещается по экрану и изменяет свои размеры. В ie6 полёт нормальный :)

    Добавлено спустя 8 минут 2 секунды:
    А ещё там в финальных титрах две PNG с градиентом прозрачности - тоже в ie6 работает
     
  19. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    ну и отлично. пнг - выход из любого положения =)