Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    39
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Two scroll bars..

    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!
    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>
    <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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=314+Tilghman+Street,+Oxford,+MD&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=36.505383,107.138672&amp;ie=UTF8&amp;hq=&amp;hnear=314+Tilghman+St,+Oxford,+Maryland+21654&amp;ll=38.692678,-76.169844&amp;spn=0.023447,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=314+Tilghman+Street,+Oxford,+MD&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=36.505383,107.138672&amp;ie=UTF8&amp;hq=&amp;hnear=314+Tilghman+St,+Oxford,+Maryland+21654&amp;ll=38.692678,-76.169844&amp;spn=0.023447,0.036478&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    </p>
    </div>
    </body>
    </html>
    Code:
    @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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 -

    Code:
    #content {
    	overflow:auto;
    	margin:0 216px;
    /*height:600px;*/
    	background-image:url(buttons/content/background.png);
    	background-repeat:repeat-x;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    39
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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.
    Last edited by xKiller4Hir3; 04-01-2011 at 02:16 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by xKiller4Hir3 View Post
    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 -
    Code:
    #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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    39
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Yes, because your background image is repeated only on the X axis.
    Try it like this -
    Code:
    #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?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by xKiller4Hir3 View Post
    Okay. Can you recommend how I should nest them?
    Try something like this to start with -
    Code:
    <!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.
        <!--end container--></div>
            <!--end rightWrap--></div>
        <!--end leftWrap--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •