Changing the size of the footer graphic


Author Message
Dave

Posted: 11/19/2009
Quote message 

For some reason the graphic that spans the width of the footer has a gap on the left and right side and the graphic resides in the center. How do you change the size of the graphic that spans across the footer? I want to modify it so it touches both edges of the vertical borders f the page.

I checked the CSS and I see a few different areas of code and I tried to change on of them though it did not work.

Thanks.
 
Garry

Posted: 11/19/2009
Quote message 

Following classes/code control the rendering of that section, you can try molding it according to your needs:


<div class="art-PostFooterIcons art-metadata-icons">
<?php echo implode(' | ', $icons); ?>

</div>
 
Garry

Posted: 11/19/2009
Quote message 

Please ignore my last post, I posted it on wrong place by mistake.
-----------------------------------------------------------------------------------------

I think you should remove padding property from following styling rule to overcome it:

.art-Footer .art-Footer-inner {
height:1%;
padding:8px;
position:relative;
text-align:center;
z-index:0;
}
 
Dave

Posted: 11/19/2009
Quote message 

where does it indicate in the code the width of the graphic the spans the footer?

Thank you!
 
Garry

Posted: 11/20/2009
Quote message 

Graphics(footer image) and width of graphics is specified in following styling rule in your style sheet:

.art-Footer .art-Footer-background {
background-image:url(images/Footer.png);
background-repeat:no-repeat;
bottom:0;
height:150px;
left:0;
position:absolute;
width:874px;
z-index:-1;
}
 
Dave

Posted: 11/22/2009
Quote message 

This problem started because I changed the width of my site in the CSS from 900px to 950px and not the footer does not span right horizontally right. There is a gap on the left and on the right side of the graphic (maybe it is not a graphic?) the area where the copyright text is placed.

1.) I tried removing the padding:8px; I deleted this whole line and that did not do it.
2.) I changed width:874px; TO width:950px; and that did not seem make any difference.

Is this a different issue?

Thanks.
 
Garry

Posted: 11/23/2009
Quote message 

Can you post a screenshot
 
Dave

Posted: 11/24/2009
Quote message 

http://i1001.photobucket.com/albums/af134/stanwelks/footer.gif

Thanks for your help!
 
Garry

Posted: 11/24/2009
Quote message 

You should check the width of div in which dark color footer image is placed and simply increase it width. I can suggest you some css edits if I have your URL
 
Dave

Posted: 11/28/2009
Quote message 

My site is being designed to be 950px wide. I did a search of "width" in the CSS file and I tried changing all of the ones that were over 800px to 950px, because I figured if it was that close, it is probably meant to be span the full width. When doing this, it messed up the widget column so now I am not sure what to do. Which of these should be made into 950px to correct the footer? Thanks so much!!!!


{
position:relative;
z-index:0;
margin:0 auto;
width: 950px;
min-width:33px;
min-height:33px;
}



#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
min-width:900px;
}


/* begin Header */
div.art-Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 898px;
height: 100px;
}




div.art-Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 898px;
height: 100px;
background-image: url('images/Header.jpg');
background-repeat: no-repeat;
background-position: center center;
}





.art-nav .r
{
right: 0;
width: 898px;
clip: rect(auto, auto, auto, 898px);
}




.art-contentLayout
{
position: relative;
margin-bottom: 2px;
width: 898px;
}




.art-BlockHeader .r
{
width:898px;
right:0;
clip: rect(auto, auto, auto, 892px);
}



.art-Footer
{
position:relative;
z-index:0;
overflow:hidden;
width: 898px;
margin: 5px auto 0px auto;
}




.art-Footer .art-Footer-background
{
position:absolute;
z-index:-1;
background-repeat:no-repeat;
background-image: url('images/Footer.png');
width: 898px;
height: 150px;
bottom:0;
left:0;
}


.art-contentLayout .art-content
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 673px;
}



.art-contentLayout .art-content-wide
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 897px;
}
 
Garry

Posted: 11/28/2009
Quote message 

Artisteer also place vertical images in left and right side of templates(to display side borders), it may be cause of the issue, following styling rule place images on sides:

.art-Sheet-cr, .art-Sheet-cl {
background-image:url(images/Sheet-v.png);
bottom:17px;
top:17px;
width:34px;
}
 
DAVE

Posted: 11/28/2009
Quote message 

Hi Gary,

What would I do with this? i am not sure what you are suggesting.

Thanks.


 
Garry

Posted: 11/29/2009
Quote message 

It may happen that vertical images are restricting your footer from spanning the entire footer width.
 
Jason

Posted: 1/1/2010
Quote message 

Hey Dave,

I don't know if you figured it out yet, but I'm pretty sure your problem has to do with the actual size of your Footer.png image. You'll have to manually enlarge it with a graphic editing program for it to span the whole way.