The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Extra space on right side of pages
poonchy722
post May 16 2012, 11:30 PM
Post #1





Group: Members
Posts: 3
Joined: 15-May 12
Member No.: 17,120



Hi everyone.

I built a fairly simple website for a friend of mine who owns a warehouse, and everything seems to be working perfectly on the site, except for one minor issue - there is a bunch of extra space on the right side of all the pages.

You can see what I am talking about if you visit the site - kakllc.com (scroll to the right to see the extra space)

Here is the html for the home page:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


    <head>
            
        <title>K.A.K. Warehouse - Home Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
        <link href="KAKHeaderFooterStyles.css" rel="stylesheet" type="text/css" />
        <link href="KAKHomePageStyles.css" rel="stylesheet" type="text/css" />
        
    </head>

    <body>
    
    <div id="siteOuterBackground">
    <div id="siteInnerBackground" style="height: 1530px;">
    
        <!--Banner-->
        <div>
        <img width="902px" src="Images/TopBannerWeb.jpg" alt="KAK Warehouse Banner" usemap="TopBannerHomePageLink" />
        </div>
        <map name="TopBannerHomePageLink">
            <area shape="rect" coords="25,5,225,190" href="KAKSite.html" />
            <area shape="rect" coords="423,170,783,192" href="http://maps.google.com/?q=1507%20S.%20Olive%20St.%20South%20Bend,%20IN%2046619" />
        </map>
        
        <!--Header navigation menu-->
        <ul id="navMenuHead">
            <li><a class="navMenuHeadLink" id="homeHead" href="KAKSite.html" style="background-position: 0 -62px;">Home</a></li>
            <li><a class="navMenuHeadLink" id="servicesHead" href="KAKServicesPage.html">Services</a></li>
            <li><a class="navMenuHeadLink" id="ftz125Head" href="KAKFTZ125Page.html">FTZ #125</a></li>
            <li><a class="navMenuHeadLink" id="aboutHead" href="KAKAboutUsPage.html">About Us</a></li>
            <li><a class="navMenuHeadLink" id="contactHead" href="KAKContactPage.html">Contact</a></li>
        </ul>

        <!--Lower Banner-->
        <div id="lowerBannerDiv">
        <img width="902px" src="Images/LowerBannerWeb.jpg" alt="KAK Warehouse Lower Banner" id="lowerBannerImage" />
        </div>
        
        
        <!--Home page content-->
        <div id="kakIs">
            <img src="Images/KAKLLCIs.jpg" alt="KAK Warehouse Is..." />
        </div>
        <div>
            <p class="homePageContent" id="homePageContent1">
             a public/contract warehouse located in South Bend, Indiana since 1994. The operations are tailored to meet each customer's specific needs for packaging, storing and/or distribution of goods.
            <br />
            <br />
            Located in a Foreign Trade Zone, value adding services are always available, from labeling or crating to assembly work. With over 60 years combined management experience in warehousing, import, export, packing and logistic management, no project is too large or too small for K.A.K.
            <br />
            <br />
            K.A.K. LLC will offer a secure environment for all of your products with an electronic security system and a thirteen zone sprinkler system throughout the building. K.A.K. is located near the SR 23 exit of the US 20/31 bypass, with quick and easy access to and from the warehouse.
            </p>
        </div>
        <div id="eagleEye">
            <img class="shadow" src="Images/EagleEyeWeb.jpg" alt="KAK Warehouse overhead view" width="400" />
        </div>
        <div id="interior">
            <img class="shadow" src="Images/HomePageImages/HomeLeftWeb.jpg" width="391" alt="KAK Warehouse interier view" />
        </div>
        <div id="kakOffers">
            <img src="Images/WhatWeOffer.jpg" alt="What KAK Warehouse has to offer..." />
        </div>
        <div>
            <ul id="kakOffersList">
                <li>- 355,000 sq. ft. under one roof</li>
                <li>- Conrail Rail Siding/Norfolk Southern</li>
                <li>- Rail Doors up to 20 ft. wide</li>
                <li>- 25 Truck Dock Doors</li>
                <li>- Heavy Lifts up to 15,000 lbs.</li>
                <li>- Office Space Available</li>
                <li>- Production Space</li>
                <li>- 480 and 240/120 Power</li>
                <li>- Climate Controlled Work Rooms</li>
            </ul>
        </div>
        
        <div id="ftzImage">
            <a href="KAKFTZ125Page.html" alt="K.A.K. Warehouse FTZ125 Page" id="FTZ125LinkImage">FTZ 125</a>
        </div>
        
        <div id="iwlaLogo">
            <a href="http://www.iwla.com" id="iwla">IWLA</a>
        </div>
        
        
        
        <!--Footer navigation menu-->
        <ul id="footerMenu" style="position: relative; top: -550px;">
            <li><a class="footerMenuLink" id="ftz125Foot" href="KAKFTZ125Page.html">FTZ #125</a></li>
            <li><a class="footerMenuLink" id="iwlaFoot" href="http://www.iwla.com">International Warehouse Logistics Association</a></li>
            <li><a class="footerMenuLink" id="aboutFoot" href="KAKAboutUsPage.html">About Us</a></li>
            <li><a class="footerMenuLink" id="contactFoot" href="KAKContactPage.html">Contact</a></li>
        </ul>
        
        <img src="Images/FooterBanner.jpg" width="902px" alt="K.A.K. Warehouse Footer Banner" style="position: relative; top: -552px;" usemap="FooterBannerLinks" />
        <map name="FooterBannerLinks">
            <area shape="rect" coords="375,47,470,68" href="KAKSite.html" />
            <area shape="rect" coords="764,94,902,113" href="http://www.watchtowerhosting.com/"
        </map>
        
    </div>
    </div>
    </body>

</html>



And here is the code for the two stylesheets that are linked to the home page (the first style sheet is linked to all pages):

CODE

@charset "UTF-8";
/* CSS Document */

/*Style for drop shadows*/
.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

/*Style for Lower Banner*/
div#lowerBannerDiv
{
    height: 204px;
}

img#lowerBannerImage
{
    position: relative;
    top: -16px;
}


/*Styles for grey outlining background*/

body
{
    background-color: #5B5A56;
}

div#siteOuterBackground
{
    padding-top: 0px;
    padding-bottom: 300px;
    
    background-color: #5B5A56;
    width: 902px;
    margin: 0 auto;
    text-align: left;
}

div#siteInnerBackground
{
    width: 902px;
    background-color: #FFFBFF;
    margin: 0px;
    border: 1px;
    padding: 0px;
}


/*Styles for navigation menu*/
ul#navMenuHead
{
    width:902px;
    list-style:none;
    position: relative;
    top: -16px;
    left: -40px;
}
a.navMenuHeadLink
{
    display: block;
    float: left;
    height: 62px;
    background-image: url(Images/KAKMenuWeb.jpg);
    text-indent: -9999px;
}
a#homeHead
{
    width: 162px;
    background-position: 0 0;
}
a#homeHead:hover
{
    background-position: 0 -62px;
}

a#servicesHead
{
    width: 179px;
    background-position: -162px 0;
}
a#servicesHead:hover
{
    background-position: -162px -62px;
}

a#ftz125Head
{
    width: 198px;
    background-position: -341px 0;
}
a#ftz125Head:hover
{
    background-position: -341px -62px;
}

a#aboutHead
{
    width: 182px;
    background-position: -539px 0;
}
a#aboutHead:hover
{
    background-position: -539px -62px;
}

a#contactHead
{
    width: 181px;
    background-position: -721px 0;
}
a#contactHead:hover
{
    background-position: -721px -62px;
}


/*Style for footer navigation*/
ul#footerMenu
{
    width: 902px;
    list-style: none;
    position: relative;
    left: -40px;
}
a.footerMenuLink
{
    display: block;
    float: left;
    height: 80px;
    background-image:url(Images/KAKFooterWeb.jpg);
    text-indent: -9999px;
}
a#ftz125Foot
{
    width: 174px;
    background-position: 0 0;
}
a#ftz125Foot:hover
{
    background-position: 0 -80px;
}
a#iwlaFoot
{
    width: 442px;
    background-position: -174px 0;
}
a#iwlaFoot:hover
{
    background-position: -174px -80px;
}
a#aboutFoot
{
    width: 117px;
    background-position: -616px 0;
}
a#aboutFoot:hover
{
    background-position: -616px -80px;
}
a#contactFoot
{
    width: 169px;
    background-position: -733px 0;
}
a#contactFoot:hover
{
    background-position: -733px -80px;
}



CODE

@charset "UTF-8";
/* CSS Document */

div#kakIs
{
    position: relative;
    left: 120px;
    top: 72px;
}
div#eagleEye
{
    position: relative;
    left: 465px;
    top: -270px;
}
div#interior
{
    position: relative;
    left: 50px;
    top: -205px;
}
div#kakOffers
{
    position: relative;
    left: 550px;
    top: -480px;
}
ul#kakOffersList
{
    font-family: "Helvetica", Trebuchet MS, Arial, Helvetica, sans-serif;
    color: #211C54;
    
    width: 320px;
    
    border: none;
    padding: 20px;
    
    list-style: none;
    
    position: relative;
    left: 520px;
    top: -485px;
}

a#FTZ125LinkImage
{
    display: block;
    background-image: url(Images/FTZ125LogoWebMini.jpg);
    width: 80px;
    height: 119px;
    text-indent: -9999px;
}
div#ftzImage
{
    position: relative;
    top: -445px;
    left: 530px;
}

a#iwla
{
    background-image: url(Images/HomePageImages/iwlaLogoWeb.jpg);
    display: block;
    width: 250px;
    height: 119px;
    text-indent: -9999px;
}
div#iwlaLogo
{
    position: relative;
    top: -565px;
    left: 635px;
}


p.homePageContent
{
    width: 400px;
    
    border: none;
    padding: 15px;
    
}
p#homePageContent1
{
    position: relative;
    top: 55px;
    left: 20px;
    
    font-family: "Helvetica", Trebuchet MS, Arial, Helvetica, sans-serif;
    color: #211C54;
}


If someone could figure out where this extra space on the right is coming from, I would really appreciate it. I have spent several hours trying to figure out the problem, but am not experienced enough to solve it. Thanks for your time!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 17 2012, 03:51 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 4,278
Joined: 23-August 06
From: Europe
Member No.: 9



It's the position: relative; that you use everywhere that causes it.

Having all content inside the div with id="siteInnerBackground", you don't need that positioning. Just some widths and floats.
Or create a two columns layout for the text and images section.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
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: 25th July 2014 - 10:06 PM