|
CSS - Footer Issues-not Extending Across When Minimized
I am quite new to css and have stumbled my way through making a page. My issue is the footer. My footer contains a background image that repeats across the page. In order to make the footer stick to the bottom I have placed it in a container. My issue is, when the page is minimized and you scroll over the right of the page, the menu that is on the bottom is on the right but the background image does not extend behind it.
Code: /*---------------------------------------------
Footer Area Starts here
----------------------------------------------*/
#FooterBody{
background: #6f1e1a url(http://www.cleverchickcreations.com/images/footer.png) repeat-x;
height:232px;
width:100%;
border:1px solid;
color:#f2f1df;
}
#FooterContainer{
width: 936px; margin: 0 auto; padding: 0; text-align: left;
}
/*------------------------------------------------footer--------------------*/
#footer{
width:100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0px;
float: left;
height: 232px;
background-image: url(http://www.cleverchickcreations.com/images/footer.png);
background-repeat: repeat-x;
position: relative;
}
#btmmenu_area{
width:1100px;
height:120px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.navcolumn {
float: left;
width: 300px;
height: 120px;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
}
.row1 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 140px;
text-align: left;
margin-top: 10px;
padding-left: 10px;
line-height: 140%;
}
.row1 a:link, .row1 a:visited, .row1 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row1 a:hover{
color: #6d5f52;
text-decoration: none;
}
.row2 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row2 a:link, .row2 a:visited, .row2 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row2 a:hover {
color: #6d5f52;
text-decoration: none;
}
.row3 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row3 a:link, .row3 a:visited, .row3 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row3 a:hover {
color: #6d5f52;
text-decoration: none;
}
.foot-headers {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ef5f9b;
line-height: 140%;
}
.footer_links {
font-family: Arial;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #333333;
padding-top: 35px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.footer_copyrights {
font-family: Arial;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #c2c093;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/*------------------------------------------------validation --------------------*/
#validation_area {
width:100px;
height:34px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.validation {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
.validation:hover {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation-0.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
Similar TutorialsI'm totally stumped here.. Granted I'm still new to this, and learning as I go, but anyway http://www.psyberarts.com/work/prism/index.html There is a line in the content area that is being extended up from the footer color. I know it's from the footer color because when I change the footer background to white, it goes away. Should I just make a repeat image for the footer and do it that way? Okay I've gotten to a point in my design where I'm a bit stumped. I have been working on a three column layout with a fixed header and footer. The entire idea behind the fixed footer is so that my entire promotional press kit and social networks will be available and in view in the footer above the fold at all times for easy access. After a few little tweaks the layout looks good and turned out nicely. However, now I am adding content and navigation and I am having some issues with regards to how it is reacting when my browser window is re-sized and the layout of the far left navigation. Okay so when I shrink the browser window two things happen, I get a horizontal scroll, which isn't too bad, I mean that is normal in a lot of sites but because the footer and header are fixed it looks a little weird. Is there a way to stop this without going fluid? The other thing it does when it is shrunk, the background image in the footer shifts to the right along with the navigation which should not happen if it is fixed right? What is could be causing that? If I have nested div inside the footer div does it need to be declared fixed too or can it be relative because it is a child of the footer? The biggest problem is that my navigation menu on the left will have four links. I would like two links above and two links below. I would like the top left and bottom left to align to the left with space between those two links and the top right and bottom right, which will also align left. How would I accomplish this using the least amount of mark up in the xhtml and the least amount of code in css? Right now they aren't links, I'm just trying to lay it first. What I was thinking, was using a div to hold a footer ul and li class? Would I just apply the class to each link or would I apply the class to two, one div class above holding two links and one div class below or do I even need an extra footer div anyway if I'll be assigning separate classes? I'm confused as to the best way to fix all this, your help would be appreciated, the xhtml validates and so does the css. Here is the link to the testing site: http://www.lonniebruhn.com/sitelab/ Hi all, Been playing about with some CSS for a simple e-comm site. Mockup here. There seems to be a few issues though between IE/FF. Thats all I've been able to test on so far though. The site validates properly as far as I can tell so that doesn't seem to be a problem. In Firefox, the left hand bottom sidebox overflows the page (the footer doesn't go below it). In IE it seems to be fine. In IE, the padding on the right hand side of the main content header box is not the same as the left side. Also, the main left bullet list is royally arsed up. At the moment, I can't spot any more issues than that. As I continue development and start to add more features, then I will probably crop up with more issues. The HTML for the site is here. The CSS for the site is here. Suggestions on how to fix it would be much appreciated. Cheers, Computer Hi all, I am trying to basically have a centre column of data on my page. Within this centre column, I am trying to place a header and footer. The CSS is working quite well with the exception that the header and footer seem to be shorter than the width of the main column. In other words, there seems to be a margin on the right and left side between the end of the footer/header and main column. I am not sure what is going on as I have made the widths the same. I am sure I am over-seeing something small. I was following the example found http://www.pmob.co.uk/temp/1colcentred.htm Code:
html{height:100%;}
body {
padding:0;
margin:0;
height:100%;
background-color: #98AFC7;
color: #000000;
}
#outer{
min-height:100%;
width:800px;
background:pink;
color: #000000;
margin:auto;
text-align:left;
position:relative;
}
* html #outer{height:100%}
#header {
border-top:1px solid #000;
border-bottom:1px solid #000;
background:blue;
left:-1px;
width:800px;
height:40px;
overflow:hidden;
color: #000000;
z-index:100;
//margin-left:6px;
//margin-right:6px;
}
#footer {
position:absolute;
bottom:0;
left:0;
background:green;
height:40px;
border-top:1px solid #000;
width:800px;
//margin-left:1%;
//margin-right:1%;
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
<body>
<div id="outer">
<div id="header">Header</div>
<p>middle</p>
<p>middle</p>
<div id="clearfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Hey, I have just about finished this website here except for the footer issue in Internet Explorer. My main issue is that I'm limited to a Macbook Pro right now, I have VM Fusion but haven't been able to use my external harddrive with my virtual machine on it and have no other way to test in IE. Browsershots has it's limitations, haha. Anyway, it displays fine in WebKit and Firefox, but internet explorer is being real finnicky. If I have to I can resort to calling in a modified footer strictly for IE, but then I have to go design a footer for it down at the library so i can use on of their computers to test it. Thought I'd try posting a question here and see if anyone could spot something in my CSS that may not be working with IE. Thanks in advance, really appreciated. The link is http://www.laserbodysculpting.ca/beta/ The screenshots in IE are MSIE7.0 and IE6.0 . I'm using the following DIV structure. (http://pastebin.com/meef27b4) Code: <div id="footer"> <div id="fcont"> <div id="f1" class="fwrap"><h2>Newsletter</h2> ... </div> <div id="f2" class="fwrap"><h2>Map</h2> ... </div> <div id="f3" class="fwrap"><h2>Contact</h2> ... </div> </div> <div id="minifooter"> ... </div> </body> </html> Here is the CSS Code: #footer {
width: 100%;
height: 270px;
position: static;
clear:both;
text-align: center;
border-top:solid 1px #414243;
background:#9a9a9a;
letter-spacing: 0.2em;
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
#footer h2{
font-size: 15px;
color: #414243;
padding:0 0 .5em .1em;
}
.info {
color:#fff;
}
.map {
border: 1px #414242 solid;
margin: 2px;
}
#footer h3{
font-size:10px;
padding:0 0 .5em 0;
letter-spacing:5px;
color:#414243;
font-weight:bold;
}
#fcont {
width:100%;
margin-left:200px;
overflow:auto;
}
#minifooter {
clear:both;
width: 100%;
height: 15px;
padding-bottom:10px;
border-top:solid 1px #000;
background:#414243;
color: #fff;
letter-spacing: 0.2em;
}
#minifooter a:hover {
color:#fff;
}
#f1 {
display: inline;
float:left;
text-align: left;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
width: 300px;
}
#f2 {
display: inline;
text-align: left;
float:left;
position: relative;
margin-top: 10px;
width: 300px;
}
#f3 {
display: inline;
text-align: left;
float:left;
position: relative;
width: 300px;
margin-top: 10px;
}
I'm having an issue where the floating element, in this case the Jump box and the sponsor image, aren't hidden when you minimize the browser. They overlap the banner when I just want them to be hidden. Sample Images: Maxed Minimized Thanks, Ryan Hello, My site is on Wordpress and I have changed some CSS. Now my site gets screwed up when I change something in the sidebar. For example if I add something bigger than sidebar width the text on the right drops all the way down in IE. However in firefox everything seem to be fine. But still in IE when I minimize the window the text jumps down. Also when I checked my site on doomaintools.com it showed a small picture of my site but the page is screwed up. I think it is CSS problem. I want to make the sidebar and right side to a particular width so it doesn't change. How can it be done? site is sushicup.com If you are good with css please help me! I'm so lost. Thank you. rush4rk ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times? Thnx Hi. I am nearly finished with the main layout for my forums but just ran into this problem and can't quite seem to figure it out. Right now I am updating vbulletin template to XHTML 1.1 and having some problems with tables / divs. I am attempting to keep the table code for the tabular data and use divs for the table headers/footers but for some reason the meat (table inbetween header and footer div) will not extend to meet the right border of the header and footer divs. Here is the HTML: Code:
<!-- TOP -->
<div class="topOutter clearFloat">
<div class="topInner floatLeft">
<div class="floatLeft">
<div class="floatLeft" style="width: 21px;">
<img src="customStyle/structure/top_left.gif" alt="" />
</div>
<div class="floatLeft titleTxt" style="margin-left: 5px; padding-top: 12px;">
<a class="darkLink" href="forumdisplay.php?f=16">Event TopiX</a>
</div>
</div>
<div class="floatRight">
<img src="customStyle/structure/top_end.gif" alt="" />
</div>
</div>
<div class="floatRight">
<img src="customStyle/structure/top_right.gif" alt="" />
</div>
</div>
<!-- /TOP -->
<!-- MIDDLE -->
<table style="border: 1px solid #000000;" cellpadding="0" cellspacing="0" width="100%" >
<tbody id="collapseobj_forumbit_16" style="">
<tr>
<td class="thead" style="width: 100%; height: 17px;"></td>
</tr>
</tbody>
</table>
<!-- /MIDDLE-->
<!-- BOTTOM -->
<div class="bottomSpacer bottomOutter clearFloat">
<div class="floatLeft">
<img src="customStyle/structure/blc.gif" alt="" />
</div>
<div class="floatRight">
<img src="customStyle/structure/brc.gif" alt="" />
</div>
</div>
<!-- /BOTTOM -->
The CSS Code (spacer and top/middle classes are just bordering and bottom margins): Code:
.clearFloat { overflow: hidden; }
.floatLeft { float: left; }
.floatRight { float: right; }
Please see the attachment for the visual. This is only happening in IE, Firefox and opera render it fine. And it only happens when I sandwhich a table between the header and footer divs. If the middle portion is also a div it does not display this problem. Thx. I really like this menu: http://alistapart.com/articles/horizdropdowns (see demo: http://alistapart.com/d/horizdropdowns/horizontal.htm) My problem is that it only works in one level. How can I modify it to support more levels? Or do you guys know any simular menu, that support more levels? hi, i have the following css Code: #content { width:1000px; text-align:center; height:100%; border:2px #000 solid; }
#mainbody { width:1000px; height:100%; display:run-in; border:#03F 1px solid; }
and my xhtml looks like Code: <div id="content"> <div id="mainbody"> </div> </div> basically what i want to do is to have full available page height covered by content div so that i can stick a footer div at the end of it. so that regardless of the height of the contents covering the mainbody-div my footer always sticks to the bottom of the page. now even before i add footer, the problem is that mainbody is going 50px outside the content div at the bottom making the page to scroll. should it not take the available height within the content-div because it is nested within content div? thanks I have a div that has a table inside of it. Even though the table expands with content added, the div does not. It's important to me that the div extend with the table because this div in question has a background shadow border for the table. Here is the CSS: Code:
#right {
float: right;
width: 80%;
height: 100%;
}
#rt_brdr {
height: 100%;
width: 100%;
padding-bottom:5px;
padding-right: 10px;
margin-bottom: 5px;
vertical-align: bottom;
background: url(img/r_brdr.gif) repeat-y right;
}
My HTML: Code:
<div id="right">
<div id="rt_brdr">
<table border="0" align="left" width="100%" style="height: 93%; margin-top: 2px;" cellpadding="0" cellspacing="0">
<tr>
<td class="top" style="background: url(img/w_tl.jpg) no-repeat top left #FFFFFF;"></td>
<td class="white_fill"></td>
<td class="top" style="background: url(img/w_tr.jpg) no-repeat top right #FFFFFF;"></td>
</tr>
<tr class="white_fill">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="bottom" style="background: url(img/w_bl.jpg) no-repeat bottom left #FFFFFF;"></td>
<td class="white_fill"></td>
<td class="bottom" style="background: url(img/w_br.jpg) no-repeat bottom right #FFFFFF;"></td>
</tr>
</table>
</div>
</div>
I have attached a screenshot. Note that I took the content out of the table in the post so that the code doesn't extend forever. I have put a black border around the right border to make it stand out in the screenshot. I swear that I really am learning a great deal about CSS but you wouldn't think so as many threads as I've started in the past few days... Anyhow, consider the following code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#base {
clear: both;
padding-top: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: #00ff00; } /* end #base */
#main {
background: #0000ff;
margin: auto;
text-align: left;
width: 800px; } /* end #main*/
#content {
background: #ffffff;
border-left: 1px solid #0000ff;
padding-top: 1em;
padding-bottom: 1em;
border-right: 1px solid #0000ff; } /* end #content */
#bottom_part {
padding: 0;
line-height: 130%;
padding-left: 1em;
padding-right: 1em;
display: block;
margin: 0;
border: 0;
clear: both; } /* end #bottom_part */
#column_a {
padding: 1em;
margin: 0;
float: left;
width: 33%; } /* end #column_a */
#column_b {
margin-left: 33%;
margin-right: 33%;
padding: 1em;
padding-right: 0;
width: 25%; } /* end #column_b */
#column_c {
display: block;
float: right;
padding: 1em;
width: 33%; } /* end #column_c */
#bottom {
background: #ff0000;
border: none; } /* end #bottom */
.header { font-weight: bold; }
</style>
</head>
<body>
<div id="base">
<div id="main">
<div id="content">
<div id="bottom_part">
<div id="column_a">
<p class="header">Column A</p>
<p>A - A</p>
<p>A - B</p>
<p>A - C</p>
</div>
<div id="column_c">
<p class="header">Column C</p>
<p>C - A</p>
<p>C - B</p>
<p>C - C</p>
<p>C - D</p>
<p>C - E</p>
<p>C - F</p>
</div>
<div id="column_b">
<p class="header">Column B</p>
<p>B - A</p>
<p>B - B</p>
<p>B - C</p>
</div>
</div>
</div>
<div id="bottom"> </div>
</div>
</div>
</body>
</html>
The problem is that the content in Column C does not completely render inside the white box. The same problem occurs when the content is really long in Column A. Column B will extend the height of the white box and I'm certain it is because there is no float style associated with it. How can I achieve this for the other two columns? Removing the floats will do the trick but will also place the columns on top of each other. I have a absolute layout in css with two colums. In left column i have a navigation bar, and then a footer which is positioned 10px from bottom of the div, and right column has content. both have height of 100%, however no matter what resolution, the height extends about 100px further than the browser window, so the header is not seen unless scrolled to, even if other content doesn't exceed the browser window. I dont think its box model issue because there is no major vertical padding..any ideas? Not 100% sure if this is CSS related, however: The nav and image area below it are obviously 2 separate divs, as referenced by http://www.psyberarts.com/work/prism What is the best way to accomplish this look (the hover image, which is actually just an image for an "Active" State on a page.) I was thining about nested Divs for the pointed peice, but before I proceed I would rather get the opinion of someone who knows more than I do I have a site that is using the suckerfish style dropdown sorta... On a previous version I had the li dropdown block entirely clickable, so a user could click in any part of the 160px block, but on a current site using the same navigation just dropped in you can only click on the word and nothing happens for the rest of the 'box'.. It works fine in Firefox but not IE, if there is an image aligned to the right of the link it extends the clickable region... Any help would be appreciated. Here is the CSS for that section: Code: /*******************************/
/* BEGIN: Drop-Down Styles */
/*******************************/
#navigation, #navigation ul {
position:absolute;
padding: 0;
margin: 0;
list-style: none;
line-height: 20px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
z-index: 10;
font-weight: bold;
}
#navigation li.main {
text-align: center;
}
#navigation ul {
margin: 0 0 0 -1px;
}
#navigation a {
display: block;
background-color: transparent;
color: #F1F1F1;
text-decoration: none;
padding: 2px 4px 2px 6px;
z-index: 10;
}
#navigation li {
float: left;
width: auto;
border: solid 1px #0f2344;
border-right: none;
background-color: #0f2344;
color: white;
z-index: 10;
}
#navigation li li {
border-right: solid 1px black;
border-bottom: none;
width: 160px;
}
#navigation li.last {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li.hr {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li ul {
position: absolute;
width: 160px;
display: none;
}
#navigation ul ul {
margin: -20px 0 0 160px;
}
#navigation li:hover ul ul, #navigation li.over ul ul, #navigation li.over ul ul, #navigation li.over ul ul ul {
display: none;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li.over ul, #navigation li li.over ul, #navigation li li li.over ul {
display: block;
}
#navigation li:hover, #navigation li.over {
color: black;
background-color: #467BB4;
cursor: pointer;
}
#navigation li:hover>a { /* IE/Win ignores this declaraion */
color: black;
background-color: #467BB4;
}
And a segment of the HTML I'm using. Code: <ul id="navigation"> <li><a href="http://links.com">Home <img src="http://links.com/comm_demo3/img/dn_arrow.gif" alt="" border="0"></a> <ul> <li><a href="http://links.com/comm_demo3/pages/news/news.asp">Newsroom</a> <li><a href="http://links.com/comm_demo3/pages/news/archives/archives.asp">Newsletter Archives</a> <li class="last"><a href="http://links.com/dashboard/corporat.htm">Dashboard</a> </li> </ul> </li> At first this was slightly amusing. The border in the lower middle column dubbed "News" extended underneath the other divs to the top in Firefox. See he www.djoj.net/test/indexwierd.html Css: (Look at the way bottom of the CSS. The last 3 styles) www.djoj.net/test/styles2.css So I changed my div's to span's and wrapped them in one div labled "bottom" Now look... www.djoj.net/test/index.html Css: (once again, at the bottom) www.djoj.net/test/styles.css How can I fix this? It's a problem in both browsers. I don't want to use tables, I'd rather stick to CSS positioning. Thank you in advance! ~B I have an issue where I have created a template for an organization and the horizontal drop menu can contain about 9 elements. It has tiered drop downs which extend off the end of the page to the right. Is there a way to make them flip left ONLY if they are at the end of the page? I did do some javascript that takes the last element and gives it a class that can make it flip, as in the image. But if there are only 3 menu items that would look a bit goofy. Anyone else encounter this issue and how did they resolve it? |
|||||||