MY GOAL:
Center footer nav at bottom of white space on page.
Hey guys I'm trying to get my footer to move to the bottom of the page. I have the navigation and image showing up properly, but the footer wants to stay near the top.
The trouble I had before was getting the navigation to show up at the top to the right of the logo in all browsers, now that I've fixed that i just need this footer to stay centered at the bottom.
Here is the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
...
</style>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" atl="Logo" class="logo" alt="Visit Medata Home Page">
</div>
<div id="nav">
<ul>
<li>NewsWorthy</li>
<li>Solutions</li>
<li>About Us</li>
<li>Home</li>
</ul>
</div>
</div>
<div id="acton">
</div>
<div id="footer">
<ul>
<li>NewsWorthy</li>
<li>Solutions</li>
<li>About Us</li>
<li>Home</li>
</ul>
</div>
</div>
</body>
</html>
Here is the CSS
//!--My Custom CSS--!//
body {
margin:0; padding:0;
}
html, body, #bg {
height:100%;
width:100%;
}
#bg {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow: hidden;
background-repeat: inherit;
z-index:-1;
padding-bottom: 25px;
}
#bg img {
width:100%;
min-width:100%;
min-height:100%;
}
#content {
z-index:1;
overflow: auto;
}
#main
{
margin: auto !important;
visibility: visible !important;
-webkit-border-radius: 5px !important;
-webkit-box-shadow: 0px 0px 20px #000 !important;
-webkit-box-sizing: content-box !important;
-moz-box-shadow: 0px 0px 20px #000 !important;
box-shadow: 0px 0px 20px #000 !important;
background-color: #fff;
width: 900px;
margin-left: auto;
margin-right: auto;
}
#top-left {
float: left;
display: block;
}
#top-left img {
height: 73px;
width: 329px;
padding-left: 20px;
padding-top: 20px;
}
#nav {
margin: 0;
padding: auto;
}
#nav ul {
display: table-row;
float: right;
}
#nav li {
background: #043d70;
color: white !important;
padding: 8px 20px;
display: inline;
border-radius: 3px;
font-family: Tahoma, Geneva, sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
margin: 20px 8px 0px 0px;
text-align: center;
float: right;
}
#nav li:hover {
text-decoration: none;
background: #43434A;
}
#nav li a {
color: #fff;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
}
#main {
height: 100%;
}
#footer {
width: 100%;
height: 100%;
display: table-row;
}
#footer ul {
display: block;
position: absolute;
clear: both;
}
#footer li {
background: #043d70;
color: white !important;
padding: 8px 20px;
display: inline;
border-radius: 3px;
font-family: Tahoma, Geneva, sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: 10px;
margin: 20px 8px 0px 0px;
text-align: center;
}
#footer li:hover {
text-decoration: none;
background: #43434A;
}
#footer li a {
color: #fff;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
}
//!--End My Custom CSS --! //
I think this is what you want
http://jsfiddle.net/hsh5c/
#footer {
height: 50px;
position:absolute;
bottom:0px;
left:0px;
width:100%;
}
#footer ul {
position:relative;
width: 400px;
margin-left:-200px;
left:50%;
}
Related
As you can see in the first image, I have the underline appear under the links which covers the red "hr" that runs across the page. I want to apply the same effect on the archives and categories links but with it appearing above. I can't seem to find a way of doing it. I looked up a hover underline position, and tried using text-underline-position to being above but that doesn't do what I want it to do. How do I go about doing this?
In the second image, in the prototype I had designed to have the underline have a drop-shadow effect. How do I go about doing that with hover links? Can it even be achieved if I'm using an image as a background? Or would I need to save that as a .png with transparency? Any tips?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<header></header>
<div id="NavSection">
<div id="TopNav">
<nav id="MainNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<hr />
<div id="SecondNavSection">
<nav id="SecondNav">
<ul id="SecondMenu">
<li>Archives</li>
<li>Categories</li>
</ul>
</nav>
</div>
<div id="SiteTitle">
<h1 id="My">My<span id="Site">Site</span></h1>
</div>
</div>
<div id="ContentDiv">
<main id="ContentSection">
<div id="Content">
<p>Content goes here.</p>
</div>
</main>
</div>
<footer>
<p>My Site</p>
</footer>
</body>
</html>
CSS:
body {
background-color: #ffffff;
background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
font-family: Arial;
}
#font-face {
font-family: ubuntu-medium;
src: url(/fonts/ubuntu-medium.ttf);
}
/* #media (max-width:3440px){
body{background: url(/images/background.jpg) no-repeat center center fixed;}
} */
/* #media (min-width:480px){
body{background: url(/images/background.jpg) no-repeat center center fixed;}
} */
#NavSection {
margin-top: 3%;
}
#MainNav {
position: left;
margin-left: 11%;
}
#Menu li {
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#Menu a:hover {
text-decoration-color: #414141;
text-underline-offset: 0.12em;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 4px;
}
hr {
margin: 0px;
border: 2px solid red;
width: auto;
}
a {
color: #414141;
text-decoration: none;
}
a:active {
color: #ff0000;
}
#SiteTitle {
margin-left: 0%;
}
#My {
font-family: Impact;
font-weight: normal;
font-size: 30px;
color: #ffffff;
text-decoration: underline;
text-decoration-color: #414141;
text-decoration-thickness: 2px;
text-underline-offset: 0.08em;
}
#Site {
color: red;
}
ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#SecondNav {
float: right;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
font-size: 15px;
margin-right: 11%;
}
#SecondMenu a:hover {
margin-bottom: 5px;
text-decoration-line: underline;
text-underline-position: above;
text-decoration-style: solid;
text-decoration-color: #414141;
text-decoration-thickness: 4px;
}
#SecondMenu li {
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#ContentDiv {
width: 70%;
height: 40%;
position: absolute;
top: 30%;
left: 15%;
transform: translateX(0%);
background-color: rgba(255, 0, 0, 0.4);
}
#ContentSection {
width: 90%;
height: 60%;
position: absolute;
top: 20%;
left: 5%;
background-color: rgba(255, 255, 255, 0.9);
}
#Content {
margin: 3%;
}
Use this
HTML code
<div class="menu">
A
B
C
D
E
F
</div>
CSS
.body {
background:#222;
padding:50px;
}
.menu {
margin:0 auto;
with 90%;
}
.menu a {
display:block;
float: left;
padding:5px 0;
color:#fff;
text-decoration:none;
margin:0 10px; font-family:arial;
}
.menu a:hover {
border-bottom:3px solid #fff;
}
Hope gonna help you, also i would be glad if you rate my comment good!
Using two lists and using border on the li you can get the color.
.navbar {
position: relative;
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
}
.navbar a {
text-decoration: none;
color: #414141;
}
.navbar ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar ul li {
display: block;
flex: 0 1 auto; /* Default */
list-style-type: none;
line-height: 2.5em;
margin-left: 1em;
}
.sub ul {
justify-content: flex-end;
}
.navbar::before{
position: absolute;
z-index: -1;
margin-top: 2.5em;
content: '';
border-top: 10px solid #FF0000;
width:100%;
}
.main li.active {
border-bottom: 10px solid #000000;
box-shadow: 0 4px 2px -2px #AAAAAA;
}
.sub li.active {
border-top: 10px solid #000000;
margin-top: -10px;
box-shadow: 0px -4px 2px -2px #AAAAAA;
}
<div class="navbar">
<nav class="main">
<ul>
<li>Home</li>
<li class="active">About</li>
<li>Contact</li>
</ul>
</nav>
<nav class="sub">
<ul>
<li class="active">Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</nav>
</div>
I need to build a small website and I'm having problems with the page resizing.
I want that the png image that I put as header is resizable with the whole page (zooming in or out).
I use this css
div#container {
overflow: hidden;
min-width:900px;
width:50%;
margin:0px auto;
background-color:#ffffff;
}
div#header {
background: url('header.png') no-repeat center center;
height:20%;
min-width:900px;
width:inherit;
margin:0px auto;
position:relative;
}
div#upper_nav {
position: absolute;
bottom:0%;
right:0%;
text-align:center;
z-index:9999;
background-color:#e6e6e6;
}
and here the html part
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
Here a link with the test code: https://jsfiddle.net/809ofmvr/1/ I don't know how to add image in the test. Let's say that in the upper part there is the header image and in the bottom part the footer.
I use for the header, a div header and inside the upper_nav div with some links. I think the problem is inside the header div but I don't know where. I also tried to replace position:relative; with display:block; but gives me the same problem.
What can I do to allow a complete resize of the entire page when changes the monitor resolution, zoom, using a smartphone or whatever? With the content it resizes in the correct way.
You can use 20vw to force the header to have a height:
html {
margin:0;
padding:0;
background-color:#ffffff;
}
body {
font-family: Tahoma, Geneva, sans-serif;
color:#000;
text-align:justify;
background-image: url('http://placehold.it/800x200');
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
div#container {
overflow: hidden;
min-width:900px;
/*max-width:2000px;*/
width:50%;
margin:0px auto;
background-color:#ffffff;
}
div#header {
background: url('http://placehold.it/800x200') no-repeat center center;
background-size: cover;
height:20vw;
min-width:900px;
width:inherit;
margin:0px auto;
position:relative;
}
div#upper_nav {
position: absolute;
bottom:0%;
right:0%;
text-align:center;
z-index:9999;
background-color:#e6e6e6;
}
div#navigation_left {
padding:5px 5px;
float: left;
width:22%;
background-color:#e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px; margin-bottom: -99999px;
}
div#content {
overflow:auto;
margin-left:25%;
background-color:#e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px; margin-bottom: -99999px;
}
div#footer {
clear:both;
background: url('footer.png') no-repeat center center;
height:105px;
position:relative;
}
div#footer_content {
position: relative;
bottom:-50%;
text-align:center;
z-index:9999;
background-color:#fff;
}
P {
font-size: 17px;
color:#000;
font-family:Tahoma;
}
a {
text-decoration: none;
color:#0066FF;
font-size: 17px;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
h1 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 200%;
}
h2,h3,h4,h5,h6,h7,h8 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 150%;
}
ul#menu_left{
font-size: 11px;
list-style: none;
}
ul#menu_left li {
display: block;
width: 150px;
height: 30px;
margin: 2px;
}
ul#menu_left li a {
color:#000;
display: block;
line-height: 30px;
text-decoration: none;
text-align: left;
}
ul#menu_left li.active, ul#menu_left li:hover {
background-color: #c9c9c9;
}
ul#menu_header {
font-size: 11px;
margin: 0;
padding: 0;
list-style: none;
}
ul#menu_header li {
background-color: #737373;
display: block;
width: 150px;
height: 30px;
margin: 2px;
float: left; /* elementi su singola riga */
}
ul#menu_header li a {
color: #fff;
display: block;
line-height: 30px;
text-decoration: none;
width: 150px;
height: 30px;
text-align: center;
}
ul#menu_header li.active, ul#menu_header li:hover {
background-color: #b1b1b1;
}
<div id="container">
<div id="header">
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
</div>
<div id="navigation_left">
<ul id="menu_left">
<a hfre="#">links</a>
</ul>
</div>
<div id="content"><p>text</p></div>
<div id="footer"><div id="footer_content">text</div></div>
</div>
Also, I added background-size: cover; to make sure the background image always fills the container
Below is the code for my site. I am trying to figure out why there is right margin on the bottom two divs when .jumbotron has a width of 100%.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="main.css" rel="stylesheet"/>
<title>Vasilios Lambos</title>
</head>
<body>
<header role="banner">
<div id="fixed">
<nav role="navigation">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Process</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron">
<img src="IMG_1677.jpg" width="200" height="200"/>
<h1>Vaslios Lambos</h1>
<p>Industrial and Interaction Designer</p>
<p>Always staying hungry to learn new and inspiring ways to improve my creative process. I utilize design thinking, research methods, and ethonography to explore user experience and services. Core hard skills consist of user interface design, product rendering, and testing.</p>
</div>
<div class="pics">
<img src="VL-Logo.png" width="200" height="200"/>
</div>
<div class="info">
<div class="container">
<h3>Overview</h3>
<p> ### </p>
</div>
</div>
<div class="footer">
<h3>Soft & Hard skills</h3>
<ul>
<li>Adobe Suite</li>
<li>Axure RP</li>
<li>HTML/CSS/Javascript</li>
</ul>
</div>
</body>
</html>
Notice the CSS where jumbotron in 100% and both info div and footer have margin on the right when previewed in the browser.
#charset "UTF-8";
#font-face {
font-family: Verdana, Geneva, sans-serif;
}
body {
font-family:Verdana, Geneva, sans-serif;
background-color: #FFF;
}
*{margin:0;padding:0;}
#fixed ul{
position:fixed;
top:0px;
width:100%;
z-index:9999;
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color: #FFF;
}
nav li{
float:left;
}
nav li a{
display:block;
color: #000;
font-size: 11px;
font-weight: bold;
padding:20px;
text-transform:uppercase;
text-decoration:none;
}
nav a:hover {
background-color: orange;
}
div.jumbotron {
margin-top:80px;
margin-left:auto;
margin-right:auto;
padding:10px;
height:500px;
width:100%;
color:white;
text-align:center;
background-color:#000
}
.jumbotron p{
width:500px;
margin-left:inherit;
margin-right:inherit;
}
.jumbotron img {
border-radius: 50%;
}
.pics{
display:inline;
height:232px;
width:232px;
padding:0;
margin:0;
}
.pics img{
padding:15px;
border:1px solid #ccc;
background-color: #eee;
width:200px;
height:200px;
}
div.info {
background-color: #000;
color:white;
padding:20px;
height:400px;
}
div.footer{
background-color:#000;
color:white;
clear:both;
height:400px;
padding:20px;
}
HTML is ok
Here is the PEN
CSS followed by /* -------------- ADDED */ is the change
Here is the CSS
#font-face {
font-family: Verdana, Geneva, sans-serif;
}
body {
font-family: Verdana, Geneva, sans-serif;
background-color: #FFF;
}
* {
margin: 0;
padding: 0;
}
#fixed ul {
position: fixed;
top: 0px;
width: 100%;
z-index: 9999;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFF;
}
nav li {
float: left;
}
nav li a {
display: block;
color: #000;
font-size: 11px;
font-weight: bold;
padding: 20px;
text-transform: uppercase;
text-decoration: none;
}
nav a:hover {
background-color: orange;
}
div.jumbotron {
margin-top: 80px;
margin-left: auto;
margin-right: auto;
padding: 10px;
height: 500px;
width: 100%;
color: white;
text-align: center;
background-color: #000;
box-sizing: border-box; -------------- ADDED */
}
.jumbotron p {
width: 500px;
margin-left: inherit;
margin-right: inherit;
}
.jumbotron img {
border-radius: 50%;
}
.pics {
display: inline;
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
}
div.info {
background-color: #000;
color: white;
padding: 20px;
height: 400px;
width: 100%; /* ------------ ADDED */
box-sizing: border-box; /* -------------- ADDED */
}
div.footer {
background-color: #000;
color: white;
clear: both;
height: 400px;
padding: 20px;
width: 100%; /* -------------- ADDED */
box-sizing: border-box; /* -------------- ADDED */
}
I am trying to display logo at top end in HTML and CSS.
However, the logo image size is not reduced to the specified width and height and I do not see it being overridden anywhere else.
Code is as follows:
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
overflow: hidden;
height: 300px;
position: relative;
background: url(images/pic01.jpg) no-repeat center;
background-size: cover;
}
#banner .image
{
}
#banner p{
position: absolute;
top:30%;
left: 40%;
width: 100px;
padding: 5px;
margin: 5px;
font-family: 'Lobster', cursive;
font-weight: bold;
font-size: 55px;
color: #fff;
}
/** MENU */
#menu-wrapper
{
background: #16a085;
overflow:auto;
}
#menu {
overflow: hidden;
height: 100px;
float:left;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
letter-spacing: 1px;
padding: 0px 40px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 0.80em;
line-height: 100px;
border: none;
color: #FFF;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
}
#menu .current_page_item a {
background: #1abc9c;
}
#Logo{
width:10px;
height:30px;
float: left;
margin-top: 5px;
}
<div id="wrapper">
<div id="menu-wrapper">
<div id = "Logo" >
<img src="images/Logo.jpg" ></img>
</div>
<div id="menu" class="container">
<ul>
<li class="current_page_item">Homepage</li>
<li>About</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
/*and so on */
</div>
It looks like this:
White part in the banner is image that is taking up the width despite of having set width attribute to 10 px.
In your CSS. change the style for #Logo to #Logo img{}. you have to set the width to img tag. Not its parent container.
#Logo img{
width:100px;
height:30px;
float: left;
margin-top: 5px;
}
JS Fiddle
Majority of pages on the website works with no errors but on a few of them the navigation doesn't line up with the content and I am missing the "contact" link at the top of the navigation. The website works fine in Chrome and Firefox, and only shows these errors when in Internet Explorer. I don't quite understand why? I've search Google for answers and I haven't seen any solutions that actually work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Business Learning Foundation</title>
<!--==== js image slider ====-->
<!--==== design ====-->
<link href="staticstyle.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
.auto-style9 {
text-align: center;
}
</style>
<!--==== browser ====-->
<!--[if lte IE 7]><link href="../design/iestyle.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if lte IE 8]><style>#wrapper{width: 1020px;max-width: 1020px;min-width: 1020px;background-image: none;display: block;}
.auto-style1 {
background-color: #EF7F1A;
}
.auto-style10 {
color: #EF4923;
}
.auto-style11 {
display: inline-block;
height: 30px;
padding: 5px 0px 0px 0px;
font-size: 14px;
font-weight: normal;
color: #1C1C1C;
text-align: center;
}
</style><![endif]-->
<!--[if lt IE 9]><script src="../design/js/html5shiv.js"></script><![endif]-->
<script type="text/javascript" src="10375.js"></script>
<!--
=====================================
COOKIE COMPLIANCE CODE
=====================================
-->
<script type="text/javascript" src="../CookieCompliance/jquery.js"></script>
<script type="text/javascript" src="../CookieCompliance/cookie-compliance.js"></script>
<link href="../CookieCompliance/stylesheet.css" rel="stylesheet" type="text/css" />
<!--
END
=====================================
-->
</head>
<body>
<!--
=====================================
COOKIE COMPLIANCE CODE
=====================================
-->
<div id="cookieMessageWrapper">
<div id="cookieMessage">
<a id="cookieClose" href="#">Close</a>
<p>This site uses cookies. By continuing to use our website you accept
our use of cookies. For more information and how you can disable them
please click here, or click the close
button on the right to hide this message.</p>
</div>
</div>
<!--
END
=====================================
-->
<div id="menu-wrapper">
<div id="menu" style="height: 58px">
<ul>
<li>Home</li>
<li>Public courses</li>
<li>In-house training</li>
<li>ILM centre</li>
<li class="current_page_item">About us</li>
<li>Contact us</li>
</ul>
</div>
<!-- end #menu -->
</div>
<div id="header-wrapper" style="height: 317px">
<div id="header" style="height: 272px">
<div id="logo" style="height: 223px; width: 999px;">
<p><img src="../images/logo/BLF-trans.png" alt="Business Learning Foundation" /></p>
<div id="staticFrame" style="width: 958px;" >
<img alt="" height="165" src="booklogo.png" style="float: left" width="238" /><!--thumbnails--><div id="thumbs" style="width: 302px; height: 173px;">
<div class="thumb" style="height: 155px">
<br />
<h1>spice up your learning & development with business learning
foundation</h1>
<p>About us</p>
<p> </p>
<p> </p>
</div>
</div>
<!--clear above float:left elements. It is required if above #slider is styled as float:left. -->
</div>
<p> </p>
<p> </p>
</div>
<h1><span > </span> <img alt="Facebook" height="32" src="../images/social-media-icons/facebok.png" width="32" class="auto-style6" style="float: right" />
<a href="https://twitter.com/theblf_co" target="_blank">
<img alt="Twitter" height="32" src="../images/social-media-icons/twitter.png" width="32" class="auto-style6" style="float: right" /></a>
<a href="http://www.linkedin.com/company/2634098?trk=prof-exp-company-name" target="_blank">
<img alt="Linked In" height="32" src="../images/social-media-icons/linkedin.png" width="32" class="auto-style6" style="float: right" /></a>
<a href="https://plus.google.com/b/108614131190835211694/108614131190835211694/posts" target="_blank">
<img alt="" height="32" src="../images/social-media-icons/google-plus.png" width="32" class="auto-style6" style="float: right" /></a></h1>
</div>
</div>
<div id="menu2-wrapper">
<div id="menu2">
<ul>
<li class="current_page_item">about</li>
<li>history</li>
<li>the team</li>
<li>venues</li>
<li>clients</li>
<li>testimonials</li>
<li>news</li>
<li>gallery</li>
<li>careers</li>
</ul>
</div>
<!-- end #menu -->
</div>
<!-- end #header -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content" style="height:808px">
<div class="post">
<div class="entry">
<h2> About the business learning foundation</h2>
<p>The Business Learning Foundation specialises in
Management Development, Team Building and Business
Coaching. We also have our own range of
psychometrics and eBooks to support the various
methods of development. We are renowned for our
innovative exercises we use for our management
development programmes and team builds, these
re-energise the delegates and illustrate the key
learning’s and messages in a way which cannot be
done in the classroom.<br />
<br />
We have been running since 1985 and have built an
impressive and loyal client base by delivering world
class learning and development. Our clients used to
stick to what they knew and repeated the work we had
done with them in the past, this year we have
rebranded to bring all elements of our organisation
under one umbrella so that our customers could see
and benefit from all the specialism’s we were able
to offer them.<br />
The CSS code is:
body {
margin: 0;
padding: 0;
background-color:#e5d7cc;
font-family:"Century Gothic";
font-size: 12pt;
color: #3B3B3B;
background-image:url('../images/logo/leftrighttree.png');
background-position:left top;
background-repeat:no-repeat;
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
letter-spacing: -2px;
text-transform: uppercase;
font-family: "Trajan Pro 3";
font-weight: normal;
color:#261e74;
}
h1 {
font-size: 26px;
font-family:"Trajan Pro 3";
color:#3e1f00;
letter-spacing:0.5px;
}
h2 {
letter-spacing: 1px;
font-size: 18px;
border-bottom:1px #f26522 solid;
border-top:1px #f26522 solid;
padding:1px;
text-align:center;
color:#1c4297;
}
h3 {
letter-spacing: 1px;
font-size: 14px;
border-bottom:1px #f26522 solid;
border-top:1px #f26522 solid;
padding:1px;
text-align:center;
color:#0487d3;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
color: #ef4923;
}
a:hover {
text-decoration: none;
color: #0487d3;
}
.div1, .div2 {width:800px;margin:0 auto; background-color:#e5d7cc}
.div1 {margin-top:30px;margin-bottom:60px;text-align:center;line-height:20px;background-color:#e5d7cc}
.div1 P {font-size:18px;}
.div1 a, .div2 a {color:#07C;}
.div2 {margin-top:70px;}
.div2 li {padding-top:6px;padding-bottom:6px;background-color:#e5d7cc}
.floatLeft {float:left;}
/* Header */
#header-wrapper {
}
#header {
clear: both;
width: 1000px;
height:416px;
margin: 0px auto;
}
/* Logo */
#logo {
margin: 0px;
padding: 30px 0px;
color: #000000;
}
#logo h1, #logo p {
margin: 0;
padding: 0;
}
#logo h1 {
margin: 0px;
padding: 0px;
text-align: center;
text-transform: lowercase;
font-size: 10em;
font-family: 'Yesteryear', cursive;
font-weight: 400;
color: #323030;
}
#logo h1 span {
color: #F6B300;
}
#logo p {
margin-top: -2em;
padding: 0px;
text-align: center;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-size: 11px;
color: #3B3B3B;
}
#logo p a {
color: #3B3B3B;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #323030;
}
#slogan{
height:36px;
font-size:24pt;
font-family:"Trajan Pro 3";
text-align:left;
padding-bottom:6px;
}
/* Search */
#side-label{
width:250px;
color:black;
font-family:"Century Gothic";
letter-spacing:0.5px;
}
#search {
width: 320px;
height: 60px;
padding: 0px;
}
#search form {
margin: 0px;
padding: 0px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 250px;
outline: none;
background: #F5F0E7;
border: 1px solid #D7D0C0;
padding: 10px;
border-radius: 8px;
text-transform: lowercase;
font-family:"Century Gothic";
color: #454545;
}
#search-submit {
width:82px;
padding: 5px 10px;
background: #e5d7cc;
border-radius: 5px;
letter-spacing: 1px;
text-transform: uppercase;
font-family:"Century Gothic";
font-size: 14px;
background-image:url('../images/search.png');
background-repeat:no-repeat;
background-position:center;
color: #0a4fa3;
}
/* CourseSearch */
#coursesearch {
width: 320px;
height: 60px;
padding: 0px;
}
#coursesearch form {
margin: 0px;
padding: 0px;
}
#coursesearch fieldset {
margin: 0;
padding: 0;
border: none;
}
#coursesearch-text {
width: 250px;
outline: none;
background: #F5F0E7;
border: 1px solid #D7D0C0;
padding: 2px;
border-radius: 8px;
text-transform: lowercase;
font-family:"Century Gothic";
color: #454545;
}
#coursesearch-submit {
width:82px;
margin-top:10px;
padding: 2px 5px;
background: #e5d7cc;
border-radius: 5px;
letter-spacing: 1px;
text-transform: uppercase;
font-family:"Century Gothic";
font-size: 14px;
color: #1c4297;
}
/* Contact */
#contact {
width: 320px;
height: 60px;
padding: 0px;
}
#contact form {
margin: 0px;
padding: 0px;
}
#contact fieldset {
margin: 0;
padding: 0;
border: none;
}
#contact-text {
width: 209px;
outline: none;
background: #F5F0E7;
border: 1px solid #D7D0C0;
padding: 2px;
border-radius: 8px;
font-family:"Century Gothic";
color: #454545;
}
#contact-submit {
width: 62px;
height: 22px;
display: none;
border: none;
color: #FFFFFF;
}
/* Menu */
#menu-wrapper {
overflow: hidden;
height: 56px;
}
#menu {
width: 1000px;
height: 55px;
margin: 0px auto;
padding-top:5px;
background:#f47321 url('../images/logo/whitetree.png') no-repeat right 50%;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
border-right: 1px solid #FDA408;
}
#menu a {
display: block;
letter-spacing: 1px;
margin: 0px 10px;
line-height: 55px;
padding: 0 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: #3D2729;
}
#menu .current_page_item a {
}
#menu-wrapper {
overflow: hidden;
height: 56px;
}
/* Navigation part 2 */
#menu2 {
width: 1000px;
height: 30px;
margin: 0px auto;
padding: 0px;
background-color:#3E1F00;
border-radius:8px;
}
#menu2 ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu2 li {
display: inline-block;
border-right: 1px solid #FDA408;
}
#menu2 a {
display: block;
letter-spacing: 1px;
margin: 0px 10px;
line-height: 25px;
padding: 0 1px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family:"Century Gothic";
font-size: 12px;
font-weight: normal;
color:#FFFFFF;
border: none;
}
#menu2 a:hover, #menu2 .current_page_item a {
text-decoration: none;
color:#FF3300;
}
#menu2 .current_page_item a {
}
#menu2-wrapper {
overflow: hidden;
height: 31px;
}
/* Page */
#wrapper
{
overflow: hidden;
padding-bottom: 40px;
}
#page {
overflow: hidden;
width: 1000px;
margin: 0px auto;
}
/* Content */
#content {
float: left;
width: 640px;
height:500px;
background-color:#ffffff;
overflow:scroll;
}
.post {
margin-bottom: 5px;
padding: 10px 15px;
}
.post-alt
{
background: #F0F0F0;
}
.post .title {
height: 38px;
margin-bottom: 10px;
padding: 12px 0 0 0px;
font-size: 32px;
}
.post .title a {
border: none;
color: #3D2729;
}
.post .meta {
margin-bottom: 5px;
padding: 5px 0px 15px 0px;
text-align: left;
font-weight: normal;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 0px 20px 0px;
padding-bottom: 5px;
text-align: justify;
}
.links {
display: inline-block;
height: 30px;
padding: 5px 0px 0px 0px;
font-size: 14px;
font-weight: normal;
color: #1C1C1C;
}
.button
{
padding: 5px 10px;
background: #E58703;
border-radius: 5px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
color: #FFFFFF;
}
/* Sidebar */
#sidebar {
float: right;
width:300px;
height:536px;
margin: 0px;
padding: 40px 30px 0px 30px;
color: #787878;
background: #f26522;
}
#sidebar p
{
color: #3B3B3B;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 50px;
}
#sidebar li li {
border-bottom: 1px solid #D8AD06;
margin: 0px 0px;
padding: 10px 0px;
border-left: none;
}
#sidebar li li a {
color: #3B3B3B;
}
#sidebar li li span {
display: block;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar h2 {
padding-bottom: 20px;
font-size: 18px;
color: #3D2729;
}
#sidebar p {
margin: 0px 0px 40px 0px;
padding: 0px;
text-align: justify;
}
#sidebar a {
border: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Footer */
#footer {
height: 150px;
margin: 0 auto;
padding: 0px 0 15px 0;
background:#EE8A48;
border-top: 1px solid #A59282;
font-family: 'Arvo', serif;
}
#footer p {
margin: 0;
padding-top: 40px;
line-height: normal;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
}
#banner {
width: 1000px;
margin: 0px auto;
}
#banner img
{
border-radius: 8px;
background-repeat:no-repeat;
background-position:center;
}
/* Three Column Content */
#three-column {
overflow: hidden;
padding: 10px 0px 10px 0px;
color:white;
}
#three-column #tbox1 {
float: left;
width: 320px;
margin-right: 20px;
}
#three-column #tbox2 {
float: left;
width: 320px;
margin-right: 20px;
}
#three-column #tbox3 {
float: left;
width: 320px;
}
.box-style {
background-color:#3E1F00;
}
.box-style01
{
border-bottom: 5px solid #0F62B4;
}
.box-style02
{
border-bottom: 5px solid #DE5635;
}
.box-style03
{
border-bottom: 5px solid #0F62B4;
}
.box-style h2 {
padding: 10px 0px;
letter-spacing: -1px;
font-size: 16px;
color: #FFFFFF;
width:272px;
}
.box-style .image {
width: 272px;
}
.box-style .arrow {
}
.box-style .content {
overflow: hidden;
width: 300px;
padding: 30px;
}
.divider {
overflow: hidden;
height: 50px;
background: url(images/img04.png) no-repeat center top;
}
/* http://www.menucool.com */
/*slider frame*/
#staticFrame
{
width:950px;
margin:0 auto; /*center-aligned*/
padding:20px;
border-top:1px #BE9C81 dashed;
height:154px;
border-bottom:1px #BE9C81 dashed;
}
/* -- thumbnails -- */
#thumbs
{
float:right;
margin-left:10px;
width:300px;
font:normal 11px/13px Arial;
color:#666;
height:240px;
}
#thumbs .thumb
{
padding:6px 4px;
color:fuchsia;
}
#thumbs .thumb h1
{
padding:6px 4px;
color:#715239;
font-family:"Trajan Pro 3";
letter-spacing:0.5px;
line-height:20px;
font-size:20px;
}
#thumbs .thumb p
{
padding:20px 20px;
color:#FF6600;
font-size:16px;
font-family:"Century Gothic";
text-decoration:none;
text-transform:none;
}
#testimonial{
}
#testimonial .testimage{
width: 20%;
padding:10px 0px 0px 0px;
float:left;
}
#testimonial .testcontent{
border:1px #BE9C81 dashed;
float:right;
width:100%;
margin-bottom:20px;
}
#testimonial .testcontent h1 {
width:75%;
float:right;
padding:10px 10px 10px 10px;
font-style:italic;
color:#3E1F00;
font-size:15px;
text-transform:none;
font-family:"Century Gothic";
letter-spacing:0.1px;
}
#testimonial .testcontent h2 {
font-weight:bold;
color:#090071;
border:none;
font-size:15px;
text-transform:none;
font-family:"Century Gothic";
letter-spacing:0.1px;
width:75%;
float:right;
text-align:left;
}
#testimonial .testcontent p {
font-style:italic;
color:#CA5100;
border:none;
font-size:15px;
text-transform:none;
font-family:"Century Gothic";
letter-spacing:0.1px;
width:75%;
float:right;
}
#testimonial .testcontent h4 {
color:#622000;
border:none;
font-size:12px;
text-transform:none;
font-family:"Century Gothic";
letter-spacing:0.1px;
width:75%;
float:left;
text-align:center;
line-height:-10px;
width:20%;
}
Use float:left for menu LI. It will align all the LIs from left to right in IE. And set margin: auto to align UL to the center.
#menu2 li {
display: inline-block;
border-right: 1px solid #FDA408;
float:left;
}
#menu li {
display: inline-block;
border-right: 1px solid #FDA408;
float:left;
}
Update:
For equally spacing LIs within UL, there is no easy way to implement it using CSS, but you could use jquery like this. I have tried it using number of different ways in CSS, but this seems to be the best and works in every browser.
$(document).ready(function() {
var tabs = $('#menu2').find('li');
if (tabs.length) tabs.css('width', (100 / tabs.length) + "%");
})