CODEWITHSUNDEEP
htmlimagecssresponsive-design
floyd
floyd

Reputation: 131

Creating a responsive image row

I have images for my navigation bar that I made in Photoshop. How would I create a black background and have them displayed in a vertical row down the left side during a resize? Once it resizes they drop into the white and are not seen. Also if you are using Chrome you will have to hit the top left logo to move the nav images up for some reason..this is the only browser this does this in. 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>

Upvotes: 0

Views: 275

Answers (1)

webketje
webketje

Reputation: 10976

Getting it on a small button on the side like the starbucks page is another story, but I'll help you out with your original request.

  1. Set the logo to float: left;
  2. Remove the height from your header (it prohibits it from expanding)
  3. Set overflow: auto; on your header & overflow: hidden; on your nav to clear the floats. (You may also use the clearfix method but this one's easier).

Now your links will stay in the black when resizing. If you want it to become an openable button when smaller than, say 480px, you'll have to use media queries.

Notes:

  • I noticed you set mouseover & mouseout on your links to toggle the image. However, it's more efficient to use the CSS :hover selector, eg. nav a:hover { background-image: url(...)
  • Your images flicker a bit on loading, consider using a CSS sprite to avoid multiple requests.
  • Lastly, if you use images for your navigation, be aware that it is no good for SEO, and provide at least a link title attribute.

Upvotes: 1

Related Questions