Remove white space?, I need help removing the bottom white space in a DIV layout. Options

[lilychouchou]

In my DIV layout, I get a big white space down at the bottom of my layout, past the image. Does anyone know of a way to remove it?

Attached File(s)

 space.png ( 97.75K ) Number of downloads: 19

 

[newkidontheblock]

That White Space, I Think Is Just The Background. If You Want To Get Raid Of That You Can Add This To The Body Section If You Already Have a Background

CODE

background-reapeat: yea-repeat;

[digitalfragrance]

If you put this into the div layer that controls the main image:

CODE

background-image: url('IMAGE URL HERE')"

a background image will repeat indefinitely.

But, you can also do that differently. The DIV layer that controls the main image - find it and make the height attribute larger so that the background color (000000) extends over the white space.

[lilychouchou]

I actually don't have a background image in. It's just the colour is white.

CODE

<style type="text/css">
body {background-color: white;
background-repeat: repeat;
}
</style>

<div class="temp" style="position: absolute; top: 285px; left: 5px;">
<img src=http://img460.imageshack.us/img460/167/bjork3gb4.png usemap=#nav border=0>

[newkidontheblock]

I Just Test That Code And There Is Notting At The Bottom [ FIREFOX ]

[lilychouchou]

Strange, I get a white space in both firefox and IE. Could it be something with my computer's screen?

If I get the chance, I will have to check it on a friend's computer, just to make sure.

[digitalfragrance]

^ You probably have a larger resolution.

Try this to make the black extend:

CODE

<div style="position: absolute; top: 0px; left: 0px; background-color: 000000; width:1500px; height:1040px;">
></div>

Stick that in the beginning of your DIV codes - it creates a large DIV layer just filled with background color. As long as your layers are following this one, and are position: absolute, they should sit right on top.

Also, to counter the horizontal scroll problem, stick this in the body of your CSS:

CODE

<style>
body {
overflow-x: hidden;
}
</style>

[lilychouchou]

Anywhere I stick that code has the white space following it.
Here's the whole code in case there is something else in it that is making the white space.
I changed my screen to a lower resolution, but simply got a bigger white space.

CODE

<style type="text/css">
body {background-color: white;
background-repeat: yea-repeat;
overflow-x: hidden;
}
</style>

<div class="temp" style="position: absolute; top: 285px; left: 5px;">
<img src=http://img460.imageshack.us/img460/167/bjork3gb4.png usemap=#nav border=0>

<map name="nav">
<area shape="rect" alt="home" coords="147,290,243,277" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" />

<area shape="rect" alt="add" coords="625,358,654,435" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRpZD0zOTgwNDc3OA==">

<area shape="rect" alt="msg" coords="771,428,832,474" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRpZD0zOTgwNDc3OA==">

<area shape="rect" alt="block" coords="81,463,189,440" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja3VzZXImdXNlcmlkPTM5ODA0Nzc4">

<area shape="rect" alt="pic" coords="187,508,221,431" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld1BpY3R1cmUmZnJpZW5kSUQ9Mzk4MDQ3Nzg=">

<area shape="rect" alt="comm" coords="751,372,916,322" href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlX2NvbW1lbnRmb3JtJmZyaWVuZGlkPTM5ODA0Nzc4"></map>
</div>

<div class="about" style="position: absolute; top: 310px; left: 392px; width: 210px; height: 493px; overflow: auto; face: impact; color: black;">
<font size=4>When the power of love over comes the love of power, then the world will truly know peace. - Jimi Hendrix</font>
</div>

<style>
.a { hide friends and comments }
.friendsAndComments {display:none;}
.a { unhide edit link and submit button }
table table table table table div {display:block !important;}
</style>
</td></tr></table>
</td></tr></table>
<div class="friendsAndComments">
<table><tr><td>
<table><tr><td>

Also, thank you for helping me with this.

[digitalfragrance]

"background-repeat: yea-repeat;"

Change that to

"background-repeat: repeat;"

ANYWAY.
Have you tried hiding your details?
http://www.createblog.com/scripts/script.php?id=878

[lilychouchou]

I ended up using this code;
http://www.createblog.com/scripts/script.php?id=805

But that first one you gave me sent me to this one.
It left only a bit of white space left, half of which is from just the picture.
Thanks for your help!

[digitalfragrance]

Yay the white space is gone!
Topic Closed