How do I add two images, side by side, across the top of the page horizontally,
in the space between the header and the tops of the columns?
thanks.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test 3</title>
<style type="text/css">
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
#left_column {
border: 1px solid #999999;
float: left;
width: 230px;
margin-top: 5px;
margin-right: 10px;
margin-left: 20px;
margin-bottom: 40px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
}
#header_table {
width: 100%;
border-collapse: collapse;
}
.header_top_tdl {
padding: 0px;
margin: 0px;
border-bottom-style: solid;
border-bottom-width: 10px;
border-bottom-color: #b7b7b7;
background-color: #800000;
width: 150px;
border-collapse: collapse;
border-right-width: 0px;
border-left-width: 0px;
}
.header_top_tdr {
border-bottom-style: solid;
border-bottom-width: 10px;
border-bottom-color: #b7b7b7;
background-color: #800000;
border-right-width: 0px;
border-left-width: 0px;
}
#right_column {
float: right;
width: 500px;
}
#footer {
margin: 20px;
padding: 3px;
clear: both;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #800000;
font-size: 14px;
}
.white_text {
background-color: #800000;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
.form_row {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.link_p {
margin-left: 20px;
vertical-align: middle;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.link_p img {
vertical-align: middle;
margin-right: 20px;
}
.link_p a {
text-decoration: none;
color: #000000;
}
.link_p a:hover {
color: #009933;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<table id="header_table">
<tr>
<td class="header_top_tdl"> </td>
<td class="header_top_tdr"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="content">
<div id="left_column">
<table >
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td class="white_text"colspan="2">
Login Here</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<form action="/smusermanager/members/default.asp?action=login" method="post"
name="login" language="JAVASCRIPT" onsubmit="return Validate();">
<input name="todo" value="login" type="hidden"/><input name="url"
value="/smusermanager/members/default.asp" type="hidden"/>
<tr class="form_row">
<td>Email Address</td>
<td> <input class="fieldbox" size="20" maxlength="50" name="members_username" type="text"/></td>
</tr>
<tr class="form_row">
<td>Password</td>
<td> <input class="fieldbox" size="20" maxlength="50" name="members_password" type="password"/></td>
</tr>
<tr class="form_row">
<td> </td>
<td>
<input class="fieldbox" value="Login" id="submit2" name="submit2" type="submit"/></td>
</tr>
</form>
<tr>
<td colspan="2" >
<p class="link_p"> </p>
<p class="link_p">
<img alt="Image" src="images/Hphone.gif" width="51" height="44"/>
<a href="http://www.s/test1.html?action=login">Home</a></p>
<p class="link_p">
<img alt="Image" src="images/hphone1.gif" width="51" height="39" />
<a href="http://www.s/test1.html?action=register">Register</a></p>
<p class="link_p">
<img alt="Image" src="images/hphone2.gif" width="44" height="42" />
<a href="http://www.s/test1.html?action=forgotusername">FAQ</a></p>
<p class="link_p">
<img alt="" src="test1_files/hphone3.gif" width="49" height="38" />
<a href="http://www.s/test1.html?action=forgotusername">Terms Of Use</a></p>
<p class="link_p">
<img alt="" src="test1_files/hphone4.gif" width="42" height="38" />
<a href="http://www.s/test1.html?action=forgotusername">Contact Us</a></p>
<p class="link_p">
<img alt="" src="test1_files/hphone5.gif" width="33" height="41" />
<a href="http://www.s/test1.html?action=forgotpass">Forgot Password</a></p>
<p> </p>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</div><!-- end of left column -->
<div id="right_column">text blah blah blah text text text</font><br><font face="Arial" color="#800000" size="3">
Ctext blah blah blah text text text</font>
<font color="#FF9900">_____________________________________________________________</font><br><br>
<font face="Arial" color="#282828" size="2"> text blah blah blah text text text</font><br>
<font face="Arial" color="#800000" size="2">
text blah blah blah text text text</font><br>
<font face="Arial" color="#6b6b6b"size="2">text blah blah blah text text texttext blah blah blah text text text
,text blah blah blah text text texttext blah blah blah text text texttext blah blah blah text text text
while text blah blah blah text text text.
Ltext blah blah blah text text text.</font>
<table style="width: 100%">
<tr>
<td><img alt="" src="images/sight1.gif" width="33" height="41" style="vertical-align:middle"/>
And some text here</td>
<td><img alt="" src="images/sound1.gif" width="32" height="38" style="vertical-align:middle" />
And some text here</td>
</tr>
</table>
<table style="width: 100%">
<tr><font color="#FF9900">________________________________________________________________</font><br>
<td valign="top"><br><img alt="" src="images/sight1.gif" width="33" height="41" style="vertical-align:middle"/>
<font face="Arial" color="#A30100" size="4"> Example1</font><font face="Arial" color="#6b6b6b" size="2"><br>bc7c eid fo ryrjtkdnf gktreisvi cfen jsf fwr<br>ww bc7c eid fo ryrjtkdnf gktreisvi cfen jsf fwrww
bc7c eid fo ryrjtkdnf gktreisvi cfen jsf fwrwwh cbc7c eid fo ryrjtkdnf gktreisvi cfen.</td>
<td valign="top"><br><img alt="" src="images/sound1.gif" width="32" height="38" style="vertical-align:middle" />
<font face="Arial" color="#A30100" size="4"> Example2</font><font face="Arial" color="#6b6b6b" size="2" align="left"><br>
bc7c eid fo ryrjtkdnf gktreisvi cfen jsf fwrww bc7c eid fo ryrjtkdnf gktreisvi cfen jsf fwrww bc7c eid fo ryrjtkdnf gktreisvi.
hfgjhsg hshdfhs more acd.</font></td></tr>
</table><font color="#FF9900">________________________________________________________________</font><br>
<font face="Arial" color="#282828" size="2">text blah blah blah text text text</font><br>
<font face="Arial" color="#800000" size="2"> text blah blah blah text text text</font><br>
<font face="Arial" color="#6b6b6b"size="2">text blah blah blah text text text,
s,text blah blah blah text text texttext blah blah blah text text texttext blah blah blah text text texttext blah blah blah text text text
text blah blah blah text text texttext blah blah blah text text text</font><br><br><font face="Arial" color="#282828" size="2">
Ftext blah blah blah text text texttext blah blah blah text text text.<font face="Arial" color="#800000" size="2"> text blah blah blah text text text</font><br>
<font color="#939393" size="5"><b>_______________________________________________</b></font><br>
</p>
<hr />
<p><br><font face="Arial" color="#282828" size="3">Itext blah blah blah text text text</font><br></font>
<font face="Arial" color="#A30100" size="4">
one</font><font face="Arial" color="#800000" size="4">:</font>
<font face="Arial" font color="#939393" size="2"> text blah blah blah text text text</font><br>
<font face="Arial" color="#DB8936" size="4">
two</font><font face="Arial" color="#800000" size="3">:
</font><font face="Arial" font color="#4c4c4c" size="2"> Rtext blah blah blah text text textt</font><br>
<font face="Arial" color="#B75b00" size="4">
three</font>
<font face="New Times Roman" color="#800000" size="2">:</font><font face="Arial" font color="#000000" size="2">
text blah blah blah text text text)</font><br>
<font color="#939393" size="5"><b>_______________________________________________</b></font><br><br>
<font face="Arial" color="#A30100" size="2">
Ftext blah blah blah text text text.</font>
<font face="Arial" color="#EE8833" size="2">.</font><font face="Arial" color="#000000" size="2"> </font>
<br><br><font face="Arial" color="#949494" size="1">text blah blah blah text text text</font></p>
<p> </p>
<p> </p>
</div><!-- end of right column -->
</div><!-- end of content -->
<div id="footer">
<table style="width: 100%">
<tr>
<td>Â*Copyright 2007 . All Rights Reserved.</td>
<td style="text-align:right">Email : <a href="mailto:"></a></td>
</tr>
</table>
</div>
</div><!-- end of container -->
</body>
</html>
Last edited by chrisj; 11-29-2007 at 07:34 PM..
|
