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

Thread: display problem

  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    display problem

    I am having a problem with the positioning of certain images which I labeled "divheader" and "divheader1." They are the blue gradients at the top of my two center divs. I just tried positioning using percentages it sort of works but not totally. Also how can I make it so these images display properly at higher resolutions than 1024x768. Is there someway to stretch them? I want to be able to view it properly in 1280x1024. Any help would be much appreciated. Here is the code for the page
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
     #page { width:100%;
    	margin: 0px auto;
    	background:#FFFFF0;
    	}
     #header {
    	 
    	background:#FFFFF0;
    	  padding:10px;
    	
    	  
    	 }
     #main {
    	
    	padding-bottom:10px;
    	}
     #main div {
    	    padding:10px;
    	   
    	    
    	    }
     #main-left {   width:15%;
    	   float:left;
    	   background:#FFFFF0; 
    	   height:600px; 
    	margin-right:10px; 
    	     
    	     }
     #main-center {
    	       margin-left:10px;
    	       width:50%;
    	   
    	    border:1px solid #0EBFE9;
    	padding:0px;
    	   }
    
     #main-right {
    	    
    	    
    	      
    		 margin-left:10px;
    		margin-right:10px;
    	     width:24%;
    	     border:1px solid #0EBFE9;
    	    background:#E3E3E3;
    	float:right;
    	
    	
    	}
     #bottom {
    	  
    	  margin-top:10px;
    	 
    	  padding:10px;
    	  width:90%;
    	position:relative; top:15px;
    	
    	
    	   }
     #links {
    	
    	background-color:#B0E2FF;
    	
    	margin: 0 10px;
    	
    	}
     
     #username {
    	padding:0px;
    	width:90%;
    	}
     #password { 
    	padding:0px;
    	width:90%;
    	}
     #submit-reset {
    	width:90%;
    	margin-right:auto;
    	margin-left:auto;
    	}
     hr {
    	
    	height:1px;
    	width:100%;
    	}
     .roundedtop {
    	background: url(img/toprightcornerlinks.jpg) no-repeat top right;
    	}
     .roundedbottom {
    	background: url(img/bottomrightcornerlinks.jpg) no-repeat top right;
    	}
     img.corner {
    	width: 15px;
    	height: 15px;
    	border: none;
    	display: block !important;
    	}
     #img {
    	float:left;
    	
    	}
    
     #divheader {
    	width:100%;
    	margin-top:0px;
    	margin-right:0px;
    	margin-left:0px;
    	padding:0px;
    	margin-bottom:0px;
    	
    	position:relative; bottom:5%;
    	right:4%;
    	}
    
     #main-center1	{
    	       margin-left:10px;
    	       width:50%;
    	   
    	    border:1px solid #0EBFE9;
    	  margin-top:10px;
    	padding:0px;
    	 }
     p.opening {
    	margin-top:0px;
    	}
     h2 {
    	margin-top:0px;
    	}
     #divheader1 {
    	width:100%;
    	margin-top:0px;
    	margin-right:0px;
    	margin-left:0px;
    	padding:0px;
    	margin-bottom:0px;
    	position:relative; bottom:11%;
    	right:4%;
    	}
    
    </style>
    </head>
    <body>
    <div id="page">
    <div id="header">
    	<div id="img"><img src="img/experiment1.jpg" alt="Chattennis.com logo" width="220" height="176">
    	</div>
    	<center>
    	<img src="img/banner2.jpg" alt="Chattennis.com">
    	</center>
    	<center>
    	<h2>Welcome to your main source for tennis discussion, chat, and informaion on the internet.</h2>
    </center>
    
    	<div id="links">
    	<div class="roundedtop">
    		<img src="img/topleftcornerlinks.jpg" alt="" 
    		width="15" height="15" class="corner"
    		style="display: none" />
    	</div>
    	<center>
    	<table cellspacing="5" border="0">
    	<tr>
    		<td><a href="index.html">Home</a></td> 
    		<td width="1" bgcolor="#000000"></td>
    		<td><a href="phpBB2/index.php">Forums</a></td> 
    		<td width="1" bgcolor="#000000"></td>
    		<td><a href="news.html">News</a></td> 
    		<td width="1" bgcolor="#000000"></td>
    		<td><a href="phpBB2/search.php">Search</a></td>
    		<td width="1" bgcolor="#000000"></td> 
    		<td><a href="phpBB2/login.php?redirect=profile.php&mode=editprofile">Profile</a></td> 
    		<td width="1" bgcolor="#000000"></td>
    		<td><a href="phpBB2/memberlist.php">Memberlist</a></td> 
    		<td width="1" bgcolor="#000000"></td>
    		<td><a href="phpBB2/groupcp.php">Usergroups</a></td> 
    		<td width="1" bgcolor="#000000"></td>
    		<td><a href="phpBB2/faq.php">FAQ</a></td> 
    		<td width="1" bgcolor="#000000"></td>
    		<td><a href="staff.html">Staff</a></td> 
    		<td width="1" bgcolor="#000000"></td>
    		<td><a href="contactus3.php">Contact Us</a></td>
    		<td width="1" bgcolor="#000000"></td>
    		<td><a href="articles.html">Articles</a></td>
    		<td width="1" bgcolor="#000000"></td>
    		<td><a href="phpBB2/profile.php?mode=register">Register</a></td>
    	</tr>
    	</table>
    	</center>
    
    <div class="roundedbottom">
    	<img src="img/bottomleftcornerlinks.jpg" alt=""
    	width="15" height="15" class="corner"
    	style="display: none" />
    </div>
    </div>
    
    </div>
    
    <div id="main">
    <div id="main-left">
    	<p>Your ad here</p>
    </div>
    
    <div id="main-right">
    
    <center>
    <h3>Login</h3>
    
    	<form method="post" action="phpBB2/login.php">
    
    	Username <input type="text" class="post" name="username" size="30">
    
    <div id="password">
    	Password <input type="password" class="post" name="password" size="30">
    	Remember me <input type="checkbox" name="autologin" />
    </div>
    <div id="submit-reset">
    	
    	<input type="submit" value="Log in" class="mainoption" name="login"> <br>
    	<input type="hidden" name="redirect" value="" />
    	Not a member <a href="phpBB2/profile.php?mode=register">Register</a><br>
    	<font size="2">It's free and easy.</font><br>
    	<a href="phpBB2/profile.php?mode=sendpassword"><font size="2">Forgot your password</font></a>
    	
    </div>
    </form>
    
    </center>
    
    </div>
    <div id="main-center">
    <div id="divheader">
    <img src="img/divheader.jpg">
    </div>
    
    <p class="opening"><font size="5">Welcome to Chattennis.com, your main source for tennis forums, chat, and information on the internet. You can check out our news section for up-to-date tennis news and our forums
    	to discuss professional tennis, strategy, training tips, and much, much more. Don't miss our great articles section full of tips, tricks, strategy, and tactics for tennis. 
    	</font></p>
    <center>
    <a href="phpBB2/index.php"><font size="5">Enter the Tennis Discussion Forum Here</font></a></center>
    
    </div>
    <div id="main-center1">
    <div id="divheader1">
    <img src="img/divheader.jpg">
    </div>
    <center>
    <h2>-Site News-</h2>
    </center>
    
    <p>January 2, 2007- The site is currently under construction, and our forums are currently inoperative but will be ready very soon. You can check out our articles section in the mean time.</p>
    </div>
    
    <div id="bottom">
    
    <center><a href="index.html"><font size="1">Home</font></a> <a href="privacypolicy.html" target="_blank"><font size="1">Privacy Policy</font></a> <a href="termsofuse.html" target="_blank"><font size="1">Terms of Use</font></a> </center>
    </div>
    
    </div>
    </div>
    </body>
    </html>
    Last edited by phpnewb; 01-04-2007 at 03:10 AM.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Got a link to your page at all?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's not finished but here is the link www.chattennis.com

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Okay, not sure about the problem as of yet, but you do know you can put the images in the stylesheet rather than within the divs on the page? Simply add the line background-image: url(linktoimage); then set it's height and width and voila!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Set the gradient images as CSS backgrounds of the content boxes. Example:

    Code:
    CSS:
    div#opening {
      border: 1px solid #0ebfe9;
      padding-top: 30px;
      background: url("img/divheader.jpg") no-repeat;
      }
    div#opening p {
      margin: 0.5em;
      }
    
    HTML:
    <div id="opening">
      <p>Welcome to Chattennis.com, your main source for tennis forums…</p>
    </div>
    Also note:
    Your layout has significant problems in the Firefox and Opera browsers; all of the content is in the lower left corner.

    Your page contains errors. In most cases, ampersands (&) need to be escaped, including in URIs (…profile.php&mode…); you can use &amp; to do so (…profile.php&amp;mode…). The reason for this is that an ampersand starts a character reference, so your code is being interpreted as the invalid reference “&mode;”. Also, img elements require alt attributes; these attributes provide text alternatives when images cannot be displayed. In this case, the alt attributes are a moot point, however, since those images are presentational, not informative, and should be displayed as CSS backgrounds instead, as described above.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New Coder
    Join Date
    Nov 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you the problem has been fixed.
    Last edited by phpnewb; 01-04-2007 at 11:55 PM. Reason: problem fixed


  •  

    Posting Permissions

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