kitster79 Posted April 26, 2010 Report Share Posted April 26, 2010 Hi Guys, See this URL....probably just a simple fix...http://vojodesign.com/proofs/harborCare/_root/home01.html I cant seem to figure out how to extend my #wrapper div to the end of the main content area (the white area) and meet with the footer. I have tried placing divs with clear:both values in a couple of places...but I cant quite get it right. It is supposed to look like this...http://globalvisionpr.com/harborCare/home01.html Many thanks in advance... Kit Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 26, 2010 Report Share Posted April 26, 2010 Adding "overflow:auto" to the #wrapper should fix that. ... you realize that the way the site is currently coded, users using 1024x768 resolution will have to scroll horizontally to see the whole site? Quote Link to comment Share on other sites More sharing options...
kitster79 Posted April 26, 2010 Author Report Share Posted April 26, 2010 Thanks Ben. Regarding the width issue, yeah I did realize and I dont like it, but I couldn't figure out a way to slice it so that those foliage background images could display. Initially, I had exported one large background image that included both sided of the foliage, but this of course turned out to be about a 170k image...just too big. If you have any recommendations, I would love to hear them:) Thanks Kit Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 26, 2010 Report Share Posted April 26, 2010 Given the choice, a large background image would probably be the way I'd go... did you try a transparent PNG/GIF that would sit on your main background pattern? Otherwise... You could get that effect with tables -- a 100% width table with the center column a fixed width and the two outer columns at 50% width. I believe I did that at one point a while ago, though it isn't the ideal situation and I'm not sure how it would work with browser compatibility. Another option -- though something to experiment with, I don't have the time to test it in depth at the moment -- is to absolutely position both outside the wrapperInner div. Something like: #wrapper { overflow:hidden; } #wrapperInner { width:960px; position:relative; } #foliageLeft { position:absolute; left: -127px; ...rest of css... } #foliageRight { position:absolute; right: -127px; ...rest of css... } I'd need to play with it to figure it out exactly... I played with it in Firebug for a couple minutes though and it does work. The position:absolute takes it out of the document flow and doesn't force the scrollbars to appear. The footer does need to be fixed to avoid scrollbars though. Of course, I haven't tested this on multiple browsers, only Firefox. Quote Link to comment Share on other sites More sharing options...
kitster79 Posted April 30, 2010 Author Report Share Posted April 30, 2010 Great. I went with the first option. Thanks Ben, I think it works dont you?... http://vojodesign.com/proofs/harborCare/_root/home01.html Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 30, 2010 Report Share Posted April 30, 2010 Looks good. You still have a footer issue when running 1024x768 though -- the footer has a scroll bar and the bear image in the footer is misaligned with the bear image above the footer. Quote Link to comment Share on other sites More sharing options...
kitster79 Posted April 30, 2010 Author Report Share Posted April 30, 2010 You're right. I'm going to fix the footer. However, I checked IE7, and the top main navigation is all out of place. Any ideas how to fix this for IE7?... http://vojodesign.com/proofs/harborCare/_root/home01.html Quote Link to comment Share on other sites More sharing options...
falkencreative Posted April 30, 2010 Report Share Posted April 30, 2010 I'll take a look a little later today and see if I can come up with anything. Quote Link to comment Share on other sites More sharing options...
newseed Posted May 1, 2010 Report Share Posted May 1, 2010 You're right. I'm going to fix the footer. However, I checked IE7, and the top main navigation is all out of place. Any ideas how to fix this for IE7?... http://vojodesign.com/proofs/harborCare/_root/home01.html Add float: left; to the logo image. Quote Link to comment Share on other sites More sharing options...
kitster79 Posted May 1, 2010 Author Report Share Posted May 1, 2010 Great. That did the job. Thanks guys. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.