Резиновая шапка...

Тема в разделе "Веб-дизайн", создана пользователем shamantc, 1 фев 2011.

Модераторы: zek24
  1. shamantc

    shamantc ЗлОй ШаМан

    Заблокирован
    Регистр.:
    3 ноя 2008
    Сообщения:
    651
    Симпатии:
    183
    В общем возник вопрос с резиновой шапкой т.к. погуглил и полазил по форуму из таких тем нужного не нашел (или просто плохо искал)
    Как сверстать вот такую шапку?
    Перейти по ссылке
     
  2. Maskad

    Maskad

    Заблокирован
    Регистр.:
    29 апр 2009
    Сообщения:
    727
    Симпатии:
    109
    это все конечно хорошо. но что такое лого 1 и лого 2?
    между ними должна быть шапка, которая будет растягиваться?
     
  3. shamantc

    shamantc ЗлОй ШаМан

    Заблокирован
    Регистр.:
    3 ноя 2008
    Сообщения:
    651
    Симпатии:
    183
    LOGO это логотип (который всегда будет слева), то что растягивается это скажем так фон для шапки, а LOGO2 - это тоже картинка с текстом типа лозунга которая всегда будет справа
    ну конечно не плохой был бы один из вариантов первый это то что описан выше, а второй почти тот же самый только
    LOGO1-картинка растягивающиеся(фон)-А справа текст который будет в html
     
  4. fima32

    fima32

    Регистр.:
    25 дек 2007
    Сообщения:
    201
    Симпатии:
    13
    HTML:
    <table width=100%>
    <tr>
    <td width=300>Logo 1</td>
    <td></td>
    <td width=300>Logo 2</td>
    </tr>
    </table>
     
  5. shamantc

    shamantc ЗлОй ШаМан

    Заблокирован
    Регистр.:
    3 ноя 2008
    Сообщения:
    651
    Симпатии:
    183
    А растягивается где? =) еще одна картинка?
     
  6. SeoLazy

    SeoLazy Постоялец

    Регистр.:
    10 дек 2010
    Сообщения:
    139
    Симпатии:
    15
    Просто взять полоску вертикальную вашего "фона" шапки, и повторять ее по горизонтали на 100%. А лого1 и лого2 закрепить по краям. Вы как хотите дивами или таблицами?
     
  7. shamantc

    shamantc ЗлОй ШаМан

    Заблокирован
    Регистр.:
    3 ноя 2008
    Сообщения:
    651
    Симпатии:
    183
    Щас у меня вот так
    HTML:
    <div align="center">
    	  <table width="100%"  border="0" cellpadding="0" cellspacing="0">
    	        <tr>
    		<img src="/images/header.jpg" width="100%" height="170" >     
    	        </tr>
    	  </table>
     </div>
    Хотелось бы что бы во всех браузерах работало и желательно 2 варианта
     
  8. SeoLazy

    SeoLazy Постоялец

    Регистр.:
    10 дек 2010
    Сообщения:
    139
    Симпатии:
    15
    Так оно тянуться не будет, у вас же всего одна картинка. Показываю по аналогии:
    HTML:
    <div align="center">
    	  <table width="100%"  border="0" cellpadding="0" cellspacing="0"><tr>
    		<img src="/images/logo1.jpg" width="Npx" height="170" >     
    	        </tr>
    	        <tr>
    		<img src="/images/header_bg.jpg" width="100%" height="170" >     
    	        </tr>
    <tr>
    		<img src="/images/logo2.jpg" width="Npx" height="170" >     
    	        </tr>
    	  </table>
     </div>
    Так на скоряк. Смысл с том, что вы берете лого1 в левую ячейку, лого2 в правую, а в центральную - полоску важего фона шириной 1px, высотой 170 и задаете ее фоном на 100%
     
  9. shamantc

    shamantc ЗлОй ШаМан

    Заблокирован
    Регистр.:
    3 ноя 2008
    Сообщения:
    651
    Симпатии:
    183
    Вариант выше не работает.... Получается картинка под картинкой а если <td> добавлять то все становится в одну строку но ничего не растягиваетсято что слева и српава оба лога нормально а та картинка которая по середине должна растягиваться то она так и остается размер с 1px
     
  10. SeoLazy

    SeoLazy Постоялец

    Регистр.:
    10 дек 2010
    Сообщения:
    139
    Симпатии:
    15
    Принципиально таблицами? А то подожди, щас закончу дела дивами набросаю...