Forums > getting rid of unwanted blank space

Full Version: getting rid of unwanted blank space

Forums > Resource Center > Webmasters' Corner > Resolved Topics

towntown2

Apr 14 2006, 10:40 PM

CODE

<HTML><HEAD>
<TITLE>decaelegant v.3 >> we don't wait</title>
<style type="text/css">
body {scrollbar-highlight-color:ce9a92;
scrollbar-shadow-color:ce9a92;
scrollbar-3dlight-color:ce9a92;
scrollbar-arrow-color:ce9a92;
scrollbar-track-color:703937;
scrollbar-darkshadow-color:ce9a92;
background-color:fdd4db;
font-family: Verdana, Times New Roman, Palatino Type;
color:703937;
size:8pt;
overflow:auto; text-align:justify; }

div#wrap {
background:#transparent;
background-repeat:no-repeat;
margin:751;
width:500px; }

#main {
background:#transparent;
float: left;
margin: 575 auto;
height:499px;
width:475px; }

A:link, a:visited, a:active{
color: #834236;
font-size: 8pt;
letter-spacing: 0px;
font-family: Verdana, Times New Roman, Palatino Type;
text-decoration: none;
text-transform:uppercase; }

/*begin typography*/

#content1 {

position: absolute;
        height: 499px;
    width: 177px;
    overflow: auto;
    color: #703937;
    left: 575px;
    top: 0px; font-weight: normal; font-family: Verdana; font-size: 8pt;
        scrollbar-highlight-color:ce9a92;
scrollbar-shadow-color:ce9a92;
scrollbar-3dlight-color:ce9a92;
scrollbar-arrow-color:ce9a92;
scrollbar-track-color:703937;
scrollbar-darkshadow-color:ce9a92; border-right: 2px solid #fdd4db; border-bottom: 2px solid #fdd4db; }

#content2 {

position: absolute;
        height: 499px;
    width: 500px;
    overflow: auto;
    font-family: Verdana;
    font-size: 8pt;
    color: #703937;
    left: 751px;
    top: 0px;
        scrollbar-highlight-color:ce9a92;
scrollbar-shadow-color:ce9a92;
scrollbar-3dlight-color:ce9a92;
scrollbar-arrow-color:ce9a92;
scrollbar-track-color:703937;
scrollbar-darkshadow-color:ce9a92; border-right: 2px solid #fdd4db; border-bottom: 2px solid #fdd4db; border-left: 2px solid #fdd4db; }

A:hover{
cursor: default;
color: #703937;
background-color: #421019;
font-size: 8pt;
letter-spacing: 2px;
font-family: Verdana, Times New Roman, Palatino Type;
text-decoration: none;
text-transform:lowercase; }

h2 {
background-color: ce9a92;
color: #703937;
font-family: Verdana, Times New Roman, Palatino Type;
font-size: 10px;
font-weight: underline;
font-decoration:none;
text-align: right;
top: 0px; }

h3 {
background-color:ce9a92;
color: #703937;
font-family: Verdana, Times New Roman, Palatino Type;
font-size: 10px;
font-decoration: none;
text-align: right;
top: 0px; }
</style>

<div style="left=0; top=0; position=absolute;"><img src="http://www.myfilestash.com/userfiles/decaelegant/banner-for-web.png"></div>

<DIV ID="main">
<div id="content1">
<h2>Navigation</h2>
<a href="http://www.freewebs.com/decadent-elegance">&clubs; Home</a><br>
<a href="http://www.freewebs.com/decadent-elegance/about.htm">&clubs; About</a><br>
<a href="http://www.freewebs.com/decacent-elegance/site.htm">&clubs; Site</a><br>
<a href="http://www.freewebs.com/decadent-elegance/credits.htm">&clubs; Credits</a><br><br>
<h2>Synopsis</h2>
<p><img src="http://i2.photobucket.com/albums/y42/cherry_chocolate92/Untitled-2.png" width="50" height="75" alt="moi" align="left">This is the ordinary much-loved site of Mel, 14 and neurotic. She's "irresponsible like a fox" and has new bangs. She did not copy anybody's hairstyle, despite what they say. Emotional turmoil? Comes daily. Romance? Nonexistent, lackluster, and much needed. Interested? <a href="http://www.freewebs.com/decadent-elegance/about.htm">More</a></p><br><br>
<h2>Loved and Adored</h2>
<a target="_blank" href="http://infamous-mind.net/">Mikestah</a><br><br>
Wanna be affiliates? Mail me <a href="mailto:downtownchick101@yahoo.com">here</a>!
<h2>Disclaimer</h2>
Everything in this site belongs to ME. If the time should come that anybody would like to use something from this site, please remember to credit me. Anything in this site that belongs to somebody else will be distinctified, and the owner will credited.<br><p align="center">2006 © Mel Layesen</p></div></div>

<DIV ID="wrap">
<DIV id=content2>
<script src="http://kwikblog.com/users.kb/decadent-elegance"></script></DIV>

</title></head></html>
<script type="text/javascript" src="/i.js"></script>

I don't need the blank space at the bottom and at the right {scroll and you'll see}. How do I get rid of them?

guilinger123

Apr 14 2006, 10:59 PM

I don't see what you mean... and it's misaligned for me.

towntown2

Apr 14 2006, 11:17 PM

ok, well that's another problem..
if it's aligned, it should be that if you scroll to the right, there's this big blank gap which also appears if you scroll down...

I made some changes, tell me if it's misaligned in other browsers.
I'm using IE.

mipadi

Apr 14 2006, 11:39 PM

The problem that a lot of people seem to have is specifying a height: attribute in their CSS properties. Everyone does it, and I don't know why, because usually it's unnecessary and just creates problems. Try taking those out and see what happens.

towntown2

Apr 15 2006, 09:40 AM

by taking out the height, the writings will be longer than the picture itself.
and I want the content to be in scrollbars.

LuvsDogs387

Apr 15 2006, 05:32 PM

I see what your talking about. my guess:

#main {
background:#transparent;
float: left;
margin: 575 auto;
height:499px;
width:475px; }

you've got the margin too big. but I couln't be certain. try setting it to zero unless you know that not the problem.

towntown2

Apr 15 2006, 10:10 PM

i changed the margin to zero, does nothing..

towntown2

Apr 16 2006, 04:51 PM

anybody else?

LuvsDogs387

Apr 18 2006, 12:15 AM

Ok it was bugging me too and its not even my friggin site. So I copied the code and messed with it. This is what I got, no blank space. Yea! Try it and see. Next time dont use sooo many divs. Keep it simple. Oh yeah and when a banner is placed in that positon whether or not the content will be next to it or under it, its easier just to make it the background and build around it. Hope this helps

And if you feel the need to credit, my link is in my sig LOL

CODE

<HTML>
<head>
<TITLE>decaelegant v.3 >> we don't wait</title>
<style type="text/css">
body {
scrollbar-highlight-color:ce9a92;
scrollbar-shadow-color:ce9a92;
scrollbar-3dlight-color:ce9a92;
scrollbar-arrow-color:ce9a92;
scrollbar-track-color:703937;
scrollbar-darkshadow-color:ce9a92;
background-image: url(http://www.myfilestash.com/userfiles/decaelegant/banner-for-web.png);
background-repeat: no-repeat;
background-color:fdd4db;
font-family: Verdana, Times New Roman, Palatino Type;
color:703937;
size:8pt;
}

#content{
position:absolute;
margin-left: 742px;
margin-top: -15px;
width:475px;
height: 499px;
border: 0px;
overflow:auto; text-align:justify;
scrollbar-highlight-color:ce9a92;
scrollbar-shadow-color:ce9a92;
scrollbar-3dlight-color:ce9a92;
scrollbar-arrow-color:ce9a92;
scrollbar-track-color:703937;
scrollbar-darkshadow-color:ce9a92; border-right: 2px solid #fdd4db; border-bottom: 2px solid #fdd4db;
}

#nav{
position:absolute;
margin-left: 565px;
margin-top: -15px;
width:177px;
height: 499px;
border: 0px;
overflow:auto; text-align:justify;
scrollbar-highlight-color:ce9a92;
scrollbar-shadow-color:ce9a92;
scrollbar-3dlight-color:ce9a92;
scrollbar-arrow-color:ce9a92;
scrollbar-track-color:703937;
scrollbar-darkshadow-color:ce9a92; border-right: 2px solid #fdd4db; border-bottom: 2px solid #fdd4db;
}

A:link, a:visited, a:active{
color: #834236;
font-size: 8pt;
letter-spacing: 0px;
font-family: Verdana, Times New Roman, Palatino Type;
text-decoration: none;
text-transform:uppercase; }

A:hover{
cursor: default;
color: #703937;
background-color: #421019;
font-size: 8pt;
letter-spacing: 2px;
font-family: Verdana, Times New Roman, Palatino Type;
text-decoration: none;
text-transform:lowercase; }

h2 {
background-color: ce9a92;
color: #703937;
font-family: Verdana, Times New Roman, Palatino Type;
font-size: 10px;
font-weight: underline;
font-decoration:none;
text-align: right;
top: 0px; }

h3 {
background-color:ce9a92;
color: #703937;
font-family: Verdana, Times New Roman, Palatino Type;
font-size: 10px;
font-decoration: none;
text-align: right;
top: 0px; }
</style>
</head>

<div id="nav">
<h2>Navigation</h2>
<a href="http://www.freewebs.com/decadent-elegance">&clubs; Home</a><br>
<a href="http://www.freewebs.com/decadent-elegance/about.htm">&clubs; About</a><br>
<a href="http://www.freewebs.com/decacent-elegance/site.htm">&clubs; Site</a><br>
<a href="http://www.freewebs.com/decadent-elegance/credits.htm">&clubs; Credits</a><br><br>
<h2>Synopsis</h2>
<p><img src="http://i2.photobucket.com/albums/y42/cherry_chocolate92/Untitled-2.png" width="50" height="75" alt="moi" align="left">This is the ordinary much-loved site of Mel, 14 and neurotic. She's "irresponsible like a fox" and has new bangs. She did not copy anybody's hairstyle, despite what they say. Emotional turmoil? Comes daily. Romance? Nonexistent, lackluster, and much needed. Interested? <a href="http://www.freewebs.com/decadent-elegance/about.htm">More</a></p><br><br>
<h2>Loved and Adored</h2>
<a target="_blank" href="http://infamous-mind.net/">Mikestah</a><br><br>
Wanna be affiliates? Mail me <a href="mailto:downtownchick101@yahoo.com">here</a>!
<h2>Disclaimer</h2>
Everything in this site belongs to ME. If the time should come that anybody would like to use something from this site, please remember to credit me. Anything in this site that belongs to somebody else will be distinctified, and the owner will credited.<br><p align="center">2006 © Mel Layesen</p>
</div>

<DIV id=content>
<script src="http://kwikblog.com/users.kb/decadent-elegance"></script>
</DIV>

</html>

tcunningham1589

Apr 18 2006, 12:25 AM

Try taking out this part, and the div id "wrap" at the bottem of the code;

div#wrap {
background:#transparent;
background-repeat:no-repeat;
margin:751;
width:500px; }

towntown2

Apr 18 2006, 08:03 PM

QUOTE(LuvsDogs387 @ Apr 17 2006, 10:15 PM)

Oh yeah and when a banner is placed in that positon whether or not the content will be next to it or under it, its easier just to make it the background and build around it. Hope this helps

And if you feel the need to credit, my link is in my sig LOL

I was thinking about making the image as the background instead of a div.
Thank you much.
I see how the code is much simpler now.
The original code was modeled after this one layout that I saw, I basically used that one ever since.

I see how I don't need to make #content1 and #content2.

I'll credit you, most definitely.

P.S. : Did the blank spaces show up because of so many div's or a case of outdated/excessive coding?

LuvsDogs387

Apr 19 2006, 12:51 AM

Your welcome

These two codes were causing the extra space.

div#wrap {
background:#transparent;
background-repeat:no-repeat;
margin:751;
width:500px; }

#main {
background:#transparent;
float: left;
margin: 575 auto;
height:499px;
width:475px; }

moorepocket

Apr 19 2006, 12:59 PM

an actual background would looks nice.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.