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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts

    Help with unique site coding

    Hey guys! I was told to try posting this subject in the JS forum, so hopefully yo guys can help lol.

    This is an image of the site design we want to go with;



    And this is how we want it to function:



    The main idea being that there's an extra div attached to the tail-end of the footer. That extra div just has a background color tag to "cover" the tiled background in the inner div. How can I accomplish something like this? I'm so lost.

    The footer needs to be a specific distance away from the main-content div, and also obey the fact that it CANNOT cover any of the contents of the main-content div. So therefore no sticky footers or anything. And adding further difficulty is the need for the generated height of the extra div to NOT affect the overall height of the page. But to maybe add 30-50px to it.

    I need this because I'm not a fan of the titled image on a page being seen after the footer. It's something that I've been wanting to do for a while, but can't figure out how.
    Last edited by Psionicsin; 05-18-2011 at 06:43 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    You have posted this in the JavaScript Frameworks section. Which JS framework are you using or going to use or talking about?

  • Users who have thanked VIPStephan for this post:

    Psionicsin (06-07-2011)

  • #3
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    You have posted this in the JavaScript Frameworks section. Which JS framework are you using or going to use or talking about?
    I'm comfortable using JQuery, so I'll stick with that IF possible.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    OK, suppose you have a div with ID “footer” which holds your footer content. You’d add another div at the end (dynamically with jQuery) and animate the height of that div. For example (untested):

    Code:
    $('#footer').append($('<div>', {id: 'footer_bottom'}));
    $('#footer_bottom').animate({height: 100}, 1000);
    Now, I don’t know in which context the div should be animated (on click of something? after a certain time?) so I haven’t included any event handler for now. With the above code it just animates right away.

    Of course, the rest is all done with CSS (applying background etc.).

    Edit: Actually, reading your post again, I’m not sure if I’ve understood correctly what you are trying to achieve. How is the footer supposed to be movable?
    Last edited by VIPStephan; 05-18-2011 at 06:59 PM.

  • Users who have thanked VIPStephan for this post:

    Psionicsin (06-07-2011)

  • #5
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Edit: Actually, reading your post again, I’m not sure if I’ve understood correctly what you are trying to achieve. How is the footer supposed to be movable?
    The site is going to be AJAX'd near the end of completion, lol sorry I didn't explain that well. That's what i meant by moveable. The y-position is going to be dynamically changing depending on what content is presented.

    Edit: So basically I want the site to look and function like this site here, but with the added benefit of the footer-bottom div thing you are talking about. However the triggering of the event SHOULD be automatic. This is so confusing, I hope I'm talking about this right.
    Last edited by Psionicsin; 05-18-2011 at 07:08 PM.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Perhaps I've misunderstood, but do you really need to do anything special for this?

    Could you not just have four separate (perhaps static) divs? When (ajax) content is loaded into the main content div it will automatically expand to contain the content and the footer div will always be below it - it won't overlap.

    If you give the content div a background it will not spill over into the footer, nor into the following tail div with the other background pattern.

    You could perhaps give the footer and tail divs a specific height, and maybe give the footer div a top-margin so it is slightly separated from the content above it.

    As I say, perhaps I've misunderstood. Maybe you want the final (tail) div to automatically expand. Soz, Andy.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Psionicsin (06-07-2011)

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    .. the last tail div would need a specific height (or perhaps a minimum-height) otherwise.. how would you know when to finish it?

    Again, apologies if I've mis-understood. Andy.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Psionicsin (06-07-2011)

  • #8
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    .. the last tail div would need a specific height (or perhaps a minimum-height) otherwise.. how would you know when to finish it?

    Again, apologies if I've mis-understood. Andy.
    Hey Andy. I totally understand where you're coming from lol.

    Here's the site THUS far

    See how you can see the patterned background image after the footer? Well I want it to be just a flat color after that. Partly an aesthetic thing for me more than anything.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Well I had to zoom in and remove my status bar to see it, but

    The grey pictured background is a background for the body so will extend to the full height of the page. The 'p' element within your footer has a 27 pixel bottom margin, so this background shows through the margin.

    Use css to remove this:
    Code:
    footer p { margin-bottom: 0; }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Psionicsin (06-07-2011)

  • #10
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    The grey pictured background is a background for the body so will extend to the full height of the page.
    Exactly, which is why I'm trying to device a way to cover this up after the footer element.

    Quote Originally Posted by AndrewGSW View Post
    The 'p' element within your footer has a 27 pixel bottom margin, so this background shows through the margin.

    Use css to remove this:
    Code:
    footer p { margin-bottom: 0; }
    This didn't work. You might wanna hit ctrl+F5 though as I've been updating code since my last response.

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You now have a table in your footer which is taller than the footer section, causing the body background to again show after the grey band of the footer. So either increase the height of the footer to contain the table or reduce the height of elements within the table that cause it to expand beyond the footer container.

    I would re-design it but it would involve a bit of effort:

    Don't put the background image on the body;
    I would remove the float: left that you've applied to a number of elements - I'm not sure why this is needed;
    Have a header div that contains the banner and nav bar and has the thin, repeating image as a background;
    A main content area that has the gray graphic as a background;
    A footer area (as you have currently) - although I probably wouldn't use a table for layout but float elements and use margins to space them (possibly);
    A fourth section (if you still want it) after the footer that contains the plain colour or background image that you want and has a specific height.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Psionicsin (06-07-2011)

  • #12
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Ok a couple questions here, as I'm trying these out with firebug as I read and weird things are happening...

    Quote Originally Posted by AndrewGSW View Post
    You now have a table in your footer which is taller than the footer section, causing the body background to again show after the grey band of the footer. So either increase the height of the footer to contain the table or reduce the height of elements within the table that cause it to expand beyond the footer container.
    I'm not seeing this. My footer is 60px tall, and the table (when I switch to topographical view) looks to be confined perfectly within the footer. Although, yes, I agree that floating would be better to a fault.

    Quote Originally Posted by AndrewGSW View Post
    I would re-design it but it would involve a bit of effort:
    Are you talking from the ground up, or the elements you've mentioned below?

    Quote Originally Posted by AndrewGSW View Post
    Don't put the background image on the body;
    If I don't place it on the body, then i only have one other infinite element to apply two graphics to which we presently cannot do. The tiled graphic which tiles infinitely, and the graphic behind the menu that needs to stretch infinitely on the x-axis.

    Quote Originally Posted by AndrewGSW View Post
    I would remove the float: left that you've applied to a number of elements - I'm not sure why this is needed;
    Tried removing it from some, but then the site design breaks so I think they're needed.

    If I take it off of #page-wrap then the background image vanishes.
    If I take it off of #nav, nothing happens.
    If I take it off of #content-group then the graphic from #page-wrap returns, but distorted.
    #content needs it. #specs needs it on both or else the [a] will slip out of the images.
    Same with #attn.
    If footer doesn't have it, it goes to the top of the page.

    Quote Originally Posted by AndrewGSW View Post
    Have a header div that contains the banner and nav bar and has the thin, repeating image as a background;
    Makes perfect sense. Last time I looked at the spec that wasn't allowed, but they seemed to have changed it so ok to that. ALTHOUGH am I now placing the header in the #page-wrap instead of the #container? Because the graphic can't be truncated by the containers width.

    Quote Originally Posted by AndrewGSW View Post
    A main content area that has the gray graphic as a background;
    Now I currently have 4 "nested" divs (I count html and body as divs also).
    1-html>2-body>3-page-wrap>4-container.
    So are you proposing that I create another 100% width div between the 2&3 or 3&4 to apply the background image onto?

    Quote Originally Posted by AndrewGSW View Post
    A fourth section (if you still want it) after the footer that contains the plain colour or background image that you want and has a specific height.
    And this is what we keep coming back to. Using html and css I can see the reason why having another div with a constant height is needed, but I'm still afraid that that background image will show even after that div.

  • #13
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    So are saying I should structure it like this?

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    	<meta charset="utf-8">
    </head>
    
    <body oncontextmenu="return false;">
    
    <div id="page-wrap">
    	<header>
    		<nav>
    		</nav>
    	</header>
    	<div id="main-container">
    		<div id="container">
    			<div id="content-group">
    				<div id="content">
    				</div>
    				<div id="specs">
    				</div>
    				<div id="attn">
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    <footer>
    </footer>
    
    </body>
    
    </html>

  • #14
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by Psionicsin View Post
    So are saying I should structure it like this?
    I am not saying you should do this, just that this is how I might approach it
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    	<meta charset="utf-8">
    </head>
    
    <body oncontextmenu="return false;">
    <header>
    	<nav>
    	</nav>
    </header>
    <div id="main-container">
    	<div id="container">
    		<div id="content">
    		</div>
    		<div id="specs">
    		</div>
    		<div id="attn">
    		</div>
    	</div>
    </div>
    <footer>
    </footer>
    </body>
    </html>
    I am not a fan of divitis and can't see the need for a page wrapper div.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Psionicsin (06-07-2011)

  • #15
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    346
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    I am not a fan of divitis and can't see the need for a page wrapper div.
    Ok now I can see what you're getting at. Would me applying that tileable image to the #main-container block the image that's to be applied to the header? I ask because I've tried a FORM of this with other divs and such and it always seems to c*ck-block the under-graphic. Or, is it because the header isn't an actual #div that it'll work?

    UPDATE: Also, if this works (now let's get to the java part of this lol), is there a way using jQuery to make java render a solid color between the end of the footer and the bottom of the page/window? I tried some prelim tests and using another div, if the page was shorter than the default size of the window...some of the graphic was still showing. Meaning I'll need something dynamic to pull this off.

    UPDATE 2: Nevermind that last question. I went ahead with the rebild and NOW I don't need jquery to fix the problem. I guess I had some faulty code.

    Thanks for your help, AndrewGSW!
    Last edited by Psionicsin; 05-19-2011 at 09:13 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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