Page 1 of 1

How do I absolutely position this hovered Div?

Posted: Mon Feb 25, 2013 6:19 am
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).

Re: How do I absolutely position this hovered Div?

Posted: Mon Feb 25, 2013 6:40 pm
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.