Full image not appearing...

Working on a redesign of my wife's nutrition blog, but I've encountered as issue I can't figure out. I'm not a designer, but usually I can figure out enough CSS to get me by.

I usually take an old design to work off, so there's probably code that doesn't need to be there, this is just the 'sandbox'.

If you notice the header graphic, the blue streams out to the side using;

body {
	width: 950px;
	background: #fff url(images/dietrifficbg.jpg) top center no-repeat;
	color: #333333;
	font-size: 12px;
	font-family: Verdana, Helvetica;
	margin: 0px auto 0px;
	padding: 0px;
	border-left: 0px solid #333333;
	border-right: 0px solid #333333;
	}

Code (markup):

The problem is that the footer image is supposed to do the same thing, but it's cutting off at 950px. I have it in as;

#footer {
        width: 950px;
	height: 300px;
        background: #fff url(images/dietrifficft.jpg) top center no-repeat;
	color: #999;
        font-size: 11px;
	margin: 0px auto 0px;
	text-align: left;
        overflow: hidden;
	line-height: 17px;
	}

Code (markup):

Can someone help me to make the footer image like the header? The address to see it is http://www.armensblog.com/sandbox/

Ignore the links, and writing, it's all just there from a past design which I used to work from.

 

You have:

 width: 950px;
height: 300px; <--only on the footer, but that shouldn't mean anything in this case

Code (markup):

You've set your div box to be so-high and so-wide. Normally, if content is too big, if will continue to flow out (text may wrap to fit the width, but then may flow down past the end of the div block).

The header image is flowing outside its contents like normal.

But in the footer, you've got

overflow: hidden;

Code (markup):

This tells the browser that anything bigger than the div box should not be seen or even clickable by the user.
If removing overflow:hidden doesn't allow the image to flow out, then the footer may be inheriting some rule from another div box.

 

- Remove: width:950px
- Make an inner DIV, for example

#footer-inner{
   width:950px;
  ...
}

Code (markup):

Then the HTML code

<div id="footer">
   <div id="footer-inner">
   ...
   </div>
</div>

Code (markup):

 

@Stomme poes

Thanks for your input, I really appreciate it. I removed the 'overflow: hidden' and it didn't make any difference to the look. I then removed the 'height' but it messed up the look completely, and the image didn't appear.

I'm stumped!

 

Hmm, try Golden's solution, but not with the new footer-inner... I don't think he saw that you already have like 3 little inner-footer parts already.
So maybe take the width: 950px out of #footer, but just leave the width:250px on the three inner footer things you already have. Let's see.

Oh, and no I wouldn't remove the height at all, it's just that when I quoted your code to talk about the header, I used actually code from the footer which had a height (and the header didn't). The height shouldn't make a difference.

 

I removed the width: 950px from the #footer, but it didn't work. I've left it so you can see what happens.

 

I just checked the http://www.armensblog.com/sandbox/wp-content/themes/dietriffic1/style.css
and I do see the width 950 in there... but here's something I noticed:
In your html, you have a container div called #footerbg, then inside that #footer. The Css has no #footerbg properties. I'm thinking that somehow the footer is inheriting the max-width from somewhere, still acting like overflow:hidden does. Maybe it's because there's a containing div (#footerbg) that's sitting around #footer?
The new half-circle effect is... interesting : )

A div's width is the same as whatever container it's in, unless you write that it should be bigger. Maybe set a width of (however wide the image actully is) to #footerbg, and check; then if no change, try moving the background-image up to #footerbg as well. If you're going to have a div sitting out there, it might as well do something : ) This is prolly my last guess.

You know that game where you have to pick the cup with the ball under it, out of three cups? I have the opposite of psychic power-- I guess correctly less than 50% of the time. But I like trying my mind on these because I'm still learning css and this is good practise.

 

@Stomme

You know CSS better than me anyway. I have learned what I know simply by looking at other designs, and memorizing what you put and where. Most of the time I haven't a clue what I'm doing, but I usually get what I want through constant trial and error. It hasn't worked this time though, and I tried the half circle effect to see what it would look like, but it doesn't look as good as what I initially wanted.

I'm just in the door from a meeting, I'll go and try out your suggestion now...

 

OK....I deleted the #footerbg and I've removed the width: 950px;
As you can see, it looks a mess.

Can you place a second background image in the body?

 

I wouldn't mind paying someone to help me with this. For someone who understands CSS well, it should be easy. They should know if it can work, and if it can, how.

 

I'm not doing anything right now (just got done eating dinner), so I'll go ahead and take a stab at it for you.

 

If you figure it out, and want something for it Dan, just let me know.

 

Oh, don't worry. I'll fix it. And the other problems that your template has as well. About the only thing I won't do is convert it to a WordPress theme.

 

Your HTML isn't indented well so it's hard to follow.
But I think the problem is not hard. The first thing you need to make sure is the outermost footer DIV has 100% width. So if it is inside the "wrap" DIV, break it out.
So thing like this:

<div style="width:950px;...">
   THis is your main content, has 950px width!
</div>
<div style="background:url(footer.png);...">  <!-- this is your outer wrap -->
   <div style="width:950px;...">  <!--now the real footer div--->
   
   </div>
</div>

Code (markup):

 

Which does nothing to address the other major issues the design has. I'm sure the OP will be glad that I'm re-writing it from the ground up. Sucks that I don't have the .psd file that went with this, otherwise the images would be a lot better.

 

Well I wasn't really looking for a complete rewriting of the code Dan. It was originally a Brian Gardner theme, and I adapted it for the design of my own blog. Then I just used the same for my wife's blog. I must admit, all I try to do is make my designs look the way they should, I don't try to make the code look pretty

As for a .psd file. Well, it's just using two images for the banner and footer which I made up from my head. I generally don't sketch a design, or map out the full design in Photoshop either. I have a fair idea of what I want in my head, create the appropriate images. I then put it into an old design, and adapt the code around it, aligning, adding/removing sidebars, etc.

What I know, I've taught myself, so it isn't exactly following a book.

 

alright, I took a look at the code for 10 minutes and here's your fix:

Find this:

<div id="footer">

Code (markup):

Add this above it:

[B]<div id="footer-wrap">[/B]

Code (markup):

Then find this:

<div id="footerright">
<h2>Must Reads</h2>
	<ul>
	<li><a href="http://www.alexking.org/">Alex</a></li>
<li><a href="http://inphotos.org/">Donncha</a></li>
<li><a href="http://dougal.gunters.org/">Dougal</a></li>
<li><a href="http://photomatt.net/">Matt</a></li>
<li><a href="http://zengun.org/weblog/">Michel</a></li>
<li><a href="http://zed1.com/journalized/">Mike</a></li>
<li><a href="http://boren.nu/">Ryan</a></li>
	</ul>
	</div>

</div>
</div>

Code (markup):

Add this below:

[B]</div>[/B]

Code (markup):

This will close the new div we just created above ^, all we're doing is wrapping the footer in a new div which will expand to the limits of the page, effectively displaying the entire background image.

Now add this into your css:

#footer-wrap {
[B]width:100%;[/B]
height: 300px;
background: #fff url(http://www.armensblog.com/sandbox/wp-content/themes/dietriffic1/images/dietrifficft.jpg) top center no-repeat;
}

Code (markup):

This was essentially taken from the #footer, meaning you can remove the height and background code from #footer, as its redundant. This will do what you want as I understand.

I know Dan won't approve since he's made it clear that he's on a mission to rid the internet of crappy css coding (lol), but if this code does what you want, and you're happy, then use it!

 

@Gwiz

Thank you very much for the clear and concise instructions. I implemented your suggestions, and you can see the end result for yourself. It's exactly the same as when I started, the footer won't stream out to the sides.

I didn't realise Dan was on such a mission, although I did think it was quite a severe move to launch in and start to completely rewrite the code.

 

Oh don't worry about the mission - it's not so much about crappy CSS as it is crappy HTML.

And besides, your cleaned up HTML is done. I'm working on the CSS now. I wish I had the .psd file so I could make the images better, but since I don't have it, and making a new logo would take far too long, I guess you'll be stuck with me modifying your existing graphics.

At least dialup, mobile and screen reader (read: blind) users such as myself (regarding the dialup crowd, my eyesight may be bad but it's not that bad yet) won't cry when they get to your wife's site when I'm done with it.

 

I could send you the .psd if you really want...

pm your email address

edit: have to go now, I'll not be back for a few hours.