I'm making an image map by adapting some code I've found. It involves setting the width and height of anchor. In the code I'm adapting it uses absolute positions for the anchors: CSS: #book { background-image: url(test.jpg); height: 595px; width: 750px; } #menu a { position: absolute; text-decoration: none; } #menu a i { visibility: hidden; } a#one { width: 61px; height: 61px; left: 70px; } a#two { width: 52px; height: 104px; left: 165px; } Code (markup): HTML: <div id="book"> <div id="menu"> <a href="#" id="one"><i>one</i></a> <a href="#" id="two"><i>two</i></a> </div> </div> Code (markup): But I want to position my links with relative positioning, but when I do so I can no longer set the width and height values for some reason. I've tried putting display:block; onto the anchors but then I lose all the flexibility that I had with my positioning..
My first suggestion is to take out your <i> tags. Instead, use the CSS declaration font-style: italic; I'm not sure why the visibility: hidden is on the <i> tag, but that can probably be moved right to the a. If not, use a span tag instead of the <i> tag, since it's deprecated. Now I would suggest taking away any positoning you have. If you would like to use relative then go ahead, but I wouldn't think it's needed. If you place display: block; you should be able to use the height and width properties. If you do that, you do not lose flexibility with positioning because you can float them wherever you want. you can use either float: left or float: right, and then you can give a clearfix class to the #menu div. If you're not sure what I mean by clearfix, just Google clearfix. The first 2-3 sites should be more than enough to help. I hope this helps.
Second, you should be using an unordered list since what you have is a list of links. Third, add display: block; to the links so the dimensions you're giving them will take.
Uhm no, no it's not. As to the problem at hand, absolute OR relative positioning should not be needed for a simple menu... looking at the code you have I'm fairly certain that WHATEVER it is you are trying to do - you are doing it all wrong... Now we just need to know what it is you are actually trying to do here.
Ah, but it's not a menu-menu. It's a (fake) image map. Using li's. There's another thread here from the guy in Portugal who just did this. He ended setting position: absolute on the li's instead of the a's, but it doesn't really matter unless Haslayout is pitching a fit. Setting display: block on the a's will allow you to set height and width. They should sit in a ul (since it is a sort of menu) which is positioned relatively so that your coordinates are relative to the menu block itself. <ul id="map"> <li><a id="a1" href="a1">Thing one</a></li> <li><a id="a2" href="a2">Thing two</a></li> </ul> Code (markup): I put the hrefs = the id's cause I dunno if they are supposed to go anywhere or just do some crazy stuff on hover. Put the map's background on the ul. The ul is already a block, so you can just set the height and width of ul the same as the map. Next, you would either set the li's or the a's to display: block, set heights and widths, and use coordinates to position them over the map. If the map is supposed to glow or do something funky when hovered over, then you'll need another image, which would be carried by the a's, set off to the side where nobody sees it, and then brought into the correct position by setting background-position to the correct coords (this is I think only able to be done via trial and error-- or at least that's how I do it). If you need text to appear on hover, you add a span around the text (but inside the <a>'s) which is also set off to the side and brought into position on hover using absolute positioning. You could check out this guy's code: http://forums.digitalpoint.com/showthread.php?t=712849 or you could take a look at Mike's fake pop-map: http://mikecherim.com/experiments/css_map_pop.php to give you ideas. You're trying to set height and width on something that's normally inline (the a). Position: absolute changes that, and there's no reason to fear it. Trying to set them relatively isn't going to work on a map, unless these links are going down one side or are going across the top.
Thanks everyone for their help. Specific thanks to Stomme poes, whose advice helped me more than I could've hoped! It's now working and I'll update y'all with a link as soon as it's complete.
I've got another little problem now, which I can't seem to get my head around. Everything works fine in Firefox, and you can see how it should work here: mstrgaming.com/alex/ But when you load it in IE (I'm using IE6, haven't tested with IE7 yet) some/most of the thumbnails aren't clickable, or atleast are only clickable on their 1px wide border, which seems odd. It's the fact it's only some of them that confuses me, as if something invisible is going over the top of the others. Any input would be helpful, if I don't solve it here I'll start a new thread. Also, the CSS is kinda untidy (the thumbnail bit) as there's a lot of duplicate rules, but I'll sort that out at the end .
Server Not Found. However, re-read the first thread I linked. IE is funny about setting "layout" on stuff, and nothing works right until IE is satisfied about it. Also, clean up the duplicate rules and tidy the code first. Then validate it. There's no way you're going to find an error in a pile of spagghetti.
Hardly a pile of spaghetti, but oki doki! p.s. I started a new thread before you replied here .. *reading links* Edit - Fixed by adding position: absolute; to my #map li's .. Cheers Stomme.