postion css

[hwoarang69]

iam trying to do this

DIV
   FORM
      DIV
         LABEL INPUT HINT

so if i put my mouse over INPUT than a hint should pop up.

<div id = "right_login">
    <form  id='login' action='login.php' method='POST'>
         <div class="outer_hint">
               <label>Username:</label> 
                <input type="text" name="username" id="login_username" class="field" value="" />
                 <!-- HINT --><p class="hint">6 to 20 characters(letters and numbers only)</p>
           </div>    
    </form>
</div>

so i used css on this div. first i hide the <P> hint.
than i set hover over. so hint should pop up.

/**** hint *****/
.hint
{
    display:none;
}
.outer_hint:hover .hint
{
    display:inline;
    position:absolute;
    display:block;
    margin:-45px 0 0 335px;   /* postion of hint*/
    font-size:15px;
    color:white;
    padding:7px 10px;
    background:rgba(0,0,0,0.6);
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
}

this works find. hind does pop up when i hover over input or label.
but the problem is in postion. i can never seem to get the right postion!
so here is what its doing

|LABEL| |INPUT|
|HINT|

iam not sure why hint is displaying at bottom.

[JorgeM]

The input element is a block element. It wont position itself next to the input element. Try a span element instead. Remove lines 9 and 10 in your CSS.

[JorgeM]

<style>
.hint
{
    display:none;
}
.outer_hint:hover .hint
{
    display:inline;
    position:absolute;
    display:inline;
    font-size:15px;
    color:white;
    padding:7px 10px;
    background:rgba(0,0,0,0.6);
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
}
</style>

<div id = "right_login">
    <form  id='login' action='login.php' method='POST'>
         <div class="outer_hint">
               <label>Username:</label> 
                <input name="username" id="login_username" class="field" />
                 <span class="hint">6 to 20 characters(letters and numbers only)<span>
           </div>    
    </form>
</div>

[hwoarang69]

i made the changes and now its display:

|label|input|
               |Hint|

i want to move just a lil up and left.

[<M/>]

Then apply css to move the top by however many pixels and the left by however many pixels :)

[JorgeM]

Ok, so if you want to fine-tune the position of the hint, one way is to make some additional changes to your styles.

For example, we can use the position property to get the hint to exactly where we want it in relation to the input element.

First, give the element containing this hint the position of relative.

.outer_hint {position:relative}

Next, we can give the span element an ID and give it an absolute position.

in your HTML...

<span id="inputHint" class="hint">

in your styles...

#inputHint {position:absolute;top:-5px;left:250px;}

[hwoarang69]

thanks so much, i got it to working. i just want to make sure one thing.

if i have a

<div id = "one">
    <div id = "two">
     </div>
</div>

if i just do this code:

#two{position:absolute;top:-5px;left:250px;}

this top code will make the postion missup when i resize right? so to fix this all i have to do is this:

#one{position:relative}
 #two{position:absolute;top:-5px;left:250px;}

[JorgeM]

yes, so whenever you apply an abosolute position to an element, its position will be in relation to the parent element that is set to a relative position.