The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Random white space?!?!?
xxkasperxx
post Jun 10 2011, 11:31 PM
Post #1


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449



random white space inbetween images that make up my page, any way to fix them?

CSS:
CODE


body {
background-color:ffffff;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
margin:0 auto;
width:960px;

}
a:link {color: #ffffff; text-decoration: none; }
a:active {color: #ffffff; text-decoration: none; }
a:visited {color: #ffffff; text-decoration: none; }
a:hover {color: #ff0000; text-decoration: none; }
.image {
    border: 0px;
    position:relative;
    float:left; /* optional */
}
.image .text { /* Controlls Text to the left of the title */
    position:absolute;
    top:0px; /* in conjunction with left property, decides the text position */
    left:-100px;
    width:350px; /* optional, though better have one */
    color:black;
}
.image .preview { /* Controlls the picture on the Blue preview background */
    position:absolute;
    top:25px; /* in conjunction with left property, decides the text position */
    left:20px;
    width:350px; /* optional, though better have one */
    color:black;
}
.image .what { /* Controlls Left_1 Picture */
    position:absolute;
    top:10px; /* in conjunction with left property, decides the text position */
    left:10px;
    width:700px; /* optional, though better have one */
    color:black;
}
.image .left_text { /* Controlls text for Left_1 Picture */
    position:absolute;
    top:-12px; /* in conjunction with left property, decides the text position */
    left:270px;
    width:450px; /* optional, though better have one */
    color:black;
    line-height:1;
}
.image .right_pic { /*  Controlls Right_1 Picture */
    position:absolute;
    top:200px; /* in conjunction with left property, decides the text position */
    left:765px;
    width:450px; /* optional, though better have one */
    color:black;
}
.image .right_text { /* Controlls text for Right_1 */
    position:absolute;
    top:200px; /* in conjunction with left property, decides the text position */
    left:270px;
    width:480px; /* optional, though better have one */
    color:black;
    line-height:1;
}
.image .left_pic2 { /*  Controlls Left_2 Picture */
    position:absolute;
    top:360px; /* in conjunction with left property, decides the text position */
    left:10px;
    width:450px; /* optional, though better have one */
    color:black;
}
.image .left_text2 { /* Controlls text for Left_2 Picture */
    position:absolute;
    top:360px; /* in conjunction with left property, decides the text position */
    left:270px;
    width:450px; /* optional, though better have one */
    color:black;
    line-height:1;
}
.image .video{ /* Controlls donation Video */
    position:absolute;
    top:30px; /* in conjunction with left property, decides the text position */
    left:550px;
    width:450px; /* optional, though better have one */
}
.image .donate{ /* Controlls "What are donations for?" */
    position:absolute;
    top:10px; /* in conjunction with left property, decides the text position */
    left:-1000px;
    width:500px; /* optional, though better have one */
    color:black;
    line-height:1;
}
.image .donate_text{ /* Controlls "what are donations for" text */
    position:absolute;
    top:50px; /* in conjunction with left property, decides the text position */
    left:-1000px;
    width:450px; /* optional, though better have one */
    color:black;
    line-height:1;
}
.image .paypal{ /* used for girls_1 text */
    position:absolute;
    top:350px; /* in conjunction with left property, decides the text position */
    left:-1000px;
    width:450px; /* optional, though better have one */
    color:black;
    line-height:1;
}
.image .info_box{ /* used for girls_1 text */
    position:absolute;
    top:5px; /* in conjunction with left property, decides the text position */
    left:420px;
    width:450px; /* optional, though better have one */
}
.image .info{ /* used for girls_1 text */
    position:absolute;
    color: white;
    top:-20px; /* in conjunction with left property, decides the text position */
    left:235px;
    width:450px; /* optional, though better have one */
}
.image .real_info{ /* used for girls_1 text */
    position:absolute;
    color: white;
    top:55px; /* in conjunction with left property, decides the text position */
    left:5px;
    width:450px; /* optional, though better have one */
}
.image .info_pic { /* used for girls_1 text */
    position:absolute;
    top:-195px; /* in conjunction with left property, decides the text position */
    left:750px;
    width:450px; /* optional, though better have one */
}
.image .con { /* Controlls Text to the left of the title */
    position:absolute;
    top:0px; /* in conjunction with left property, decides the text position */
    left:-100px;
    width:350px; /* optional, though better have one */
    color:black;
}
.image .champs { /* Controlls text on donate page, magnolia champions */
    position:absolute;
    top:320px; /* in conjunction with left property, decides the text position */
    left:150px;
    width:700px; /* optional, though better have one */
    color:black;
    line-height:1.2;
}
.image .manage { /* Controlls text on donate page, magnolia champions */
    position:absolute;
    top:0px; /* in conjunction with left property, decides the text position */
    left:350px;
    width:700px; /* optional, though better have one */
    color:black;
}
.image .foot { /* Controlls text on donate page, magnolia champions */
    position:absolute;
    top:15px; /* in conjunction with left property, decides the text position */
    left:450px;
    width:700px; /* optional, though better have one */
    color:white;
}



HTML:
CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
      
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="reqs.css"
     type="text/css" >
     <meta name="description=" content="[removed per request from xxkasperxx] Foundation is a nonprofit family foundation. It provides an outlet for those with special needs in the surrounding areas of Magnolia. [removed per request from xxkasperxx] Foundation provides different monthly activities for the mentally and physically challenged graduates.">

<title>[removed per request from xxkasperxx] Foundation</title>

</head>
<body>
<!-- Save for Web Slices (newlayout.psd) -->
<table id="Table_01" width="1020"  border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3">
            <img src="images/menu_about.png" width="1020" height="71" border="0" alt="" usemap="#map" ></td>
    </tr>
    <tr>
        <td>
            <img src="images/title.png" width="510" height="123" alt="" ></td>
        <td colspan="2">
            <div class="image">
                <img src="images/title_right.png" width="510" height="123" alt="" >
                    <div class="text">
                        <p> [removed per request from xxkasperxx] Foundation is a nonprofit family foundation. It provides an outlet for those with special needs in the surrounding areas of Magnolia. [removed per request from xxkasperxx] Foundation provides different monthly activities for the mentally and physically challenged graduates.</p>
                    </div>
            </div>        
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div class="image">
                <img src="images/preview.png" width="607" height="250" alt="" >
                    <div class="preview">    
                        <img  alt="" src="images/images/preview.png"  >
                    </div>
            </div>        
        </td>
        
        <td>
            <div class="image">
                <img src="images/preview_right.png" width="413" height="250" alt="" >
                    
            </div>
        </td>
    </tr>
    
    <tr>
        <td colspan="3">
            <div class="image">
                <img src="images/content.png" width="1020" height="525" alt="" >
                    <div class="what">
                        <img src="images/images/images/left_1.png" alt="" >
                            <div class="left_text">
                                <h2> What do we do? </h2>
                                    <p> The foundation was formed in 2005. [removed per request from xxkasperxx] Foundation was founded to provide help to those over the age of 22 who are no longer in the public school system and wish to attend a local day program and interact with their peers. The monthly activities includes, golf and tennis outings, bowling, thanksgiving dinner and sports, horseback riding, cooking, Christmas Dinner and Dance etc. Job training program is in the works.</p>
                            </div>
                    </div>
                
                                        <div class="right_pic">
                                            <img src="images/images/images/right_1.png" alt="" >
                                        </div>
                                                <div class="right_text">
                                                    <h2> Our Mission Statement: </h2>
                                                        <p> [removed per request from xxkasperxx] Foundation is dedicated to provide supporting educational, sporting and physical fitness services and opportunities to adults with intellectual and developmental disabilities in the Magnolia and surrounding areas after high school graduation.</p>
                                                </div>
                                                    
                                                            <div class="left_pic2">
                                                                <img src="images/images/images/left_2.png" alt="" >
                                                            </div>
                                                                <div class="left_text2">
                                                                    <h2> Our Vision: </h2>
                                                                        <p>[removed per request from xxkasperxx] Foundation will create an atmosphere where people with any kind of disability may become more independent; enhance and expand their educational and physical boundaries, and be all they are created to be.</p>
                                                                </div>
            </div>
        </td>
    </tr>
    
    <tr>
        <td colspan="3">
            <img src="images/footer.png" width="1020" height="51" alt="" >
                
        </td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="510" height="1" alt="" ></td>
        <td>
            <img src="images/spacer.gif" width="97" height="1" alt="" ></td>
        <td>
            <img src="images/spacer.gif" width="413" height="1" alt="" ></td>
    </tr>
</table>
<p><map name="Map"><area shape="rect" coords="1,1,151,70" alt="" href="index.html">
<area shape="rect" coords="151,1,258,70" alt="" href="photos.html">
<area shape="rect" coords="258,1,370,70" alt="" href="donate.html">
<area shape="rect" coords="370,1,539,70" alt="" href="contact-us.html">
<area shape="rect" coords="539,1,725,70" alt="" href="management.html">
</map></p>
<!-- End Save for Web Slices -->
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 11 2011, 01:26 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,316
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Please see the FAQ entry How do I eliminate the space around/between my images?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Jun 11 2011, 09:01 AM
Post #3


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449



how do i do that with all my div tags in between the images? example:
CODE
<div calss="image"><img src="pic.png">
<div class="second><img scr="pic2.png"></div></div>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th November 2019 - 04:01 AM