Лого в резиновом шаблоне

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

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

    tubus Создатель

    Регистр.:
    29 июн 2009
    Сообщения:
    35
    Симпатии:
    7
    Имеется сайт с резиновым шаблоном. Как сделать так, чтобы логотип шабла растягивался в зависимости от разрешения посетителя?

    попробовал вот так:
    Код:
     <tr>
       <td><div style="background-image:url(templates/gas_creativ/images/header.jpg); background-repeat:no-repeat; background-position:center; height: auto; width: 100%"></div></td>
      </tr>
    логотип пропал совсем.
    Подскажите пожалуйста.
     
  2. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    OMG, неужели в конце 2010 года еще пишут div style="блаблабла"? когда народ научится отделять контент от оформления?

    по сабжу, у вас указана ширина блока но почему-то не указана высота... height: auto означает что высота будет подгоняться исходя из содержимого, но поскольку содержимое отсутствует, высоты тоже нет...
     
  3. LodeRunner

    LodeRunner

    Регистр.:
    10 фев 2010
    Сообщения:
    220
    Симпатии:
    12
    Полностью солидарен. Только хлам наводят в коде.
    А еще я удивляюсь, когда вижу, что до сих пор верстают таблицами))
    tubus
    Укажи фиксированную высоту блоку с лого в пикселях.
     
  4. tubus

    tubus Создатель

    Регистр.:
    29 июн 2009
    Сообщения:
    35
    Симпатии:
    7
    поясню - сайт старый, шаблон соответственно тоже. Естественно, что все стили будут вынесены в сторонний файл, а не будут прописаны в шаблоне. Нужно именно решение как сделать резиновое лого.
    Если указать фиксированную высоту блока, то какая нафиг резиновость у логотипа будет?
     
  5. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    а какое отгношение имеет высота к резине?
    в CSS допускается указание одного из параметров в процентах, а другого в px или em
    т.е. конструкция
    HTML:
    height: 100px; 
    width: 100%;
    будет нормально работать

    но если вам подобное решение по какой-то причине не подходят, можете внутри блока с шириной 100% добавить еще один блок, с высотой 100px...
     
  6. tubus

    tubus Создатель

    Регистр.:
    29 июн 2009
    Сообщения:
    35
    Симпатии:
    7
    может быть мы друг друга не поняли? я хочу, чтобы картинка в шапке меняла свой размер в зависимости от разрешения экрана.

    css:
    Код:
    .logo {
    margin: 0;
    padding: 0;
    width: 100%;
    height:auto;
    background-repeat: no-repeat;
    }
    
    и

    <img src="/templates/gas_creativ/images/header.jpg" class="logo">

    появилась прокрутка по горизонтали :(
     
  7. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    возможно...
    у картинки, которая поставлена тегом img размер меняется атрибутами средствами width и height, средствами html изменить данные атрибуты нет возможности (html - язык разметки)

    исходя из указанной в первом посте строчки
    HTML:
    background-image:url(templates/gas_creativ/images/header.jpg);
    
    я решил что вы пытаетесь поставить логотип (т.е. картинку header.jpg) бекграундом - в этом случае достаточно было указать блоку высоту

    или вы хотите, чтобы менялась не только ширина, но и высота?
     
    Haliff3007 нравится это.
  8. tubus

    tubus Создатель

    Регистр.:
    29 июн 2009
    Сообщения:
    35
    Симпатии:
    7
    Объясню так: имеется например картинка размерами 1000 px на 270 px. Задача состоит в том, чтобы на разных разрешениях экрана она либо уменьшалась либо увеличивалась на всю ширину экрана.
     
  9. tubus

    tubus Создатель

    Регистр.:
    29 июн 2009
    Сообщения:
    35
    Симпатии:
    7
    в итоге сделал так

    <td id="logo">
    </td>

    в css:
    #logo {
    height:333px;
    background:url("/templates/gas_creativ/images/header.jpg") no-repeat scroll 50% 0 transparent;
    }
     
Статус темы:
Закрыта.