Jump to content

Nav Bar Floated/positioned Right


perryc

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?

 

 

 

Link to comment
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.

Link to comment
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>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...