Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problem: Text overextending past footer DIV tag

    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, 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!

    Code:
    #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/

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Last edited by Excavator; 01-23-2012 at 06:33 PM. Reason: killed the link
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    digitalised (01-23-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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.

    Code:
    <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 (my original code, more or less). Is there a way to fix it with the current set-up that I have right now?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.

    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, content is margined down 250px, you would just need to change that margin to place your imagemap.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    digitalised (01-23-2012)

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    This might be a good place to use the min-height property.
    Code:
    #content {
    min-height: 900px;
    	width: 830px;
    	margin: 0px 130px 200px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •