We help IT Professionals succeed at work.

CSS Postioning

jrsnmedia
jrsnmedia asked
on
Hello -

I am trying to align center the bottom "footer", so its even with the rest of the page. I've tried a few things and nothing seems to get it to look correct. Was hoping someone could offer a suggestion.

HTML
 
<!DOCTYPE html>
<html lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" class="js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
	<title>Kings Club NYC - &quot;It's Good To Be&quot; Restaurant  - King Street New York City</title>
	<meta name="description" content="Kings Club NYC - &quot;It's Good To Be&quot; Restaurant  - King Street New York City">
	<META NAME="keywords" CONTENT="kings, club, nyc, street,york,city,king,restaurant,king street,good restaurant,kings club,nyc good restaurant,kings club nyc">
	<meta name="robots" content="index, follow, noodp">		
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Language" content="en">
	<meta http-equiv="imagetoolbar" content="no">
	<meta property="og:site_name" content="Kings Club NYC">
	<meta property="og:title" content="Kings Club NYC">
	<meta property="og:url" content="http://www.thekingny.com/">
	<meta property="og:type" content="website">
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="icon" href="images/favicon.gif" type="image/gif">
		
		<link rel="stylesheet" href="http://www.thekingny.com/css/html5.css" type="text" media="all">
		<link rel="stylesheet" href="http://www.thekingny.com/css/rtext.css" type="text" media="all">
		<link rel="stylesheet" href="http://www.thekingny.com/css/mainstyle.css" type="text" media="all">
		<link rel="stylesheet" href="http://www.thekingny.com/css/ipad.css" type="text" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">
	
	
<script type="text/javascript" src="http://www.thekingny.com/js/head_e52bb45d57e4773f3325fc71240757a3.js"></script>
	<script type="text/javascript" src="http://www.thekingny.com/js/oie4bqj.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Fondamento' rel='stylesheet' type='text/css'><script type="text/javascript">
	   	   <!--
	   	   	   try{Typekit.load();}catch(e){}
	   	   //-->
	   	   </script>

</head>
<body class="home">
<!--[if lte IE 6]><div id="ie6"><![endif]-->
<!--[if IE 7]><div id="ie7"><![endif]-->
<!--[if IE 8]><div id="ie8"><![endif]-->
<div id="outer-wrapper">

<header id="header" class="clearafter">
	<h1><a href="">Kings Club NYC</a></h1>
	<nav id="mainnav">
		<ul>
							<li><a href="#">Lunch/Dinner</a></li>
							<li><a href="#">Aperetivo</a></li>
							<li><a href="#">All Day Menu</a></li>
							<li><a href="#">History </a></li>
						    <li><a href="#">Gallery</a></li>
			               
		</ul>
	</nav>
</header>

<div id="home">
			<img src="http://www.thekingny.com/images/landing-bg.jpg" alt="" style="max-width: 2000px; max-height: 1333px;" height="1333" width="2000">	</div><nav id="footer">
	<ul class="clearafter">
		<li><a href="#">Press</a></li>
		<li><a href="#">Events</a></li>
		<li><a href="#">Opening Hours</a></li>
		<li><a href="#">Reservations</a></li>
		<li><a href="#">Directions</a></li>
		<li><a href="#">Contact</a></li>
					</ul>
</nav>
</div>
<!--[if lte IE 8]></div><![endif]-->
	<script type="text/javascript" src="http://www.thekingny.com/js/body_1b9f6feac9c5d6dceacc56829fec9a91.js"></script>


</body></html>

Open in new window


CSS
 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
body {
    line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}
nav ul {
    list-style:none;
}
button {
	font-family: inherit;
}
a img, :link img, :visited img {
	border: 0;
}
a:active, a:focus, input:active {
	outline: 0;
}
a:active, a:focus, input:focus {
	-moz-outline-style: none;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
strong, b {
	font-weight: bold;
}
em, i {
	font-style: italic;
}
blockquote, q {
    quotes:none;
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
    content:none;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
img {
	vertical-align: bottom; /*html5ness*/
}
/*Add to a container to fix light text on a dark bg*/
.lightondark,
.lightondark h1,
.lightondark h2,
.lightondark h3,
.lightondark h4,
.lightondark h5,
.lightondark h6,
.lightondark p,
.lightondark a {
	opacity: 0.99;
	-webkit-text-stroke:1px transparent; /*make it look nice in webkit*/
	-webkit-opacity: 1;
}
.clearing {
	clear: both;
}
.clear {
	clear: both;
	height: 0;
	overflow: hidden;
	display: block;
}
.clearafter:after {
    content: ".";
    display: block;
    height: 0;
	overflow: hidden;
    clear: both;
    visibility: hidden;
}
* html .clearafter {
	zoom: 1;
}
*:first-child+html .clearafter {
	zoom: 1;
}
* html .pngfix {
	behavior: url("/core/javascript/iepngfix/iepngfix.htc"); /*IE6 fix alpha transparency*/
}
* html {
	filter: expression(document.execCommand("BackgroundImageCache", false, true)); /*IE6 BG flicker*/
}
/* Never create an empty :hover, :active etc. declaration, please. Breaks the following */
* html body {
	behavior: url("/core/javascript/csshover.htc"); /*IE6 whatever:hover*/
}

.core-asset-pending {
	background: #CCC;
	color: #666;
}
	.core-asset-pending p {
		padding: 47% 7% 0% 7%;
		text-align: center;
		font-size: 1.2em;
	}

Open in new window


live page example http://bit.ly/v58qJ3
Comment
Watch Question

Top Expert 2013

Commented:
I don't see anything that pretains to centering the footer.

So add #footer{margin:auto} to the CSS.


Cd&

Author

Commented:
I apologize, it seems I pasted the wrong code


/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
  cursor: default;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/**
 * Minimal base styles.
 */

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

ol { list-style-type: decimal; }

small { font-size: 85%; }
strong, th { font-weight: bold; }

td { vertical-align: top; }

/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre {
 /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
 white-space: pre; white-space: pre-wrap; word-wrap: break-word;
 padding: 15px;
}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

.ie6 legend, .ie7 legend { margin-left: -7px; }

/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }

/* Make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

/* Bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }


*{
	/* Universal reset: */
	margin:0;
	padding:0;
}

/* stylesheet */

/* frame */

/* start layout */
html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #FFF;
}
#ie6, #ie7, #ie8 {
	height: 100%;
}
#outer-wrapper {
	font-family: Georgia, times, serif;
	font-size: 75%;
	min-height: 100%;
	color: #3F3F3F;
	position: relative;
	padding-bottom: 1px;
	overflow: hidden;
}
#ie6 #outer-wrapper {
	height: 100%;
}
#inner-wrapper {
	margin: 0 auto;
	width: 950px;
	padding: 40px 0 30px;
	margin-bottom: 1em;
}
.content {
}
/* end layout */
/* start header */
#header {
	min-width: 950px;
	padding: 30px 0 0;
	background: #000;
	font-family: 'Fondamento', cursive; 
}
	#header a {
		color: #7cb3b0;
	}
	#header h1 {
		width: 400px;
		height: 167px;
		margin: 0 auto 30px;
		background: transparent url(http://thekingny.com/images/logo.png) no-repeat 50% 0;
		text-align: center;
		font-variant: small-caps;
		text-transform: none;
		text-indent: -1000em;
	}
		#header h1 a {
			display: block;
			height: 28px;
		}
	#mainnav {
		position: relative;
		left: 50%;
		float: left;

		padding: 0;
		margin: 0 0 20px;
		overflow: visible;
	}
		#mainnav ul {
			float: left;
			display: inline;
			list-style: none;
			padding: 0;
			position: relative;
			left: -50%;
			font-size: 1.41667em;
		}
			#mainnav li {
				float: left;
				padding: 0;
				margin: 0 23px;
				font-variant: small-caps;
				text-transform: capitalize;
			}
				#mainnav li a {
					display: block;
					white-space: nowrap;
					float: left;
				}
				#mainnav li.active a,
				#mainnav li a:hover {
	color: #FFCC00;
				}

/* end header */
/* start footer */
#footer {
	margin:auto;
	min-width: 950px;
	background: #000;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	padding: 15px 0;
	font-family: 'Fondamento', cursive;
	z-index: 1000;
	color: #C6C6C6;
}
#ie6 #footer {
	position: absolute;
}
	#footer a {
		color: #C6C6C6;
	}
	#footer ul {
		width: 1000px;
		margin: 0 auto;
	}
		#footer li {
			float: left;
			display: inline;
			padding: 0;
			margin: 0 0 0 25px;
			text-transform: uppercase;
		}
		#footer li.times {
			float: right;
			margin: 0 25px 0 0;
		}
		#footer li.notice {
			
		}
			#footer li a {
				display: inline-block;
			}
			#footer li.active a,
			#footer li a:hover {
	color: #FFCC00;
			}
			#footer li.notice a {
				color: #A17B2C;
			}
			#footer li.notice a:hover {
				text-decoration: underline;
			}
			#footer li span {
				border-left: 1px solid #C6C6C6;
				padding-left: 15px;
				margin-left: 15px;
				display: inline-block;
			}
	#footer p {
		text-align: center;
		text-transform: uppercase;
		font-size: 1.0833em;
	}
		#footer p strong {
			color: #A17B2C;
		}
/* end footer */


/* home page */
body.home {
	background: #000;
}
	.rgba body.home #header,
	.rgba body.home #footer {
		background: RGBA(0,0,0,0.7);
	}
	body.home #header {
		position: relative;
		z-index: 2;
	}
#home {
	width: 100%;
	height: 100%;
	min-width: 950px;
	background: #111;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
}
	#home img {
		height: auto;
		width: 100%;
		min-width: 800px;
/*		min-height: 100%;*/
	}
/* end home */

Open in new window

Top Expert 2013

Commented:
position: fixed;

means all other posioning has to be ignored.  you are telling the browser where you want it and to keep it there no matter what else occurs.


Cd&
Top Expert 2013
Commented:
One possible fix is to give footer 100% width then put the actual contents in a div inside footer and position the div with whatever width it needs and then use margin:auto to center it.



Cd&

Author

Commented:
I will be using your second suggestion of adding the contents into a DIV and using the 100%, thanks
Top Expert 2013

Commented:
Hmmm...  fast response once the correct code was posted, with a solution you can use and graded a B?

I'll have to remember that in the future.


Cd&

Author

Commented:
Hello Cobo -

I ended up using your suggestion along with some other things I found online while I posted this questions.  Changes were made to the stylesheet, I changed

#footer li
I removed float: left;

#footer ul
I added text-align: center;