jaYKay
11-26-2009, 03:58 PM
Hi,
The div GreyMessageBox should be centred and the contents of it should be centred too, but they are not, even though their parents are set to text-align:center; The only bit that is centred is the mobile number and name, everything else is off to the left. :mad: Any ideas?
<!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 id="Head1"><title>
Contact Me
</title><link href="CSS/MainStyles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.GreyMessageBox
{
border: 1px #C0C0C0 solid;
position:relative;
width:735px;
overflow:hidden;
text-align:center;
}
.TextBoxes
{
font-family:Verdana;
font-Size:Medium;
width:210px;
}
.LargeTextBox
{
font-family:Verdana;
font-Size:Medium;
width:470px;
height:141px;
}
.ColLeftSize
{
width:510px;
}
.ColRightSize
{
width:223px;
}
</style>
</head>
<body>
<form name="Form1" method="post" action="ContactMe.aspx" id="Form1" class="content">
<div class="LeftGeckoDiv">
<img id="imgGeckoLeft" src="Images/GeckoSmallLeft.png" style="border-width:0px;" />
</div>
<div class="RightGeckoDiv">
<img id="imgGeckoRight" src="Images/GeckoSmallRight.png" style="border-width:0px;" />
</div>
<div class ="titleDiv">
Contact Me
</div>
<div class="mainDiv">
<br />
Mr Jamie Keck
<br />
Mobile: 012345678910
<br />
<br />
<div class="GreyMessageBox">
Send me a message now
<br />
<br />
<table >
<tr>
<td class="TdRight">Your Email:</td>
<td><input name="UsersEmail" type="text" id="UsersEmail" class="TextBoxes" /></td>
</tr>
<tr>
<td class="TdRight">Subject:</td>
<td><input name="Subject" type="text" id="Subject" class="TextBoxes" /></td>
</tr>
</table>
<br />
<div class = "ColDivLeft ColLeftSize">
<table>
<tr>
<td>
Message<br />
<textarea name="Body" rows="2" cols="20" id="Body" class="LargeTextBox"></textarea>
</td>
</tr>
<tr>
<td class="TdCenter">
<input type="submit" name="SendEmail" value="Send Message" id="SendEmail" class="standardbutton" />
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
<div class = "ColRightSize ColDivRight">
<br />
<img id="Image1" src="Images/Mail.png" style="border-width:0px;" />
</div>
</div>
<br />
<br />
</div>
<div class ="footerButtons">
<input type="image" name="imgbtnHome" id="imgbtnHome" src="Images/HomeButton.png" style="border-width:0px;" />
</div>
<div class="footer">
<hr />
© 2009 Red Gecko UK. All rights reserved.
</div>
</form>
</body>
</html>
Style sheet ->
body
{
background-image: url('../Images/background.png');
background-color: White;
background-repeat:repeat-x;
}
.content
{
background-color: White;
margin: auto auto auto;
margin-top: 2px;
width: 992px;
position: relative;
}
.titleDiv
{
border-top: 1px #FF0000 solid;
text-align: center;
position: relative;
font-family: Arial Black;
font-size: 30pt;
color: Red;
width:746px;
height:67px;
}
.LeftGeckoDiv
{
float:left;
border-top: 1px #FF0000 solid;
border-Left: 1px #FF0000 solid;
position: relative;
width:122px;
height:68px;
}
.RightGeckoDiv
{
float:right;
border-top: 1px #FF0000 solid;
border-Right: 1px #FF0000 solid;
position: relative;
width:122px;
height:68px;
}
.mainDiv
{
text-align:center;
position: relative;
border-color: Red;
border-style: solid;
border-width: 1px;
font-family: Verdana;
font-size: medium;
color: Black;
z-Index: 0;
width:990px;
}
.footerButtons
{
text-align:center;
position:relative;
margin-top: -30px;
z-Index:1;
}
.footer
{
text-align:center;
font-family: Verdana;
font-size: x-small;
color: #C0C0C0;
}
.ColDivLeft
{
position:relative;
float: left;
}
.ColDivRight
{
text-align:left;
float:right;
position:relative;
}
.standardbutton
{
background-color:#F2F2F2;
border-Color:#CCCCCC;
border-Style:Solid;
border-Width:1px;
font-family:Verdana;
Font-Size:Medium;
Height:30px;
}
.TdRight
{
text-align: right;
}
.TdCenter
{
text-align: center;
}
.TdCenterRed
{
text-align: center;
color:Red;
}
The div GreyMessageBox should be centred and the contents of it should be centred too, but they are not, even though their parents are set to text-align:center; The only bit that is centred is the mobile number and name, everything else is off to the left. :mad: Any ideas?
<!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 id="Head1"><title>
Contact Me
</title><link href="CSS/MainStyles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.GreyMessageBox
{
border: 1px #C0C0C0 solid;
position:relative;
width:735px;
overflow:hidden;
text-align:center;
}
.TextBoxes
{
font-family:Verdana;
font-Size:Medium;
width:210px;
}
.LargeTextBox
{
font-family:Verdana;
font-Size:Medium;
width:470px;
height:141px;
}
.ColLeftSize
{
width:510px;
}
.ColRightSize
{
width:223px;
}
</style>
</head>
<body>
<form name="Form1" method="post" action="ContactMe.aspx" id="Form1" class="content">
<div class="LeftGeckoDiv">
<img id="imgGeckoLeft" src="Images/GeckoSmallLeft.png" style="border-width:0px;" />
</div>
<div class="RightGeckoDiv">
<img id="imgGeckoRight" src="Images/GeckoSmallRight.png" style="border-width:0px;" />
</div>
<div class ="titleDiv">
Contact Me
</div>
<div class="mainDiv">
<br />
Mr Jamie Keck
<br />
Mobile: 012345678910
<br />
<br />
<div class="GreyMessageBox">
Send me a message now
<br />
<br />
<table >
<tr>
<td class="TdRight">Your Email:</td>
<td><input name="UsersEmail" type="text" id="UsersEmail" class="TextBoxes" /></td>
</tr>
<tr>
<td class="TdRight">Subject:</td>
<td><input name="Subject" type="text" id="Subject" class="TextBoxes" /></td>
</tr>
</table>
<br />
<div class = "ColDivLeft ColLeftSize">
<table>
<tr>
<td>
Message<br />
<textarea name="Body" rows="2" cols="20" id="Body" class="LargeTextBox"></textarea>
</td>
</tr>
<tr>
<td class="TdCenter">
<input type="submit" name="SendEmail" value="Send Message" id="SendEmail" class="standardbutton" />
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
<div class = "ColRightSize ColDivRight">
<br />
<img id="Image1" src="Images/Mail.png" style="border-width:0px;" />
</div>
</div>
<br />
<br />
</div>
<div class ="footerButtons">
<input type="image" name="imgbtnHome" id="imgbtnHome" src="Images/HomeButton.png" style="border-width:0px;" />
</div>
<div class="footer">
<hr />
© 2009 Red Gecko UK. All rights reserved.
</div>
</form>
</body>
</html>
Style sheet ->
body
{
background-image: url('../Images/background.png');
background-color: White;
background-repeat:repeat-x;
}
.content
{
background-color: White;
margin: auto auto auto;
margin-top: 2px;
width: 992px;
position: relative;
}
.titleDiv
{
border-top: 1px #FF0000 solid;
text-align: center;
position: relative;
font-family: Arial Black;
font-size: 30pt;
color: Red;
width:746px;
height:67px;
}
.LeftGeckoDiv
{
float:left;
border-top: 1px #FF0000 solid;
border-Left: 1px #FF0000 solid;
position: relative;
width:122px;
height:68px;
}
.RightGeckoDiv
{
float:right;
border-top: 1px #FF0000 solid;
border-Right: 1px #FF0000 solid;
position: relative;
width:122px;
height:68px;
}
.mainDiv
{
text-align:center;
position: relative;
border-color: Red;
border-style: solid;
border-width: 1px;
font-family: Verdana;
font-size: medium;
color: Black;
z-Index: 0;
width:990px;
}
.footerButtons
{
text-align:center;
position:relative;
margin-top: -30px;
z-Index:1;
}
.footer
{
text-align:center;
font-family: Verdana;
font-size: x-small;
color: #C0C0C0;
}
.ColDivLeft
{
position:relative;
float: left;
}
.ColDivRight
{
text-align:left;
float:right;
position:relative;
}
.standardbutton
{
background-color:#F2F2F2;
border-Color:#CCCCCC;
border-Style:Solid;
border-Width:1px;
font-family:Verdana;
Font-Size:Medium;
Height:30px;
}
.TdRight
{
text-align: right;
}
.TdCenter
{
text-align: center;
}
.TdCenterRed
{
text-align: center;
color:Red;
}