Sun, 2004-09-12 14:58
My first post so please be patient.
I have designed a simple navigation menu using <ul> and pop-up texts enclosed in <span> tags and additionally with <div>.
The problem is that for each menu item, the pop-up texts seem to position themselves relative and not absolute. I have placed a link for the <div> in the style sectionand used the position attribute and set as absolute. But this does not work or my understanding of it is wrong.
I have seen many discussions and visited many sites on this but I have yet not found an answer.
What I want to achieve is to place all pop-up text in the same position.
Sun, 2004-09-12 18:34
#1
<DIV> positioning problem.
Hi Rubensds I think I can picture what you are trying to acheive but for better clarity could you upload and link to what you have got so far so that we can see what is going wrong with it?
Mon, 2004-09-13 07:20
#2
<DIV> positioning problem.
Hi guydavies,
This is the code...:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Navigation</title>
<style type="text/css" media="screen">
html, body {height: 100%;width:100%;overflow:hidden;}
body {background:#000033;margin:5px;padding:0px;}
ul.makeMenu, ul.makeMenu ul {width:167px;border:0px solid #003366;background-color:#336699;padding-left:0px;cursor:default;margin-left:0px;text-align:center;}
ul.makeMenu li {list-style-type:none;margin:-1px;position:relative;color:#99ccff;font-family:arial;font-size:10pt;border:3px solid #000033;z-index-1;}
ul.makeMenu li {behavior:url("IEmen.htc");}
div#navm {position:absolute;}
div#navm a span {display:none;}
div#navm a:link, a:visited, a:active {text-decoration:none;color:#99ccff}
div#navm a:hover {text-decoration:none;color:#ffffff;border=0;}
div#navm a:hover span {position:absolute;top:260px;left:-62px;width:125px;display:block;padding:1px;margin:1px;color:#ffffff;font-size:9pt;font-family:arial;text-align:center;text-decoration:none;z-index:100;}
</style>
</head>
<body>
<div id="navm">
<ul class="makeMenu">
<li><a href=".\home.htm" target="contentframe">Home<span>Back to Home</span></a></li>
<li><a href=".\kianr\kianr.htm" target="contentframe">Kian Richard<span>Kian Richard da Silva<br/>Born July 11th, 2001<br/>The Hague, The Netherlands</span></a></li>
<li><a href=#>Ethan Michael<span>Ethan Michael da Silva<br/>Born March 10th, 2004<br/>The Hague, The Netherlands</span></a></li>
<li><a href=".\Voorburg\voorburg.htm" target="contentframe">Voorburg<span>Our Home in Voorburg</span></a></li>
<li><a href=#>Photo Album:Us<span>Pictures of Britta, the kids and I</span></a></li>
<li><a href=#>Photo Album:Family<span>Pictures of family relatives</span></a></li>
<li><a href=#>Photo Album:Friends<span>Pictures of friends...well...at least we consider them friends</span></a></li>
<li><a href=".\nav.htm" target="navframe">Email Contact<span>[email protected]<br/>[email protected]</span></a></li>
<li><a href=".\nav.htm" target="navframe">Address<span>Menagerie 11<br/>2273 BS<br/>Voorburg<br/>The Netherlands<br/>T: +31(0)70 3000440</span></a></li>
<li><a href=".\guestb\guestb.htm" target="contentframe">Guest Book<span>Please visit the guest book page!</span></a></li>
</ul>
</div>
</body>
</html>
I hope it is clear. I just pasted the code into the window. Again, I want to postition all text enclosed in the <span> tags to be in the same horizontal and vertical position - a few px below the last item of the navigation menu. Instead they are placed 'relative' to each menu item.
Hope this is clear.
Thank you
Tue, 2004-09-14 02:03
#3
<DIV> positioning problem.
Does this help?
Tue, 2004-09-14 06:39
#4
<DIV> positioning problem.
Hi Wolfcry911
Not really. But it is thanks to Eric's website that I managed to produce the nav bar for my - to come - personal website. I saved the code from one of the web pages from his site and noticed he did not use unordered lists <ul> for the nav bar.
I am begining to think that I have to implement a 'hack' to cater for IE's incompatibilities?!
I was playing around with the <div> top and width attributes and noticed that if both are 0px, the span text is offset from the middle and a bit to the top for each menu item, strange.
Why is it not taking the body of the nav page for its positioning?
Need help...begining toloose sleep over this. :roll:
Tue, 2004-09-14 13:34
#5
<DIV> positioning problem.
Hello All,
I have managed to solve the problem by simply removing the 'position:relative;' attribute from the ul.makeMenu li style declaration.
I guess the normal HTML rules for text flow then applies?!
But it is still puzzling because my interpretation of a position:absolute; in a <div> means that it is absolute to the parent. I tried declaring this (position:absolute;) in the body within the <style> and this made no change.
If anyone can explain, I will be very grateful.
Thank you 
Tue, 2004-09-14 13:37
#6
<DIV> positioning problem.
Btw, how does this post get closed? 
Tue, 2004-09-14 23:19
#7
<DIV> positioning problem.
Hi Rubensds,
It just dies a slow death once no one posts to it anymore.
Have you sorted out the problem?
The parent needs to be positioned absolute or relative.
Hope that helps