Two scroll bars..

xKiller4Hir3

03-31-2011, 11:10 PM

http://schoonersonthecreek.com/test1/site/contacts.html
On my contacts page I'm having a problem where a scroll bar shows on the content div and one is usually always there as default to scroll downwards on the main template because my browser can't fit the entire height in. I would rather just stretch and fit my templates height to any browser and have a scroll bar for the content div. Makes sense. Let me know if you guys have better suggestions or anything of the sort! Thanks!
<!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>Contacts</title>
<link href="styles1.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="leftside">
</div>
<div id="rightside">
</div>
<div id="banner" align="center">
<img src="buttons/banner.png" width="900" height="250" />
</div>
<div id="navbar" align="center">
<img src="buttons/navbar/contacts-active.png" usemap="#navbar" width="900" height="40" border="0" />
<map name="navbar">
<area shape="rect" coords="0,0,150,90" href="index.html" alt="home" />
<area shape="rect" coords="150,0,300,90" href="about.html" alt="about" />
<area shape="rect" coords="300,0,450,90" href="menu.html" alt="menu" />
<area shape="rect" coords="450,0,600,90" href="calendar.html" alt="calendar" />
<area shape="rect" coords="600,0,750,90" href="photos.html" alt="photos" />
<area shape="rect" coords="750,0,900,90" href="contacts.html" alt="contacts" />
</map>
</div>
<div id="content">
<h2>Phone Number</h2>
<p align="center">410-226-0160</p>
<h2>Email</h2>
<p align="center"><a href="mailto:schoonersonthecreek@yahoo.com">SchoonersOnTheCreek@yahoo.com</a></p>
<h2>Facebook!</h2>
<p align="center">
<a href="http://www.facebook.com/group.php?gid=152349910696#!/group.php?gid=152349910696&v=wall" target="_new" >Join Us On Facebook!</a>
</p>
<h2>Map</h2>
<br />
<p align="center">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=314+Tilghman+Street,+Oxford,+MD&aq=&sll=37.0625,-95.677068&sspn=36.505383,107.138672&ie=UTF8&hq=&hnear=314+Tilghman+St,+Oxford,+Maryland+21654&ll=38. 692678,-76.169844&spn=0.023447,0.036478&z=14&iwloc=A&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=314+Tilghman+Street,+Oxford,+MD&aq=&sll=37.0625,-95.677068&sspn=36.505383,107.138672&ie=UTF8&hq=&hnear=314+Tilghman+St,+Oxford,+Maryland+21654&ll=38. 692678,-76.169844&spn=0.023447,0.036478&z=14&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</p>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
margin:0px;
padding:0px;
}
html, body {
min-width:1340px;
margin:0;
}
h1, h2 {
text-align:center;
color:#999;
padding-top:30px;
}
p {
color:#CCC;
}
#banner {
height:250px;
margin:0 216px;
display:block;
background-image:url(buttons/bannerpart.png);
background-repeat:repeat-x;
}
#navbar {
height:40px;
margin:0 216px;
background-image:url(buttons/main%20buttons/bgbutton.png);
background-repeat:repeat-x;
}
#content {
overflow:auto;
margin:0 216px;
height:600px;
background-image:url(buttons/content/background.png);
background-repeat:repeat-x;
}
#leftside {
width:216px;
height:890px;
background-image:url(buttons/side/leftside.png);
background-repeat:repeat-y;
background-position:left;
float:left;
}
#rightside {
width:216px;
height:890px;
background-image:url(buttons/side/rightside.png);
background-repeat:repeat-y;
background-position:right;
float:right;
}

Excavator

03-31-2011, 11:16 PM

Hello xKiller4Hir3,

I'm not sure why the need for a height on #content at all. What does removing it do to the rest of your pages?

Like this -

#content {
overflow:auto;
margin:0 216px;
/*height:600px;*/
background-image:url(buttons/content/background.png);
background-repeat:repeat-x;
}

xKiller4Hir3

04-01-2011, 01:05 AM

Well, I added up the height of every pixel so every image would match up at the bottom. It wouldn't change anything actually because the image IS 600 pixels in height. So good point because I am not sure as to why I even put that in there.

When I deleted the height it just let the map extend down below the template leaving a white space.

Excavator

04-01-2011, 03:50 AM

When I deleted the height it just let the map extend down below the template leaving a white space.

Yes, because your background image is repeated only on the X axis.
Try it like this - #content {
overflow:auto;
margin:0 216px;
/*height:600px;*/
background: #000 url(buttons/content/background.png) repeat-x;
}

Of course, your left and right sides are not fluid height either. You would need to nest some divs to make them work.

xKiller4Hir3

04-03-2011, 09:31 PM

Yes, because your background image is repeated only on the X axis.
Try it like this - #content {
overflow:auto;
margin:0 216px;
/*height:600px;*/
background: #000 url(buttons/content/background.png) repeat-x;
}

Of course, your left and right sides are not fluid height either. You would need to nest some divs to make them work.

Okay. Can you recommend how I should nest them?

Excavator

04-03-2011, 10:22 PM

Okay. Can you recommend how I should nest them?

Try something like this to start with - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
html, body {margin: 0;}
#leftWrap {background: url(http://schoonersonthecreek.com/test1/site/buttons/side/rightside.png) repeat-y left top;}
#rightWrap {background: url(http://schoonersonthecreek.com/test1/site/buttons/side/rightside.png) repeat-y right top;}
#container {
min-width: 600px;
margin: 0 216px;
padding: 25px 0 800px; /*for demo only*/
text-align: center; /*for demo only*/
background: #999;
}
</style>
</head>
<body>
<div id="leftWrap">
<div id="rightWrap">
<div id="container">
Your most interesting website here.
</div>
</div>
</div>
</body>
</html>