div {
width: 1310px;
padding: 10px;
margin: 0;
background-color: #212F3D;
text-align: center;
}
<div class="topnav-centered" id="myTopnav">
<a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; " href="01.HTML" class="active">Home</a>
<a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; " href="02.HTML">HTML</a>
</div>
I am doing a html project for school and I want to round the corners of my top navigation bar. I have a code but Im not certain that I have given the right part of my code.If I havent just tell me and I will edit It correctly.
Try this and you're done...
div {
border-radius: 20px;
}
div{
width: 1310px;
padding: 10px;
margin: 0;
background-color: #212F3D;
text-align: center;
border-radius: 20px;
}
<div class="topnav-centered"id="myTopnav">
<a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; "href="01.HTML" class="active">Home</a>
<a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; "href="02.HTML">HTML</a>
</div>
Use border-radius to round the edges of the navigation bar. You can also target each individual corner by:
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
Feel free to play with the values.
Here is your code edited https://www.w3schools.com/code/tryit.asp?filename=FWTO4Y7J67ZA
Some suggestions: you should target the top navigation bar by class or id. I suggest you do it by class reference. Also avoid as much as possible using inline styles, as you will have to write the code for so many times.
This one will let you round a specific corner with a specific value.
div{
width: 1310px;
padding: 10px;
margin: 0;
background-color: #212F3D;
text-align: center;
border-radius: 20px;
}
div {
//you can manipulate which side to round and which not
border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
}
<div class="topnav-centered" id="myTopnav">
<a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; " href="01.HTML" class="active">Home</a>
<a style="font-family:Verdana; color:White; font-size: 20px; display:inline; padding: 10px 50px; " href="02.HTML">HTML</a>
</div>
Related
I'm wondering why the elements in my nav bar appear to have blank space above them? I've checked the margin and padding and there doesn't seem to be an issue, but there is a large space above my #logo and #searchbox which is messing up my layout, how can I get rid of the space above the elements?
Thanks a lot!
Here's my Code:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Your <nav> element has a padding of 10px.
EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:
#searchbox_div {
position: relative;
display: block;
padding: 0;
width: 100%;
}
#searchbox {
position: relative;
float: right;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
float: left;
}
#main_nav{
display: inline-block;
padding: 0px;
margin: 0px;
margin-top: 4em;
margin-left: 1em;
}
I noticed that you`re not using a css reset. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
Also, sometimes if I have a problem with blank spaces, I run the html all together so there are no blank spaces between the tags. To make it look neat, I insert carriage returns in the middle of the html tag.
By default, most browsers have an 8px or so margin that is built in or "Added" to the page style. The super easy way to eliminate this is through CSS. Simply use:
html,body{
margin:0;
}
You can also add:
padding:0;
If it's still giving you problems!
You appear to need to reset/normalize your css as that
html,body{
margin:0;
padding:0;
}
The <nav> element is configured to have 10 pixels of padding on all sides.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm currently building a website and and I can't find a CSS positioning method that works, meaning any CSS positioning element that doesn't make other HTML elements behave weirdly. Is there any CSS positioning methods that would position an HTML element precisely, accurately and not cause (many) issues with other elements? So far float and position: absolute; don't work well. Thanks!
Since apparently what I'm asking is unclear, I'm asking "What kind of positioning can I use that doesn't have any (or few) side effects?"
Here's the Code I'm working on:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-color: red;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Each positioning method has a purpose and well-defined, if sometimes not intuitive, behavior. You cannot pick one that "won't mess things up". There's no shortcut like "always use relative", because each method accomplishes something different that cannot be accomplished by the other methods.
I happen to think positioning in CSS is abysmally defined, but it's what we have to work with and the only thing you can do is learn what each one does and how they interact. There WILL be some things you cannot accomplish1, and until CSS layout matures that will continue to be the case.
The only advice I can give you is to budget some time, say 8-16 hours over the next few weeks, to play with basic layouts and experiment with all the positioning methods. Use Firefox or Chrome's developer tools to examine in detail how things are laid out, and make specific changes one at a time until you start to develop a feel for how the options interact with each other. This is a highly complex mess and it will take some time to learn it. But once you do you will have a skillset that will serve you well.
1 As I recently learned to my great disappointment. I did find some workarounds gross hacks that involved duplicating content but that way lies madness. I hope the new flex positioning stuff gets worked out with some sanity but I'm not holding my breath.
Remove this from your HTML :
<div id="searchbox_div">
</div>
but obviously keep the form inside it, it dosent need to be contained in a div since its already inside the nav element.
Here is working Fiddle
I think this is probably a simple thing to do but when i try to do it it messes other stuff up that I've got.
Basically I am using php in codeigniter. I have a for loop that displays lots of product items (tours) to the user to choose and enter all the specific details related to that product. This page is here:
http://eternalcitytours.com/en/2/Catholic-Tours-Of-Rome-Italy
On each product box there is a blue ring.
I want to substitute the yellow price circle (see example below)
http://eternalcitytours.com/en/22/Tours/Ancient-Coliseum-Roman-Forum-Rome-Tour
to be instead of this blue ring. However every time I do it everything messes up.
The relevant bits of code are:
.feature li .thumb .date {
position: absolute;
bottom: -25px;
left: 110px;
display: block;
-moz-border-radius: 40px 40px 40px 40px;
-webkit-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
height: 50px;
width: 46px;
background: #f3e4c8;
float: left;
font-family: mensch;
padding-top: 10px;
}
.feature li .thumb .date span {
display: block;
text-align: center;
font-size: 20px;
line-height: 20px;
}
div .raf{
width:16px;
height:16px;
border-radius:50%;
background-color:#CE1126;
background-clip:content-box;
padding:8px;
border:8px solid #00247D;
margin-left:7px;
margin-top:-5px;
}
.tour-price {
font-size: 2.2em;
font-weight: 300;
display: block;
margin-left:auto;
margin-right:auto;
width:60px;
height:60px;
border-radius:50%;
color:#483f34;
line-height:60px;
text-align:center;
background:#ffc55f;
align: center;
}
<ul id="filter-container" class="feature cf" itemscope itemtype="http://schema.org/EventReservation">
<?php
$tcount=count($tours);
$tcount=$tcount-1;
for($i=0; $i<=$tcount;$i++){
echo "
<li class=\"".$tours[$i]['location']."\">
<a href=\"".$tours[$i]['nav_url']."\" class=\"thumb\">".$tours[$i]['img']."
<div class=\"date\"><div class=\"raf\"></div></div>
</a>
<h4 class=\"tour_title\" itemprop=\"name\">".$tours[$i]['title']."</h4>
<div class=\"caption\" itemprop=\"description\">".$tours[$i]['blurb']."</div>
<p><button type=\"button\" class=\"btn btn-primary\">Read More...</button></p>
</li>
";
}?>
</ul>
thanks
TC
Change this code:
div .raf{
width:16px;
height:16px;
border-radius:50%;
background-color:#CE1126;
background-clip:content-box;
padding:8px;
border:8px solid #00247D;
margin-left:7px;
margin-top:-5px;
}
to this one:
div .raf{
margin-top: -15px;
font-size: 2.2em;
font-weight: 300;
display: block;
margin-left: auto;
margin-right: auto;
width: 60px;
height: 60px;
border-radius: 50%;
color: #483f34;
text-align: center;
background: #ffc55f;
}
And I suppose you want also to change the HTML, replace this:
<div class=\"date\"><div class=\"raf\"></div></div>
With this other code:
<div class=\"date\">
<div class=\"raf\" itemprop=\"price\" content=\"43.00\">
<span itemprop=\"priceCurrency\" content=\"EUR\">€</span>
43</div>
</div>
Additional recommendations: You could improve a lot your code readability by correctly formatting your code, see thsi questions: questions questions
I want to have a navigation bar with a logo inside it but as I add the logo the line doesn't look fine!
The problem is when I add the pic its like the picture and the text doesnt stay in the same line! not that the line breaks but the text slides down a little while it shouldn't.
body {
background-color: #C8F1BA;
margin: 0px;
}
div#gnb_bg {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-right: 10px solid black;
}
a.gnb {
background-color: #99FF33;
text-decoration: none;
font-size: 26px;
border-right: 1px solid #448811;
padding-right: 2.5%;
padding-left: 2.5%;
padding-top: 14px;
padding-bottom: 14px;
margin: 0px;
}
img#gnb_logo {
height: 30px;
margin: 10px;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
height: 50px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
<img id="gnb_logo" src="../images/logo.gif" />
</div>
</nav>
</body>
For starters we need to sort out your html.
Then look at your css your <a> if you're using padding etc you need to make it a block level element.
remove the height 50px from your nav that's not something you want to be giving height to. Instead use your padding of <a> to get the desired height it helps with responsive.
But because we want it to sit beside your image use inline-block
also do not use CSS to define an tag's height and width you should use the tags attributes so that rendering happens smoothly.
Also you need to use alt on images.
your image also needs the following css rule's:
img#gnb_logo {
vertical-align:middle;
margin:0 10px;
}
So that it sits the way you want it beside your link.
Also if that is your site's logo it should not be inside <nav>
If it's an icon relative to the link then instead of using <img> use background-image
body {
background-color: #C8F1BA;
margin: 0px;
}
ul,
li {
list-style: none;
}
div#gnb_bg {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-right: 10px solid black;
}
a.gnb {
background-color: #99FF33;
text-decoration: none;
font-size: 26px;
border-right: 1px solid #448811;
padding-right: 2.5%;
padding-left: 2.5%;
padding-top: 14px;
padding-bottom: 14px;
margin: 0px;
display: inline-block;
}
img#gnb_logo {
vertical-align:middle;
margin:0 10px;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
}
<header>
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<ul id="gnb_bg">
<li>
<a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
<img id="gnb_logo" src="../images/logo.gif" height="30" alt="GNB Logo" />
</li>
</ul>
</nav>
</header>
If you add vertical-align: middle to both the a.gnb and img#gnb_logo, that will probably fix your problem.
Pay attention to the top/bottom padding on your link so that it does overflow the 50px height that you assigned to the parent container.
body {
background-color: #C8F1BA;
margin: 0px;
}
div#gnb_bg {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-right: 10px solid black;
}
a.gnb {
background-color: #99FF33;
text-decoration: none;
font-size: 26px;
border-right: 1px solid #448811;
padding-right: 2.5%;
padding-left: 2.5%;
padding-top: 10px;
padding-bottom: 10px;
margin: 0px;
vertical-align: middle;
}
img#gnb_logo {
height: 30px;
margin: 10px;
vertical-align: middle;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
height: 50px;
}
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
<img id="gnb_logo" src="http://placehold.it/100x50" />
</div>
</nav>
First your a.gnb class should have a display-block if you want to render padding on an inline tag like a "a" tag. And your line-height must be of 22px if you want to make it fit in a 50px height container (14px + 14px padding top and bottom + 22px line-height equal 50px)
Second, to make your image alignment just add vertical-align: middle to the img#gnb_logo rule:
body {
background-color: #C8F1BA;
margin: 0px;
padding: 0px;
}
div#gnb_bg{
margin:0px;
padding-top:0px;
padding-bottom:0px;
border-right:10px solid black;
}
a.gnb{
background-color: #99FF33;
text-decoration: none;
font-size:26px;
border-right:1px solid #448811;
padding-right:2.5%;
padding-left:2.5%;
padding-top:14px;
padding-bottom:14px;
margin:0px;
line-height: 22px;
display: inline-block;
}
img#gnb_logo{
height:30px;
margin:10px;
vertical-align: middle;
}
nav#gnb{
text-align:center;
background-color: #99FF33;
height: 50px;
}
You need to remove the margin.
img#gnb_logo{
height:30px;
margin:0px;
}
Check out the live demo.
body {
background-color: #C8F1BA;
margin: 0px;
}
#gnb{
padding:10px;
}
div#gnb_bg{
margin:0px;
padding-top:0px;
padding-bottom:0px;
border-right:10px solid black;
}
a.gnb{
background-color: #99FF33;
text-decoration: none;
font-size:26px;
border-right:1px solid #448811;
padding-right:2.5%;
padding-left:2.5%;
padding-top:14px;
padding-bottom:14px;
margin:0px;
}
img#gnb_logo{
height:30px;
}
nav#gnb{
text-align:center;
background-color: #99FF33;
height: 50px;
}
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
<img id="gnb_logo" src="http://placehold.it/100x50"/>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #C8F1BA;
margin: 0px;
}
a.gnb {
text-decoration: none;
font-size: 26px;
border-right: 1px solid black;
vertical-align: middle;
padding-right: 1%;
padding-left: .2%;
padding-top: 5px;
padding-bottom: 5px;
}
img#gnb_logo {
height: 30px;
vertical-align: middle;
margin:5px 0px;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
height: 40px;
}
</style>
</head>
<body>
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<img id="gnb_logo" src="http://placehold.it/100x50" />
<a class="gnb" href="../feedbacks/feedbacks.html">Website</a>
</div>
</nav>
</body>
The problem i am having is the footer div keeps going up behind the the right hand side div. i have a middle containing div with the 2 floated div's side by side and the footer is a separate div not to sure where i have gone wrong here but i have been at it for hours and cant work out the problem.
Here is a js fiddle of what i mean: http://jsfiddle.net/VU3xW/
HTML:
<div id="middlecontainer">
<div id="leftContent">
</div> <!-- end of left content -->
<div id="rightContent">
</div> <!-- end of right content -->
</div> <!-- end of middle container -->
<div id="footer">
<p class="footernav">Home | About | Products | Contact
</p>
<p class="copyright">Copyright © 2013 JBA Packaging Supplies | Designed by iDesign</p>
</div> <!-- end of footer div -->
CSS:
#rightContent{
width: 690px;
height: 400px;
float: right;
background-color:#222;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#leftContent{
display: inline-block;
width: 240px;
height: 200px;
background-color:#555;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#middlecontainer {
width: 960px;
background-color:#003;}
#footer {
width: 960px;
background-color: #121212;
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#footer a{
text-decoration: none;
list-style-type: none;
color:#888;
}
#footer a:hover{
text-decoration: none;
list-style-type: none;
color:#444;
}
.footernav {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
color:#444;
padding-top: 10px;}
.copyright {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
color:#888;
padding-top: 10px;}
What you are missing is clearing the floating elements
Demo
Just add this <div style="clear: both;"></div> at the end of the container element, you can also clear the floats using overflow: hidden; for the parent div. Also for demo purpose I've added the styles inline, you can make a class out of it and use that instead of inline styles which is considered as bad practices..
Also if you want to clear the floating elements, you can use this to self clear the parent element.
.self_clear:after { /* Use this if you wish to ditch IE8 */
content: " ";
display: table;
clear: both;
}
<div class="self_clear"> <!-- Example usage -->
<div class="floated_left"></div>
<div class="floated_right"></div>
</div>
This answer of mine will provide in detail explanation, that why you need to use clear: both;
Try adding a clearing div
#clear{
clear:both;
}
Here is the fiddle http://jsfiddle.net/swDnn/1/
Hope it helps...
try this
http://jsfiddle.net/VU3xW/4/
#rightContent{
width: 690px;
height: 400px;
float: right;
background-color:#222;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#leftContent{
display: inline-block;
width: 240px;
height: 200px;
background-color:#555;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#middlecontainer {
width: 960px;
background-color:#003;}
#footer {
width: 960px;
background-color: #121212;
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#footer a{
text-decoration: none;
list-style-type: none;
color:#888;
}
#footer a:hover{
text-decoration: none;
list-style-type: none;
color:#444;
}
.footernav {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
color:#444;
padding-top: 10px;}
.copyright {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
color:#888;
padding-top: 10px;}
Try giving your middlecontainer a overflow:auto property.
Your footer need clearing so add clear:both in #footer
#footer {
clear:both;
width: 960px;
background-color: #121212;
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}