CODEWITHSUNDEEP
css
elmify
elmify

Reputation: 105

how to change the position of these links within div header

I trying to come up with a simple css layout which should look like this:

enter image description here

This is my html code for the header and nav bar:

<div id="header">
<h1>LOGO</h1>
<ul>
<li><a href= ""> Home </a></li>
<li><a href= ""> Logout </a></li>
</ul>
</div>

<div id="navigation">
<ul>
    <li><a href="">Home</a></li> 
    <li><a href="">Help</a>
    <li><a href="">Contact Us</a>
    <li><a href="">Customers</a> 

</div>

And I'm already doing some styling on the navigation bar, however I'd like to be able to keep the two links within the header right aligned and the logo image left aligned. When I try to edit those links in the header, it all gets messed up because I'm confused about how to differentiate between the navigation list items and header list items. Could someone please help me with the header positioning?

Upvotes: 0

Views: 2590

Answers (2)

AGDM
AGDM

Reputation: 104

#header ul { float: left; }

or

#header ul { position: absolute; right: 0; }

Upvotes: 1

zxqx
zxqx

Reputation: 5205

In the header, you need to float the h1 left, and the ul right, and then add display: inline to your links (to keep them on the same line).

To target the list items in the header, you can simply use a parent selector, like this: #header li.

Here's what you need:

#header {
    border: 1px solid #ccc;
    overflow: hidden; /* clearfix */
}
#header h1 {
    float: left;
}
#header ul {
    float: right;
}
#header li {
    display: inline;
}

See DEMO.

Upvotes: 0

Related Questions