SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Please help fix my code. Adobe slice happy Disaster!

    I have this HUGE annoying white space at the bottom of my website layout. There's a long white space at the bottom where the website layout would usually end.

    No matter how many times I change the height of tags, it won't go away.

    I went SLICE HAPPY in Adobe Fireworks CS5 and I now have a whole bunch of unnecessary divs. I only deleted some, still working on it.

    Screenshot



    Here are the problems in my code

    HTML:

    Code:
    <div id="main">
    
    <div id="top_float"></div>
    
    <div id="left_float"></div>
    
    <div id="colwrap2">
    
    <div id="menu"></div>
    
    <img src="images/header.jpg" id="header" alt="" />
    
    <div id="content">
    <div id="colwrap5">
    <img src="images/notepad.jpg" id="notepad" alt="" />
    <img src="images/business_group.jpg" id="business_group" alt="" />
    </div><!--colwrap5-->
    --------------------------------------…
    CSS:

    Code:
    body {
    background-attachment: scroll;
    background-image: url(images/mainbg.jpg);
    background-repeat: repeat-x;
    font-size: 62.5&#37;;
    }
    
    #menu {
    background-image: url(images/navigation.png);
    position: relative;
    top: -96px;
    height:283px;
    width:860px;
    }
    
    #header {
    margin-left: 0px;
    margin-top: 0px;
    display: inline;
    position: relative;
    top:-241px;
    left: 2px;
    }
    
    #content {
    margin:0 auto;
    display: inline;
    position: relative;
    top: -241px;
    left: 2px;
    float: left;
    background-attachment: scroll;
    background-image: url(images/content.jpg);
    background-position: center center;
    background-repeat: repeat-y;
    width: 786px;
    height: 378px;
    }
    
    #colwrap2 {
    float: left;
    width: 786px;
    margin-bottom: 0;
    }
    
    #left_float {
    margin-left: 0px;
    margin-top: 0px;
    overflow: hidden;
    display: inline;
    float: left;
    height: 588px;
    margin-bottom: 0;
    width: 87px;
    }
    
    #top_float {
    margin-left: 0px;
    margin-top: 0px;
    overflow: hidden;
    display: inline;
    float: left;
    height: 132px;
    margin-bottom: 0;
    width: 960px;
    }
    PLEASE HELP ME. If any of you figure it out, you get a virtual cookie. I've tried everything.
    Last edited by ralph.m; Sep 20, 2010 at 21:43. Reason: code tags added

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You've got one big background image on the body that is set to repeat-x... which means repeat horizontally. Do you want it to repeat down the page (i.e. vertically)? Change that to repeat-y, or just remove the repeat-x and let it repeat as much as it likes. But that won't look too good, as the image won't tile well. You could just specify a nice background color that will extend beyond the image.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You've got one big background image on the body that is set to repeat-x... which means repeat horizontally. Do you want it to repeat down the page (i.e. vertically)? Change that to repeat-y, or just remove the repeat-x and let it repeat as much as it likes. But that won't look too good, as the image won't tile well. You could just specify a nice background color that will extend beyond the image.
    THANK YOU so much for responding. My other design layouts I have done the solid color edge for easy tiling and fade out.

    When I do the repeat-y, the HUGE white space moves to the right and the space is filled in with the background but actual blank GAP is still there?

    It's weird. When I play with the tiling background or enlarge it, this does not affect the blank space

    I know my code is terrible but I'm trying to revive what I have lol

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Can you post a live link? It's really hard to trouble shoot with random bits of code. With a live link it's easy to see what's going on right away.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Can you post a live link? It's really hard to trouble shoot with random bits of code. With a live link it's easy to see what's going on right away.
    Sure I just uploaded it for you. Don't laugh lol. (I just laughed) I APPRECIATE YOUR HELP SO MUCH.

    http://designwork.110mb.com/disaster/index_wbird.htm

    Thank you! A cookie and a slice of cake for you!

    I will never do POINTLESS slicing from mock-ups again! Next time I will be smarter when it comes to my divs and images.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think one issue is that my menu png image has a height that pushes ALL the other divs beneath it lower, causing the white blank space?

    I tried changing up the height. It's transparent so I thought it would work easier

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    OK, so what do you actually want to achieve here? If you do this...

    Code:
    body {
    	background-attachment: scroll;
    	background-image: url(images/mainbg.jpg);
    	background-repeat: repeat;
    	font-size: 62.5%;
    }
    ... the background will cover the viewport. But is that what you want?

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, so what do you actually want to achieve here? If you do this...

    Code:
    body {
    	background-attachment: scroll;
    	background-image: url(images/mainbg.jpg);
    	background-repeat: repeat;
    	font-size: 62.5&#37;;
    }
    ... the background will cover the viewport. But is that what you want?
    That's GREAT. Now how do I eliminate the blank space all together? Did the height of my graphics or divs make the huge space?

    I did damage to this code..SERIOUSLY lol.

    I appreciate all your help. You move so quickly!

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On the BACKGROUND

    I'm definitely going to have to edit the background to a vertical repeat, with a different size. I know it's a shame but what can I say lol...

    Thanks for the tips on that. Now if only I could figure out the inevitable blank space at the bottom..the invisible margin lol

    Thank you so much for helping me. I'm going to bed. I'll check this thread tomorrow. I need all the help I can get.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    If you change the code as I showed in red, there should be no gaps. If there are, could you provide a screen shot and say what browser this is happening in?

    For the background image, I would suggest you fade it to transparent and have a background color that it can nicely blend into.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If you change the code as I showed in red, there should be no gaps. If there are, could you provide a screen shot and say what browser this is happening in?

    For the background image, I would suggest you fade it to transparent and have a background color that it can nicely blend into.
    The image just tiles at the bottom but the large blank gap is still there.



    Thank you for your input though. I am learning.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Design_chica86 View Post
    The image just tiles at the bottom but the large blank gap is still there.
    I'm not sure what large gap you are talking about. Do you want your footer to sit at the bottom of the screen or something??

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you mean the white space, that's just because the content is just too big

    You use top:-241px on the footer and the #content

    If you change both them to margins then it's fixed (I'd recommend moving that background image to a 100&#37; high wrapper

    You're using entirely too much top:-xx px to move elements. Remember that if you use offsets like that you're only moving the element visually, but not actually physically.

    I'd change the top: crap to margin-top (although there really isn't a need for you having that on every element, so I'd get rid of the lot of it and work from there)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    If you mean the white space, that's just because the content is just too big

    You use top:-241px on the footer and the #content

    If you change both them to margins then it's fixed (I'd recommend moving that background image to a 100% high wrapper

    You're using entirely too much top:-xx px to move elements. Remember that if you use offsets like that you're only moving the element visually, but not actually physically.

    I'd change the top: crap to margin-top (although there really isn't a need for you having that on every element, so I'd get rid of the lot of it and work from there)
    Thank you so much! I'm learning so MUCH! The physical versus visually moving helped me a lot.

    Now for clarity....

    What do I change the margins for the #content and #footer? Change it to margin-top instead?

    How do I do a 100% wrapper? I've done a 100 display set up.


    I failed at the coding margins ..once I added the menu graphic it shifted everything down and I used -top to move them back underneath each other lol

  15. #15
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YES! Thank you. RyanReese. The margin-top worked perfectly! Large huge blank space is gone now.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .

    To do a 100&#37; high wrapper, wrap everything inside a <div> (give it id="wrapper" just to give it styles)

    Then give something like this
    Code:
    html,body{height:100%;}/*allow 100% heights*/
    #wrapper{min-height:100%;background:url(yourImageHere.jpg);}
    * html #wrapper{height:100%;}/*IE6*/
    You need to specify the repeating'ness of hte image and also the URL, but that should suffice

    It might need a fix also depending on how your setup was on your page (I haven't tested this code out personally)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #17
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You're welcome .

    To do a 100% high wrapper, wrap everything inside a <div> (give it id="wrapper" just to give it styles)

    Then give something like this
    Code:
    html,body{height:100%;}/*allow 100% heights*/
    #wrapper{min-height:100%;background:url(yourImageHere.jpg);}
    * html #wrapper{height:100%;}/*IE6*/
    You need to specify the repeating'ness of hte image and also the URL, but that should suffice

    It might need a fix also depending on how your setup was on your page (I haven't tested this code out personally)
    Oh okay. So basically it's a container/ wrapper.

    Yes my entire setup is screwed up from my Adobe slice methods. I'm too lazy to start from scratch. You live and you LEARN! LOL

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes it's basically a wrapper, with 100&#37; height

    Sorry I wasn't able to help you with the slice methods via PM. Perhaps the graphic design forum on here can help you. Shuffle on over there
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Yes it's basically a wrapper, with 100% height

    Sorry I wasn't able to help you with the slice methods via PM. Perhaps the graphic design forum on here can help you. Shuffle on over there
    You did GREAT!

    Here's a virtual cat for you lol..I couldn't find a cookie

    http://www.widgetbox.com/widget/maukie-the-virtual-cat

    I'm weird...

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Design_chica86 View Post
    You did GREAT!

    Here's a virtual cat for you lol..I couldn't find a cookie

    http://www.widgetbox.com/widget/maukie-the-virtual-cat

    I'm weird...
    It's fine I'm a bit on a health spree fit and working out a lot and eating right. It's for the best

    Thank you
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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