system
January 14, 2012, 9:51pm
1
I’m having the most damning problem with my website and I’m kind of new to website design so I don’t have the marbles yet to solve it myself.
I decided too late in the game that the website should have a liquid layout (actually I decided this because I have a fixed footer that contains my website menu that isn’t 100% wide, but rather centered & about about 80% wide, so when the screen is re-sized and the horizontal-scroll appears, the footer scrolls sideways and exposes the content that scrolls underneath it otherwise, see 1st image).
It appears that the liquid layout option is the only one that will solve my x-scroll problem (unless you guys have better ideas?). However … now that I managed to get the footers to not expose content, when the screen is re-sized, my centered content div scrolls right under a graphic on the left-most side of the screen, see second image).
I thought about using max-width:100% to get the overlapping image to resize with the rest of the layout, but it’s not working! (dunno if that’s because it’s in a div of its own or because it’s a .png, or because I’m doing something wrong).
Can someone comment or help on any of these issues? Aka side-scrolling with fixed footers, liquid layouts and overlapping or re-sizing images?
I’m also trying to avoid Javascript if possible because 1) I’m worried about users with their JS turned off and 2) the force is not strong with me on that one.
Both images pertain to the same website, I just don’t want to screw up the main layout I created so I’m tinkering with a couple “test” pages at once.
Thanks!!!
(1) http://img842.imageshack.us/img842/9997/ugly1e.jpg http://img198.imageshack.us/img198/3792/uglyld.jpg
system
January 14, 2012, 10:07pm
2
Oh yeah, here is an example of a website that seems to be doing what I want - the footer has the content scroll under it, and it’s not 100% wide, yet upon screen re-size it doesn’t expose the images underneath it when you scroll to the right on the horizontal scrollbar:
We're a fashion brand for women - known for our fun, colorful stores across the U.S. Shop our trendy collections from handbags, accessories, shoes, and apparel. Free shipping over $60!
system
January 16, 2012, 1:45am
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CLOColors3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="description" content="" />
<meta http-equiv="keywords" content="" />
<meta http-equiv="robots" content="all" />
<meta http-equiv="revisit" content="12 days" />
<!--[if IE 6.00]>
<link rel="stylesheet" type="text/css" media="screen" href="mainstyleIE6.css" />
<![endif]-->
<link rel="stylesheet" href="CLOCSS.css" media="screen" type="text/css" />
<link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" />
<link rel="stylesheet" href="menuCSS.css" media="screen" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="header">
<div class="noprint"><div id="headerlinks">
<a id="famlaw" href="http://www..html"></a>
<a id="persinjury" href="http://www..html"></a>
<a id="crimlaw" href="http://www..html"></a>
<a id="traffic" href="http://www..html"></a>
<a id="civlaw" href="http://www..html"></a>
<a id="workerscomp" href="http://www..html"></a>
</div>
</div>
<!--[if IE]>
<style type="text/css">
#headerlogotext {margin-left:-890px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#headerrightimage {margin-left:1px; }
</style>
<div class="noprint"><div id="headerrightimage"><img src=".JPG" /></div></div>
<![endif]-->
<!--[if IE 6.0]>
<style type="text/css">
#headerrightimage {margin-left:-28px; }
</style>
<div class="noprint"><div id="headerrightimage"><img src=".JPG" /></div></div>
<![endif]-->
<div id="printheader"><img src="printlogo.JPG" /></div>
<!--[if IE 6.0]>
<div id="menu">
<noscript>
<div id="menubar">
<ul>
<li><center><a href="index.html">HOME</a></center>
<ul>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="about_us.html">About Us</a></li>
</ul>
</li>
<li><center><a href="#">PRACTICE AREAS</a></center>
<ul>
<li><a href="#">Family Law ›</a>
<ul>
<li><a href="#">Alimony</a></li>
<li><a href="#">Child Support</a></li>
<li><a href="#">Custody & Visitation</a></li>
<li><a href="#">Divorce / Separation</a></li>
<li><a href="#">Division of Property</a></li>
</li></ul>
<li><a href="#">Criminal Law ›</a>
<ul>
<li><a href="#">Theft</a></li>
<li><a href="#">Sexual Offenses</a></li>
<li><a href="#">Assault</a></li>
</li></ul>
<li><a href="#">Personal Injury ›</a>
<ul>
<li><a href="#">Work Injury</a></li>
<li><a href="#">Auto Accidents</a></li>
</li></ul>
<li><a href="#">Traffic Offenses ›</a>
<ul>
<li><a href="#">Dui / Dwi</a></li>
<li><a href="#">Other Offenses</a></li>
</li> </ul>
<li><a href="#">Civil Law</a></li>
<li><a href="#">FAQ</a> </li>
</ul>
</li>
<li><center><a href="#">ATTORNEYS</a></center>
<ul>
<li><a href="#">x</a></li>
<li><a href="#">x</a></li>
<li><a href="#">x</a></li>
<li><a href="#">x</a></li>
</ul>
</li>
<li><center><a href="#">CONTACT</a></center>
<ul>
<li><a href="#">Locations ›</a>
<ul>
<li><a href="#">xxx Office</a></li>
<li><a href="#">xxx Office</a></li>
<li><a href="#">xxx Office</a></li>
</li></ul>
<li><a href="#">Phone Directory</a></li>
<li><a href="#">Mailing Address</a></li>
</ul>
</li>
<li><center><a href="#">RESOURCES</a></center>
<ul>
<li><a href="#">Affiliates ›</a>
<ul>
<li><a href="#">Healthcare Providers</a></li>
<li><a href="#">Insurance Companies</a></li>
</li></ul>
<li><a href="#">Helpful Links</a></li>
</li></ul>
<li><center><a href="#">NEWS & EVENTS</a></center>
<ul>
<li><a href="#">Press Articles</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Blog</a></li>
</li></ul>
<li><center><a href="#">ESPANOL</a></center>
<ul>
<li><a href="#">Sus Abogados</a></li>
</li></ul>
</ul>
</div>
</noscript>
<script type='text/javascript' src='quickmenu32.js'></script>
</div>
<![endif]-->
</div>
<div class="noprint"><div id="headerlogotext"><a href="http://www..html"><img src=".JPG" /></a></div></div>
<span class="main">
<div id="body">
<!--[if IE 6.0]>
<style type="text/css">
#body {width:903px; top:250px; }
</style>
<![endif]-->
<div class="noprint"><div id="horizontalbar"><img src="horzbar.JPG" /></div>
</div>
<div id="textlinkimg">
<div id="text">
<!--[if IE 6.00]>
<center><a href="#jump_menu" style="font-size:10px; font-weight:bold; line-height:5px;">Jump to Menu</a></center>
<![endif]-->
<a name="jump_top"></a>
<h1>Bail</h1>
<div id="sharebutton">
<!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pubid=xa-4e90b41d2f73b10c"><img src="http://img444.imageshack.us/img444/6039/sharebutton.jpg" alt="Bookmark and Share"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e90b41d2f73b10c"></script>
<!-- AddThis Button END -->
</div>
<h2><p>What is Bail and Who can post it?</p></h2>
Bail is essentially money that is paid to the court to ensure that the Defendant, (the arrested person) who has been released from jail will appear to all required court dates. The Defendant may post bail on their own, or have a famil member or friend who is atleast 18 years of age, or they may use a bondsman. Whoever posts bail assumes full responsibility that the Defendant will appear in court. If the Defendant fails to appear as required, a warrant will be issued for their immediate arrest and the bail will be forfeited.
<br />
<h2><p>How to Post Bail</p></h2>
Bail may be posted in the following manner by Case, through Property, Assests, Credit / Debit and through a Professional Bail Bondsman.
<div class="noprint"> <h2><p>Quick Menu</p></h2>
• <a href="#cash_bail">Cash Bail</a><br />
• <a href="#prop_bail">Property Bail</a><br />
• <a href="#assets">Assets</a><br />
• <a href="#deb/cred_cards">Debit/Credit Cards</a><br />
• <a href="#bonds_man">Professional Bail Bondsman</a><br /><br />
</div>
<hr />
<h3><p>Cash Bail</p></h3>
<a name="prop_bail"></a>
A percentage may be posted for cash bonds. All bonds that are set at two thousand, five hundred dollars ($2,500.) or less may be posted with a cash deposit of ten percent (10%). However, the person posting cash bail is liable for the full amount. If the Defendant appears for trial or if the charges are disposed of before trial, the amount posted will be refunded to the person who posted the bond. If the Defendant does not appear, all cash posted will be forfeited and the full amount of bail becomes due.
<div class="noprint"><center><a href="#jump_top" style="font-size:10px; font-weight:bold; line-height:5px; text-decoration:none;">Top</a></center></div>
<a name="assets"></a><br /><h3><p>Property Bail</p></h3>
Property (e.g. land or home) in Maryland may be used to post bail, provided that the net equity in the property meets or exceeds the amount of bail. To determine net equity deduct any liens, mortgages or deeds of trust, and ground rent, capitalized at 6 percent, from the assessed value of the property.
<br /><br /><div class="noprint"><center><a href="#jump_top" style="font-size:10px; font-weight:bold; line-height:5px; text-decoration:none;">Top</a></center></div>
<h3><p>Assests</p></h3>
A clerk of the court may accept intangible assets; a commissioner may not. Present the required documents to a clerk at the court, in the jurisdiction (county) where the case is pending.<a name="deb/cred_cards"></a> Acceptable intangible assets include:<br />
1.) Bankbooks and certifictes of deposits accepted at 100 percent of stated value<br />
2.) Letters of credit from a bank<br />
3). Certificates for stocks listed on the American or New York Stock Exchange, accepted at 75 percent of the present exchange quatation.
<div class="noprint"><center><a href="#jump_top" style="font-size:10px; font-weight:bold; line-height:5px; text-decoration:none;">Top</a></center></div>
<h3><p>Credit/Debit Cards</p></h3><a name="bonds_man"></a>
Bail may be charged on certain credit and debit cards. Although a commissioner or clerk accepts the card, an independent company processes the charge. The charge includes the amount of the bail and a service fee. (These charges will appear on your next credit or debit card statement.) The card and personal identification must be produced in person at the time of posting bail. (Contact a District Court commissioner or clerk for information on cards accepted and the fees charged.)
<br /><br /><div class="noprint"><center><a href="#jump_top" style="font-size:10px; font-weight:bold; line-height:5px; text-decoration:none;">Top</a></center></div>
<h3><p>Professional Bail Bondsman</p></h3>
A bail bondsman charges a nonrefundable fee to post bail. In addition to the fee, the bondsman may require collateral security or property to secure your release. Collateral will be returned to the person who posted it after disposition of the charges. The service fee and collateral received must be displayed on the bail bond form. Make certain that the information is correct on the form, that you receive a receipt and that you understand the action the bondsman may take if you fail to meet your obligations.
<div class="noprint"><center><a href="#jump_top" style="font-size:10px; font-weight:bold; line-height:5px; text-decoration:none;">Top</a></center></div>
<div class="map">
<br />
<br />
<div class="noprint"></div><br />
</div>
<!--[if IE 6.00]>
<a name="jump_menu"></a>
<![endif]-->
</div>
<div class="searchbar">
<script type="text/javascript">
// Google Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
var domainroot="http://www..com/"
function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
<form action="http://www.google.com/search" method="get" onsubmit="Gsitesearch(this)">
<input name="q" type="hidden" />
<input name="qfront" type="text" style="font:tahoma; font-size:12px; margin-top: 2px; height:17px; width: 133px; background-color:#D7DDE5; border: solid 1px; border-color:#A6B1CE;" /> <input type="submit" value="SEARCH" style="width:60px; height: 22px; border: solid 1px; background-color:#A1B6C7; border-color:#A1B6C7; color:#365471; font:tahoma; font-size:9px; font-weight:bold;" /><p></p>
</form>
</div>
<div class="video">
<iframe title="Youtube Player" width="200" height="131" src="http://www.youtube.com/embed/f0tbuZgjqJc?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div>
<div id="linktext">
<h4>Learn More:</h4>
• <a href="faq.html">Frequently Asked Questions</a>
<p>Test Link</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p><p>Test Link
</p>
</div>
<div class="clear_both"> </div>
</div>
<div class="clear_both"> </div>
</div>
<![If !IE 6.0]>
<div id="menu">
<noscript>
<div id="menubar">
<ul>
<li><center><a href="index.html">HOME</a></center>
<ul>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="about_us.html">About Us</a></li>
</ul>
</li>
<li><center><a href="#">PRACTICE AREAS</a></center>
<ul>
<li><a href="#">Family Law ›</a>
<ul>
<li><a href="#">Alimony</a></li>
<li><a href="#">Child Support</a></li>
<li><a href="#">Custody & Visitation</a></li>
<li><a href="#">Divorce / Separation</a></li>
<li><a href="#">Division of Property</a></li>
</li></ul>
<li><a href="#">Criminal Law ›</a>
<ul>
<li><a href="#">Theft</a></li>
<li><a href="#">Sexual Offenses</a></li>
<li><a href="#">Assault</a></li>
</li></ul>
<li><a href="#">Personal Injury ›</a>
<ul>
<li><a href="#">Work Injury</a></li>
<li><a href="#">Auto Accidents</a></li>
</li></ul>
<li><a href="#">Traffic Offenses ›</a>
<ul>
<li><a href="#">Dui / Dwi</a></li>
<li><a href="#">Other Offenses</a></li>
</li> </ul>
<li><a href="#">Civil Law</a></li>
<li><a href="#">FAQ</a> </li>
</ul>
</li>
<li><center><a href="#">ATTORNEYS</a></center>
<ul>
<li><a href="#">x</a></li>
<li><a href="#">x</a></li>
<li><a href="#">x</a></li>
<li><a href="#">x</a></li>
</ul>
</li>
<li><center><a href="#">CONTACT</a></center>
<ul>
<li><a href="#">Locations ›</a>
<ul>
<li><a href="#">xxx Office</a></li>
<li><a href="#">xxx Office</a></li>
<li><a href="#">xxx Office</a></li>
</li></ul>
<li><a href="#">Phone Directory</a></li>
<li><a href="#">Mailing Address</a></li>
</ul>
</li>
<li><center><a href="#">RESOURCES</a></center>
<ul>
<li><a href="#">Affiliates ›</a>
<ul>
<li><a href="#">Healthcare Providers</a></li>
<li><a href="#">Insurance Companies</a></li>
</li></ul>
<li><a href="#">Helpful Links</a></li>
</li></ul>
<li><center><a href="#">NEWS & EVENTS</a></center>
<ul>
<li><a href="#">Press Articles</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Blog</a></li>
</li></ul>
<li><center><a href="#">ESPANOL</a></center>
<ul>
<li><a href="#">Sus Abogados</a></li>
</li></ul>
</ul>
</div>
</noscript>
xyz xyz xyz
</div>
<![endif]>
<div id="footer"><!-- #BeginLibraryItem "/Library/Footer2.lbi" -->
<style type="text/css">
.footertext
{
font-size: 9px;
font-family: tahoma;
color:#C9D7E0;
text-align:left;
}
.footlink a:link
{
font-size:9px;
font-family: tahoma;
color:#C9D7E0;
text-align:right;
text-decoration:none;
}
.footlink a:hover
{
text-decoration:underline;
color:#C9D7E0;
}
.footlink a:visited
{
text-decoration:none;
color: #C9D7E0;
}
.footlink a:active
{
color: #C9D7E0;
text-decoration:none;
}
#footercopyright
{
position:fixed;
left: 206px;
margin-top:5px;
}
#footerlinks
{
position:fixed;
left: 965px;
margin-top:5px;
}
</style>
<span class="footertext">
<div id="footercopyright">
© 2011 <span class="footlink"><a href="http://pview.">CLO, LLC</a></span>. All rights reserved.</div>
<div id="footerlinks">
<span class="footlink"><a href="http://www..html">Disclaimer</a></span> | <span class="footlink">Site Map
</span></div>
</span>
<!-- #EndLibraryItem --></div>
<![if !IE 6.0]>
<div class="noshow">
<!--[if IE 6.0]>
<div id="footerIE">
<!-- #BeginLibraryItem "/Library/FooterIE6.lbi" -->
<style type="text/css">
#footercopyrightIE
{
position:absolute;
left: 206px;
margin-top:5px;
}
#footerlinksIE
{
position:absolute;
left: 965px;
margin-top:5px;
}
</style>
<span class="footertext">
<div id="footercopyrightIE">
© 2011 <span class="footlink"><a href="http://xyz.com/view/4115896_1">CLO, LLC</a></span>. All rights reserved.
</div>
<div id="footerlinksIE">
<span class="footlink"><a href="http://www.. html">Disclaimer</a></span> | <span class="footlink">Site Map
</span></div>
</span>
</div>
<![endif]-->
<![endif]>
</span></body>
</html>
system
January 16, 2012, 1:46am
4
The relevant CLOCSS.css stylesheet to the above HTML for my website. It’ll end up looking pretty wonky since the site is local on my laptop only and not published. Sorry! But if anyone is willing to point out what’s wrong with my code I’d appreciate it! Thanks!!
body
{
background-color: #374856;
font-family: tahoma;
background-image:url('http://img201.imageshack.us/img201/8821/stripesbckg2.jpg');
background-repeat:repeat;
line-height: 20px;
font-size: 12px;
color: #002136;
text-align: justify;
margin:0px;
padding:0px;
height: 100%;
}
h1
{
color: #09244B;
font-family: georgia;
font-size: 20px;
letter-spacing: 0.1em;
left: 10px;
font-style: italic;
}
h2
{
color: #213C54;
font-family: georgia;
font-size: 12px;
font-weight: bold;
font-style: oblique;
}
h3
{
color:#72859D;
font-weight:bold;
line-height:24px;
letter-spacing:0.1em;
font-family: georgia;
font-size: 11px;
}
h4
{
color: #213C54;
font-family: georgia;
font-size: 12px;
font-weight: bold;
}
.main a:link
{
font-family: georgia;
font-size: 12px;
color: #204355;
text-decoration:none;
}
.main a:visited
{
text-decoration:none;
color: #1D3B4B;
}
.main a:active
{
color: #204355;
text-decoration:none;
}
.main a:hover
{
text-decoration:underline;
color: #6D919F;
}
a img {border: none;}
hr {
border:solid 1px;
color:#D0D4E6;
}
/* ID Styles */
#header
{
position: relative;
width: 100%;
background-image:url('http://img820.imageshack.us/img820/1971/clologo1.png');
background-position:0px;
margin-top:0px;
background-repeat:no-repeat;
height: 217px;
width:180px;
border-color:#AFD64E;
z-index:1;
}
#headerlogotext
{
position: absolute;
margin-left: 185px;
margin-top:-195px;
width: 433px;
height:92px;
z-index:2;
}
#printheader{display:none;}
#headerlinks
{
position: relative;
float:left;
margin-left: 880px;
margin-top: 8px;
line-height: 18px;
width: 200px;
z-index:1;
}
#civlaw
{
position:relative;
display: block;
width: 132px;
height: 17px;
margin-left:57px;
background: url('collHOVER.JPG') no-repeat;
}
#civlaw:hover
{
background-position: 0 -17px;
}
#crimlaw
{
position:relative;
margin-left:57px;
display: block;
width: 132px;
height: 17px;
background: url('crimdefHOVER.JPG') no-repeat;
}
#crimlaw:hover
{
background-position: 0 -17px;
}
#famlaw
{
position:relative;
margin-left:99px;
display: block;
width: 132px;
height: 17px;
background: url("famHOVER.JPG") no-repeat;
}
#famlaw:hover
{
background-position: 0 -17px;
}
#persinjury
{
position:relative;
margin-left:71px;
display: block;
width: 119px;
height: 17px;
background: url("persinjHOVER.JPG") no-repeat;
}
#persinjury:hover
{
background-position: 0 -17px;
}
#traffic
{
position:relative;
margin-left:57px;
display: block;
width: 132px;
height: 17px;
background: url("traffHOVER.JPG") no-repeat;
}
#traffic:hover
{
background-position: 0 -17px;
}
#workerscomp
{
position:relative;
margin-left:10px;
display: block;
width: 181px;
height: 17px;
background: url("WorkHOVER.JPG") no-repeat;
}
#workerscomp:hover
{
background-position: 0 -17px;
}
#horizontalbar
{
position:relative;
margin-left: 0px;
top:0px;
height: 1px;
z-index:2;
}
#body
{
position: relative;
overflow:auto;
background-color:#E0E1EE;
background-image:url(‘http://img233.imageshack.us/img233/4968/spacer3.jpg’);
background-position: 644px;
background-repeat: repeat-y;
width: 901px;
left: 180px;
margin-top: -93px;
z-index:2;
text-align: justify;
padding-bottom:92px;
}
#text
{
position: relative;
overflow:auto;
float:left;
margin-left: 0px;
width: 568px;
padding-right:30px;
padding-left:30px;
padding-top: 20px;
padding-bottom: 20px;
z-index:1;
}
#textlinkimg
{
position: relative;
float:left;
background-image:url(‘http://img14.imageshack.us/img14/6219/textlinkimg.jpg’);
background-repeat: repeat-y;
margin-left: 8px;
top: 8px;
width: 890px;
margin-bottom: -29px;
z-index:1;
}
#linktext
{
position: relative;
overflow:auto;
float:left;
margin-left:40px;
margin-bottom:40px;
top: 30px;
width: 190px;
padding-left: 5px;
padding-right: 5px;
z-index:1;
}
#clear_both{clear:both;}
#menu
{
position: fixed;
background-color:#708698;
border-top:solid 1px;
border-color:#AFD64E;
width: 903px;
height: 22px;
bottom:28px;
left:179px;
z-index:2;
}
.noshow
{
display:none;
}
#footer
{
position: fixed;
background-color:#708698;
border-top:solid 1px;
border-color:#AFD64E;
width: 100%;
height: 22px;
padding-bottom:6px;
bottom:0px;
z-index:2;
}
#sharebutton
{
position:absolute;
top:33px;
left:500px;
width:100px;
height:16px;
z-index:1;
}
/* Class Styles */
.searchbar
{
position: relative;
float:left;
margin-left:37px;
top:23px;
padding: 5px;
z-index:1;
}
.map
{
position: relative;
float:left;
margin-left: 0px;
z-index:1;
}
.video
{
position: relative;
float:left;
top: 25px;
margin-left: 42px;
z-index:1;
}
/* CSS Document */
ralphm
January 16, 2012, 1:51am
5
Hi jamberry. I don’t quite understand all the factors you are describing, but we have a really detailed tutorial here on how to create a fixed footer at the bottom of the page (a “sticky footer”) that may be what you need:
The previous “Sticky threads” are being amalgamated into this Ultimate Sticky thread. You will find links below to all previous “Sticky Threads” below: (This is a work in progress) Sticky Threads: CSS Test Your Skills - Tagged Quizzes Older CSS...
Reading time: 51 mins 🕑
Likes: 1 ❤
system
January 16, 2012, 4:17am
6
Hi Ralph, thanks for the response, unfortunately, the sticky footer is not what I’m looking for.
My footer contains my navigation, so it needs to always remain on the screen, no matter how much content there is. I’ve achieved this with position:fixed; however, I’ve discovered a problem with this when the browser screen is re-sized.
Because the menu isn’t 100% wide (doesn’t take up the entire screen) but rather is centered and is like 960px wide when the screen is re-sized and the horizontal scroll appears, the nav footer moves with the scroll bar and exposes the main page content in doing so, which looks ugly and makes the page look kind of broken (the first screen cap I provided refers to this).
I’m essentially trying to find SOME solution to this problem. I want the footer to NOT expose the content.
I’ve come to believe that fluid/liquid layouts might be a way to fix the problem, but I’m not 100% sure that this is true or that this is the only solution. I can’t find anyone having the same problem and I’ve been up and down google for weeks.
