having a real layout issue :-( [Archive]

alphaquad

09-02-2007, 12:39 PM

I have 2 issues which both need urgently solving.

Any help from you guys would really cheer me up, iv spent hours on this.. searcing other forums but to no avail :(

Here is my site:

my site (http://testzone.alphaclient.co.uk/site-test/index.htm)

The site is split up into 3 main sections, header, maincontent and footer. each of these sections has a background image, maiking up the side columsn of the design.

Here's the issues:

Issue number 1.)

There is a horizontal scrolling issue, when the browser window is reduced horizontally. it includes the side bars even though they are set as background images...

can you see what i mean?

I only want the width of the header, main content and footer to occupy the scrollable width. As they are set to 760 pixels and scroll bars shouldnt appear.

The background sections on the side should not effect the pages horizontal size. ie they should be in the background. they make the width up to around 940 pixels.

The idea is that they should appear on resolutions larger than 800x600

Any idea how i can solve the scrolling isuues so that the main content of my site will be displayed on 800x600 resolutions?

Issue number 2.)

There is space appearing in firefox below the header, however this doesnt appear the same in IE. i need to clear this space, i have tried clearing my divs but it doesnt seem to work. Any ideas on this?

If anyone could help me out with this it would cheer me up!

Here is my css code:

/* home page layout */

.homeimage {
float:left;
height:240px;
width:188px;
border-left: solid 1px #FFFFFF;
border-right: solid 1px #FFFFFF;
}

.pagecontent {
float:right;
height:auto;
width:567px;
}

P {
font: normal 12px Arial;
text-align : left;
color : #333333;
margin-left : 25px;
margin-right : 25px;
margin-top : 8px;
margin-bottom : 12px;
}

p.footer-text {
font: normal 12px Arial;
text-align : left;
color : #ffffff;
margin-left : 5px;
margin-right : 5px;
margin-top : -1px;
margin-bottom : 0px;
}

H1 {
font : bold 22px Arial;
color : #2286C6;
margin-left : 25px;
margin-bottom : 20px;
margin-top : 25px;
}
H2 {
font : bold 12px Arial;
color : #333333;
margin-left : 25px;
margin-bottom : -8px;
margin-top : 25px;
}

/* accessories pages */

.grey-column{
background-color:#A5AFB7;
width: 188px;
margin-left:1px;
height:100%;
float:left;
vertical-align:bottom;
text-align:center;
}

.sub-menu-fade {
background-image:url(images/sub-menu-top.jpg);
background-repeat:repeat;
height:77px;
margin-top:-5px;

}

/* sub menu */

#navcontainer-sub { width: 188px; }

#navcontainer-sub ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
}

#navcontainer-sub a
{
display: block;
padding-top: 3px;
padding-bottom: 3px;
width: 188px;
text-align:center;
background-image:url(images/grey_sub_bg.gif);

background-repeat:no-repeat;
background-color: #A5AFB7;
border-top: 1px solid #ffffff;

}

#navcontainer-sub a:link, #navlist a:visited
{
color: #ffffff;
text-decoration: none;
}

#navcontainer-sub a:hover
{
background-image:url(images/blue_sub_bg.gif);
background-repeat:no-repeat;
background-color: #88BCDD;
color: #1B699E;
}

.center-white{
text-align:center;
color:#FFFFFF;
font: normal 12px Arial;
}

.bottom-border{
border-bottom: 1px solid #FFFFFF;
}

#wrapper {
margin: 0 auto;
width:758px;
}

And heres my HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

<div id="wrapper">

<div class="background">

<div class="header">

<div class="logo-img">
<img src="images/main_logo.jpg" alt="logo" width="188" height="168" /></div>

<div class="title-img">
<img src="images/main_title.jpg" alt="title" width="567" height="169" /></div>

<div class="line">
</div>
<div class="menu">

<div id="navcontainer">

<ul>
<li>
<p class="menu-toptext"><a href="index.htm" class="menu-toplink style1">Home</a></p>
</li>
<li>
<p class="menu-toptext"><a href="#" class="menu-toplink">How it works</a></p>
</li>
<li>
<p class="menu-toptext"><a href="#" class="menu-toplink">System features</a></p>
</li>
<li>
<p class="menu-toptext"><a href="accessories.htm" class="menu-toplink">Accessories</a></p>
</li>
<li>
<p class="menu-toptext"><a href="#" class="menu-toplink">Case studies</a></p>
</li>
<li>
<p class="menu-toptext"><a href="#" class="menu-toplink">Contact us</a></p>
</li>
</ul>
</div>

</div>

</div>

</div>

<br clear="all" />

<div class="background-middle">

<div class="maincontent">

<div class="homeimage">
<img src="images/home_image.jpg" alt="Gaurdian Personal Alarm System" /></div>

<div class="pagecontent">


<h1>Guardian Personal Alarm System </h1>
<p> Increasing hostility encountered in the workplace environments places employees at risk<br />
and affects staff morale. Protect your staff with Guardian, the ultimate in personal security<br />
systems. The Guardian Personal Activation Device is worn on the belt by each member of<br />
staff. The system has two levels of call "Assistance" and "Attack".</p>
<p>In the event of an "attack" the unit is tugged from the retaining clip, sending out continuous<br />
attack signals to Reciever Units located throughout the area covered by the system. These<br />
units transmit to Attack Display Units which sound the alarm and identify the exact location of<br />
the incident and the personnel involved in full alphanumeric text.</p>
<br />
</div>

<br clear="all" />
</div>
</div>

<div class="background-footer">

<div class="footer">

<img src="images/nurse.jpg" alt="nurse" /><img src="images/porter_hotel.jpg" alt="hotel porter" /><img src="images/air_line_staff.jpg" alt="air line staff" /><img src="images/banker.jpg" alt="banker" />
<div class="footer-text">

<div style="float:left"><p class="footer-text"> 2007 © Privacy policy | About gaurdian SSS | Contact us </p></div>
<div style="float:left; padding-left:310px;"><p class="footer-text"> website by AlphaQuad</p></div>
</div>
</div>
</div>

</div>
</body>
</html>