"Резиновая" шапка сайта.

Тема в разделе "Веб-дизайн", создана пользователем Forvator, 14 дек 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Forvator

    Forvator Создатель

    Регистр.:
    30 авг 2010
    Сообщения:
    12
    Симпатии:
    3
    На данный момент имеется шапка сайта, вставленная обычной картинкой с параметрами: <tr><td align=center width="100"><img src="picture/header.JPG"" style="width:100%; height:auto;"></td>. При изменении разрешения окна браузера, картинка автоматически подгоняется под ширину экрана. Хочу это дело поместить в дивы. Подскажите, как грамотно это сделать, чтоб она так же осталась "резиновой".
     
  2. Nei

    Nei Nosce te ipsum

    Регистр.:
    5 сен 2009
    Сообщения:
    608
    Симпатии:
    479
    Приведенного кода недостаточно, чтобы понять что там за вёрстка. Нужно глянуть хотя бы на всю таблицу, из которой показана только часть.

    P.S. И реализовывать резину, присваивая width=100% картинке, - это жесть полная))
     
  3. Dzimarek

    Dzimarek Постоялец

    Регистр.:
    2 фев 2010
    Сообщения:
    51
    Симпатии:
    5
    пожалуйста предоставь побольше кода, и там можно будет уже смотреть
     
  4. darth

    darth Постоялец

    Регистр.:
    19 апр 2006
    Сообщения:
    113
    Симпатии:
    18
    изначально в цсс тебе нада задать ширину бади 100% далее диву ширину 100%.ширина в 100% у картинки будет нормально смотрется только если она изначально у тебя в 1 пиксель) в противном случае скорее всего лучше будет пользоваться бэкграундом
     
  5. Phrack

    Phrack

    Регистр.:
    3 ноя 2010
    Сообщения:
    264
    Симпатии:
    38
    да никак пожалуй нормально не сделаешь, только бекграундом
     
  6. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    Если нужно повторить картинку многократно, например это однотонный фон, то так

    HTML:
    
    <div style="width:100%; height:100; background: url(picture/header.JPG") top left repeat-x; "> </div>
    
    repeat-x; - повторяем по горизонтали
    repeat-y; - повторяем по вертикали
    no-repeat - не повторять
    top left - выравниваем по верхнему левому краю

    Т.к. div пустой, то ширину и высоту обязательно нужно задать.
     
  7. Forvator

    Forvator Создатель

    Регистр.:
    30 авг 2010
    Сообщения:
    12
    Симпатии:
    3
    Это весь код, которым вставляется картинка шапки. Это не однородный тон, а обычная картинка с нарисованными на ней людьми размером 1600*290. Параметр height:auto позволяет автоматически подгонять под всю ширину браузера на мониторах с различным разрешением экрана. Например, если сайт открывается на мониторе с разрешением 1024*768, то такая картинка будет автоматически подогнана в масштаб 1 007px × 183px по всей ширене браузера.
     
    siblover нравится это.
  8. Phrack

    Phrack

    Регистр.:
    3 ноя 2010
    Сообщения:
    264
    Симпатии:
    38
    попробуй
    PHP:
    width:100%;
    height:auto;
    min-height:183px;
    overflow:hidden;
    не думаю что будет очень хорошо работать
     
  9. bork75

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    А, понятно. Речь о масштабируемом изображении.
    Если просто хочешь избавиться от таблицы, то так
    HTML:
    
    <div style="width:100%; height:100%;">
      <img src="picture/header.JPG" width="100%">
    </div>
    
    Если хочешь масштабировать background css, то столкнёшься с проблемой кросбраузерности, придётся хаки вставлять.

    можешь ещё по теме посмотреть:
    http://www.ruseller.com/lessons.php?rub=2&id=417
    ps: А вообще не советую масштабирование использовать, качество будет размытое.
     
    siblover нравится это.
  10. Blooodrinker

    Blooodrinker Постоялец

    Регистр.:
    20 окт 2009
    Сообщения:
    122
    Симпатии:
    9
    ну нужно ориентироваться на более популярное разрешение экранов и от него отталкиваться.
    это к чему? не понял... и почему именно 183 пикселя
     
Статус темы:
Закрыта.