ok so I am building a hover menu page located here.
<!-- m --><a class="postlink" href="http://www.vmspower.com/burns/index.php">http://www.vmspower.com/burns/index.php</a><!-- m -->
now notice the hover menu moves over as you prgress across the page. I am trying to make 1 box where it will show up and not have it jump around. Here is what i have with css and what I believe it does.
div#links
{
position: relative; /*keeps the menu located where i put it in the page from the spot it is posted */
top: 0px;
left: 0;
font: 12px Verdana, sans-serif;
}
div#links a
{
text-align: center;
font: bold 1em sans-serif;
height: 30px; /* make the link 30px high */
padding: 0px;
border-width: 10; /* should add a border around the link but it does not. Any ideas why? */
border-color: #000;
text-decoration: none;
color: #000;
}
div#links a:hover
{
background: #ffffff;
}
div#links a span
{
display: none; /* hides teh hover item untill hovered apon */
}
div#links a:hover span
{
display: block; /* needed or menu does not work */
position: absolute; /* should place hover menu at position from top left hand corner, but does not work. I believe this is my issue but am not sure how to go about making it actully work absolute. Any ideas????? */
top: 100px;
width: 300px;
color: #AAA;
background: black;
font: 10px Verdana, sans-serif;
text-align: center;
}
<td class="tdhover">
<div id="links" width="20%">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"burns304round.htm">304 <span>The materal <span></a>
</div>
</td>
The 2 main questions are listed above and any help would be graetly appreciated.
tiabumpI don't think you can do what you want without Javascript involved.maybe if u change position to absolute it will helpPure CSS Popups (<!-- m --><a class="postlink" href="http://meyerweb.com/eric/css/edge/popups/demo.html">http://meyerweb.com/eric/css/edge/popups/demo.html</a><!-- m -->) may interest you.Pure CSS Popups (<!-- m --><a class="postlink" href="http://meyerweb.com/eric/css/edge/popups/demo.html">http://meyerweb.com/eric/css/edge/popups/demo.html</a><!-- m -->) may interest you.
this was actually the page I was using. I just used his page source instead of the howto document.
now the
div#links
{
position: relative;
top: 0px;
left: 0;
font: 12px Verdana, sans-serif;
font-weight: 800;
}
has to stay relitive because if I do not the links move to the top left side and I can not do that because when I include my template in the page it has to keep its positioning if the top and sides move around. Also I am doing this because if the template changes I do not want to update lots of other pages to get the layout back to looking good.
I did notice however that if i spell "relative", "relitive" it move the hover links to the top of the links instead of the bottom. wierd ha?
I was really thinking that either of these styles should have made the changes I was looking for.
div#links a span
{
display: none;
position: absolute;
top: 0;
left: 0;
}
div#links a:hover span
{
display: block;
position: absolute;
top: 100px;
width: 300px;
color: #AAA;
background: black;
font: 10px Verdana, sans-serif;
text-align: left;
}
both of which are absolute and both of which do not work.
any ideas???ok fixed the problem but was very unhappy with what i did.
i removed the positioning, left and top styles from the div#links tag. and it fixed itself immediatly. I guess that the style were taking the most greatest parent object and obaying what it was saying and not following what the styly object related to its tag. Well there goes the whole cascading thing!
Oh well its was a simple fix and should not affect how the rest of the page will load.
thanks for your helpYou need to put a good doctype on it to take browsers out of quirks mode.You might need to add this to get the border to appear.
div#links a
{
text-align: center;
font: bold 1em sans-serif;
height: 30px; /* make the link 30px high */
padding: 0px;
border-width: 10; /* should add a border around the link but it does not. Any ideas why? */
border-color: #000;
border-style: solid;
text-decoration: none;
color: #000;
}div#links a
{
text-align: center;
font: bold 1em sans-serif;
height: 30px; /* make the link 30px high */
padding: 0px;
border-width: 10; /* should add a border around the link but it does not. Any ideas why? */
border-color: #000;
border-style: solid;
text-decoration: none;
color: #000;
}[/QUOTE]
you have not specified a size for your border. i.e 10px;You are also going to need to define some settings... example:
div#links a:hover span
{
display: block;
position: absolute;
font-size: 14pt;
font-weight: 500;
top: 430;
left: 188;
width: 590;
height: 115px;
color: #CC0033;
background: #00FFFF;
text-align: center;
}
Is that pixels? points? em? ex? inches? feet? (you get my meaning). font-weight:500 is okay as-is I believe, although I do not know what it means for sure (the weight value I mean, have used 500 or 800 before).
I notice that certain on-hover links cause the contents to spill-over onto the page. Wouldn't an overflow:auto; or something work here? There should be some way to keep that hover-content inside that display box and not overflow out onto the page.
re:
border-width: 10; /* should add a border around the link but it does not. Any ideas why? */
Yes. Try writing it correctly
"border: 10px solid black;" makes a 10-pixel thick, solid black border around the link or whatever...wow, I dont even remember posting this. You guys must be digging through the archivesthat may be my fault i was searching the forum the other day and come across this thread and replied... forgot to check the posting date
<!-- m --><a class="postlink" href="http://www.vmspower.com/burns/index.php">http://www.vmspower.com/burns/index.php</a><!-- m -->
now notice the hover menu moves over as you prgress across the page. I am trying to make 1 box where it will show up and not have it jump around. Here is what i have with css and what I believe it does.
div#links
{
position: relative; /*keeps the menu located where i put it in the page from the spot it is posted */
top: 0px;
left: 0;
font: 12px Verdana, sans-serif;
}
div#links a
{
text-align: center;
font: bold 1em sans-serif;
height: 30px; /* make the link 30px high */
padding: 0px;
border-width: 10; /* should add a border around the link but it does not. Any ideas why? */
border-color: #000;
text-decoration: none;
color: #000;
}
div#links a:hover
{
background: #ffffff;
}
div#links a span
{
display: none; /* hides teh hover item untill hovered apon */
}
div#links a:hover span
{
display: block; /* needed or menu does not work */
position: absolute; /* should place hover menu at position from top left hand corner, but does not work. I believe this is my issue but am not sure how to go about making it actully work absolute. Any ideas????? */
top: 100px;
width: 300px;
color: #AAA;
background: black;
font: 10px Verdana, sans-serif;
text-align: center;
}
<td class="tdhover">
<div id="links" width="20%">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"burns304round.htm">304 <span>The materal <span></a>
</div>
</td>
The 2 main questions are listed above and any help would be graetly appreciated.
tiabumpI don't think you can do what you want without Javascript involved.maybe if u change position to absolute it will helpPure CSS Popups (<!-- m --><a class="postlink" href="http://meyerweb.com/eric/css/edge/popups/demo.html">http://meyerweb.com/eric/css/edge/popups/demo.html</a><!-- m -->) may interest you.Pure CSS Popups (<!-- m --><a class="postlink" href="http://meyerweb.com/eric/css/edge/popups/demo.html">http://meyerweb.com/eric/css/edge/popups/demo.html</a><!-- m -->) may interest you.
this was actually the page I was using. I just used his page source instead of the howto document.
now the
div#links
{
position: relative;
top: 0px;
left: 0;
font: 12px Verdana, sans-serif;
font-weight: 800;
}
has to stay relitive because if I do not the links move to the top left side and I can not do that because when I include my template in the page it has to keep its positioning if the top and sides move around. Also I am doing this because if the template changes I do not want to update lots of other pages to get the layout back to looking good.
I did notice however that if i spell "relative", "relitive" it move the hover links to the top of the links instead of the bottom. wierd ha?
I was really thinking that either of these styles should have made the changes I was looking for.
div#links a span
{
display: none;
position: absolute;
top: 0;
left: 0;
}
div#links a:hover span
{
display: block;
position: absolute;
top: 100px;
width: 300px;
color: #AAA;
background: black;
font: 10px Verdana, sans-serif;
text-align: left;
}
both of which are absolute and both of which do not work.
any ideas???ok fixed the problem but was very unhappy with what i did.
i removed the positioning, left and top styles from the div#links tag. and it fixed itself immediatly. I guess that the style were taking the most greatest parent object and obaying what it was saying and not following what the styly object related to its tag. Well there goes the whole cascading thing!
Oh well its was a simple fix and should not affect how the rest of the page will load.
thanks for your helpYou need to put a good doctype on it to take browsers out of quirks mode.You might need to add this to get the border to appear.
div#links a
{
text-align: center;
font: bold 1em sans-serif;
height: 30px; /* make the link 30px high */
padding: 0px;
border-width: 10; /* should add a border around the link but it does not. Any ideas why? */
border-color: #000;
border-style: solid;
text-decoration: none;
color: #000;
}div#links a
{
text-align: center;
font: bold 1em sans-serif;
height: 30px; /* make the link 30px high */
padding: 0px;
border-width: 10; /* should add a border around the link but it does not. Any ideas why? */
border-color: #000;
border-style: solid;
text-decoration: none;
color: #000;
}[/QUOTE]
you have not specified a size for your border. i.e 10px;You are also going to need to define some settings... example:
div#links a:hover span
{
display: block;
position: absolute;
font-size: 14pt;
font-weight: 500;
top: 430;
left: 188;
width: 590;
height: 115px;
color: #CC0033;
background: #00FFFF;
text-align: center;
}
Is that pixels? points? em? ex? inches? feet? (you get my meaning). font-weight:500 is okay as-is I believe, although I do not know what it means for sure (the weight value I mean, have used 500 or 800 before).
I notice that certain on-hover links cause the contents to spill-over onto the page. Wouldn't an overflow:auto; or something work here? There should be some way to keep that hover-content inside that display box and not overflow out onto the page.
re:
border-width: 10; /* should add a border around the link but it does not. Any ideas why? */
Yes. Try writing it correctly
"border: 10px solid black;" makes a 10-pixel thick, solid black border around the link or whatever...wow, I dont even remember posting this. You guys must be digging through the archives
that may be my fault i was searching the forum the other day and come across this thread and replied... forgot to check the posting date