Hi there I have a horizontal menu with the logo in the center, can't seem to get it inline but still looks good in all browsers so far.
Now when in responsive mode I would like it to show the logo all the time at the top and the button to go underneath to show/hide the menu.
At the moment in responsive it hides the logo then when the Show Menu is clicked it shows the menu with the logo in the middle of the ul.
Here is the code so far a bit messy at the moment.
* {
margin: 0;
border: 0;
padding: 0;
}
body {
font-family: sans-serif;
margin: 5px;
background: #F1F6F8;
}
a {
font-weight: bold;
color: #3F5767;
text-decoration: none;
}
a:hover {
color: #524C56;
}
#wrapper {
max-width: 980px;
margin: 0 auto;
}
header {
width: 100%;
height: 100px;
top: 0;
left: 0;
}
/* Logo code can go here */
ul li a.logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:76px;
width:175px;
display:block;
padding:5px;
margin: 0 auto;
}
nav {
text-align: center;
}
li {
font-family: sans-serif;
font-size: 150%;
display: inline-block;
padding: 0 10px 0 10px;
}
nav ul li a {
color: #3F5767;
}
/* Start controls checkbox change button */
ul li a:hover + .hidden, .hidden:hover{ /* Maybe remove this */
display: block;
width: auto;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
.show-menu{
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
color: #3F5767;
background: #424242;
text-align: center;
padding: 3px o;
display: none;
}
.thing:before {
content: "Show Menu";
}
input[type=checkbox]:checked ~ .thing:before {
content: "Close Menu";
}
#media screen and (max-width: 760px) {
ul{position: static;
display: none;
}
li{
margin: 0 auto;
font-size: 100%;
padding: 0;
/*border-bottom: 2px solid #676767;*/
}
ul li, li a{
width: 100%;
font-size: 15px;
}
.show-menu{
display: block;
width: auto;
height: 30px;
padding: 3px 0 0 0;
}
}
/* End controls checkbox change button */
#media print {#ghostery-purple-box {display:none !important}}
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Coast Fm Tasmania</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<header>
<nav>
<input id="show-menu" role="button" type="checkbox">
<label for="show-menu" class="show-menu thing">   </label>
<ul id="menu">
<li>
Home</li>
<li>Events</li>
<li>On-Air</li>
<li>Gallery</li>
<li><a class="logo" href="index.html"></a></li>
<li>Sport</li>
<li>The Team</li>
<li>Sponsors</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
Also here is the Logo
Coast FM
Thanks
You can add another logo in a div that will be your "hidden logo".
<input id="show-menu" role="button" type="checkbox">
<div class="hidden">
<a class="hidden-logo" href="index.html"></a>
<label for="show-menu" class="show-menu thing">   </label>
</div>
Then you can display it and hide it whenever you wish.
.hidden {
display:flex;
justify-content: center;
background: #424242;
display:none;
}
#media screen and (max-width: 760px) {
.hidden {
display:flex;
}
}
.hidden-logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:23px;
background-size:50%;
width:175px;
display:block;
padding:5px;
}
Here is an example
https://jsfiddle.net/jrdkp7ph/2/
You can use jquery and add desired list dynamically
Do check code here for example: https://jsbin.com/zusunidupo/1/edit?css,js,output
Need to execute below code block every time when window resizes(in link provided executes on first load only)
if ($(window).width() < 760) {
$('<li><a class="logo" href="https://i.stack.imgur.com/1dcqW.png"><img border="0" src="https://i.stack.imgur.com/1dcqW.png" width="50" height="50"></a></li>').insertAfter($('li:eq(4)'))
}
else {
$("#menu").prepend('<li><a class="logo" href="https://i.stack.imgur.com/1dcqW.png"><img border="0" src="https://i.stack.imgur.com/1dcqW.png" width="50" height="50"></a></li>');
}
hey i think your html code many change just suggest improve
* {
margin: 0;
border: 0;
padding: 0;
}
body {
font-family: sans-serif;
margin: 5px;
background: #F1F6F8;
}
a {
font-weight: bold;
color: #3F5767;
text-decoration: none;
}
a:hover {
color: #524C56;
}
#wrapper {
max-width: 980px;
margin: 0 auto;
}
header {
width: 100%;
height: 100px;
top: 0;
left: 0;
}
/* Logo code can go here */
ul li a.logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:76px;
width:175px;
display:block;
padding:5px;
margin: 0 auto;
}
.logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:76px;
width:175px;
display:block;
padding:5px;
margin: 0 auto;
}
nav {
text-align: center;
}
li {
font-family: sans-serif;
font-size: 150%;
display: inline-block;
padding: 0 10px 0 10px;
}
nav ul li a {
color: #3F5767;
}
/* Start controls checkbox change button */
ul li a:hover + .hidden, .hidden:hover{ /* Maybe remove this */
display: block;
width: auto;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
.show-menu{
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
color: #3F5767;
background: #424242;
text-align: center;
padding: 3px o;
display: none;
}
.thing:before {
content: "Show Menu";
}
input[type=checkbox]:checked ~ .thing:before {
content: "Close Menu";
}
#media screen and (max-width: 760px) {
ul{position: static;
display: none;
}
ul li a.logo { display: none; }
li{
margin: 0 auto;
font-size: 100%;
padding: 0;
/*border-bottom: 2px solid #676767;*/
}
ul li, li a{
width: 100%;
font-size: 15px;
}
.show-menu{
display: block;
width: auto;
height: 30px;
padding: 3px 0 0 0;
}
}
/* End controls checkbox change button */
#media print {#ghostery-purple-box {display:none !important}}
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Coast Fm Tasmania</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<header>
<nav>
<input id="show-menu" role="button" type="checkbox">
<label for="show-menu" class="show-menu thing"> <a class="logo" href="index.html"></a>   </label>
<ul id="menu">
<li>
Home</li>
<li>Events</li>
<li>On-Air</li>
<li>Gallery</li>
<li><a class="logo" href="index.html"></a></li>
<li>Sport</li>
<li>The Team</li>
<li>Sponsors</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
Related
I am making a responsive navigation bar. When i am making it in mobile view with hamburger it is not working. I am using checkbox for this. When someone click the hamburger menu in mobile view the check box will checked and css of the check box with type checked will display it. Code is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<script src="./javascript.js"></script>
<title>Pricing Page</title>
</head>
<body>
<!-- Navigation -->
<nav>
<input type="checkbox" id="check">
<div class="logo">
<h3>Spenflo</h3>
</div>
<div class="menus">
<ul class='menu'>
<li> Pricing</li>
<li> About </li>
<li> Blog </li>
<li> Contact </li>
<li class="login"> Login </li>
<li class="get-started"> Get Started </li>
</ul>
</div>
<div class="signup">
<button><a class="login-btn" href="/">Login</a></button>
<button><a class="get_started-btn" href="/">Get Started</a></button>
</div>
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
</nav>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
#font-face {
font-family: "Satoshi";
src: url(./fonts/Satoshi-Regular.otf) format("opentype");
font-weight: normal;
}
#font-face {
font-family: "Satoshi";
src: url(./fonts/Satoshi-Bold.otf) format("opentype");
font-weight: bold;
}
#font-face {
font-family: "p22MackinacPro";
src: url(./fonts/P22MackinacPro-BoldItalic_11.otf) format("opentype");
font-style: italic;
}
nav {
position: relative;
font-family: 'Satoshi';
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
}
nav .logo {
color: #D53987;
margin-left: 20px;
cursor: pointer;
}
nav .menus {
margin-left: 10%;
}
nav .menus ul {
display: flex;
gap: 10px;
list-style: none;
}
a {
text-decoration: none;
color: black;
}
nav .menus ul li {
font-size: 18px;
line-height: 100%;
cursor: pointer;
}
nav .menus ul .login,
.get-started {
display: none;
}
nav .signup a {
text-decoration: none;
color: #000;
}
nav .signup button {
background-color: #000;
font-size: 18px;
width: 180px;
height: 72px;
border: none;
top: 0px;
cursor: pointer;
}
nav .signup button .login-btn {
cursor: pointer;
margin-right: 30px;
}
nav .signup button .get_started-btn {
color: #fff;
cursor: pointer;
}
nav .signup button:first-child {
background-color: white;
width: auto;
height: auto;
}
.checkbtn {
font-size: 30px;
color: #000;
float: right;
line-height: 80px;
margin-right: 10px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#media screen and (max-width: 768px) {
.checkbtn {
display: block;
}
nav .menus ul {
position: fixed;
width: 100%;
height: 100vh;
left: 100%;
top: 9%;
background-color: red;
bottom: 15%;
text-align: center;
transition: all .5s;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.5s;
}
nav .menus ul .login,
.get-started {
display: block;
}
nav .menus ul li {
width: 90%;
margin: 10px 0;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.24);
}
nav .signup {
display: none;
}
nav #check:checked~nav .menus ul {
left: 0%;
}
}
I tried everything to do this using only css but nothing is working at all
My website is working great on most browsers but for some reason Chrome is showing my navigation items outside of the header bar. I'm not sure which part of my CSS is at fault here and why it is being interpreted differently between browsers. Help would be appreciated. You need to look at it with screen size of 1100px or higher to see what I mean - lower than that and it turns into responsive navigation button.
Here's a link to show you: http://imgur.com/m5sVBww
body {
margin: 0;
line-height: 1.428;
background-color:#956396;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
float: right;
}
#navigation {
display: block;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation li {
display: inline-block;
float: left;
padding-right: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
color: #ffffff;
text-decoration: none;
}
.show-menu {
text-decoration: none;
color: #ffffff;
background: #956396;
text-align: center;
padding: 20px 10px;
border: 1px black solid;
border-radius: 10px;
}
.show-menu:hover {
background: #9b729b;
}
#extra {
background: #ffffff;
padding-top: 1em;
padding-bottom: 1em;
min-height: 2em;
color: white;
}
#extra2 {
background: #956396;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
display: block;
}
#hamburger {
display: inline-block;
position: relative;
top: 5px;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: white;
}
#media only screen and (max-width : 920px) {
#mobile-navigation-btn {
display: block;
position: relative;
top: 20px;
}
#navigation {
display: none;
width: 100%;
margin: 0;
padding: 0;
background-color:#956396;
margin-top: 28px;
padding-left: 35px;
padding-right: 35px;
}
/*Create vertical spacing*/
#navigation li {
margin-bottom: 1px;
}
/*Make dropdown links vertical*/
#navigation ul li {
display: block;
float: none;
margin:0;
padding:0;
}
/*Make all menu links full width*/
#navigation ul li, li a {
width: 100%;
}
#extra {
clear: both;
}
}
<head>
<meta charset="utf-8">
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async></script>
<title></title>
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div> Menu
</label>
</div>
<input type="checkbox" id="show-menu" role="button">
<div id="navigation">
<ul>
<li>Home</li>
<li>Customer Research</li>
<li>Business Improvement</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
<div id="content">
<div>
</body>
</html>
I have a footer menu I am creating for WordPress. I have my main navigation links then at the end I want a collapsing/expanding link for social icons. I have created both separately but do not know how to make them display on one line. Any help is appreciated.
Main Navigation:
<!DOCTYPE html>
<html>
<head>
<style>
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight:bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
</style>
</head>
<body>
<div id="footernav">
<li>Customer Care</li>
<li>Privacy Policy</li>
<li>Terms</li>
<li>Newsletter</li>
<li>Contact</li>
</div>
</body>
</html>
Expanding/Collapsing Social Link:
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
/*SOCIAL*/
.list {
display:none;
height:auto;
margin:0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
.hide:hover, .show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height:auto;
margin:0;
.hover:hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
/*END SOCIAL*/
</style>
<div class='social'>
Follow Us (+)
Follow Us (-)
<div class="list">
<p>
<a href="http://www.facebook.com" target= "_blank" ><img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'" ></a>
<a href="http://www.twitter.com" target= "_blank1" ><img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'" ></a>
<a href="http://www.instagram.com" target= "_blank2" ><img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'" ></a>
</p>
</div>
</div>
</body>
</html>
FIDDLE: http://jsfiddle.net/7j0nb4az/
First of all, you're missing the <ul> tag wrapped around your <li>'s inside the jsFiddle. Secondly, once you wrap the <li>'s with a <ul> tag, adding this CSS to your stylesheet will solve the issue:
#footernav ul {
padding: 0px;
display: inline-block;
}
Here's a working demo:
/*MAIN NAVIGATION*/
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
#footernav li a {
text-decoration: none;
}
#footernav ul {
padding: 0px;
display: inline-block;
vertical-align: top;
}
a#show {
vertical-align: top;
}
#footernav li:nth-child(5) {
margin-right: 0px;
}
a.hide {
margin-left: 15px;
}
/*END MAIN NAVIGATION*/
/*SOCIAL*/
.list {
display: none;
height: auto;
margin: 0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: block;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display: inline;
}
.hide:hover,
.show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height: auto;
margin: 0;
.hover: hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
<!DOCTYPE html>
<body>
<div id="footernav" class="footernav">
<ul>
<li>Customer Care
</li>
<li>Privacy Policy
</li>
<li>Terms
</li>
<li>Newsletter
</li>
<li>Contact
</li>
<ul>
<div class='social'> Follow Us (+)
Follow Us (-)
<div class="list" <a href="http://www.facebook.com" target="_blank">
<img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'">
</a>
<a href="http://www.twitter.com" target="_blank1">
<img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'">
</a>
<a href="http://www.instagram.com" target="_blank2">
<img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'">
</a>
</div>
I'm trying to make my header banner stretch / fit to the website's dimensions, however, I am unsure how to make this happen on every browser.
HTML5:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="text_h">
Welcome to KUBE Toy Library!
</span>
<span class="banner_h">
<img src="Images\Top_Banner.jpg" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Left_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
positon: relative;
width: 100%;
}
.text_h{
position: absolute;
color: white;
text-align: center;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
If your wondering why this is being created, this is for a school assessment task, and all content is fictious.
Try:
* {margin:0; padding: 0;}
.banner_h {display: block; width: 100%;}
.banner_h img {width:100%}
Check the result out in a fiddle.
My footer will not stay at the bottom of my page.
I tried the sticky footer trick, but no good.
Seems my footer has white space beneath it.
Adjusting height on it has done no good.
Here is the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<!-- <meta name="viewport" content="width=device-width; initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<link rel="stylesheet" type="text/css" href="style3.css" />
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script src="navigation.js"></script>
</head><body>
<div id="top">
<header>
<div id="topLeft">topleft</div>
<nav id="nav-wrap">
<ul id="nav">
<li>Home</li>
<li>Attendees<ul><li>Sub Menu</li><li>Sub Menu</li><li>Sub Menu</li><li>Sub Menu</li></ul></li>
<li>Exhibitors</li>
<li>Speakers</li>
<li>Program</li>
</ul>
</nav>
<div id="topRight">topright</div>
</header>
</div>
<div id="middle">
<div id="headerLeft"></div>
<div id="headerimage">
<img src="header-2013.jpg"/>
</div>
<div id="headerRight"></div>
<br style="clear: left;" />
</div>
<div id="pagewrap">
<div id="content">
<!-- <h3>To see the mobile navigation, narrow your browser window or check with a mobile device.</h3>
<p>Unholy is a new, upcoming raiding guild with goals of
successfully accomplishing Player versus Environment and Player versus Player
raiding content. If thou art seeking such guild then thou would consider joining
us on our quest to victory over the evils that lurk within the depths of
Karazhan and Zul'Aman. All are welcome that have experienced the foul beasts
that roam abroad the forsaken ground in the Outlands and whish to further
explore and cleanse such places. If this should be thy calling then we welcome
you to our quest for victory, For the Horde </p> -->
</div>
</div>
<footer>
<div id="footer">
footer
</div>
</footer>
</body></html>
And here is the CSS:
/************************************************************************************
GENERAL
*************************************************************************************/
html{
height:auto;
}
body {
font: .9em/150% Arial, Helvetica, sans-serif;
color: #666;
overflow-x:hidden;
/******extra Mike Clayton **/
margin: 0;
padding:0;
height:100%;
}
a {
text-decoration: none;
color: #39C;
}
h1, h2 {
line-height: 120%;
margin: 0 0 10px;
color: #000;
}
header {
content: " ";
display: table;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 100%;
max-width:650px;
margin: 0px auto;
/**Mike Clayton**/
min-height:100%;
height:100%;
}
#content {
clear: both;
border-top: solid 1px #ccc;
padding-top: 20px;
margin: 20px 0;
width:100%;
/**Mike clayton**/
/* padding-bottom:250px; */
padding-bottom:55%;
}
#top{
width:100%;
background-color:#002664;
clear:both;
}
#topLeft{
float:left;
background-color:#002664;
width:20%;
margin:0;
}
#topRight{
float:left;
background-color:#002664;
width:20%;
margin:0;
}
#middle{
width:100%;
background-color:#AD1B30;
overflow: hidden;
}
#headerLeft{
float:left;
background-color:#AD1B30;
width:20%;
margin:0;
}
#headerimage{
width:650px;
align:center;
margin:0 auto;
}
#headerimage img{
width:100%;
}
#headerRight{
float:left;
background-color:#AD1B30;
width:20%;
margin:0;
}
#footer{
/* background-color:#002664;
width:100%;
margin-top:-100;
height:150px; */
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color:#002664;
width:100%;
margin-top:-100;
}
/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
margin-top: 20px;
}
/* menu icon */
#menu-icon {
display: none; /* hide menu icon initially */
}
#nav,
#nav li {
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
float: left;
margin-right: 5px;
}
/* nav link */
#nav a {
padding: 4px 15px;
display: block;
color: #000;
background: #ecebeb;
}
#nav a:hover {
background: #f8f8f8;
}
/* nav dropdown */
#nav ul {
background: #fff;
padding: 2px;
position: absolute;
border: solid 1px #ccc;
display: none; /* hide dropdown */
width: 200px;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav li:hover > ul {
display: block; /* show dropdown on hover */
}
/************************************************************************************
MOBILE
*************************************************************************************/
#media screen and (max-width: 600px) {
/* nav-wrap */
#nav-wrap {
position: relative;
}
/* menu icon */
#menu-icon {
color: #000;
width: 42px;
height: 30px;
background: #ecebeb url(menu-icon.png) no-repeat 10px center;
padding: 8px 10px 0 42px;
cursor: pointer;
border: solid 1px #666;
display: block; /* show menu icon */
}
#menu-icon:hover {
background-color: #f8f8f8;
}
#menu-icon.active {
background-color: #bbb;
}
/* main nav */
#nav {
clear: both;
position: absolute;
top: 38px;
width: 160px;
z-index: 10000;
padding: 5px;
background: #f8f8f8;
border: solid 1px #999;
display: none; /* visibility will be toggled with jquery */
}
#nav li {
clear: both;
float: none;
margin: 5px 0 5px 10px;
}
#nav a,
#nav ul a {
font: inherit;
background: none;
display: inline;
padding: 0;
color: #666;
border: none;
}
#nav a:hover,
#nav ul a:hover {
background: none;
color: #000;
}
/* dropdown */
#nav ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
}
#nav ul li {
margin: 3px 0 3px 15px;
}
#headerimage {
display: none;
}
}
#media screen and (min-width: 600px) {
/* ensure #nav is visible on desktop version */
#nav {
display: block !important;
}
}
So, that last post from Kakarott worked.
Also, I used position:relative for my Media Query mobile dev and it made that same CSS work for my Mobile site.
So, for desktop and tablet, I'm using position:absolute and for mobile:relative.
FYI, I'm using a responsive design.
Check this
http://code.google.com/p/cleanstickyfooter/
and the best solution
http://www.cssstickyfooter.com/
Change your footer css to:
#footer{
clear: both;
position: absolute;
z-index: 10;
height: 3em;
bottom:0;
background-color:#002664;
width:100%;
}