How do I absolutely position this hovered Div?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How do I absolutely position this hovered Div?

Post by simonmlewis »

[text].menuhoverbox {
display: none;
margin: 1px;
background-color: #000000;
padding: 2px;
font-size: 11.2px;
position: relational;
top: 5;
color: #ffffff;
}

.menuhoverboxlink:hover + div {
display: block;
}[/text]

"menuhoverbox" shows up when you hover over the text.
Right now, it just appear below the text you hover over.

How do you control it, so, for example, it would appear to the right of the <a> link, without pushing anything over?

Code: Select all

<a class='menuhoverboxlink' href='/diary/$addday/$addmth/$addyr/$row->id'>Date</a>
<div class='menuhoverbox'>Sessions active on this date $addday/$addmth/$addyr</div>
It pushes text down at the moment, so if you have one link below the other, it all jumps about - I'd like the hovered box to just appear to the right (like an Alt tag).
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: How do I absolutely position this hovered Div?

Post by Christopher »

First, it's "position: relative;". Second, for positioning, you can either float the block element inside a containing block, or declare the containing block "position: relative;" and then use "position: absolute;" on the blocks inside to position them.
(#10850)
Post Reply