|
CSS - Footer Image Problems
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; } Similar TutorialsHello all, I had a question about the CSS file I was using for my site. I have a multi-column setup, with header, nav, content, right column, and footer as the columns. Now everything except the footer are together. The footer is spaced from the rest of the page, and I'd like it to connect to the bottom of the page. My CSS: * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000; background-color: #3b5999; } h1 { font-family: "Trebuchet MS"; font-size: 20px; color: #000; } h3 { font-family: "Trebuchet MS"; color: #000; font-size: 12px; } A:link { font-family: Verdana; font-size: 12px; color: #000; text-decoration: none; border: 0; } A:visited { color: #000; text-decoration: none; border: none; } A:active { color: #000; text-decoration: none; border: none; } A:hover { color: #8CC1DF; text-decoration: none; } #wrapper { margin: 0 auto; width: 922px; } #header { width: 900px; padding: 10px; height: 100px; background-image: url(background.png); background-repeat: no-repeat; } #navigation { float: left; width: 900px; height: 42px; margin: 0px 5px 0px 0px; text-align: center; font-family: Arial; } #content { float: left; background-color: #fff; font-family: "Trebuchet MS"; font-size: 12px; color: #000; padding: 10px; height: 350px; width: 683px; margin-left: auto; margin-right: auto; overflow: auto; } #rightcolumn { background: #fff; padding: 10px; margin: 0px 0px 5px 0px; height: 350px; width: 195px; float: left; } #footer { width: 920px; height: 40px; padding: 10px; clear: both; margin: 0px 0px 10px 0px; background-image: url(footer.gif); background-repeat: no-repeat; font-family: Arial; color: #000; } Thanks in advance! I can't get a footer after at bottom of the page. The problem is my maincontent area is dynamic in size although i have edited this out. The footer appears to the left of maincontent and not at bottom. Code: ...
div#headerWrapper {
position:absolute;
top:5px;
left: 5px;
background: #63625e ;
width:1000px;
height:120px;
top:3px;
left: 5px;
border:2px groove black;
}
div#header {
position:relative;
top:5px;
left: 5px;
width:990px;
height:100px;
background: black;
border:5px groove #63625e ;
}
div#boxlayer1 {
position:absolute;
width:145px;
height:700px;
z-index:1;
left: 5px;
top: 125px;
border:2px groove black;
// background: green;
background-color:#63625e;
}
div#content1 {
position:absolute;
top:125px; /*border adds 2 px so i take them off*/
left: 165px;
width:850px;
height:900px;
z-index:1;
border:5px groove #666862;
background: black;
}
#footer {
clear:both;
float:none;
width:200px;
height:100px;
background: red;
border:5px groove #63625e ;
}
.....
</head>
<body bgcolor="#666862"> <?php include("navigation2.php"); ?>
<div id="navlist">
<div id="headnavlist">Site Features</div>
<ul >
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>
<li ><a href='login.php'>Send Mesage</a></li>
<li><a href='home.php'>Message Outbox</a></li>
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>
<li><a href='home.php'>Message Outbox</a></li>
</ul>
</div>
</div>
<div id="content1" >
asfafas
</div> <br><br>
<div id="footer">
asdsa
</div>
</body>
</html>
Hi all, I have a page with a sticky footer. It's all working great thanks to the sticky bottom tutorial from Ryan Fait. I already contact him but his wrists are broken so he can't do anything. This is the website we're talking about: - www .rokjesdagloop .nl And here is the deal: - As you can see the footer stays at bottom so I insert the sticky bottom tutorial wich lead us to this: www .rokjesdagloop .nl /test .php But I want the footer a little bit inside the content so the text overlaps the girl a bit on the background. I tried several things on the margin's and the heights but still nothing that works. Does anybody have tips or codes? Would be great! Thank you in advanced! Regards, Jonathan Hey everyone, So I'm working on a website for a client and I am running into a bit of a weird problem.. The home page displays as follows: http://www.beitelligent.com/clients/keldan/index.php As you can see, the footer is pushed to the absolute bottom - where it should be.. this is displaying correctly. I began to make sub-pages and ran into the problem, where the footer isn't pushing to the bottom.. http://www.beitelligent.com/clients/keldan/about.php - Any ideas?? Any help is appreciated. Thanks, Peter Barbosa Hey. First post on here, so hopefully you lot are very helpful I've been asked to make a site for someone I know, and I've done the design, made most of it in CSS and a little php for navigation alerations. The URL for the website is: (URL address blocked: See forum rules) The problem that I'm seeming to have, is that in IE7 the footer only takes the value of the #bottom_container height, and ignores the #left and #right that are inside this container. Meaning that, the footer rides up to the middle of the page, as shown: [IMG](URL address blocked: See forum rules)[/IMG] Does anyone know how to solve this? It's performing well in Safari and Firefox, and even IE6! Just not the new one. I know it's something to do with the height of the botom container, but each page is going to have different amounts of content, so I cant set a height for all of them. Thanks very much! Nick. Firefox renders the page correctly, but IE likes to place the footer in random positions throughout the page. Not sure what's happening here. Look here. Once the page is cached, and the link is selected again, the footer displays correctly. This is very strange. If you clear your cash or refresh the page, it screws the footer up again. The happens on several pages. These are CSS sections for clearfooter and footer. Code:
#clearfooter {
clear: both;
height: 1em;
overflow: hidden;
}
#footer p {
position: absolute;
bottom: 1px; /* Fix for Mozilla spacing from bottom */
left: 150px;
height: 1em;
width: 534px;
color: #ffffff;
text-align: center;
padding: 3px;
margin: auto;
font-weight: bold;
font-size: .6em;
}
I appreciate any help on this... Thanks, Darin Hello! I am new to dreamweaver CS3 and need help with these two things: when I preview my site in IE my lightbox does not work. And my sticky footer does not stick to the bottom of the page. Please someone help me. Thank you in advance! I am having problems with my footer once I resize my to make my page have to scroll left to right. It displays fine until I do this. It makes my footer background not display all the way. Here is my css for reference: Code: .footerWrapper {
margin: 20px 0 0 0;
padding: 0;
width: 100%;
background: url(../images/content123bg.png) repeat-x;
}
.footer {
margin: 0 auto;
padding: 0;
width: 960px;
height: 155px;
}
.footer img {
margin: 10px 0 0 0;
float: right;
}
.footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #09F;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
margin: 0;
width: 145px;
}
h3.facts {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #09F;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
margin: 0 0 0 -3px;
width: 145px;
}
.footer p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #CCC;
text-decoration: none;
text-align: center;
width: 140px;
margin: 0 0 0 2px;
padding: 0 0 5px 0;
}
.footer p a {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #999;
text-decoration: underline;
}
.footer p a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #FFF;
text-decoration: none;
}
#twitter_t {
margin: 0;
padding: 0;
}
#twitter_t img {
width: 150px;
height: 50px;
margin: 0;
border: none;
padding: 0 230px 0 0;
/* [disabled]float: left; */
position: relative;
}
#twitter_m {
width: 370px;
padding: 0 10px 0 0;
background:url(../images/twiiterbubble.png) no-repeat;
float: right;
height: 140px;
margin: -40px 0 0 0px;
border: none;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:10px;
/* [disabled]padding-right: 10px; */
}
#twitter_update_list {
width: 350px;
padding: 0 0 0 20px;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #000;
line-height: 16px;
font-weight:bold;
}
#twitter_update_list li {
width: 350px;
list-style: none;
margin: 60px 0 0 0;
}
#twitter_update_list li a {
color: #FFF;
border-bottom: dotted 1px;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #09f;
}
Here is my HTML: Code: <div class="footerWrapper">
<div class="footer">
<div class="fltlft">
<h3>Quick Links</h3>
<p><a href="http://www.beckin.com/">Home</a></p>
<p><a href="http://www.beckin.com/portfolio.html">Portfolio</a></p>
<p><a href="http://www.beckin.com/css-menus.html">CSS Menus</a></p>
<p><a href="http://www.beckin.com/free-templates.php">Templates</a></p>
</div><!-- end fltlft -->
<div class="fltlft">
<h3>Help</h3>
<p><a href="http://www.beckin.com/support/">Custom Quotes</a></p>
<p><a href="http://www.beckin.com/support/">Support</a></p>
<p><a href="http://www.beckin.com/support/">Webmasters</a></p>
</div><!-- end fltlft -->
<div class="fltlft">
<h3 class="facts">Facts</h3>
<p><a href="#">Privacy Policy</a></p>
<p><a href="#">Terms of Use</a></p>
</div><!-- end fltlft -->
<div id="twitter_t">
<a href="http://twitter.com/beckindesigns"><img src="images/top.png" alt="free web templates" /></a>
</div><!-- end twitter_t -->
<div id="twitter_m">
<div id="twitter_container">
<div id="twitter_update_list"></div>
<!-- end .twitter_container --></div>
<!-- end .twitter_t --></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/beckindesigns.json?callback=twitterCallback2&count=1" type="text/javascript"></script>
<!-- end .footer --></div>
<!-- end .footerWrapper --></div>
Any help with this would be very appreciated. Trying to delete my post but no option to delete so just removing content. 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... 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%; } 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 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'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 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>
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;}
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. 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 I've been puzzling over this for a while now! I'm trying to make the footer stick to the bottom of the page even when the content isn't long enough. I have read many tutorials but none of them ever seem to work out quite right. I have created two pages to demonstrate the problems that I am having. http://www.explosiveracing.net/xmed...all_content.htm This is a page without much content and as you can see the footer is pushed to the bottom. All is well in FF but in IE the footers background seems to randomly disappear. Sometimes on a refresh it reappears but I cant work out what is causing it. http://www.explosiveracing.net/xmed...ong_content.htm This page has a large amount of content that pushes the footer further down. In IE though, the content partially overlaps the footer and the background image also still randomly disappears! Any ideas? |
|||||||