We help IT Professionals succeed at work.

Align hyperlinks menu on the banner

YZlat
YZlat asked
on
On my ASP.NET master page I have a banner and I want to create a menu consisting of 3-4 hyperlinks aligned at the bottom of the banner which is am image. What's the best way to do that?
Comment
Watch Question

Top Expert 2013

Commented:
what does the current HTML look like, and how is the page supposed to look when you are finish adding this menu?
CERTIFIED EXPERT

Author

Commented:
sample layout
The red is a banner image. The hyperlinks are text1 and text2 on it. Also the black rectangle is an image as well and yellow rectangles on it are the hyperlinks. This content will be common on all the pages, so I want to make it a master page. I have everything except hyperlinks, i can't figure out the best way to place them on top of the images. Could you point me in the right direction on how to do something like this?
Top Expert 2011

Commented:
use an image map for placing links on top of text that is part of an image.
Use absolute positioning to position editable text to a fixed position on an image.

Part 1 - the image map
To locate the area of an image that you want "clickable", open the image in your favorite image editing tool (since this is a BMP, I opened it in MS Paint).  Draw a box around the text you want to be clickable.  In MS Paint, the coordinates of your box show in the bottom-right corner of MS Paint.  For my test image, the top-left coordinate for "Test1" is 300,90 (300 over, 90 down) and the bottom-left corner is 375,115 (375 over, 115 down).  Similar for "Test2".

Part 2 - absolute positioning
In CSS, you specify "position: absolute" and then assign the coordinates for each div which contains each link.  I wasn't sure if the yellow area was part of the image or if the yellow box was just there for "placement indicator", so rather than duplicate how to do an image map, I demonstrate how to use absolute positioning to place the 5 links at a specific location.

Sample HTML and both images attached.
header.html
header.JPG
navigation.JPG
CERTIFIED EXPERT

Author

Commented:
Yellow box is a placement indicator
Top Expert 2011

Commented:
Cool - download the 3 files to the same folder and launch "header.html" in a browser.  Let me know if there are any aspects of the layout that don't meet what you were looking for or if you have questions on how to implement it.

I'll be AFK for a couple hours but if no one else chimes in, I'll get back to you as soon as I can.
Top Expert 2011
Commented:
If the mock up you provided is all one big image where the hot-spots should align themselves over specific content in the image, then use the image map coding for the entire thing.

The absolute positioning is only for if you are placing text or image based hyperlinks on top of the background image (e.g., you want the text "About Us" or you have an image for "About Us" that you want positioned on top of the black background).

Explore More ContentExplore courses, solutions, and other research materials related to this topic.