Please help fix my code. Adobe slice happy Disaster!

HTML & CSS
1

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:

<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:

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.

2

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??

3

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.

4

Yes it’s basically a wrapper, with 100% height :stuck_out_tongue:

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 :wink:

5

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

6

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


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 :slight_smile:

It might need a fix also depending on how your setup was on your page (I haven’t tested this code out personally)

7

:smiley: Thank you so much! I’m learning so MUCH! :smiley: The physical versus visually moving helped me a lot.

[COLOR=“Blue”]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.
[/COLOR]

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

8

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 :wink:

Thank you :slight_smile:

9

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…

10

YES! Thank you. RyanReese. The margin-top worked perfectly! Large huge blank space is gone now.

11

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) :slight_smile:

12

The image just tiles at the bottom but the large blank gap is still there.

Thank you for your input though. I am learning.

13

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.

14

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.

15

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?

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

16

OK, so what do you actually want to achieve here? If you do this…

body {
	background-attachment: scroll;
	background-image: url(images/mainbg.jpg);
	background-repeat: [COLOR="Red"]repeat;[/COLOR]
	font-size: 62.5%;
}

… the background will cover the viewport. But is that what you want?

17

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?

:injured: I did damage to this code…SERIOUSLY lol.

I appreciate all your help. You move so quickly! :slight_smile:

18

:cool: 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.

19

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.

20

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

:frowning: I know my code is terrible but I’m trying to revive what I have lol