Nav Bar Floated/positioned Right

perryc · July 16, 2014

I'm trying to float or position the Nav bar to the right side of the screen, When i add that header image it moves my nav bar either to the left or changes it back to stack it like an generic unordered list.

I have been using floats and clears to get it positioned correctly?

Is there something else im missing?

perryc · July 16, 2014

Heres my HTML

<!DOCTYPE HTML>
<html>
   <head>
       <link rel="stylesheet" type="text/css" href="css/normalize.css">
       <link rel="stylesheet" type="text/css" href="css/style.css">
       <link href='http://fonts.googleapis.com/css?family=Handlee|Petit+Formal+Script' rel='stylesheet' type='text/css'>
       <title>Beckahs World | My Phitness Blog</title>

   </head>
   <body>
       <header>
           <div><img src="" alt="Beckahs World Logo"></img></div>
           <div class="headline"><img src="images/headline.png" alt="Beckahs World Headline"></img><div>
       </header>
       
       <nav class="nav">
           <div id="nav_float"><ul>
               <a href="about.html"><li>About</li></a>
               <a href="blog.html"><li>Blog</li></a>
               <a href="index.html"><li>Home</li></a>
           </ul></div>
       </nav>
       
       <div id="wrapper">
       <section>
           <h1> My Journey</h1>
           <div id="image_float_left"><img src="" alt="My image"></img><div>
           <div class="container"><p>Hi I am Beckah I am a 39 years old a Wife and Mom. All of my life I have be battling my weight. In 2006 I took the steps to fight the battle head on with gastric bypass. No that did not fix my weight problems but it was a great tool to get me in the right direction. It was not until 2013 and Meeting my trainer G that I had the right combo of Food, Exercise and Life!!! My blog is a way for me to share my journey in life, health, fitness..... </p><div></section>
           </div>
           
       <footer id="footer">
           <a href="http://beckahsworld.com">© Beckahs World 2014 | All Rights Reserved.</a>
           <a href="https://twitter.com/Beckah29"><img src="images/twitter.png" alt="Visit Beckah on Facebook.com!"></img></a>
           <a href="https://www.facebook.com/rebecca.m.henning?fref=ts"><img src="images/facebook.png" alt="Follow Beckah's Journey on Twitter!"></img></a>
       </footer>

Here's the CSS

/*Main selector*/

* {
   padding: 0px;
   margin: 0;
}

body {
   background-image: url("../images/witewall_3.png");
   background-repeat: repeat;
}

img {
   padding: 0 15px 10px 0;
}

/*Main text styling*/

p {
   font-family: 'Handlee', Times New Roman;
   font-size: 1.2em;
}

.intro {
   font-family: 'Handlee', Times New Roman;
   width: 350px;
}

h1,h2,h3 {
   font-family: 'Petit Formal Script', Times New Roman;
}

section h1 {
   float: right;
   clear: left;
}

/*Main Nav styling */

nav ul li {
   display: inline-block;
   float: right;
   clear: left;
   font-size: 1.6em;
   font-family: 'Handlee', Times New Roman;
   padding: 12px;
   font-weight: bold;
}

.nav {
   height: 35px;
   list-style: none;

}

/*Footer*/

#footer {
   text-align: center;
   clear: left;
   height: 100px;
   width: 100%;
   background-color: #000;
   position: absolute;
   bottom: 0;
   overflow: hidden;
}

#footer a {
   padding: 15px 0 0 0;
   color: pink;
   vertical-align: middle;
   font-family: 'Handlee', Times New Roman;
   font-size: 1.1em;

}

footer img {
   float: right;
   height: 85px;
   padding: 10px;

}

#image_float_left {
   float: left;
}

/*Centers the page content*/

#wrapper {
   width: 960px;
   margin: 0 auto;

}

/* Link Styles */

a:link {
   text-decoration: none;
}

section div img {
   float: left;
   width: 35%;
}

section div p {
   float: right;
   width: 55%;

}

header {
   height: 150px;
   width: 100%;
}

.headline {
   float: right;
   padding: 5px 50px;
   clear: left;
}

#nav_float {
   float: right;
   position: relative;
}

I tried to post my screenshot of the design so far, but i was not able to.

Andrea · July 17, 2014

I'm currently on vacation and don't have access to a real computer, so I cannot play around with your code, but looking at it, I notice the following, which may or may not have anything to do with your problem:

There is no such thing as a closing image tag - get rid of your </img> tags.

Your li and a tags are backwards, it should be

<li><a href.......>whatever</a></li>

perryc · July 17, 2014

Removing those closing img tags appears to have fixed the issue. Thanks for you help.

Andrea · July 17, 2014

Cool. Glad it helped!

Sign In

Nav Bar Floated/positioned Right

Recommended Posts

perryc

perryc

Andrea

perryc

Andrea

Join the conversation

Browse

Activity

Store

Support