CODEWITHSUNDEEP
css
Umesh Patil
Umesh Patil

Reputation: 10685

Horizontal List at bottom of Div Block

Please, Find the jsfiddle demo here.

I want to take the navigation list at the bottom of green colored band.

Can anyone tell me which style will help me ?

Just adding code below:

<div id="navigation">
            <div id="navBar"> 
                <ul>
                    <li>Home</li>
                    <li>Application Tracker</li>
                    <li>Insurance Policy downloads</li>
                    <li>Parner Login</li>
                    <li>SiteMap</li>
                </ul>    
            </div>
</div>​

And style as below:

#navigation{
    height:290px;    
    background-color:olive;
    display:block;
    position:static;
}
#navBar {   
    height: 33px;
    width: 100%;
}
#navigation ul {
    background: -moz-linear-gradient(center bottom , #FCFCFC 25%, rgba(200, 200, 200, 0.8) 50%) repeat scroll 0 0 transparent;
    height: 32px;
    margin: 0;
    opacity: 0.6;
    padding: 0;
}
#navigation ul li {
    color: #302E2E;
    display: inline;
    font-size: 16px;
    margin: 10px;
    padding: 0;
}​

Upvotes: 0

Views: 4158

Answers (4)

Xella
Xella

Reputation: 1268

if you have the exact height of the block navigation and it will not change, you can do this:

#navBar {   
    height: 33px;
    width: 100%;
    position: relative;
    top: Xpx;
}

Where Xpx is value you are required.

Upvotes: 0

Riz
Riz

Reputation: 10246

Here is the one way:

http://jsfiddle.net/kKp6Z/2/

Use position: relative for container div and set position:absolute;bottom:0; for navBar.

Upvotes: 2

Arun David
Arun David

Reputation: 2784

My solution: http://jsfiddle.net/kKp6Z/1/

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

You need a block item in order to use margins.

#navigation ul li {
    color: #302E2E;
    display: inline-block; <------ here
    font-size: 16px;
    margin: 10px;
    padding: 0;
}

And you probably want to adjust the margin-top to have a different value than the other sides in order to vertically-center the text.

BTW - if you're making a menu, you're better off putting an link inside your LI and moving everything except display:inline-block to the A-tag's styling and use display:block on the A-tag itself.

Upvotes: 1

Related Questions