CODEWITHSUNDEEP
htmlcss
Qwertie
Qwertie

Reputation: 6573

How do you align text of one item in nav?

I am building a navigation bar using <nav> and I am aligning the text to the right but I want to get the logo in the navbar to be on the left I have tried many ways to move it like giving it a id and using !important but it still wont move

Here is my relevant HTML

<div id="navDiv">
    <nav>
        <a href="me.html" id="logo">Name</a>
        <a href="home.html">Home</a>
        <a href="about.html">About</a>
        <a href="mailto:[email protected]">Contact</a>
    </nav>
</div>

And here is my CSS

#logo
{
    text-align:left !important;
}

nav
{
    text-align:right;
}

Why is the logo element still on the right when !important is telling it to go to the left and how can I fix this?

Upvotes: 1

Views: 199

Answers (5)

Patrick M
Patrick M

Reputation: 10987

If I understand you correctly, you want to the "Name" to appear to the left while everything else is to the right? So, like this: http://jsbin.com/gejefiji/1/edit

The only thing I did there is add a float: left; to the #logo selector.

The reason the nav rule overrides the #logo rule even with the !important is due to nesting. The nav itself is a block element, meaning it expands to fill its container. The a tags are not block elements, they are inline, meaning they follow the alignment rules for the containing element, which means they get text-aligned right. If you inspect the elements in the layout section of your browser's development tools, you can see that the width of the a elements shrinks-to-fit the content, like so:

enter image description here

The text inside the a#logo is left-aligned, but the elements themselves are right-aligned, so it appears to not follow what you want.

If you do use the float: left, I strongly recommend you look into adding where and when to use a clear: left element after your nav, just to prevent any float properties form interfering with the rest of the page's layout. Emre's nav:after trick is handy, but is not supported on all browsers, so you might need a separate element with a specific class assigned to it, like this:

// CSS
.clear {
    clear: left;
}

// HTML
    </nav> <!-- after the nav -->
</div> <!-- or after the div -->
<div class="clear"></div>

Basically, you want to put the clear before anything else that you don't want floated.

Upvotes: 1

train_fox
train_fox

Reputation: 1537

Why you do not use float?

#logo {
  float:left;
}

Upvotes: 0

ASasd
ASasd

Reputation: 119

here it is :) that should work well [tested]

  <style>

    nav
    {
        text-align:right;
    }
    #logo
    {
        float:left;
    }
    nav:after { /* fix float */
        visibility: hidden; 
        display: block; 
        font-size: 0; 
        content: " "; 
        clear: both; 
        height: 0; 
    }
    </style>
    <div id="navDiv">
        <nav>
            <a href="me.html" id="logo">Name</a>
            <a href="home.html">Home</a>
            <a href="about.html">About</a>
            <a href="mailto:[email protected]">Contact</a>
        </nav>
    </div>

Upvotes: 1

i&#39;m PosSible
i&#39;m PosSible

Reputation: 1393

add float:left;

#logo
{
    float:left;
}
nav
{
    text-align:right;
}

Live demo: JSFiddle

Upvotes: 2

Faust
Faust

Reputation: 15404

The text-align property can only be applied to box-level item that contains items to be aliged either left or right -- not on the items themselves. So you can't have some items inside nav text-aligned left and some text-aligned right this way.

You can, however, float the logo left:

#logo{float:left;}

Upvotes: 1

Related Questions