Jump to content
Killersites Community
perryc

Nav Bar Floated/positioned Right

Recommended Posts

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?

 

 

 

Share this post


Link to post
Share on other sites

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 -->
        <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>
        <!--Main intro to page -->
        <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 of page-->
        <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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×