Log In · Register

 
 
 Closed TopicStart new topic
getting rid of unwanted blank space
towntown2
post Apr 14 2006, 10:40 PM
Post #1


Mais je ne l'aime pas
*****

Group: Member
Posts: 971
Joined: Mar 2005
Member No: 108,135
This is my webpage.

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?
 
Elleusion
post Apr 14 2006, 10:59 PM
Post #2


:D
*****

Group: Member
Posts: 530
Joined: Dec 2005
Member No: 337,031
I don't see what you mean... and it's misaligned for me.
 
towntown2
post Apr 14 2006, 11:17 PM
Post #3


Mais je ne l'aime pas
*****

Group: Member
Posts: 971
Joined: Mar 2005
Member No: 108,135
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*
post Apr 14 2006, 11:39 PM
Post #4





Guest
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
post Apr 15 2006, 09:40 AM
Post #5


Mais je ne l'aime pas
*****

Group: Member
Posts: 971
Joined: Mar 2005
Member No: 108,135
by taking out the height, the writings will be longer than the picture itself.
and I want the content to be in scrollbars.
 
LuvsDogs387
post Apr 15 2006, 05:32 PM
Post #6


dont steal my eggroll
*****

Group: Member
Posts: 528
Joined: Aug 2004
Member No: 41,442
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
post Apr 15 2006, 10:10 PM
Post #7


Mais je ne l'aime pas
*****

Group: Member
Posts: 971
Joined: Mar 2005
Member No: 108,135
i changed the margin to zero, does nothing..
 
towntown2
post Apr 16 2006, 04:51 PM
Post #8


Mais je ne l'aime pas
*****

Group: Member
Posts: 971
Joined: Mar 2005
Member No: 108,135
anybody else?
 
LuvsDogs387
post Apr 18 2006, 12:15 AM
Post #9


dont steal my eggroll
*****

Group: Member
Posts: 528
Joined: Aug 2004
Member No: 41,442
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 happy.gif

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

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>
 
duplicatex0x0x0
post Apr 18 2006, 12:25 AM
Post #10


Senior Member
******

Group: Duplicate
Posts: 1,912
Joined: May 2005
Member No: 137,527
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
post Apr 18 2006, 08:03 PM
Post #11


Mais je ne l'aime pas
*****

Group: Member
Posts: 971
Joined: Mar 2005
Member No: 108,135
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 happy.gif

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


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?

This post has been edited by towntown2: Apr 18 2006, 08:12 PM
 
LuvsDogs387
post Apr 19 2006, 12:51 AM
Post #12


dont steal my eggroll
*****

Group: Member
Posts: 528
Joined: Aug 2004
Member No: 41,442
Your welcome happy.gif

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
post Apr 19 2006, 12:59 PM
Post #13


Death is a promise given to us at birth
*******

Group: Official Designer
Posts: 4,757
Joined: Mar 2004
Member No: 7,459
an actual background would looks nice.
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic