I am aware of how to generally do a simple float left and float right footer to make to areas where I could easily have info. But basically I used the HTML5 Boilerplate and I believe when I attempt to split my footer and what not, it doesn't work due to previous styles applied. Now I am not a CSS expert so I could do with some little help, to just tell me how to get this basically functionality into my footer. Where its split 2cols, left align and right align.
HTML and CSS below. Thanks in advance guys!
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head id="Head1"><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>
Upper Control Limit
</title><meta name="description" /><meta name="author" /><meta name="viewport" content="width=device-width" /><link rel="stylesheet" href="css/style.css" />
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> Upgrade to a different browser or install Google Chrome Frame to experience this site
in all its glory.</p><![endif]-->
<div id="header-container">
<header class="wrapper clearfix">
<h1 id="title">Upper Control Limit</h1>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
<div id="main-container">
<form method="post" action="results.aspx?rows=1&cols=1" id="Form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjEwNDQyMTMxMw9kFgJmD2QWAgIDD2QWBgIFDw8WBB4IQ3NzQ2xhc3MFB0NvbEhlYWQeBF8hU0ICAmRkAgYPDxYEHwAFB1Jvd0hlYWQfAQICZGQCBw8PFgQfAAUJZ3JpZEJveGVzHwECAmRkZFJMwj+M1MRZQlpIMrfmxl1wwizJXzxaXt3WPYuj38Ui" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAU3pTMHOdDohz552i1I2Sebj31ljtDmerW1aPkEMZ51g8/Ho+MRtff8p07c9TjAQNmPZdj/gKuoitSwpD5a3CzSRHT3M0ARnCVeHCgDPQCHReQQJ8C8qTnXt96uJnOGYcQYMDuNwHVzarHWwfsDZ3nC" />
</div>
<div id="main" class="clearfix"><input type="submit" name="ctl00$btnCalc" value="Calculate" id="btnCalc" class="btn" /><input name="ctl00$txtrow_0_col_1" type="text" value="Col 1" id="txtrow_0_col_1" class="ColHead" /><input name="ctl00$txtrow_1_col_0" type="text" value="Series 1" id="txtrow_1_col_0" class="RowHead" /><input name="ctl00$txtrow_1_col_1" type="text" id="txtrow_1_col_1" class="gridBoxes" /></div></form>
</div> <!-- #main-container -->
<div id="footer-container">
<footer class="wrapper">
<h3 class="left">Copyright 2012 Data Exchange LTD</h3>
<h3 class="right">img here</h3>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/script.js"></script>
<script>
var _gaq = [['_setAccount', 'UA-17073042-4'], ['_trackPageview']];
(function (d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s)
} (document, 'script'));
</script>
</body>
</html>
CSS:
/* =============================================================================
HTML5 Boilerplate CSS: h5bp.com/css
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* ===== Initializr Styles =====================================================
Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
========================================================================== */
body{ font:16px/26px Helvetica, Helvetica Neue, Arial; }
.wrapper{
width:90%;
margin:0 5%;
}
/* ===================
ALL: Blue Theme
=================== */
#header-container{ border-bottom: 20px solid #22558b; }
#footer-container{ border-top: 20px solid #22558b; }
#main aside { border-top: 20px solid #22558b; }
#header-container,
#footer-container,
#main aside{
background:#2c6cb1;
}
#title{ color:white; }
::-moz-selection { background: #2c6cb1; color: #fff; text-shadow: none; }
::selection { background: #2c6cb1; color: #fff; text-shadow: none; }
/* ==============
MOBILE: Menu
============== */
nav a{
display:block;
margin-bottom:10px;
padding:15px 0;
background:#22558b;
color:white;
text-align:center;
text-decoration:none;
font-weight:bold;
}
nav a:hover, nav a:visited{
color:white;
}
nav a:hover{
text-decoration:underline;
}
/* ==============
MOBILE: Main
============== */
#main{
padding:30px 0;
}
#main article h1{
font-size:2em;
}
#main aside{
color:white;
padding:0px 5% 10px;
}
#footer-container footer{
color:white;
padding:20px 0;
clear:both;
}
/* ===============
ALL: IE Fixes
=============== */
.ie7 #title{ padding-top:20px; }
/* ===== Primary Styles ========================================================
Author: Christopher Leah of Happy Webs LTD - 07/2012
========================================================================== */
.btn{clear:left;float:left; width:79px; margin-left:5px; margin-bottom:2px;}
.ColHead{float:left; width:50px; margin-left:5px; background-color:#22558B;color:#ffffff;margin-bottom:2px;}
.RowHead{clear:left;float:left; width:75px; margin-left:5px;background-color:#2C6CB1;color:#ffffff;margin-bottom:2px;}
.gridBoxes{float:left; width:50px; margin-left:5px; margin-bottom:2px;}
.graph{margin-top:10px;float:left;}
h3.left { float: left; }
h3.right { float: right;}
/* =============================================================================
Media Queries
========================================================================== */
#media only screen and (min-width: 480px) {
/* ====================
INTERMEDIATE: Menu
==================== */
nav a{
float:left;
width:27%;
margin:0 1.7%;
padding:25px 2%;
margin-bottom:0;
}
nav li:first-child a{ margin-left:0; }
nav li:last-child a{ margin-right:0; }
/* ========================
INTERMEDIATE: IE Fixes
======================== */
nav ul li{
display:inline;
}
.oldie nav a{
margin:0 0.7%;
}
}
#media only screen and (min-width: 768px) {
/* ====================
WIDE: CSS3 Effects
==================== */
#header-container,
#main aside{
-webkit-box-shadow:0 5px 10px #aaa;
-moz-box-shadow:0 5px 10px #aaa;
box-shadow:0 5px 10px #aaa;
}
/* ============
WIDE: Menu
============ */
#title{
float:left;
}
nav{
float:right;
width:38%;
}
/* ============
WIDE: Main
============ */
#main article{
float:left;
width:57%;
}
#main aside{
float:right;
width:28%;
}
}
#media only screen and (min-width: 1140px) {
/* ===============
Maximal Width
=============== */
.wrapper{
width:1026px; /* 1140px - 10% for margins */
margin:0 auto;
}
}
/* =============================================================================
Non-Semantic Helper Classes
========================================================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* =============================================================================
Print Styles
========================================================================== */
#media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
#page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
What brains911 said will help, but I would also suggest including a clearfix in the <footer class="wrapper"> also.
So your code would look like this:
<footer class="wrapper clearfix">
...
</footer>
Let me know if that doesn't make sense.
h3.left { float: left; } and
h3.right { float: right;} look like they should be doing the job. You could try adding width:50% to each of them.
Can you use firebug to toggle off the other styles that are affecting the h3 elements and see if that is indeed the problem?
Related
enter image description hereSorry, another newb. requiring help, please??
I have created a site (first site for 15 years) and there are a couple of things i'd like to know but the first and most important one is, why does my site header not show on iPhones?
Android showing header
iPhone without header
I have added the viewport meta tag but it didn't change anything.
Another thing l have read on here is adding #media but it didn't say where to add it so l tried a few places without success.
Can someone help me please?
Test page code
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400,300,700" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body class="left-sidebar">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<div id="logo">
<h2>Dress Up Leeds Ltd</h2>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li>home</li>
<li>store</li>
<li class="active">contact us</li>
<li>about</li>
</ul>
</nav>
</div>
</div>
style.css for header
header
{
margin-bottom: 2em;
line-height: 1.7em;
}
header h2
{
font-size: 2.5em;
}
header .byline
{
display: block;
margin: 0.5em 0 0 0;
padding: 0 0 0.5em 0;
text-transform: uppercase;
font-size: 1.4em;
}
p {
font-size: 1.1em;
}
and
#header
{
position: relative;
background: #FFF;
}
#header .container
{
position: relative;
padding: 4em 0em;
}
style-mobile.css for header
header
{
}
header h2
{
font-size: 1.6em;
}
header .byline
{
font-size: 1em;
}
and
#header
{
display: none;
}
#logo
{
display: none;
}
#nav
{
display: none;
}
style-mobile css the whole file
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
body,input,textarea,select
{
line-height: 1.75em;
font-size: 11pt;
letter-spacing: 0;
}
body
{
padding-top: 44px;
}
h2, h3, h4, h5, h6
{
font-size: 1.5em;
}
section,
article
{
clear: both;
margin: 2em 0 2em 0 !important;
}
section > :first-child,
article > :first-child
{
margin-top: 0 !important;
}
section:first-child,
article:first-child
{
margin-top: 0 !important;
}
.container
{
padding: 0em 1em;
}
.button
{
display: block;
width: 100%;
text-align: center;
}
header
{
}
header h2
{
font-size: 1.6em;
}
header .byline
{
font-size: 1em;
}
/*********************************************************************************/
/* UI */
/*********************************************************************************/
#titleBar
{
background: #202020 url(images/img01.jpg) repeat;
}
#titleBar .title
{
display: block;
color: #fff;
text-align: center;
line-height: 44px;
}
#titleBar .toggle
{
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 60px;
}
#titleBar .toggle:after
{
content: '';
display: block;
width: 20px;
height: 12px;
position: absolute;
left: 10px;
top: 15px;
background: url('images/toggle.svg') 0px 0px no-repeat;
opacity: 0.5;
}
#titleBar .toggle:active:after
{
opacity: 0.75;
}
#navPanel
{
background: #202020 url(images/img01.jpg) repeat;
box-shadow: inset -10px 0px 20px 0px rgba(0,0,0,0.5);
}
#navPanel .link
{
display: block;
color: #888;
text-decoration: none;
height: 44px;
line-height: 44px;
border-top: solid 1px rgba(255,255,255,0.1);
letter-spacing: 1px;
text-transform: uppercase;
padding: 0 1em 0 1em;
}
#navPanel .link:first-child
{
border-top: 0;
}
#navPanel .link.depth-0
{
color: #fff;
}
#navPanel .indent-1 { display: inline-block; width: 1em; }
#navPanel .indent-2 { display: inline-block; width: 2em; }
#navPanel .indent-3 { display: inline-block; width: 3em; }
#navPanel .indent-4 { display: inline-block; width: 4em; }
#navPanel .indent-5 { display: inline-block; width: 5em; }
#navPanel .depth-0 { color: #fff; }
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header
{
display: block;
}
#logo
{
display: block;
}
#nav
{
display: block;
}
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
padding: 6em 0em;
}
/*********************************************************************************/
/* Main */
/*********************************************************************************/
#page
{
padding: 2em 0em 2em 0em;
}
#main
{
margin-top: 3em;
padding-top: 0em;
border-top: none;
}
.homepage #main
{
margin-top: 3em;
padding-top: 3em;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer
{
padding: 0em 0em 2em 0em;
}
/*********************************************************************************/
/* Featured */
/*********************************************************************************/
#featured
{
position: relative;
padding: 4em 0em 2em 0em;
}
#featured .divider
{
padding: 2em 0em 0em 0em;
}
#featured .left
{
float: none;
width: 100%;
}
Try this:
#header {
display: block;
}
#logo {
display: block;
}
#nav {
display: block;
}
display: none hides elements, so your css is hiding your header. The viewport tag makes no difference in whether or not the header is hidden. I am missing context here, but your css looks like it is very intentionally hiding your header, so I am guessing it was written by someone else? If so, that person may have written it with the intent of applying these css rules for one screen size and applying a different set of rules for another screen size, but perhaps they left the task unfinished, or we are only seeing a small part of the css here. If that is the case, then you should look into using media queries to apply different sets of rules for different screen sizes.
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>
When the screen size is 1365px and less I set body {font-size: 85.333333331%;} so that the header, main, footer elements have 16px font-size. When you open a browser's developer tools you see that the header and div.container nested inside the header really have 16px font-size ... so far so good. h1#logo nested inside the div.container has a font-size: 0.48em declaration. However, when I check the computed tab in google chrome I see that the actual font-size is 9px, but 16px * 0.48 = 7.68px, so why am I getting a different value there? This error breaks my entire header which leads to the elements not being properly vertically aligned. Thanks for your help.
/* general */
body {
margin: 0;
font: 100% "Open Sans", sans-serif;
color: #7f7e7d;
}
header, main, footer {
font-size: 1.171875em; /* 18.75px / 16px */
}
h1, h2, h3, h4, p, blockquote, figure, ol, ul {
margin: 0;
padding: 0;
}
main {
display: block;
}
h2 {
font-size: 3.3333333333em; /* 62.5px / 18.75px */
font-weight: 400;
}
h3 {
font-size: 1.5557333333em; /* 29.17px / 18.75px */
margin: 1.1733333333em 0; /* 22px / 18.75px */
font-weight: 400;
}
p {
font-weight: 300;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
border: 0;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.menu {
list-style: none;
}
.menu > li {
float: left;
}
.hide {
display: none;
}
.cf:before, .cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
/* header */
header {
background: #000;
color: #ccc;
font-weight: 300;
}
header .container {
position: relative; /* kvoli jazykovemu menu, ktore bude absolute */
z-index: 1;
}
/* logo */
#logo {
float: left;
font-size: 0.48em; /* 9px / 18.75px */
font-weight: inherit;
}
#logo a {
display: block;
text-transform: uppercase;
}
.logoPic {
display: inline-block;
text-indent: -9999px;
background: url(../img/logo/logo.png) no-repeat left center;
width: 148px; /* logo width */
line-height: 7.6666666666666666666666666666667em; /* 69px / 9px */
padding-right: 18px; /* priestor pre lomitko */
position: relative;
}
.logoPic::after {
content: "/";
position: absolute;
text-indent: 0;
right: 3px;
font-size: 40px; /* logo zostane stale rovnako velke, preto fixna velkost pre lomitko */
color: #ffcc00;
}
/* navigation */
nav {
float: right;
}
nav a {
display: block;
}
#nav > li > a {
line-height: 3.68em; /* 69px / 18.75px */
}
#nav > li {
position: relative;
margin-right: 1.2266666666666666666666666666667em; /* 23px / 18.75px */
}
#nav > li:last-child {
margin-right: 0;
}
#nav > li:hover:not(.sub) > a {
color: #bf9900;
}
#nav > li.sub:hover > a::before {
content: "";
position: absolute;
width: 60%;
margin-left: 20%;
margin-right: 20%;
height: 0.26666666666666666666666666666667em; /* 5px / 18.75px */
background: #ffcc00;
}
#nav > li.sub:hover .submenu {
visibility: visible;
}
/* navigation submenu */
.submenu {
position: absolute;
top: 3.7866666666666666666666666666667em; /* 71px / 18.75px */
left: -1.0666666666666666666666666666667em; /* 20px / 18.75px */
background: #000;
list-style-type: none;
visibility: hidden;
transition: visibility .15s;
}
.submenu a {
padding: 0.55626666666666666666666666666667em 0.67866666666666666666666666666667em; /* 10.43px / 18.75px | 12.725px / 18.75px */
}
.submenu li:hover {
color: #bf9900;
}
/* languages */
#languages {
position: absolute;
right: -9.2266666667em; /* 173px / 18.75px */
}
#languages a {
display: inline-block;
line-height: 3.68em; /* 69px / 18.75px */
}
#languages li::after {
content: "/";
padding: 0 0.16em; /* 3px / 18.75px */
}
#languages li:last-child::after {
content: "";
padding-right: 0;
}
#languages li:hover a {
color: #bf9900;
}
/* media queries */
#media (max-width: 1365px) {
body {
font-size: 85.333333331%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<div class="container cf">
<h1 id="logo">
<a href="#">
<span class="logoPic">Marek Petrik</span>Professional Photographer
</a>
</h1>
<nav>
<ul id="nav" class="menu cf">
<li>O mne</li>
<li>Služby</li>
<li class="sub">Portfólio
<ul class="submenu ">
<li>Svadba</li>
<li>Modeling</li>
<li>Príležitostné</li>
<li>Architektúra</li>
<li>Príroda</li>
<li>Deti</li>
</ul>
</li>
<li>Referencie</li>
<li>Cenník</li>
<li>Kontakt</li>
</ul>
</nav>
<ul id="languages" class="menu">
<li>SK</li>
<li>EN</li>
<li>DE</li>
</ul>
</div>
</header>
</body>
</html>
em value will be related to it's immediate container otherwise known as the parent. I think you'll probably want to use rem which is always related to the font-size of the <html> or what's called the document root.
In this Snippet, the em are rem. There's two buttons +/- which will modify the font-size of document root.
SNIPPET
$('#in1, #in2').on('click', function(e) {
var cur = $('#hook').css('font-size');
var res;
var mod = $(this).data('v');
res = parseFloat(cur) + parseFloat(mod);
$('#out1').val(res);
$('#hook').css('font-size', res);
});
/* general */
html {
font-size: 16px;
}
body {
margin: 0;
font: 100%"Open Sans", sans-serif;
color: #7f7e7d;
}
header,
main,
footer {
font-size: 1.171875rem;
/* 18.75px / 16px */
}
h1,
h2,
h3,
h4,
p,
blockquote,
figure,
ol,
ul {
margin: 0;
padding: 0;
}
main {
display: block;
}
h1 {
font-size: 4rem;
}
h2 {
font-size: 3.3333333333rem;
/* 62.5px / 18.75px */
font-weight: 400;
}
h3 {
font-size: 1.5557333333rem;
/* 29.17px / 18.75px */
margin: 1.1733333333rem 0;
/* 22px / 18.75px */
font-weight: 400;
}
p {
font-weight: 300;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
border: 0;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.menu {
list-style: none;
}
.menu > li {
float: left;
}
.hide {
display: none;
}
.cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
/* header */
header {
background: #000;
color: #ccc;
font-weight: 300;
}
header .container {
position: relative;
/* kvoli jazykovemu menu, ktore bude absolute */
z-index: 1;
}
/* logo */
#logo {
float: left;
font-size: 0.48rem;
/* 9px / 18.75px */
font-weight: inherit;
}
#logo a {
display: block;
text-transform: uppercase;
}
.logoPic {
display: inline-block;
text-indent: -9999px;
background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) left center no-repeat contain;
width: 148px;
/* logo width */
line-height: 7.6666666666666666666666666666667rem;
/* 69px / 9px */
padding-right: 18px;
/* priestor pre lomitko */
position: relative;
}
.logoPic::after {
content: "/";
position: absolute;
text-indent: 0;
right: 3px;
font-size: 40px;
/* logo zostane stale rovnako velke, preto fixna velkost pre lomitko */
color: #ffcc00;
}
/* navigation */
nav {
float: right;
}
nav a {
display: block;
}
#nav > li > a {
line-height: 3.68rem;
/* 69px / 18.75px */
}
#nav > li {
position: relative;
margin-right: 1.2266666666666666666666666666667rem;
/* 23px / 18.75px */
}
#nav > li:last-child {
margin-right: 0;
}
#nav > li:hover:not(.sub) > a {
color: #bf9900;
}
#nav > li.sub:hover > a::before {
content: "";
position: absolute;
width: 60%;
margin-left: 20%;
margin-right: 20%;
height: 0.26666666666666666666666666666667rem;
/* 5px / 18.75px */
background: #ffcc00;
}
#nav > li.sub:hover .submenu {
visibility: visible;
}
/* navigation submenu */
.submenu {
position: absolute;
top: 3.7866666666666666666666666666667rem;
/* 71px / 18.75px */
left: -1.0666666666666666666666666666667rem;
/* 20px / 18.75px */
background: #000;
list-style-type: none;
visibility: hidden;
transition: visibility .15s;
}
.submenu a {
padding: 0.55626666666666666666666666666667rem 0.67866666666666666666666666666667rem;
/* 10.43px / 18.75px | 12.725px / 18.75px */
}
.submenu li:hover {
color: #bf9900;
}
/* languages */
#languages {
position: absolute;
right: -9.2266666667rem;
/* 173px / 18.75px */
}
#languages a {
display: inline-block;
line-height: 3.68rem;
/* 69px / 18.75px */
}
#languages li::after {
content: "/";
padding: 0 0.16rem;
/* 3px / 18.75px */
}
#languages li:last-child::after {
content: "";
padding-right: 0;
}
#languages li:hover a {
color: #bf9900;
}
/* media queries */
#media (max-width: 1365px) {
body {
font-size: 85.333333331%;
}
}
#fixed {
position: fixed;
top: 10px;
max-width: 35ex;
margin-bottom: 20px;
z-index: 80;
}
#in1,
#in2,
#out1 {
position: fixed;
top: 10px;
max-width: 3.5ex;
}
#in2 {
left: 10.5ex;
}
#out1 {
left: 3ex;
z-index:11111;
font-size:18px;
color: black;
text-align: center;
}
#out1::after { content:'px' }
<!DOCTYPE html>
<html id='hook'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header id='fixed'>
<button id='in1' data-v='1'>+</button>
<output id='out1'></output>
<button id='in2' data-v='-1'>-</button>
</header>
<br/>
<br/>
<br/>
<header>
<div class="container cf">
<h1 id="logo">
<a href="#">
<span class="logoPic">Marek Petrik</span>Professional Photographer
</a>
</h1>
<nav>
<ul id="nav" class="menu cf">
<li>O mne
</li>
<li>Služby
</li>
<li class="sub">Portfólio
<ul class="submenu ">
<li>Svadba
</li>
<li>Modeling
</li>
<li>Príležitostné
</li>
<li>Architektúra
</li>
<li>Príroda
</li>
<li>Deti
</li>
</ul>
</li>
<li>Referencie
</li>
<li>Cenník
</li>
<li>Kontakt
</li>
</ul>
</nav>
<ul id="languages" class="menu">
<li>SK
</li>
<li>EN
</li>
<li>DE
</li>
</ul>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
Use vw(viewport width) it resizes the font according to window size.
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
https://jsfiddle.net/dolphine/uj50trfn/
How can I center this search field, by adding to the id #search?
I have tried to add both margin: 0 auto; and left: 50%; to #search, but neither works.
This is a good read... How To Center Anything With CSS
In your case just add width:265px;margin:auto and remove display:inline-block in #search.
Demo: http://codepen.io/anon/pen/ojbbmL
One solution is to add a container for search and using text-align: center:
#charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
body {
background: #61646d;
color: #000;
font: 14px/1.5em"Open Sans", sans-serif;
margin: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
line-height: 1.5em;
margin: 0;
outline: none;
padding: 0;
-webkit-appearance: none;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ---------- SEARCH ---------- */
#search {
background: #42454e;
border-radius: 3px;
display: inline-block;
padding: 7px;
}
#search input {
float: left;
}
#search input[type="search"],
#search input[type="submit"] {
border-radius: 3px;
font-size: 12px;
}
#search input[type="search"] {
background: #fff;
color: #42454e;
min-width: 184px;
padding: 6px 8px;
}
#search input[type="submit"] {
background: #1bba9a;
color: #fff;
font-weight: bold;
margin-left: 7px;
padding: 6px 10px;
}
#search input[type="submit"]:hover {
background: #189e83;
}
#search input[type="search"]::-webkit-input-placeholder {
color: #42454e;
}
#search input[type="search"]:-moz-placeholder {
color: #42454e;
}
#search input[type="search"]:-ms-input-placeholder {
color: #42454e;
}
.searchCont {
text-align: center;
}
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Search</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="searchCont">
<div id="search">
<form action="javascript:void(0);" method="GET">
<fieldset class="clearfix">
<input type="search" name="search" value="What are you looking for?" onBlur="if(this.value=='')this.value='What are you looking for?'" onFocus="if(this.value=='What are you looking for?')this.value='' ">
<!-- JS because of IE support; better: placeholder="What are you looking for?" -->
<input type="submit" value="Search" class="button">
</fieldset>
</form>
</div>
<!-- end search -->
</div>
</body>
</html>
You just need to add a <div id="container"> before <div id="search"> , like below:
HTML:
<div id="container">
<div id="search">
<form action="javascript:void(0);" method="GET">
// same line of codes
</form>
</div> <!-- end search -->
</div> <!-- end container -->
And just add in css file the below code:
CSS:
#container{
width: 100%;
text-align: center;
}
Working code snippets:
#charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
body {
background: #61646d;
color: #000;
font: 14px/1.5em"Open Sans", sans-serif;
margin: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
line-height: 1.5em;
margin: 0;
outline: none;
padding: 0;
-webkit-appearance: none;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
#container {
width: 100%;
text-align: center;
}
/* ---------- SEARCH ---------- */
#search {
background: #42454e;
border-radius: 3px;
display: inline-block;
padding: 7px;
margin: 0 auto;
}
#search input {
float: left;
}
#search input[type="search"],
#search input[type="submit"] {
border-radius: 3px;
font-size: 12px;
}
#search input[type="search"] {
background: #fff;
color: #42454e;
min-width: 184px;
padding: 6px 8px;
}
#search input[type="submit"] {
background: #1bba9a;
color: #fff;
font-weight: bold;
margin-left: 7px;
padding: 6px 10px;
}
#search input[type="submit"]:hover {
background: #189e83;
}
#search input[type="search"]::-webkit-input-placeholder {
color: #42454e;
}
#search input[type="search"]:-moz-placeholder {
color: #42454e;
}
#search input[type="search"]:-ms-input-placeholder {
color: #42454e;
}
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Search</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="search">
<form action="javascript:void(0);" method="GET">
<fieldset class="clearfix">
<input type="search" name="search" value="What are you looking for?" onBlur="if(this.value=='')this.value='What are you looking for?'" onFocus="if(this.value=='What are you looking for?')this.value='' ">
<!-- JS because of IE support; better: placeholder="What are you looking for?" -->
<input type="submit" value="Search" class="button">
</fieldset>
</form>
</div>
<!-- end search -->
</div>
<!-- end container -->
</body>
</html>
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%;
}