html5 - Creating a responsive image row -
I have images for my navigation bar in Photoshop. I will create a black background and left during a shape Will they have displayed them in a vertical line down? Once this shape changes, they come in white and are not seen. In addition, if you are using Chrome, you have to hit the top left logo to move the nav images for any reason .. This is the only browser in this browser.
CSS:
/ * --- Navigation --- * / NAV (float: right; margin-top: 12px; margin-right: 25px;} A: {padding: 15px;} # contact {padding: 4px;} #bO {padding: 4px;} # photography {padding: 4px;} #design {padding: 4px;} # scatch {padding: 4px;} # Web {padding: 4px;}
html:
header> gt; & lt; a href = "index.html" id = "HomeLogo" title = "home" & gt; & lt; img src = "picture / paint logo. Jpg" alt = "Ryan Warner amous" & gt; & lt; / a & gt; & lt; nav & gt; & Lt; a href = "contact.html" id = "contact" & gt; & lt; img src = "image / link / contact "Onmouseover =" this.src = 'picture / link / contact.png' 'onmouseout = "this.src =' images / link / contact.png '' & gt; & lt; / a & gt; & lt; A href = "bio.html" id = "bio"> -
float logo: left;
< Li> your header
(this prevents extension - Set
overflow: auto;
on your header
to clear the & amp; float; overflow: hidden; On Code> your nav
(you can also use the clearfix
method, but this is easy).
Now when your When resizing the shape your link will turn black. If you want it to be smaller than 480px when an open button is formed, then you have to use it.
Note:
- I saw that you have set
mouseover
& amp; To toggle the image, mouseup
on your link, however, it is more efficient to use the CSS : hover
selector, e.g. nav a: hover {background-image: url (...)
- Your images get a slight shock when loaded, using one to avoid multiple requests Consider it.
- Finally, if you use images for your navigation, keep in mind that it is not good for SEO, and providing at least one link
title
attribute Does.
Comments
Post a Comment