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

Link to comment

Share on other sites

perryc

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

perryc

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Store

Support