CSS - Column Image Meeting Footer Image (mine Leaves A Huge Gap!!!)
Can someone please help me?
I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... Similar TutorialsHey there, webbsdomain.com/Max I am working on a landing page for a client and I am a bit stuck. All XHTML and CSS validates, no issues there.... The design looks and works great in ALL browsers other than IE6. The issue is with the 3 colored divisions, secondLeft, secondMiddle, and secondRight. In IE6 there is a HUGE amount of white space left between the div's with no reason that I can find. I researched the issue online and found similar issues: IE6 3px float bug and IE6 double margin bug Neither of which seem to be the issue, and the fixes they describe do not work. I am completely at a loss on this one, and any guidance anyone can offer would be VERY useful! Thanks in advance, Brian Hello, I need a little help... When moving an image over the top of another image it leaves a white space where the image was in the flow. How do I get the trailing content to flow into the space where the image was. Even though the image moves where I want, it still seems to occupy the space where it was? PHP Code: echo "<IMG SRC='http://www.golfleague.us/gifs/splash.gif' width='150' height='90' STYLE='position: relative; top: -133px; left: 380px; margin:0; z-index:1'>"; Thanks for your help. Trying to delete my post but no option to delete so just removing content. Hi, Got my validation problem sorted (Thanks jarra) but now my page has a problem with IE6. Well, it had the problem yesterday but I thought I fixed it. If you view the page in Firefox and Opera the first image is about 10px break away from the text above, however in IE6 it's at least 100px away. It doesn't matter what image I use or where I put, it's always the first image. When it happened yesterday I reduced the width of the image by 2 pixels and eveything seemed fine. Is it a CSS problem? CSS: http://www.planetphillip.com/style.css Page: http://www.planetphillip.com/index.php TIA Phillip So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/ Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start. So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this: Code: <div id="footer"> <span id="left-bg"></span> <span id="right-bg"></span> </div> and the styling for these is something like (I can post the actual/more if need be) Code: div#footer { position: relative; height: 25px; width: 100%; } span#left-bg { position: absolute; left: 0; bottom: 0; width: 400px; height: 600px; background: transparent url(some-url.png) no-repeat 0 0; z-index: -1; } span#left-bg { position: absolute; right: 0; bottom: 0; width: 400px; height: 600px; background: transparent url(some-url.png) no-repeat -400px 0; z-index: -1; } in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page. in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions: a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top) b) using the W3-dev opera tools, if I disable both spans c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first). i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed. Hello All, I am trying to add a background image to the footer that repeats accros the entire page and is 300px height. The code I have generates a color but it is limited to 960px. I tried adding a background URL to image but no success. Any suggestions. Thank you. #footWrapper{ background: none repeat scroll 0 0 #000000; display: inline; float: left; width: 100%; } Hello, I am trying to change the layout of my journal which is based on CSS. The codes doesn't come from me. I found it two years ago on a free layout website where all layouts are allowed to be changed if there are credits given for the original style sheed. I am afraid my problem is pretty simple. I don't know very much about programming and CSS, just very few. So please snap at me immediately if I don't understand fast enough or don't give you exactly the answers you need. Anyways I will give my best! My problem: I want to change the footer and something what is supposed to be called the header. I would say: Let's concentrate on the footer at first. I want to change both from their background color to an image. The text still have to be able to be read. I have read something about putting the footer in the body but there is my normal background of the whole journal and I think it would make problems this way. Well I don't know if the codes are messy. I changed a few colors and positions but even that not fully until now. I hope you can get a clue what is my problem! And thank you so far! Here are the codes from my footer: Quote: #footer { text-align: center; font: 7pt arial, sans-serif; background: #fff url(here would stand the image url but as newbie I am not allowed to post urls, you know the rules) repeat; color: #BBBBBB; z-index: 100; clear: both; border: 0px; padding: 10px; } http://johnmifsud.byethost22.com/John_Mifsud_files/index.php I've been creating this site using percentages for the relevant sections of the page. However, in the footer the 'site map' image in falling out the bottom of the footer if the screen is shrunk, (both in IE and Firefox). Why??? What's wrong with the CSS? (sitemap and imgsitemap are both within the footer)And suggetions would be greatly appreciated! Thanks Miffy! #footer { position: relative; top: 0px; left: 0px; height: 2%; margin: 0px; padding: 0px; background-color: black; background-image: url('bottom menu files/bottommenu.gif'); width: 85%; border-style: none; border-width: 0px; } .sitemap { position: absolute; top: 0px; left: 0px; border-style: none; border-width: 0px; padding: 0px; margin: 0px; height: 100%; } .imgsitemap { border-style: none; border-width: 0px; padding: 0px; margin: 0px; height: 100%; } I am trying to allow a right aligned image break out of my footer. So far it's just breaking out, but under rather than over. I.e: Code: #footer { clear:both; width:100%; /* green bg footer image */ background-image: url(../img/footer_bg.gif); background-repeat: repeat-x; } Code: <img style='float: right' src='src/to/pizza-pic.png' /> What I'm trying to achieve is to have the green footer at the bottom of the page and the pizza to appear in at the bottom also, but peeping over the green footer. Do you know how I can achieve this? Thanks in advance for any help Hi ppl, I am new to CSS, and I need help... I have this code in my word-press footer.php ,what I want is to turn image that i put as footer image(footer.jpg),into image-link to other page, I tried something like this but dont work... Code: div id="footer" onclick="SOME PAGE'> <a href="<?php bloginfo('url'); ?>"> <img src="images/footer.jpg" alt="<?php bloginfo('name'); ?>" /> ...but something i do wrong, below is a original code that i want to edit! Code: ?php /** * @package WordPress * @subpackage Default_Theme */ ?> <hr /> <div id="footer" role="contentinfo" style="vertical-align:bottom;"><div style="vertical-align:bottom;"><table width="735" border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <td height="190" align="left" valign="bottom"> </td> </tr> <tr> <td height="43" align="left" valign="bottom"> </td> </tr> <tr> <td><div align="right" style="margin-right:20px; color:#333333;">Copyright by <a href="<?php bloginfo('url'); ?>/"> <?php bloginfo('name'); ?> </a> 2010. - 2014. All rights reserved.</div></td> </tr> </table> </div> </div> </div> <?php /* "Just what do you think you're doing Dave?" */ ?> <?php wp_footer(); ?> </body> </html> I've exhausted my own knowledge toolbox and cannot get this to work. I'm trying to get a div to expand to the end of the parent div. http://www.pictouunited.com/?s=null You'll see what I mean. I've done all the logical troubleshooting, or so I thought. I appreciate any help in advance! hi all, right have got a problem which has been bugging me for days now. i have 4 columns in a row (inside a wapper div)which all will have different content image, text other divs/classes etc. now one of these columns will be quite fluid as it will have different text on each page meaning it will be quite long on some pages not on others. the problem i am getting is in the good browsers firefox etc its ok in IE6+. the wapper does'nt seem to see the divs in the content meaning it does not get filled, meaning that the footer flys to the top and not where it should be, i dont have a live version but heres the code: mainly thanks Dan <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #con { width:940px; height:400px; background-color:#00FFFF; } #wapper { width:940px; background-color:#006666; } #box { width:940px; background-color:#000033; height:40px; } #menu-pronuptia { width:185px; background-color:#6633CC; float:left; display:inline; } #menu-pronuptia1 { width:185px; background-color:#009900; display:inline; float:left; } #menu-pronuptia2 { width:385px; background-color:#0033CC; display:inline; float:left; clear:inherit; } #menu-pronuptia3 { width:185px; background-color:#CCCC33; display:inline; float:left; } --> </style> </head> <body> <div id="wapper"> <div id="menu-pronuptia"> <p>test</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="menu-pronuptia1"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="menu-pronuptia2"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="menu-pronuptia3"> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> <div id="box"> <p><br /> </div> </body> </html> Hey all, I have a background image that I want to repeat horizontally at the top and the bottom of a page (below all of the content, not necessarily at the bottom of the screen) that I'm creating, for the Header and Footer. I would like it to look something like this. I'm using this code for the background image, for the Header: body { background-image: url(stars.gif); background-repeat: repeat-x } And I'm wondering whether I can include another background image in the "body" code, telling it to repeat horizontally, but at the bottom of the page? Here is the code that I'm assuming would have to be used: { background-image: url(stars.gif); background-repeat: repeat-x; background-position: bottom; } Can someone suggest to me where this code should go? Could I include it in the "body" css code? Or should I put it below all of the rest of the columns/content code? Thanks. Here's the html and css for http://www.pxgo.com/lifepak-prime.php - What I really need help with is aligning the footer (I know absolute positioning is bad for me, but relative doesn't work either) and floating my image (which for some reason vanished once I added the floatleft class). Thanks in advance for any help! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML><HEAD><TITLE>Lifepak Prime</TITLE> <LINK rel="stylesheet" type="text/css" href="style.css"></HEAD> <BODY> <?php include ("include/head.txt"); ?> <?php include ("include/menu.txt"); ?> <div id="content"><h2>Lifepak Prime</h2><img class="floatleft" src="graphics/lifepak-prime.bmp" width="192" height="192" alt="Lifepak Prime" /> Lifepak Prime contains all the nutrition in Lifepak anti-aging formula <i>and more</i>. Add quality years to your life by providing the vitamins, minerals, and trace elements your body needs to protect and regenerate cells. <br><br>Lifepak Prime all-natural dietary supplements addresses the specific needs of men over 40 and post-menopausal women with BioGinkgo 27/7 extract (ginkgo biloba), milk thistle, glutathione, alpha-lipoic acid, coenzyme Q10, and grape seed extract. <br><br>Lifepak Prime provides 150 IU, or 500 % daily value, of vitamin E, increased levels of B6, B12, and zinc for optimal nutrition intake. Lifepak Prime also provides unique dietary components for bone health, as well as those that support memory and circulation. <br><br>My family uses Lifepak so I'll be happy to answer questions about Lifepak on the <a href="http://www.pxgo.com/discuss/viewforum.php?f=9">Lifepak message board</a>. We'd also love to hear from other people who are using Lifepak. <br><h2>Lifepak information</h2>Lifepak Prime is optimized for men over 40 and post-menopausal women. There is also a Lifepak for pregnant and lactating women (Lifepak PreNatal), Lifepak for woomen from 18-menopause (<a href="lifepak-women.php">Lifepak Women</a>), and adults from 18 to 40 (<a href="lifepak.php">Lifepak anti-aging formula</a>). <br><br>Lifepak is a vitmain, mineral, phytonutrient supplement. Lifepak is much more than a multiple although it does address common deficincies: <ul><li>Vitamins A, E, and B6 <li>Zinc, iron, calcium, and magnesium for healthy bones <li>Alpha-lipoic acid, vitamins B9 (folic acid), B12, C, E, flavinoids, and carotenoids for the anti-aging processes of cellular protection and cellular regeneration. </ul></div> <br><br> <?php include ("include/ads.txt"); ?><br><br> <?php include ("include/footer.txt"); ?> </BODY></HTML> Code: BODY { margin-left: 0%; margin-right: 0%; margin-top: 0%; font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR:#000000; BACKGROUND-COLOR:#ffffff; } A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;} A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;} A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;} A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;} FONT {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 13px; FONT-FAMILY: verdana, arial, sans-serif} .titular {COLOR: #000000; background-color:#238c13;} .negro {background-color:#000000; color: #FFFFFF; FONT-SIZE: 12px; FONT-FAMILY: verdana, arial, sans-serif; font-weight:bold;} .floatleft {float: left; border=1; padding=1; margin: 4px;} a { color:#09c; font-size:11px; font-family:verdana, arial, helvetica, sans-serif; font-weight:600; text-decoration:none; } a:link {color:#09c;} a:visited {color:#07a;} a:hover {background-color:#eee;} #head { font-family:verdana, arial, sans-serif; color:#000000; font-size:16px; font-weight:800; background:#238c13; padding:0px; } #head h1 { margin:0px 0px 0px 0px; padding:20px; color:#000000; font-size:18px; font-weight:800; z-index:1; } #head a, #head a:link, #head a:visited, #head a:active, #head a:hover { margin:0px 0px 0px 0px; padding:20px; color:#000000; font-family:verdana, arial, sans-serif; font-size:18px; font-weight:800; text-decoration: none; } /* All the content boxes belong to the content class. */ #content { position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */ width:auto; min-width:200px; margin:30px 170px 20px 220px; border:0px; background-color: #ffffff; padding:10px; color: #000000; font:bold 15px verdana, arial, sans-serif; z-index:5; } #content h2 {font:bold 16px verdana, arial, sans-serif; padding:15px;} #content a:link { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;} #content a:visited { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;} #content a:active { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;} #content a:hover { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;} #navi { position:absolute; width:200px; top:120px; left:20px; border-right:#238c13 2px dotted; background-color:#ffffff; padding:0px; color:#238c13; font:bold 13px verdana, arial, sans-serif; z-index:2; } #navi A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;} #navi A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;} #navi A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;} #navi A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;} #ads { position:absolute; width:130px; top:100px; right:10px; border-left:#238c13 2px dotted; background-color:#ffffff; padding:10px; z-index:3; } #footer { position:absolute; width:100%; top:730px; margin:10px 0px 0px 0px; padding:10px 0px 0px 0px; border-top:#238c13 2px dotted; background-color:#ffffff; z-index:4; } #footer A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;} #footer A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;} #footer A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;} #footer A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;} I want to display text, image, videolinks in the header and footer images in my html with css.While header and footer images are displayed in the html , the intended text,image,videolinks are not displayed within the image block of header, footer.Will you please advise me the correct code in css, html to embed the text,image,videolinks inside the header and footer images. thanks Hello, I am a fan of css and use it all the time. My one and only one problem with it is centering an image in a column that has been floated right. I've tried numerous ways to do this, but none have worked. Usually I end up adding a 2 column table, fixing the right column with x px, then adding images in rows in the left table column. This really does not center the image for all screen sizes, but it does move the images to the left. Also, margin-right:xpx would do about the same thing. This long-winded explanation leads to my css question: Is there a way to center images in a column that has been floated right? Maybe I am over-looking the obvious. Regards, Lee Hi, I have a table in my website and i want in one column to place an image at the bottom of it (and stay there when the height of the table changes). The column already has a repeated background image. Thanks Hey guys, since the last time I posted, I've made a lot of progress with learning CSS but I'm still having one issue. When I resize my window or I use a smaller resolution, my footer bleeds out into the third column. It doesn't do this with the header, navbar, or text box and I don't understand why. Any help? I seem to be having a bit of a problem with a layout I am attempting...here is the problem... First of all, this is a 4 column layout with an absolutely positioned header. The 4 columns use floats for positioning as I am trying to keep a natural code flow. The 4 columns are intended to expand and contract with the page's width, and the heights should be 100%. The content of the page flows below the fold of the page on nearly every page. My problem is with the 100% height. In Firefox the footer that I am using to clear the floats is not clearing them, but rather resting below the floats. Does anyone have a good reference for using floats with 100% height that flow below the fold of the page? If someone wants to take a look at an example, you should message me as I can't post the development site publicly. |