CSS - Want To Allow Image To Break Out Of Footer.

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%;
}

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%;
}

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;
}

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">&nbsp;</td>
    </tr>
  <tr>
    <td height="43" align="left" valign="bottom">&nbsp;</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!

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'm having trouble with my website structure... view this page for an example...

css is here...

The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page...

It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF...

how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF?

Thanks
Bryan

If I use word-break:break-all solves the problem when I enter a word without spaces
(for e.g pppppppppppppppppppppppppppppppppppppppppppp),
it breaks and coming in line by line like
(ppppppp
ppppppp
ppppp)
as I required.

If I use word-break-cjk solves the problem when I enter a word without spaces
(for e.g Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- La Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- La),

it breaks the word as I required.


But I need both scenarios should work. Which style I need to use...?

Anyone know a way to put a page break in a standard html/php webpage? I am printing invoices and need to break to another page after a certain amount of line items are listed.

How do I create two div blocks that lay side by side from each other?

Right now I have two "column" divs (one left and one right), and separate "box" div that contain the content.

CSS:

Code:

div#frame
{
width: 40%;
    margin-top: auto;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
border-style: solid;
border-width: 5px;
border-right-color: black;
border-bottom-color: black;
border-left-color: white;
border-top-color: white;
}
div#title
{
width: 100%;
background-color: black;
color: white;
}
div.box
{
width: 100%;
border-style: solid;
border-width: 5px;
border-right-color: black;
border-bottom-color: black;
border-left-color: white;
border-top-color: white;
}
div#left
{
width: 45%;
}
div#right
{
width: 45%;
margin-left: 50%;
}

HTML:
Code:

<div id="frame">
        <!--------------------------->
        <div id="left">
        <div class="box">
        <div id="title">NEWS</div>
        fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
        <div class="box">
        <div id="title">RECENT GAMES</div>
        fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
        </div>
        <!--------------------------->
        <div id="right">
        <div class="box">
        <div id="title">NEWS</div>
        fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
        <div class="box">
        <div id="title">RECENT GAMES</div>
        fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
        </div>
        </div>

Link: http://mushsauce.110mb.com/art.html

The question is "what effect will page-break-after have on screen media"?

Am I correct when I say that it will have no effect? I believe that page-break-after only affects print media, but I have poor reading comprehension and would just like to double check.