CODEWITHSUNDEEP
htmlcss
Joseph Woods
Joseph Woods

Reputation: 1

HTML/CSS - Moving LI Nav bar to the top right

I am trying to move an LI Nav bar to the top right of a page, however when I position: absolute; and top: 0; on my <li> I get my list which is also display: inline; all stacked on top of each other. They go to the part of the screen I want because I'm also float: right; but they won't stay in a line.

Any ideas?

HTML(html and doctype and link tags left out, they're there):

<div id="search">Google Search</div>
<div id="lucky">I'm feeling lucky</div>
<form>
<input id="search_box" type="text" name="">
</form>
<ul>
    <li class='nav'><a href="https://accounts.google.com/ServiceLogin?service=oz&passive=1209600&continue=https://plus.google.com/?gpsrc%3Dogpy0%26tab%3DwX">+You</a></li>
    <li class='nav'><a href="https://www.gmail.com/intl/en/mail/help/about.html">Gmail</a></li>
    <li class='nav'><a href="https://www.google.com/imghp?hl=en&tab=wi&ei=vSQnVJPAK8eIsQTRkYCQDg&ved=0CAQQqi4oAg">Images</a></li>
</ul>

CSS:

#search {
font-family: Arial;
font-size: 10;
font-weight: bold;
border: 1px solid black;
width: 7.2em;
white-space: nowrap;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
margin: 240px 14px 100px 225px;
display: inline-block; }

#lucky {
font-family: Arial;
font-size: 10;
font-weight: bold;
padding-left: 4px;
padding-top: 3px;
padding-right: 4px;
padding-bottom: 4px;
border: 1px solid black;
display: inline-block; }


#search_box {
width: 600px;
position: absolute;
left: 65px;
top: 212px; }

ul {
list-style-type: none;
margin: 0;
padding: 0; }

.nav {
display: inline-block;
float: left;
padding: 20px;
position: absolute; }

Upvotes: 0

Views: 5799

Answers (2)

Giannis Grivas
Giannis Grivas

Reputation: 3412

Try this http://jsfiddle.net/csdtesting/oe55maf0/2/

Added #header :

#header{
    float:right;
}

and removed position:absolute; from .nav class .Also added #content :

#content{
position:absolute;
}

to contain the form . Now the structure is clear.

Hope this helps!

Upvotes: 0

FarrellScript
FarrellScript

Reputation: 31

The li's are stacked on top of each other because you are absolute positioning them to the same place. You want to make the ul absolute positioned instead. Include the code below in your css and for good measure you should also tell include something that it is positioned relative to. 

ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
}

.nav {
display: inline-block;
/* float: left;*/
padding: 20px;
/*position: absolute;*/ }

body{position: relative;}

Upvotes: 3

Related Questions