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

Cool. Glad it helped!

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


×