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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    HTML/CSS Gaps and Background problem

    I am having problems with gaps between different divs and iframes. There is also a problem with my background not covering the entire page. The only time i could get the background to show across the entire page is by loading it into the body which then puts the background over top of the header background. Any help would be appreciated.

    Here is my CSS

    Code:
    html {
        border: 0px;
        margin: 0px;
        padding: 0px;
    }
    
    body {
    	border: 0px;
        margin: 0px;
        padding: 0px;
    }
    
    #footer {
    	width: 100%;
    	float: bottom;
    	clear: both;
    	background: url(../images/bg03.jpg);
    	position: relative;
    	top: 15px;
    }
    
    #container {
    	width: 100%;
    	background:  url(../images/contentright.png);
    }
    
    #content {
    	 width: 100%;
    	 float: left;
    	 background: url(../images/contentright.png);
    	 position: relative;
    	margin-top:-1px;
    }
    
    #header {
    	background: url(../images/bg01.jpg);	
    	width: 100%;
    	height: 120px;
    	border: 0px;
    	border-style: no;
    	float: none;
    	margin: 0px;
    }
    
    #header iframe {
    display: block;
    margin: none;
    padding: none;
    }
    
    /* CSS For Menu */
    .solidblockmenu {
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	overflow: hidden;
    	margin-bottom: 10px;
    	border: 1px solid gray;
    	border-top-width:0;
    	background: black url(../images/blockdefault.gif) center center repeat-x;
    }
    
    .solidblockmenu li {
    	display: inline;
    }
    
    .solidblockmenu li a{
    	float: left;
    	color: white;
    	font: bold 13px Tahoma;
    	padding: 9px 11px;
    	text-decoration: none;
    	border-right: 1px solid gray;
    }
    
    .solidblockmenu li a:visited { 
    	color: white;
    }
    
    .solidblockmenu li a:hover, .solidblockmenu li a.current {
    	color: white !important;
    	background: black url(../images/blockactive.gif) center center repeat-x;
    }
    
    #menu {
    	width: 100%; 
    	border: 2px;
    	border-color: red;
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    	
    }
    
    #menu iframe {
    border: none;
    width: 100%;
    height: 45px; 
    margin-top: none;
    padding: none;
    display: block;
    overflow: hidden;
    }
    
    #menuBody {
    position: relative;
    border: none;
    width: 100%;
    height: 45px; 
    margin-top: none;
    padding: none;
    display: block;
    margin-bottom: -20px;
    }
    
    /* Left Content DIV Style */
    #contentleft {
    	float: left;
    	width: 70%;
    	text-align: left;
    	margin-top: 25px;
    	margin-left: 25px;
    	background: url(../images/bg03.jpg);
    	box-shadow: 7px 7px 5px #888888;
    	border-radius: 5px;
    }
    
    #contentleft h1 {
    	text-align: center;
    	color: black;
    }
    
    #contentleft p {
    	font-family: "Myriad Pro", "Bookman Old Style", "Times New Roman", Times, Serif;
    	text-align: justify;
    	padding: 5px;
    	margin: 10px;
    	font-size: 15px;
    }
    #contentright  {
    	position: absolute;
    	float: right;
    	margin-top: 25px;
    	text-align: center;
    	left: 75%;
    	width: 23%;
    	background: url(../images/bg03.jpg);
    	box-shadow: 7px 7px 5px #888888;
    	border-radius: 5px;
    	}
    
    #contentright h2 {
    	text-align: center;
    	color: black;
    }
    
    #contentright li {
    	margin-left: 25px;
    	margin-right: 10px;
    	text-align: left;
    	color: black;
    	text-align: justified;
    }
    
    #contentright p {
    	text-align: justify;
    	padding: 5px;
    	font-size: 12px;
    }
    
    #tblSchedule {
    margin: 2px;
    text-align: justify;
    }
    
    #colHead1 {
    width: 30%;
    text-align: center;
    }
    
    #colHead2 {
    width: auto;
    text-align: center;
    }
    
    #col1 {
    width: 30%;
    text-align: center;
    border-right:thick single black;
    font-size: 12px;
    margin: 10px;
    }
    
    #col2 {
    width: auto;
    text-align: left;
    font-size: 13 px;
    }
    And my HTML

    Code:
    <!DOCTYPE html
    	PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
    	"DTD/xhtml1-transitional.dtd">
    
    <html>
    	<head>
    		<title>Show-Me Shrimp Farms</title>
    		<link rel="Stylesheet" href="./style/shrimpStyle.css" type="text/css" media="screen">
    	</head>	
    		<body>
    			<div id="container">
    					<div id="header">
    						<iframe name="header" id="header" 
    							src="./header.html"
    							scrolling="no">
    						</iframe>
    					</div>
    
    					<div id="menu">
    						<iframe name="menu" 
    							src="./menu.html"
    							scrolling="no">
    						</iframe>
    					</div>
    
    				<div id="content">
    					<div id="contentleft">
    							<h1>2012 ShrimpFest</h1>
    							
    							<p>The 10th annual Shrimpfest is a celebration that marks the end of the shrimp growing season. Education and entertainment merge in a rural farm environment, providing an astounding experience for all ages.</p>
    
    							<p>Learn the basics of aquaculture and the phases of producing the fresh water prawns. Pond-side sales of the prawns begin around 9 a.m., continuing until we are sold out. Prawns are $10 per pound, heads-on. Free ice with porchase. Shrimp plate-dinners:$9. Soda, water, chips and ice available for purchase.</p>
    
    							<p>Children enjoy the free, inflatable jump-house and pony rides. Activities include, among other activities: free tours of the shrimp farm; washer toss; volleyball, horseshoe pitching; wine tasting (must show ID); musical entertainment with the amazing DJ and stand-up comedian, Scott Stoner, from Dallas, Texas; and karaoke for those who like to share their talents.</p>
    
    							<p>Held rain or shine at the Show-Me Shrimp Farm. Camping ok, Friday and Saturday nights. Bring your lawn chairs and pop-up shelter. Spend a day in a relaxing atmosphere in the middle of nowhere.</p>
    							
    						</div>
    				
    					<div id="contentright">
    							<h2>Schedule of Events</h2>
    							<table id="tblSchedule">
    							<tr>
    								<th id="colHead1">Time</th>
    								<th id="colHead2">Description</th>
    							</tr>
    							<tr>
    								<td id="col1">3:30 AM</td>
    								<td id="col2"> Pray to the Shrimp Gods for a bountiful harvest. (Pond takes around 7 hours to drain.</td>
    							</tr>
    							<tr>
    								<td id="col1">10:00 AM</td>
    								<td id="col2">Shrimp Available For Purchase</td>
    							</tr>
    							<tr>
    								<td id="col1">11 AM - 12 PM</td>
    								<td id="col2">Lots of Food, Music, Fun</td>
    							</tr>
    							</table>
    					</div>
    					
    				</div>
    			</div>
    					<div id="footer">
    					© Show-Me Shrimp Farms
    					</div>
    </body>
    
    </html>

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    It's hard to find out what the problem is without, header.

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I guess I have another question. Is it possible to upload a zip file of all the pieces of the website to make it easier?

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    You could do that.

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Easier if you have it online so we can use our web developer tools in our browsers to find a solution much quicker.

    Might check validation first and correct your errors:

    Validating:

    Why Validate?: http://validator.w3.org/docs/why.html
    CSS Validator: http://jigsaw.w3.org/css-validator/
    HTML Validator: http://validator.w3.org/#validate_by_uri+with_options

    Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Ima...ysterious_Gaps

    Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
    Why tables for layout is stupid: http://www.hotdesign.com/seybold/
    How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/ho...tml-tables-css
    Basic Tables [Bad Examples!]: http://www.yourhtmlsource.com/tables/basictables.html
    ☠ ☠RON☠ ☠

  • Users who have thanked Major Payne for this post:

    cartotech81 (08-08-2012)

  • #6
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it may not be related to your problem but I notice you have multiple elements sharing id's.
    Code:
    <div id="header">
    			<iframe name="header" id="header" 
    				src="./header.html"
    				scrolling="no">
    			</iframe>
    </div>
    you should change this to class if you need to use the same css to style them.

  • #7
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here is the website online.

    Code:
    http://showmeshrimpfarms.com/working/home.html

  • #8
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here is the attached zip file.
    Attached Files Attached Files

  • #9
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Correct the CSS errors not related to CSS 3.

    HTML errors

    Will help if those are corrected first. Recommend not using iframes to put your layout together. Same for table tags which went out in the late 1990s.
    ☠ ☠RON☠ ☠

  • #10
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Major Payne View Post
    Correct the CSS errors not related to CSS 3.

    HTML errors

    Will help if those are corrected first. Recommend not using iframes to put your layout together. Same for table tags which went out in the late 1990s.
    The only reason I used the iframes is because that is what I learned in school last term to keep the same header, footer, and menu bar on each page.

  • #11
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by cartotech81 View Post
    The only reason I used the iframes is because that is what I learned in school last term to keep the same header, footer, and menu bar on each page.
    You can make a common template for all your pages with the common content or you can make an include file and use Server Side Includes. Much better than using frames of any type.

    Online SSI Tool
    ☠ ☠RON☠ ☠

  • #12
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That sound cool. I will have to look into it some more. I have heard about doing CSS layouts instead of tables I just have not had the oppurtunity to look into them as of now.

    The last website I built was actually with PHP and mySQL I was just thinking that it is too much work to do it when there is only a little bit of information that will go on the website.

  • #13
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    11
    Thanked 79 Times in 77 Posts
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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