waaler
-
Posts
5 -
Joined
-
Last visited
waaler's Achievements
Newbie (1/7)
0
Reputation
-
Hello,My problem is that I want to have a list that contains links, but I also want to restrict its width to 230px. When the text and link is wider than this, then the link is split onto the next line, but the next item in the list does not move down. So the link from above it is over lapping it.You can see the problem here: www.in-the-woods.net/archives.htm The code is:CSS div.archivelist {position: absolute; top: 490px; left: 520px; width: 230px}ul.archivechoice {font-family:serif; line-height: 1.4} HTML <div class="archivelist"><ul class="archivechoice"><li>Dagmar Baumunk<a href="archives/pdfs/sex_and_cinema.pdf"> ###### and Cinema</a></li><li>Jane Masumy <a href="archives/pdfs/curiosities_of_german.pdf"> The Curiosities of the German Language </a></li><li>Lone Bodot<a href="archives/pdfs/whitehouse.pdf"> Noise? Yes. Music? No.</a></li><li>Mark Simmons<a href="archives/pdfs/too_stupid_to_say_no.pdf"> Too Stupid to Say No</a></li><li>Dagmar Baumunk <a href="archives/pdfs/how_films_save_your_life.pdf"> How Films Save Your Life</a></li><li>Stroppychik<a href="archives/pdfs/pregnanncy.pdf"> A Case of Pregism?</a></li><li>Mark Simmons<a href="archives/pdfs/too_stupid_to_enjoy_christmas.pdf"> Too Stupid to Enjoy Christmas</a></li><li>Dagmar Baumunk<a href="archives/pdfs/last_tango_in_paris.pdf"> Last Tango in Paris - No Middle of the Road</a></li></ul> <div class="archivetail"> <img class="tail" src="images/archivestail.jpg"/> </div></div> Is it simply not possible to do this, or am I doing something wrong?I know I could lay it out using the p tag with breaks, or something else, but i want to use a list.If anyone has an idea, please let me know.
-
Thanks, that's quite useful. It's given me some ideas, although I was hoping for a simpler explanation as to why 'my' method doesn't work.
-
The names of the sites aren't really important. The idea of invisible links over an image is to make certain parts of the image clickable. You can of couse use an image map to do this, but if it's possible with CSS then it's much quicker to render any future changes to the layout. i.e. not having to go through every page and changing the coordinates on the image map.
-
Thanks for getting back so quickly. Ok, could well be, though it is still listed in the css reference section on this site, and I don't think it's the problem. Tha i didn't know (like so much) but i still want to solve this problem, even if only to know how to do it. The idea is that the invisible links are placed of the image with much nicer looking links beneath them, so the people will see the nice looking links, click on them and hey presto. The invisible links serve the function of making certain parts of the image clickable. That I'll get to later.
-
Hello, I have an image over which I want to place invisible links in order to create a menu. I've read on other pages that this is possible, but when I do it my browser IE7 doesn't recognise that something is there. It seems to me that the link is there but because it is invisible IE7 doesn't recognise it. Ok, that's logical, but why do two other websites cite this as a way of making more interesting menus without using image maps. Here is my code, but it seems to me to be impossible, but if that's so, why have I found two pages saying it is. Please help!HTML <body><a href="../editorials.htm" class="editorials"><em>editorials</em></a><a href="../letters.htm" class="letters"><em>letters</em></a><a href="../portraits.htm" class="portraits"><em>portraits from the woods</em></a><a href="../subscribe.htm" class="subscribe"><em>subscribe</em></a><a href="../siteinfo.htm" class="siteinfo"><em>Site information</em></a><a href="../archive.htm" class="archive"><em>archive</em></a> CSS em {visibility: hidden}a.editorials {position: absolute; top: 57px; left: 55px; font-size: 25px}a.letters {position: absolute; top: 12px; left: 195px; font-size: 25px}a.portraits {position: absolute; top: 100px; left: 170px; font-size: 24px}a.subscribe {position: absolute; top: 20px; left: 805px; font-size: 24px}a.siteinfo {position: absolute; top: 60px; left: 755px; font-size: 24px}a.archive {position: absolute; top: 100px; left: 785px; font-size: 24px}