...

View Full Version : Problem: Text overextending past footer DIV tag



digitalised
01-22-2012, 12:53 AM
I've been having problems with my DIV layers - the text goes beyond the DIV footer image, but it's not entirely the DIV background's fault 'cause it DOES repeat... Up to a certain extent. :( I can't seem to figure out how to force the text to stop overextending past the footer DIV tag WHILE keeping the DIV background going.

My "container" element houses the images and the other two elements. The "main" element is where the text goes, and the "footer" element is the image that comes after the end of the text.

In this image here (http://i43.tinypic.com/244qmoy.jpg), the text goes over the footer image - green arrow is to show where the footer image starts, red arrow is to show where I'd like the text to stop. The background image in the container works for awhile but then stops, so I suppose it doesn't expand correctly...??

I tried to play around with the code to try and fix it - from trying to add padding-top/bottom, to adding the repeating background stretch in the body part, to playing around with the position tags, to trying out the sticky footer (except my layout is only one column... the navigation is part of the layout in the CSS), I just can't seem to get it right. After awhile, I'm starting to think that it's a position: tag problem, but I can't seem to get the positions right.

This is as best as I can get it. :( Do you guys have any helpful solutions and/or tips?? Thanks so much!


#container {
position: absolute;
width:1057px;
height: 100%;
background-image:url(layout/bw-div.png);
background-repeat: repeat-y;
border:0px;
text-align:left;
padding-bottom:50px;
}

#main {
position: absolute;
top: 256px;
left: 126px;
width: 830px;
margin: auto;
}

#footer {
height: 358px;
width: 1057px;
bottom: 0;
position: static;
background: url(layout/bw-footer.png) no-repeat;
}

Link to my layout page: http://bubble-wrapped.net/

Excavator
01-22-2012, 01:34 AM
Hello digitalised,
I've never been a fan of slicing an image in to little pieces and then making the browser put it all back together again. Hate tables too, see the link about tables in my signature line. There is a link there about DocTypes there that you should also look at.

Instead... put what images you can back together, nest some div elements and with a little margin you can come up with this - old link

digitalised
01-23-2012, 12:50 AM
Hello digitalised,
I've never been a fan of slicing an image in to little pieces and then making the browser put it all back together again. Hate tables too, see the link about tables in my signature line. There is a link there about DocTypes there that you should also look at.

Instead... put what images you can back together, nest some div elements and with a little margin you can come up with this - http://nopeople.com/digitalised/

Thanks so much! It works, actually, and I did just as you had suggested - I'll be sure to read up those articles as you've suggested as well.

However, another problem that I had encountered with your solution is that it gets rid of my CSS image menu stuff - I tried stuffing this (code is below) in between the DIV nest in different order along with outside of the nest, but it still doesn't show up.



<ul id="menu">
<li><a href="#" class="about">About<span></span></a></li>
<br>
<li><a href="#" class="random">Random<span></span></a></li>
</ul>


It's supposed to look like this (http://bubble-wrapped.net/bw.html) (my original code, more or less). Is there a way to fix it with the current set-up that I have right now?

Excavator
01-23-2012, 01:18 AM
I would not use the image map/coordinates thing myself. I would edit the top of that header image to be blank then put CSS rollover sprites up there to do the same thing. See this demo for CSS rollover (http://nopeople.com/CSS%20tips/CSS_rollover/index.html).

You could probably get your image map to work again too, it would not go in the div that holds the header image right now because there is a layer or two on top of that.
You would need to edit the image to get rid of the about/random that doesn't do anything right now, recreate your imagemap that does work and place it in the same nested element that holds your content.
In that demo (http://nopeople.com/digitalised/), content is margined down 250px, you would just need to change that margin to place your imagemap.

digitalised
01-23-2012, 10:59 PM
Thanks so much for your help, Excavator!

The image map is actually just for users to click at the "Bubble-Wrapped.Net" logo to get back onto the main page. =P I'll fix it again with Dreamweaver since after the revamp, the map doesn't seem to work anymore, but I'm quite satisfied with the result! Thank you so much for your help!!

Can somebody mark this as solved? Thanks!

digitalised
01-23-2012, 11:21 PM
Actually, one last question hahahaha...

I can't seem to force the content to stay a certain size - right now, if it's a page where there's few text, it cuts off on the header image.

I can make the height to be 900px so that it could display the layout properly, but the catch is that if I have a ton of text, it'll just go beyond the footer.

How can I force it to show the layout AND expand when needed??

Sample page here to see what I'm talking about. (http://bubble-wrapped.net/about.php)

Excavator
01-23-2012, 11:25 PM
This might be a good place to use the min-height property (http://www.w3schools.com/cssref/pr_dim_min-height.asp).


#content {
min-height: 900px;
width: 830px;
margin: 0px 130px 200px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum