I'm creating and designing a mini social networking website for our school's Science Fair, and I already have a problem at the designing stage. :(
So I've created a few PSDs on how my website should look like, but it seems harder to translate my designs into HTML/CSS. My current trouble right now is this navigation bar that isn't cooperating with me...
In short, this navigation bar is very simple; the logo, with the title, a subtitle, and a few menu options (Login, Sign up). I'm using float:right;
to float my options to the right, but that isn't working very well.
The options of my navigation bar are jutting out, below the Navigation Bar. It's really odd; when I take out the float:right;
it seems perfectly fine, but is to the left. I would really like it to be on the right side.
A sample of the website is available at http://ticktalk.me.pn/. A PSD of the Sign-Up Page is available here: http://img1.imagilive.com/0314/tickTalk-signup.jpg.
Please feel free to "View Page Source" and investigate what I've done wrong. A direct link to the css is available at http://ticktalk.me.pn/css/style.css.
Thanks in advance.
EDIT:
This is my Navigation Bar HTML...
<div class= "navbar-header">
<div class= "navbar-title"><a href= "#">
tick<span class= "bookfont">talk</span>
</a></div>
<div class= "navbar-subtitle">
social networking around the clock
</div>
<div class= "navbar-menu">
<div class= "navbar-option login-button">
Login
</div>
<div class= "navbar-option navbar-checked signup-button">
Sign Up
</div>
</div>
</div>
and this is my CSS:
.navbar-header {
display:block;
background-color: rgb(0, 241, 73);
padding:10px;
margin-bottom:75px;
}
.navbar-logo {
display:inline-block;
}
.navbar-title {
display:inline-block;
font-size: 52px;
margin-left:10px;
margin-right:5px;
}
.bookfont {
font-weight: 500;
}
.navbar-subtitle {
display:inline-block;
font-size: 30px;
}
.navbar-menu {
float:right;
}
.navbar-option {
display:inline-block;
font-size:25px;
padding:20px;
padding-left:30px;
padding-right:30px;
}
.navbar-checked {
background-color: rgb(0, 217, 63);
}