Блог

Главная - Вопросы по программированию - положение изображения html, приводящее к слишком большой ширине окна

положение изображения html, приводящее к слишком большой ширине окна

#html #css #overflow #positioning

#HTML #css #переполнение #позиционирование

Вопрос:

Я пытаюсь создать веб-сайт с заголовком, который повторяется по всей ширине страницы, с названием веб-сайта по центру заголовка и логотипом, слегка смещенным от названия веб-сайта. Если ширина экрана слишком мала для отображения логотипа целиком, я просто хочу, чтобы логотип был обрезан справа, в противном случае будет отображаться весь логотип (т. Е. монитор / окно достаточно большие. Чего я не хочу, так это перемещать изображение вправо. Я хочу, чтобы оно более или менее было абсолютно расположено рядом с заголовком.

Однако я не могу придумать способ сделать это. Я не могу использовать overflow-x или overflow-y (из-за поддержки браузера), а разметка, которую я сейчас имею, просто расширяет окно с помощью полосы прокрутки, чтобы вместить все изображение (см. скриншот).

Вот снимок экрана

изображение
http://img691.imageshack.us/img691/3188/screenshot03062011.jpg

Вот разметка и CSS:

     <div id="header-wrap">
     <div id="header">
      <img src="title-card.png" />
      <img id="this-chick-logo" src="this-chick-logo.png" />
     </div>
    </div>

--

   body
   {
    background: #dfb1e4;
    padding: 0px;
    margin: 0px;
   }

   #header-wrap
   {
    background: url('header-bg.png') repeat-x;
    width: 100%;
    height: 291px;
   }

   #header
   {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
    }

    #header img
    { 
    margin-top: 105px;
    }


   #header img#this-chick-logo
   {
    margin-top: -75px;
    margin-left: 680px;
    overflow: hidden;
   }

Спасибо.

Комментарии:

1. "I can't use overflow-x or overflow-y (because of browser support)" — не могли бы вы подробнее остановиться на этом?

2. переполнение поддерживается всеми браузерами. В IE6 есть некоторые проблемы с переполнением: видимым, но это все. quirksmode.org/css/contents.html

Ответ №1:

Добавить

overflow: hidden; Для #header-wrap

Не размещайте это на изображении.

Ответ №2:

overflow: hidden; либо необходимо добавить в #header-wrap и, возможно, удалить из img#this-check-logo . Также, если девушке нравится отталкиваться вправо, и часть изображения обрезается при переполнении, а вы этого не хотите, я бы перемещал ее на несколько пикселей влево, пока вы не получите это так, как вам нравится. Если вы не возражаете немного обрезать, просто оставьте это и добавьте только overflow: hidden .