Создание ответной строки изображения

Question

У меня есть изображения для моей панели навигации, которые я сделал в Photoshop. Как создать черный фон и отобразить ли они вертикальную строку с левой стороны во время изменения размера? Как только он изменяется, они падают в белый цвет и не видны. Кроме того, если вы используете Chrome вы должны попасть в верхний левый логотип, чтобы переместить нав изображения для некоторых reason..this является единственным браузером это делает это в enter link description here

CSS:.

/*---Navigation---*/ 
nav{ 
    float: right; 
    margin-top: 12px; 
    margin-right: 25px; 

} 
nav a: { 
    padding: 15px; 
} 
#contact{ 
    padding: 4px; 
} 
#bio{ 
    padding: 4px; 
} 
#photography{ 
    padding: 4px; 
} 
#design{ 
    padding: 4px; 
} 
#sketches{ 
    padding: 4px; 
} 
#web{ 
    padding: 4px; 
} 

HTML:

<header> 
    <a href="index.html" id="homeLogo" title="home"><img src="images/paintLogo.jpg" alt="Ryan Warner Eyemusic"></a> 
    <nav> 
    <a href="contact.html" id="contact"><img src="images/links/contact.png" 
     onmouseover="this.src='images/links/contactHover.png'" onmouseout="this.src='images/links/contact.png'"></a> 
    <a href="bio.html" id="bio"><img src="images/links/bio.png" 
     onmouseover="this.src='images/links/bioHover.png'" onmouseout="this.src='images/links/bio.png'"></a> 
    <a href="photography.html" id="photography"><img src="images/links/photography.png" 
     onmouseover="this.src='images/links/photographyHover.png'" onmouseout="this.src='images/links/photography.png'"></a> 
    <a href="design.html" id="design"><img src="images/links/design.png" 
     onmouseover="this.src='images/links/designHover.png'" onmouseout="this.src='images/links/design.png'"></a> 
    <a href="sketches.html" id="sketches"><img src="images/links/sketches.png" 
     onmouseover="this.src='images/links/sketchesHover.png'" onmouseout="this.src='images/links/sketches.png'"></a> 
    <a href="web.html" id="web"><img src="images/links/web.png" 
     onmouseover="this.src='images/links/webHover.png'" onmouseout="this.src='images/links/web.png'"></a> 
    </nav> 
    </header> 

Answer 1

Получение его на маленькую кнопку на стороне, как страница Старбакса другая история, но я помогу вам с вашим исходным запросом.

1. Установите логотип float: left;
2. Удалить высоту от вашего header (запрещает его от расширения)
3. Установите overflow: auto; на вашем header & overflow: hidden; на вашем nav, чтобы очистить поплавки. (Вы также можете использовать метод clearfix, но это проще).

Теперь ваши ссылки будут оставаться в черном при изменении размера. Если вы хотите, чтобы она стала открытой кнопкой, когда она меньше, чем, скажем, 480 пикселей, вам нужно будет использовать media queries.

Примечания:

• Я заметил, что вы установите mouseover & mouseout на ваши ссылки, чтобы переключить изображение. Тем не менее, более эффективно использовать селектор CSS :hover, например. nav a:hover { background-image: url(...)
• Ваши изображения немного мерцают при загрузке, рассмотрите возможность использования CSS sprite, чтобы избежать нескольких запросов.
• Наконец, если вы используете изображения для своей навигации, имейте в виду, что это не полезно для SEO, и предоставить хотя бы ссылку title атрибут.