HTMLHelp Forums > Linking image navigation bar

Full Version: Linking image navigation bar

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

jami0821

Apr 30 2009, 02:40 AM

I'm adding language options in the navigation of a landing page I'm currently working on.

All I need to do is link up the images of the flags to a translation of the landing page. It seems simple enough, right? But when I add the link to the image, all of the images become misaligned.

Here's the code I'm working with without adding <h ref=".....">:

CODE

#navigation {padding:10px 0; }

CODE

<div id="navigation">
            <ul>
                <img id="flag_img_en" border="0" Hspace="5" Vspace="0" style="float:right" title="Hebrew" alt="Israeli flag" src="http://patriotmissive.com/images/flag_israel.png"/>

                <img id="flag_img_en" border="0" Hspace="5" Vspace="0" style="float:right" title="Spanish" alt="Mexican flag" src="http://patriotmissive.com/images/flag_mexico.png"/>

                <img id="flag_img_en" border="0" Hspace="5" Vspace="0" style="float:right" title="English" alt="American flag" src="http://patriotmissive.com/images/flag_us.png"/>

                <li><a href="greencardlottery.html">HOME</a></li>
                <li><a href="about.html">ABOUT US</a></li>
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
        </div>

My question is where do I add the linking code (<h ref=".....">) in order for the images to stay put?

http://patriotmissive.com/greencardlottery.html

Thanks in advance!

Frederiek

Apr 30 2009, 03:04 AM

See the FAQ entry How do I link an image to something?

jami0821

Apr 30 2009, 03:22 AM

QUOTE(Frederiek @ Apr 30 2009, 03:04 AM)

See the FAQ entry How do I link an image to something?

Thanks for the super fast reply!!

I added the <h ref="....."> code according to the help file you provided but the images are misaligned. I simply can't understand why they're displaying in such a way.

Reference this page and see the country flags in the navigation bar:

http://patriotmissive.com/greencardlottery.html

jami0821

Apr 30 2009, 04:54 AM

Ok, duh. Silly me.

Easy fix was to create a new <div> for it as follows:

CODE

#languages {float:right;margin-top:4px;padding-right:7px;}

Completed as:

CODE

<div id="languages">

                <a href="hebrewlink.html"><img src="http://xxx.com/images/flag_israel.png" align="right" border="0" Hspace="5" Vspace="0"></a>

                <a href="spanishlink.html"> <img src="http://xxx.com/images/flag_mexico.png" align="right" border="0" Hspace="5" Vspace="0"></a>

                <a href="greencardlottery.html"> <img src="http://xxx.com/images/flag_us.png" align="right" border="0" Hspace="5" Vspace="0"></a>
                </div>
<div id="navigation">
                <ul>
                <li><a href="greencardlottery.html">HOME</a></li>
                <li><a href="about.html">ABOUT US</a></li>
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
        </div>

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.