I have a bunch of images that are right next to each other to form a navigation bar. There are no gaps so it looks like one image while being able to make certain areas of it clickable and others not. How do I make it so if the navigation bar is too long for the window it gets smaller instead of some of the images going on a new line?
HTML/CSS:
.navbar-button {
margin: 0;
padding: 0;
display: inline block;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 10%;
}
<center>
<img src="Images/NavBar1.png" alt="" class="navbar-button" />
<a href="Home.html">
<img src="Images/NavBar2.png" alt="" class="navbar-button" />
</a>
<img src="Images/NavBar3.png" alt="" class="navbar-button" />
<a href="Information.html">
<img src="Images/NavBar4.png" alt="" class="navbar-button" />
</a>
<img src="Images/NavBar5.png" alt="" class="navbar-button" />
<img src="Images/NavBar6.png" alt="" class="navbar-button" />
<img src="Images/NavBar7.png" alt="" class="navbar-button" />
<a href="Schedule.html">
<img src="Images/NavBar8.png" alt="" class="navbar-button" />
</a>
<img src="Images/NavBar9.png" alt="" class="navbar-button" />
<a href="#" onClick="document.getElementById('id01').style.display='block'">
<img src="Images/NavBar10.png" alt="" class="navbar-button" />
</a>
<img src="Images/NavBar11.png" alt="" class="navbar-button" />
</center>
Instead of trying to prevent the linebreak with multiple images, you may want to take a look at the possibility to define clickable areas on a single image. You can define a map with different clickable areas. Take a look at the example below, where only the area around the text is actually clickable:
<img src="https://dummyimage.com/600x400/000/fff" usemap="#map">
<map name="map">
<area shape="rect" coords="100,150,500,250" href="#">
</map>
You can also define different shapes and sizes, for a better understanding, just take a look at the documentation
Please also note
If you define coordinates as pixels, this can lead to different clickable areas, if you resize the image. There is another question at StackOverflow, with a helpful discussion on how to create responsive image maps
I don't know if i got what you are trying to do but check this and let me if it works for you
jsfiddle link
<div class="my-navbar">
<center>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<a href="Home.html">
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</a>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<a href="Information.html">
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</a>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<a href="Schedule.html">
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</a>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
<a href="#" onClick="document.getElementById('id01').style.display='block'">
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</a>
<img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
</center>
</div>
.navbar-button {
margin: 0;
padding: 0;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 10%;
float:left;
width:200px;
}
Try this
.navbar-button {
margin: 0 10px !important;
padding: 0;
display: inline block;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 10%;
}
Related
I am working on a website, and I would like to align 4 circles in the center of the content area. The example can be found at invisionbilling.com/stackoverflow. I have something right now that does the job, but I know there will be issues with different window sizes, different picture sizes, etc. How do I set the height of the div container to automatically wrap around the 4 circles/images? Is there a way to automatically center it using margin-left and margin-right? I tried "auto" for all of these and it wasn't doing the job. Thanks!
HTML
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-
Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
CSS
.circles {
display: block !important;
float: left !important;
margin: 10px !important;
}
.wrapper {
height: 175px;
width: 100%;
margin-left: 225px;
}
Try flexbox instead of floating, and try never to use !important:
<!DOCTYPE html>
<html>
<head>
<style>
.circles {
margin: 10px;
}
.wrapper {
height: 175px;
width: 100%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Lower-Costs-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-358" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Greater-Cash-Flow-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-363" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Increased-Revenue-300x300.png" alt="" width="150" height="150"
class="alignnone size-medium wp-image-364" />
</div>
<div class="circles">
<img src="http://invisionbilling.com/wp-content/uploads/2018/08/Benefits-Circles-Emphasis-on-Patient-Care-300x300.png" alt="" width="150"
height="150" class="alignnone size-medium wp-image-361" />
</div>
</div>
</body>
</html>
I am new to HTML5. I used to code HTML years ago, but I am not familiar with the new ways of doing things. I'm basically starting from scratch. I have started a design and the beginnings of code for a website I want to put up. Before I go farther, I wanted to get what I have done looking properly. There is padding around each image that I'm am unsure of how to remove. I need all images to put up against each other. I've tried putting padding: 0 and margin: 0 on all elements in the code, but nothing is working. What am I doing wrong?
Images with padding I want removed
Here's a snippet of the code I'm using:
<style>
html, body { padding: 0; margin: 0 }
</style>
</head>
<body>
<header>
<img src="images/logo.gif" />
</header>
<nav>
<table>
<tr>
<td>
<img src="images/purpleBarLeftOfNav.gif" width="173" height="77" alt="" title="" />
<img src="images/navHomeTopSel.gif" alt="Home" title="" />
<img src="images/navAboutTop.gif" alt="About" title="" />
<img src="images/navServicesTop.gif" alt="Services" title="" />
<img src="images/navPortfolioTop.gif" alt="Portfolio" title="" />
<img src="images/navContactTop.gif" alt="Contact" title="" />
<img src="images/purpleBarPgTitleHome.gif" alt="Home" title="" />
</td>
</tr>
<tr>
<td>
<img src="images/spacerWhite.gif" width="114" height="146" alt="spacer" title="" />
<img src="images/phoneEmail.gif" width="59" height="146" alt="Phone and Email" title="" />
<img src="images/navHomeBtmSel.gif" width="32" height="146" alt="Home" title="" />
<img src="images/navAboutBtm.gif" width="32" height="146" alt="About" title="" />
<img src="images/navServicesBtm.gif" width="32" height="146" alt="Services" title="" />
</td>
</tr>
</table>
</body>
Today, 2016, we use flexbox for layout, not table (unless you need to make it work on older browsers)
html,
body {
margin: 0
}
div {
display: flex;
}
<div>
<img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
<img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>
<div>
<img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
<img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>
And if you really can't use flexbox, just float them
html,
body {
margin: 0
}
div:after {
content: '';
clear: both;
display: block;
}
div img {
float: left;
}
<div>
<img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
<img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>
<div>
<img src="http://placehold.it/50" width="114" height="146" alt="spacer" title="" />
<img src="http://placehold.it/50" width="59" height="146" alt="Phone and Email" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Home" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="About" title="" />
<img src="http://placehold.it/50" width="32" height="146" alt="Services" title="" />
</div>
A <table> and <img> based layout/design is probably not the best direction to be heading these days.
To answer your question you're likely seeing white space from a couple of places.
Spaces between table cells - use border-collapse: collapse; to remove. You might have to remove padding from the table cells as well.
Space around images - images are inline elements and as such have space for descenders, the parts of a letter form that fall below the baseline, and space around the image as well (at least if there's space between the <img> in your markup. Since you have images in a row you can float them or use flexbox to get rid of the space around them. In other instances you'd want to make the images display: block; to remove the inline white space.
Example 1 - What you likely have
td {
background-color: red;
}
<table>
<tr>
<td>
<img src="http://placehold.it/100x100/ffcc00">
</td>
</tr>
<tr>
<td>
<img src="http://placehold.it/100x100/ffcc00">
</td>
</tr>
</table>
Example 2 - More modern approach, NO TABLES with FLEXBOX
.flex {
display: flex;
}
<header>
<div class="flex">
<img src="http://placehold.it/100x100/ffcc00">
<img src="http://placehold.it/100x100/aacc00">
<img src="http://placehold.it/100x100/ffcc00">
</div>
<nav class="flex">
<img src="http://placehold.it/50x50/ffcc00">
<img src="http://placehold.it/50x50/aacc00">
<img src="http://placehold.it/50x50/ffcc00">
<img src="http://placehold.it/50x50/aacc00">
<img src="http://placehold.it/50x50/ffcc00">
<img src="http://placehold.it/50x50/aacc00">
</nav>
</header>
Example 3 - More modern approach, NO TABLES with FLOAT
/* Clearfix to clear floats - http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
img {
float: left;
}
<header>
<div class="cf">
<img src="http://placehold.it/100x100/ffcc00">
<img src="http://placehold.it/100x100/aacc00">
<img src="http://placehold.it/100x100/ffcc00">
</div>
<nav class="cf">
<img src="http://placehold.it/50x50/ffcc00">
<img src="http://placehold.it/50x50/aacc00">
<img src="http://placehold.it/50x50/ffcc00">
<img src="http://placehold.it/50x50/aacc00">
<img src="http://placehold.it/50x50/ffcc00">
<img src="http://placehold.it/50x50/aacc00">
</nav>
</header>
Example 4 - Old school with FLOAT
td {
padding: 0;
background-color: red;
}
table {
border-collapse: collapse;
}
img {
float: left;
}
<table>
<tr>
<td>
<img src="http://placehold.it/100x100/ffcc00">
<img src="http://placehold.it/100x100/11cc00">
</td>
</tr>
<tr>
<td>
<img src="http://placehold.it/100x100/ffcc00">
</td>
</tr>
</table>
Example 5 - Old school with FLEXBOX
td {
display: flex;
padding: 0;
background-color: red;
}
table {
border-collapse: collapse;
}
<table>
<tr>
<td>
<img src="http://placehold.it/100x100/ffcc00">
<img src="http://placehold.it/100x100/11cc00">
</td>
</tr>
<tr>
<td>
<img src="http://placehold.it/100x100/ffcc00">
</td>
</tr>
</table>
I am trying to create multiple photo galleries on one page. I can get the first gallery to work but when I try to add a second gallery neither of the pictures work. Could someone help me out and see what I have wrong or am missing? Thank you!
HTML:
<div class="gallery" align="center" id="gal1" >
<div class="thumbnails" id="thumb1" >
<img onmouseover="preview1.src=img1.src" name="img1" src="flower.jpg" alt="" />
<img onmouseover="preview1.src=img2.src" name="img2" src="blue_light.jpg" alt="" />
<img onmouseover="preview1.src=img3.src" name="img3" src="paintwithlight/JPEG/yellow-blue.jpg" alt="" />
<img onmouseover="preview1.src=img4.src" name="img4" src="paintwithlight/JPEG/abstract.jpg" alt="" />
<img onmouseover="preview1.src=img5.src" name="img5" src="paintwithlight/JPEG/angelin.jpg" alt="" />
<img onmouseover="preview1.src=img6.src" name="img6" src="paintwithlight/JPEG/anna.jpg" alt="" />
<img onmouseover="preview1.src=img7.src" name="img7" src="paintwithlight/JPEG/butterfly.jpg" alt="" />
<img onmouseover="preview1.src=img8.src" name="img8" src="paintwithlight/JPEG/clash.jpg" alt="" />
<img onmouseover="preview1.src=img9.src" name="img9" src="paintwithlight/JPEG/craze.jpg" alt="" />
<img onmouseover="preview1.src=img10.src" name="img10" src="paintwithlight/JPEG/dolphin.jpg" alt="" />
<img onmouseover="preview1.src=img11.src" name="img11" src="paintwithlight/JPEG/greenswirl.jpg" alt="" />
<img onmouseover="preview1.src=img12.src" name="img12" src="paintwithlight/JPEG/halfcircle.jpg" alt="" />
<img onmouseover="preview1.src=img13.src" name="img13" src="paintwithlight/JPEG/mindblown.jpg" alt="" />
<img onmouseover="preview1.src=img14.src" name="img14" src="paintwithlight/JPEG/mystic.jpg" alt="" />
<img onmouseover="preview1.src=img15.src" name="img15" src="paintwithlight/JPEG/radiation.jpg" alt="" />
<img onmouseover="preview1.src=img16.src" name="img16" src="paintwithlight/JPEG/rainbow.jpg" alt="" />
<img onmouseover="preview1.src=img17.src" name="img17" src="paintwithlight/JPEG/stuckcircle.jpg" alt="" />
<img onmouseover="preview1.src=img18.src" name="img18" src="paintwithlight/JPEG/swirl.jpg" alt="" />
<img onmouseover="preview1.src=img19.src" name="img19" src="paintwithlight/JPEG/whitelight.jpg" alt="" />
<img onmouseover="preview1.src=img20.src" name="img20" src="paintwithlight/JPEG/zeus.jpg" alt="" />
</div>
<div class="preview1" align="center">
<img name="preview1" src="flower.jpg" alt=""/>
</div>
</div>
<div class="gallery" align="center" id="gal2" >
<div class="thumbnails" id="thumb2" >
<img onmouseover="preview2.src=img1.src" name="img1" src="nature/JPEG/apple.jpg" alt="" />
<img onmouseover="preview2.src=img2.src" name="img2" src="nature/JPEG/cig.jpg" alt="" />
<img onmouseover="preview2.src=img3.src" name="img3" src="nature/JPEG/deadflower.jpg" alt="" />
<img onmouseover="preview2.src=img4.src" name="img4" src="nature/JPEG/halfnhalf.jpg" alt="" />
<img onmouseover="preview2.src=img5.src" name="img5" src="nature/JPEG/leaf.jpg" alt="" />
<img onmouseover="preview2.src=img6.src" name="img6" src="nature/JPEG/liveflower.jpg" alt="" />
<img onmouseover="preview2.src=img7.src" name="img7" src="nature/JPEG/mush.jpg" alt="" />
<img onmouseover="preview2.src=img8.src" name="img8" src="nature/JPEG/mushroom.jpg" alt="" />
<img onmouseover="preview2.src=img9.src" name="img9" src="nature/JPEG/pumpkin.jpg" alt="" />
<img onmouseover="preview2.src=img10.src" name="img10" src="nature/JPEG/redflower.jpg" alt="" />
<img onmouseover="preview2.src=img11.src" name="img11" src="nature/JPEG/rocks.jpg" alt="" />
<img onmouseover="preview2.src=img12.src" name="img12" src="nature/JPEG/silo.jpg" alt="" />
<img onmouseover="preview2.src=img13.src" name="img13" src="nature/JPEG/tree.jpg" alt="" />
<img onmouseover="preview2.src=img14.src" name="img14" src="nature/JPEG/tree2.jpg" alt="" />
<img onmouseover="preview2.src=img15.src" name="img15" src="nature/JPEG/tree3.jpg" alt="" />
<img onmouseover="preview2.src=img16.src" name="img16" src="nature/JPEG/water.jpg" alt="" />
<img onmouseover="preview2.src=img17.src" name="img17" src="nature/JPEG/yellowflower.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview2" src="nature/JPEG/apple.jpg" alt=""/>
</div>
</div>
CSS:
.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview1 img {
border: 4px solid #444;
padding: 1px;
width: 800px;
}
.thumbnails #thumb2 img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails #thumb2 img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview2 img {
border: 4px solid #444;
padding: 1px;
width: 800px;
}
The name attribute on an <img> tag is obsolete in HTML5 and should not be used in production.
→ Use data-* attribute instead.
align attribute is obsolete or nonstandard
→ Use style text-align:center; instead
Inline JavaScript makes developing hard and code maintenance a nightmare.
→ Place your JavaScript code into <script>, away from your HTML tags.
Here's an example how to easily create multiple hover-able galleries:
function hoverGal() {
var bigID = this.parentNode.dataset.targetid;
document.getElementById(bigID).src = this.dataset.big;
}
[].forEach.call(document.querySelectorAll("[data-big]"), function(thumb) {
thumb.addEventListener("mouseenter", hoverGal, false);
});
<div data-targetid="big1">
<img src="//placehold.it/100x60/0fb" data-big="//placehold.it/360x200/0fb" alt="">
<img src="//placehold.it/100x60/fb0" data-big="//placehold.it/360x200/fb0" alt="">
<img src="//placehold.it/100x60/b0f" data-big="//placehold.it/360x200/b0f" alt="">
</div>
<img id="big1" src="//placehold.it/360x200/0fb">
<div data-targetid="big2">
<img src="//placehold.it/100x60/bf0" data-big="//placehold.it/360x200/bf0" alt="">
<img src="//placehold.it/100x60/f0b" data-big="//placehold.it/360x200/f0b" alt="">
<img src="//placehold.it/100x60/0bf" data-big="//placehold.it/360x200/0bf" alt="">
</div>
<img id="big2" src="//placehold.it/360x200/bf0">
That way you won't get into collision having duplicate thumbnails names / IDs or having to invent tons of different names.
I have a selection of social media icons which I wish to position at the bottom of my website centrally, inside a box div.
My code looks right to me but I'm sure I'm missing something.
Any help would be greatly appreciated.
HTML
<div id="footerBar">
<div id="icons">
<a href="https://youtube.com/MYPROFILE"><img class="socialicon" <img src="images/icons/youtube_dark.png" onmouseover="this.src='images/icons/youtube_red.png'" onmouseout="this.src='images/icons/youtube_dark.png'" alt="Subscribe on YouTube" width="32" height="32">
<a href="https://twitter.com/MYPROFILE"><img class="socialicon" <img src="images/icons/twitter_dark.png" onmouseover="this.src='images/icons/twitter_blue.png'" onmouseout="this.src='images/icons/twitter_dark.png'" alt="Follow on Twitter" width="32" height="32">
<a href="https://instagram.com/MYPROFILE"><img class="socialicon" <img src="images/icons/instagram_dark.png" onmouseover="this.src='images/icons/instagram_beige.png'" onmouseout="this.src='images/icons/instagram_dark.png'" alt="Follow on Instagram" width="32" height="32">
<a href="https://behance.com/MYPROFILE"><img class="socialicon" <img src="images/icons/behance_dark.png" onmouseover="this.src='images/icons/behance_blue.png'" onmouseout="this.src='images/icons/behance_dark.png'" alt="Follow on Behance" width="32" height="32">
<a href="https://uk.linkedin.com/in/MYPROFILE/"><img class="socialicon" <img src="images/icons/linkedin_dark.png" onmouseover="this.src='images/icons/linkedin_blue.png'" onmouseout="this.src='images/icons/linkedin_dark.png'" alt="Connect on LinkedIn" width="32" height="32">
<a href="https://vimeo.com/MYPROFILE"><img class="socialicon" <img src="images/icons/vimeo_dark.png" onmouseover="this.src='images/icons/vimeo_blue.png'" onmouseout="this.src='images/icons/vimeo_dark.png'" alt="Subscribe on Vimeo" width="32" height="32">
<a href="https://dribbble.com/MYPROFILE"><img class="socialicon" <img src="images/icons/dribbble_dark.png" onmouseover="this.src='images/icons/dribbble_pink.png'" onmouseout="this.src='images/icons/dribbble_dark.png'" alt="Follow on Dribbble" width="32" height="32">
</div>
</div>
CSS
#footerBar
{
padding:5px;
width:75%;
height:50px;
margin:10px auto;
border:1px solid #1e1e1e;
background-color: #f3f3f3;
}
.socialicon
{
float:left;
width:32px;
height:32px;
margin:auto;
}
.socialicon a
{
float:left;
width:32px;
height:32px;
margin:auto;
vertical-align: middle;
}
http://jsfiddle.net/7U4aE/4/
By adding #icons { text-align: center; } and a { display: inline-block; }, it aligns all of the child elements to the center of the div. You can then add spacing between each icon if necessary.
Also, I fixed the <img> tags, as your implementation was a bit broken/messy. You don't need to nest the <img <img ...> as you did, just have one like this:
<img class="socialicon" src="..." onmouseover="..." onmouseout="..." alt="Subscribe on YouTube" width="32" height="32" />
You also didn't close your <a> tags, which I added.
I would try removing float: left; from .socialicon .
Also, fix the image tags
<img class="socialicon" <img src=
to
<img class="socialicon" src= ...
and end the tag
<img class="..." src="..." />
Brynn
Try remove float: left from .socialicon and use text-align: center to #footerbar
I want to make a navigation bar, with each item having its own image with the name of the item written on top of that. So there should be a few images in a row, and each one has some text written on it. This is the row of images I got:
<div class="navigation" align="center">
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
</div>
<div class="navigation" align="center">
<ul><li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div><li>
</ul>
</div>
<style>
li
{
display:inline-block;
}
</style>
Give each a href a class ie .home_bg etc.
Then in css add a
.home_bg {
background-image: url(/example/example.png)
}
do this for each image if they are different. Then in the html remove img tags