SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Non-Member
    Join Date
    Apr 2007
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to add two images across the top?

    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">&nbsp;</td>
    		<td class="header_top_tdr">&nbsp;</td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td>&nbsp;</td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td>&nbsp;</td>
    	</tr>
    </table>
    
    </div>
    
    <div id="content">
    <div id="left_column">
    	<table >
    		<tr>
    			<td colspan="2">&nbsp;
    			</td>
    		</tr>
    
    		<tr>
    			<td class="white_text"colspan="2">&nbsp;
    			Login Here</td>
    		</tr>
    		<tr>
    			<td colspan="2">&nbsp;
    			</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>&nbsp;<input class="fieldbox" size="20" maxlength="50" name="members_username" type="text"/></td>
    		</tr>
    		<tr class="form_row">
    			<td>Password</td>
    			<td>&nbsp;<input class="fieldbox" size="20" maxlength="50" name="members_password" type="password"/></td>
    		</tr>
    		<tr class="form_row">
    			<td>&nbsp;</td>
    			<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
    			<input class="fieldbox" value="Login" id="submit2" name="submit2" type="submit"/></td>
    		</tr>
    
    		</form>
    		<tr>
    			<td colspan="2" >
    			<p class="link_p">&nbsp;</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>&nbsp;</p>
    			</td>
    		</tr>
    		<tr>
    			<td colspan="2">&nbsp;
    			</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"/>&nbsp;
    		And some text here</td>
    		<td><img alt="" src="images/sound1.gif" width="32" height="38" style="vertical-align:middle" />&nbsp;&nbsp;
    		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">&nbsp;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" />&nbsp;
    		<font face="Arial" color="#A30100" size="4">&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;one</font><font face="Arial" color="#800000" size="4">:</font>
    <font face="Arial" font color="#939393" size="2">&nbsp;&nbsp;&nbsp;text blah blah blah text text text</font><br>
    
    <font face="Arial" color="#DB8936" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;two</font><font face="Arial" color="#800000" size="3">:
    </font><font face="Arial" font color="#4c4c4c" size="2">&nbsp;&nbsp;&nbsp;Rtext blah blah blah text text textt</font><br>
    
    <font face="Arial" color="#B75b00" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;three</font>
    <font face="New Times Roman" color="#800000" size="2">:</font><font face="Arial" font color="#000000" size="2">&nbsp;&nbsp;
    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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;</p>
    <p>&nbsp;</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 :&nbsp;&nbsp;&nbsp; <a href="mailto:"></a></td>
    	</tr>
    </table>
    
    </div>
    
    </div><!-- end of container -->
    
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    You could just float them l;eft and right in that table cell.
    Code:
            <table id="header_table">
                <tr>
                    <td class="header_top_tdl">&nbsp;</td>
                    <td class="header_top_tdr">&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="2"><p class="fl">left</p><p class="fr">right</p></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
    Code:
    p.fl{float:left;margin:0}
    p.fr{float:right;margin:0}
    Just put the images where that text is.

  3. #3
    Non-Member
    Join Date
    Apr 2007
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thank you

    Thank you..............


Bookmarks

Posting Permissions

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