как реализовать адаптацию хедера под разрешение экрана?

Тема в разделе "Графика", создана пользователем buket23, 29 апр 2009.

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

    buket23

    Регистр.:
    3 окт 2008
    Сообщения:
    163
    Симпатии:
    10
    может не коректно задал вопрос, но попробую объяснить, вообщем есть шапка сайта как сделать так чтобы она при разных разрешениях была во всю ширину, т.е. резиновая, шапка есть в jpg, png, gif. Сообственно как реализовать такое*?

    З.Ы. прошу прощения поторопился с вопросом, все оказывается просто реализуется вставкой width="100%"
     
  2. Compressor

    Compressor

    Регистр.:
    31 янв 2009
    Сообщения:
    314
    Симпатии:
    200
    1. Можно исходя из разрешения делать подгрузку шапки разного рамера.
    2. Можно сделать 3 блока.
    [повторяющийся градиент] [Сама шапка фиксировоного размера] [повторяющийся градиент]
     
  3. buket23

    buket23

    Регистр.:
    3 окт 2008
    Сообщения:
    163
    Симпатии:
    10
    Compressor интересует еще первый вариант, нужно под два разрешения сделать без потери качества шапки 1280-1024 и 1024-768
     
  4. sulacco

    sulacco Постоялец

    Регистр.:
    17 мар 2008
    Сообщения:
    90
    Симпатии:
    45
    Еще варинат:
    если тематика сайта позволяет, то можно сделать шапку на макс разрешение или даже больше, поставить ее фоном чтобы не было прокрутки, и все.

    Видел такое на мебельном сайте - там шапка была интерьбер квартиры, при увеличении разрешения - просто большая часть квартиры показывалась, так же можно сделать для туристического сайта и т.п.
     
  5. buket23

    buket23

    Регистр.:
    3 окт 2008
    Сообщения:
    163
    Симпатии:
    10
    вставкой width="100%" слишком крупная шапка в опере уезжает, подскажите поконкретней как реализовать
     
  6. mcslayer

    mcslayer Создатель

    Регистр.:
    25 май 2008
    Сообщения:
    24
    Симпатии:
    1
    реализовывал через css:
    header {width:100%; background: url(bg-header.png) center top no-repeat; position:relative; text-align:center;}
     
  7. Kutuz0v

    Kutuz0v Создатель

    Регистр.:
    13 мар 2009
    Сообщения:
    15
    Симпатии:
    1
    а если нужно шоб было не меньше 1000 и не больше 1280 px по ширине? в css?
     
  8. swer

    swer

    Регистр.:
    15 июн 2008
    Сообщения:
    308
    Симпатии:
    38
    [/QUOTE]
    1024-768[/QUOTE]
    Вот реализация бакроунда с помошью яваскрипта
    Код:
    <script language="JavaScript">
    if (screen.width<=800)  
        {src='image/fon800600.gif';}  
      else  
     if (screen.width<=1024)  
        {src='image/fon1024768.gif';}  
      else
     if
        (screen.width<=1280)  
        {src='image/fon1280960.gif';} // если другое
    document.write('<body text="#000000" bgcolor="#FFFFFF" link="#006600" vlink="#009900" alink="#009900" background=\"'+src+'\" bgproperties="fixed">')//Определение разрешения монитора  
    </script>
    
     
  9. Drak0n4ik

    Drak0n4ik Создатель

    Регистр.:
    8 май 2009
    Сообщения:
    25
    Симпатии:
    1
    Код:
    html, head {
    min-width:1000px;
    max-width:1280px;
    }
    
    но говорят, что это не работает в ИЕ :(
     
  10. swer

    swer

    Регистр.:
    15 июн 2008
    Сообщения:
    308
    Симпатии:
    38
    Гугл в помощь,я уже находил статьи где была решена эта проблема.
     
Статус темы:
Закрыта.