penders
msg:4414541 | 9:14 pm on Feb 5, 2012 (gmt 0) |
width:1000;
text-align-center; |
|
Should be:
width:100px;
text-align: center;
I'm not saying this will solve your problem, but it's a start.
|
Marshall
msg:4414543 | 9:37 pm on Feb 5, 2012 (gmt 0) |
Are you referring to a sticky footer?
Marshall
|
omegaone
msg:4414548 | 9:50 pm on Feb 5, 2012 (gmt 0) |
Maybe? Just want it to stay at the bottom but only cover the size of the wrapper and stay aligned properly no matter the amount of text.
|
lucy24
msg:4414566 | 11:12 pm on Feb 5, 2012 (gmt 0) |
We'd need to see a bit of the html that uses the CSS. If you want the footer to be no bigger than the wrapper, it needs to be inside the wrapper.
text-align-center;
float: left; |
|
Not too sure about this.
|
Marshall
msg:4414571 | 12:08 am on Feb 6, 2012 (gmt 0) |
omegaone,
I sent you a sticky mail with a link to a site with a sticky footer. I think it what you want.
Marshall
|
omegaone
msg:4414572 | 12:09 am on Feb 6, 2012 (gmt 0) |
Copied out the structure of the webpage below.
<!doctype html>
<head>
<link href="ie.css" media="screen" rel="stylesheet" type="text/css">
<link href="default.css" media="screen" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8">
</head>
<header>
<span id="siteName"><a href="./"><span></span></a></span>
<span id="siteTagline"></span>
<center><img src="images/header.jpg" alt="" height="80" width="500"><center>
</header>
<!-- / header -->
<!-- begin nav -->
<div id="nav">
<div class="art-bar art-nav">
<div id="navigation" class="menu-menu-container">
Nav ul listing etc
</div>
<!-- end nav -->
<!-- Content -->
<section id="pageContent">
<article>
</article>
</section>
<!-- footer -->
<div id="footer">
</div>
<!-- footer -->
</div><!-- wrapper -->
|
Marshall
msg:4414574 | 12:21 am on Feb 6, 2012 (gmt 0) |
Here's the CSS and HTML I use for the sticky footer. Obvious some measurements will have to be adjusted to fit you needs.
CSS
<style type="text/css">
/* STICKY FOOTER CSS */
#sticky_navigation {
min-width: 600px;
position: relative; /*this you need on your footer, position: relative;*/
}
#sticky_container {
min-width: 600px;
position: relative; /*this you need on your footer, position: relative;*/
}
/*IE6 hack for min-width... skipped*/
#sticky_container {
min-height: 100%; /*100%; height model again*/
/*font: normal 1em/1.5em arial, helvetica, sans-serif;*/
}
* html #sticky_container {
height: 100%; /*IE6*/
}
/*here's footer:*/
#sticky_navigation {
width: 100%;
background: url('../images/clear_bg.gif');
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1000;
}
/*IE6 and below don't understand position: fixed... if you need to support them, you'll need this... does NOT work on browsers who have Javascript turned off!*/
* html #sticky_navigation {
position: absolute;
width: 100%;/*IE5.5*/
bottom: 0;
left: 0;
overflow: visible; /*earlier had overflow: hidden on various things... you might not need this line*/
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}/*that was the CSS Expression for position: fixed at the bottom of the page. */
/*the rest is my menu inside.*/
#sticky_navigation #sticky_navmenu {
margin: 0 auto;
position: relative;
z-index: 10;
width: 590px;
background: url('../images/clear_bg.gif');
text-align: center;
color: #009;
}
</style>
HTML
<body>
<!-- BEGIN STICKY FOOTER - PLACE IMMEDIATELY BELOW BODY TAG -->
<div id="sticky_navigation">
<div id="sticky_navmenu">
<!-- YOUR NAVIGATION -->
</div>
</div>
<!-- END STICKY FOOTER -->
Marshall
|
omegaone
msg:4414579 | 1:16 am on Feb 6, 2012 (gmt 0) |
Hi Marshell was not after the navigation but wanting something similar to your footerwrap/content thing at the bottom of the page itself? (Unless that's it?)
|
Marshall
msg:4414595 | 3:33 am on Feb 6, 2012 (gmt 0) |
omegaone,
What I posted above is the CSS and HTML for the footer in the link I sent you. I thought I would share it with the thread. You should be able to copy and past what I posted and test it in a page, adjusting it to your needs.
Marshall
|
alt131
msg:4415130 | 6:13 pm on Feb 7, 2012 (gmt 0) |
Hi omegaone and welcome to WebmasterWorld :)
Best not to go off-forum, so Marshall thanks for providing the code. Always interesting to see how others decide to deal with sticky footer's - there are so many different approaches to dealing with them depending on your coding preferences.
Marshall this is incidental given the issue is slightly different here and you've already got a working solution, but it crossed my mind you might enjoy Paul_o_b's summary of issues in Sticky Footer [webmasterworld.com] if you missed it last year.
|
Marshall
msg:4415160 | 7:16 pm on Feb 7, 2012 (gmt 0) |
Should I say "you're welcome" and "thank you." ;)
Actually, I am not big on sticky footers, but a client of mine wanted one. They do offer some advantages, but in my example and what I primarily do not like, is how the footer is out of the natural flow, appearing just below the <body> tag. However, is does not seem to have affected my client's pages insofar as SERPs are concerned.
Marshall
|
|
