...

View Full Version : display problem



phpnewb
01-04-2007, 02:16 AM
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


<!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>

ahallicks
01-04-2007, 10:16 AM
Got a link to your page at all?

phpnewb
01-04-2007, 12:55 PM
It's not finished but here is the link www.chattennis.com

ahallicks
01-04-2007, 01:47 PM
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!

Arbitrator
01-04-2007, 08:25 PM
Set the gradient images as CSS backgrounds of the content boxes. Example:


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 (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.chattennis.com%2F). 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.

phpnewb
01-04-2007, 11:33 PM
Thank you the problem has been fixed.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum