CODEWITHSUNDEEP
css
Durga
Durga

Reputation: 65

Text not displaying at the proper position in a div

The username is not displaying in the correct position within the div properly. It is displaying outside the div element. I have tried changing the text-align property but that is not working. I don't want to change the .rclick class because it is being used for another element which works properly. How can I use an additional class?

php code 

echo "<div class=\"rclick\" title=\"{$user}\"  style=\"width: auto;\">";

            if (strlen($user) > 10) 
                {
                    $user = wordwrap($user, 10);
                    $user = substr($user, 0, 10);
                echo "Hi {$user}...";
                }
                else
                {
                echo "Hi {$user}";              
                }
                echo "</div>";

css code 

#nav .rclick {
position: relative;
left: 500px;
top: 40px;
width: 250px;
height: 28px;
background: url(../images/Employer.jpg) no-repeat;
color: #FFFFFF;
font-size: 1.14em;
}

showing text in black color

Upvotes: 1

Views: 354

Answers (1)

levelnis
levelnis

Reputation: 7705

To ensure good separation of presentation and content, I would suggest removing the inline style rule from your HTML markup and use CSS to define all of your style declarations.

Because of the cascading nature of CSS, inline styles in HTML markup will override equivalent declarations within <style> tags in an HTML page, which will in turn override declarations within an external stylesheet.

If you want to apply more than one class to your element, you can apply them both, like so:

#nav .customrule
{
    /*extra style definitions*/
}

And then in your HTML:

<div class="rclick customrule" title="monika">Hi monika</div>

Because you're relatively positioning the div, you could wrap the text in a span and absolutely position it within the div to place it in the position that you require:

<div class="rclick" title="monika"><span>Hi monika</span></div>

#nav .rclick span
{
    position: absolute;
    left: 10px;
    top: 10px;
}

The origin for the span will be the first relatively positioned container, which in your case is the containing div.

I have added a jsfiddle example demonstrating this.

Upvotes: 1

Related Questions