View Single Post

Old 11-06-2008
United States Kaervek
i'm on your wifi.
Join Date: Feb 2003
Posts: 768
 Kaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of win

Well I managed to get my links to line up. The author of the article I followed couldn't have been more correct when he stated:

When applied to the XHTML of our document, the menu links will now float independently above our background image. If we position them above areas of the image that look like links, we’ll be all set. Placing your links correctly will usually take either careful calculation or a bit of trial and error.
The end-results, of course, looks just like it should, but now with the links being click-able!

Trial and error, indeed. Just take a look at the formatting that I had to do in the HTML to just get these links to match the width of the visible links:

<div id="left_content">
		<div id="menu">
			<a href="index.html" id="home"><b>H O M E</b></a><br />
			<a href="blog.html" id="blog"><b>B L O G</b></a><br />
			<a href="portfolio.html" id="portfolio"><b>P O R T F O L I O</b></a><br />
			<a href="services.html" id="services"><b>S E RV IC E S</b></a><br />
			<a href="contact.html" id="contact"><b>C O N T A C T</b></a><br />
			<a href="resume.html" id="resume"><b>R E S U M E</b></a><br />
			<a href="links.html" id="links"><b>L I N K S</b></a><br />
All those spaces! It sure is messy, but it definitely got the job done. While a part of me thinks there should be an easier way (not necessarily the slice-each-menu-image route) to get the hidden links to match the visible-link widths. Oh well, like he said "trial and error," so I feel accomplished

Getting each link to line up vertically in the proper fashion was yet another chore. Here's the code that ended up working - pay particular attention to the "top: xxx" figures:

#left_content {
	float: left;
	height: 408px;
	width: 161px;
	background: url('images/left_content.jpg')
		#menu a {
		position: relative;
		height: 359px;
		width: 122px;
		top: 149px;
		left: 30px;
		text-decoration: none;
		#menu a b { visibility: ; }
		a#home { left: 64px; width: 70px; top:24px; }
		a#blog { left: 64px; width: 62px; top: 66px; }
		a#portfolio { left: 30px; width: 125px; top: 107px; }
		a#services { left: 40px; width: 112px; top: 147px; }
		a#contact { left: 40px; width: 107px; top: 186px; }
		a#resume { left: 47px; width: 96px; top: 226px; }
		a#links { left: 60px; width: 71px; top: 264px; }
While I have no issues with the code, the problem I have is how difficult it was to determine precisely which value each "top: " function required. I tried using the Ruler tool in Photoshop to measure the distance (in pixels) between each visible link (the white text on the layout), but these numbers absolutely didn't coordinate with the "top: " values I ended up using. I need to find out precisely what "top" is in reference to, so I don't have to alt+tab between documents to increase / decrease numbers over and over until they finally fit.

Blah blah, I'm tired and my fingers are burning from all this. Definitely happy with the accomplishments today, even if it took most of the day to do - it shouldn't take me quite this long to achieve similar results in the future. Practice, practice
Kaervek has 768 Posts

404, savior not found.

Kaervek is offline

pm.gif  Send a message via AIM to Kaervek Send a message via MSN to Kaervek  
Reply With Quote