CODEWITHSUNDEEP
csslayouthtml
carboncomputed
carboncomputed

Reputation: 1620

Why does this not align my elements correctly?

<html>
<head>
<link rel="stylesheet" href="../static/styles/base.css" type="text/css" />
</head>
<body>
    <div id= "top-nav">
        <h1>Sitename</h1>
        <ul>
            <li><a href="#">Feed</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Settings</a></li>
        </ul>
    </div>
</body>
</html>

#

html,
body {
    height: 100%;
    width: 100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

#top-nav{
background-color: Gray;
width: 100%;
height: 135px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}


#top-nav h1{
    float: left;
    margin: inherit;
    padding-right: 700px;

}

#top-nav ul{
    float: left;
    bottom: 0;
}

#top-nav li{
    text-align: right;
    display: inline;
    padding-right: 5px;
}

What I would like my layout to be, is to have the h1 vertically aligned in the center of the top-nav div and I would like the ul to be on the right of the page at the bottom of the top-nav. Why am I getting unexpected results?

Upvotes: 0

Views: 109

Answers (5)

Alex W
Alex W

Reputation: 38213

You are having problems because you are using layout elements incorrectly. The <ul> element is for unordered lists, not for menus containing links. Also, using float is highly discouraged because it was only intended to be used to have text wrap around an image and not for layout. Floats have to be cleared and don't work well cross-browser.

The trick here is to use absolute positioning and make sure that the value is relative to the container, so you have to set the #top-nav div to have position: relative otherwise its children will be positioned relative to the first positioned parent element, which is most likely the body element in this case.

This works fine for me: http://jsfiddle.net/gc3EY/1/

HTML:

<html>

    <head>
        <title>Test</title>
    </head>

    <body>
        <div id="top-nav">
             <h1>Sitename</h1>
        <span>
            <a href="#">Feed</a>
            <a href="#">Profile</a>
            <a href="#">Settings</a>
        </span>

        </div>
    </body>

</html>

CSS:

body { margin: 0; padding: 0; overflow-x: hidden;}

div#top-nav span {
    position: absolute;
    bottom: 0px;
    padding: 0;
    margin: 0;
    text-align: right;
    width: 97%;
}
div#top-nav span a {
    padding: 0 2px;
}
div#top-nav {
    background-color: gray;
    width: 100%;
    height: 135px;
    margin: 0px;
    padding: 5px;
    position: relative;
}
div#top-nav h1 {
position: relative;
top: 0px;
    margin: 0;
    padding: 0;
}

Upvotes: 0

audre7
audre7

Reputation: 329

For your nav being on the bottom of the top-nav element, you could use the absolute property, so it always be fixed at the bottom. Don't use a float left for the H1 as the previous answer say. For your h1 being align vertically, you can try different padding to get what you want (or you can make a more complicated scaffolding by using the display:table ...) But the more simple is that : 

#top-nav h1{
        padding-top:30px;
        display:inline-block;
        width:auto;
        vertical-align:middle; 
}


#top-nav ul{
    position:absolute;
    top:100px;
    right:5px;
}

does it answer ?

edit

Upvotes: 0

clapas
clapas

Reputation: 1846

There is several ways you can achieve what you want. F.e., for vertical aligning the h1 in the middle of #top-nav:

#top-nav h1 {
    ...
    line-height: 135px;
    margin: 0;
}

and for aligning the ul at the bottom of #top-nav:

#top-nav {
    ...
    position: relative;
}
#top-nav ul {                           
    ...
    position: absolute;
    bottom: 0;
    right: 0;
}

Upvotes: 0

Eero Helenius
Eero Helenius

Reputation: 2585

The padding-right: 700px rule in #top-nav h1 is pushing the ul element off-position.

Something like this should work:

html,
body {
    height: 100%;
    width: 100%;
    padding: 0; /* You can just have one 0 instead of "0 0 0 0". */
    margin: 0;
}

#top-nav {
    background-color: Gray;
    width: 100%;
    height: 135px;
}

#top-nav h1 {
    float: left;
    line-height: 135px; /* Set to the height of #top-nav */
    margin: 0;
}

#top-nav ul {
    float: right;
}

#top-nav li {
    text-align: right;
    display: inline;
    padding-right: 5px;
}

Upvotes: 1

Dovydas
Dovydas

Reputation: 1

could it be due to the space you've got in

<div id= "top-nav">

after "id=" ?

also, instead of using padding-right: 700px; for h1 element, just float the ul element to the right.

Upvotes: 0

Related Questions