Link to home
Start Free TrialLog in
Avatar of YZlat
YZlatFlag for United States of America

asked on

Align hyperlinks menu on the banner

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?
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

what does the current HTML look like, and how is the page supposed to look when you are finish adding this menu?
Avatar of YZlat

ASKER

User generated image
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?
Avatar of nap0leon
nap0leon

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
Avatar of YZlat

ASKER

Yellow box is a placement indicator
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.
ASKER CERTIFIED SOLUTION
Avatar of nap0leon
nap0leon

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial