By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,423 Members | 1,601 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,423 IT Pros & Developers. It's quick & easy.

Trying to add an image within a page

P: 71
I've got some product information pages, with images and text, all setup within a table. I'm trying to add a small image in the upper right hand corner of the content div (where all the important information is). I've got the product name at the top, left aligned and typically as a two lined header, and I'd like to add a small logo to the right of that, either right beside it, or in the far right corner.

could anyone help me with how to set up the layout, I was trying to add another div, which would be positioned to fit in the corner, but then in drops the rest of the content down below it, instead of beside it.

Here's a link to the page: http://www.indianacomfortteam.com/indoorunits/vs90.asp

And here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Indiana Comfort Team</title>
<style type="text/css" media="screen">
@import "/styles.css";
</style>

<link href="../styles.css" rel="stylesheet" type="text/css" />


<script language="JavaScript1.2" src="/scripts/img_scroller.js"></script>
</head>

<body onload="startSlides();">

<!-- Insert the banner and menu fields -->
<!-- The banner at the top of the page -->
<div id="banner"> </div>

<!-- The primary menu for the site -->
<div id="menu">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img id="imgholder" src="" alt="" />
</td>
<td>
<a href="/outdoorunits/outdoorunits.asp"><img src="/img/menuicons/outdoorunits.jpg" alt="Outdoor Units" /></a>
</td>
<td>
<a href="/indoorunits/indoorunits.asp"><img src="/img/menuicons/indoorunits.jpg" alt="Indoor Units" /></a>
</td>
<td>
<a href="/hybrids/hybridunits.asp"><img src="/img/menuicons/hybridsystem.jpg" alt="Hybrid Systems" /></a>
</td>
<td>
<a href="/iaq/iaq.asp"><img src="/img/menuicons/indoorairquality.jpg" alt="Indoor Air Quality" /></a>
</td>
<td>
<a href="/geothermal/geothermal.asp"><img src="/img/menuicons/geothermal.jpg" alt="Geothermal" /></a>
</td>
<td>
<a href="/radiant/radiant.asp"><img src="/img/menuicons/radiantsystems.jpg" alt="Radiant Systems" /></a>
</td>
</tr>
</table>
</div>

<!-- This is the main body of the page -->
<div id="mainbody">

<!-- Include the siedbar for the page -->
<div id="sidebar">
<!-- The contact box page, this will be present on all pages -->
<div id="contactbox">
<p class="contactfont"><a href="/contactus.asp"><img src="/img/contactus.gif" alt="Contact Us" /></a></p>
</div>

<!-- The submenu section, this changes from page to page -->
<div id="submenu">
<table><tbody>
<tr><td>
<a href="/index.asp">Home &raquo;</a>
</td></tr>
<tr><td>
<a href="/indoorunits/indoorunits.asp">Indoor Units &raquo;</a>
</td></tr>
<tr><td>
<a href="/indoorunits/vs90.asp">VS90 Gas Furnace &raquo;</a>
</td></tr>
<tr><td>
<a href="/indoorunits/vs80.asp">VS80 Gas Furnace &raquo;</a>
</td></tr>
<tr><td>
<a href="/indoorunits/fancoils.asp">FVM4 Fan Coil &raquo;</a>
</td></tr>
</tbody></table>
</div>

<!-- Include the help section on the sidebar page -->
<!-- The help section, this will include things like a FAQ link, definitions link, financing, etc. -->
<div id="helpmenu">
<table><tbody>
<tr><td>
<a href="/faq.asp">FAQ &raquo;</a>
</td></tr>
<tr><td>
<a href="/glossary.asp">Common Terms &raquo;</a>
</td></tr>
<tr><td>
<a href="/summer_tips.asp">Summer Tips &raquo;</a>
</td></tr>
<tr><td>
<a href="/winter_tips.asp">Winter Tips &raquo;</a>
</td></tr>
<tr><td>
<a href="/contactus.asp">Contact Us &raquo;</a>
</td></tr>
<tr><td>
<a href="/finance.asp">Financing &raquo;</a>
</td></tr>
</tbody></table>
</div>


</div>


<!-- The body of the page, where all the content lies -->
<div id="content">
<!-- <div id="biindiana"><img src="../img/builtinindiana.jpg" width="50px" height="100px" /></div> -->

<div id="product">
<table class="product-table"><tbody>
<tr>
<td class="product-info" colspan="2"><p class="product-banner">Softsound VS90<br />
Variable Speed Two-Stage Gas Furnace</p></td>
</tr>

<tr>
<td class="product-image"><img src="/indoorunits/img/vs90.jpg" width="150px" alt="Softsound VS90"/></td>
<td class="product-info" rowspan="7">
<p class="product-header">Reliable</p>
<p class="product-desc">Direct Hot Surface Ignition System features an advanced silicon nitride igniter for years of reliable starts.</p>

<p class="product-header">Durable</p>
<p class="product-desc">The RPJ® III primary heat exchanger is made of corrosion-resistant weld-free stainless steel. The unique integrated ripple-edged design forces more heat to the outside surface area for higher efficiencies.</p>

<p class="product-header">Heating On Demand</p>
<p class="product-desc">Two-stage redundant gas valve, two-speed induced draft blower assembly, and variable speed motor operate normally at the lower stage and ramp up as needed.</p>

<p class="product-header">Quiet</p>
<p class="product-desc">Variable speed circulation blower motor is pre-lubricated, dynamically balanced, and resilient mounted to reduce vibration and noise.</p>

<p class="product-header">System Monitoring</p>
<p class="product-desc">State-of-the-art electronic controls monitor system operation and allow for advanced diagnostics, a timesaving tool for technicians.</p>

<ul>
<li class="product-desc">Energy-saving high efficiency operation of 92% AFUE.</li>
<li class="product-desc">Two-stage operation system reduces temperature and humidity swings in the home by heating and cooling more evenly.</li>
<li class="product-desc">10 year No Hassle Replacement Warranty gives you a brand new unit should the heat exchanger fail.</li>
<li class="product-desc">Lifetime limited warranty on the primary and secondary heat exchanger.</li>
<li class="product-desc">7 year limited warranty on all functional parts.</li>
<li class="product-desc">HELP® (Homeowner’s Extended Labor Program) available.</li>
</ul>
</td>
</tr>

<tr>
<td class="product-image"><img src="/img/spacer.gif" width="150px" height="30px" alt="" /></td>
</tr>

<tr>
<td class="product-image"><img src="/img/tags/nh-10yr-lg.jpg" width="150px" alt="10 Year No Hassle Replacement Warranty" /></td>
</tr>

<tr>
<td class="product-image"><img src="/img/tags/92afue-sm.jpg" width="76px" alt="92% AFUE" /></td>
</tr>

<tr>
<td class="product-image"><img src="/img/tags/htx-life-sm.jpg" width="150px" alt="Lifetime Stainless Steel Heat Exchanger Limited Warranty" /></td>
</tr>

<tr>
<td class="product-image"><img src="/img/tags/parts-7yr-sm.jpg" width="150px" alt="7 Year Parts Limited Warranty" /></td>
</tr>

<tr>
<td class="product-image"><img src="/img/tags/estar-sm.gif" width="100px" alt="Energy Star" /></td>
</tr>
</tbody></table>
</div>
</div>

<!-- Side bar used for advertisements on the page -->
<div id="sidebar_right"> </div>

</div>
<!-- End of main body of page -->

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-2285291-1";
urchinTracker();
</script>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-2017551-1";
urchinTracker();
</script>
</body>
</html>

Here's the divs from the .css file:

/* ================================================== =================== */
/* Specific DIVs */

#banner {
position: inherit;
left: 0px;
top: 0px;
width: 1066px;
height: 150px;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
background-image:url(/img/header.jpg);
z-index: 5;
}

#menu {
position: inherit;
left: 0px;
top: 150px;
width: 1066px;
max-width: 1066px;
height: 154px;
max-height: 154px;
text-align: left;
background-color: #FFFFFF;
z-index: 10;
}

#mainbody {
position: inherit;
left: 0px;
top: 304px;
width: 1064px;
max-width: 1064px;
min-height: 900px;
text-align: left;
background-color: #98B5ED;
border: solid 1px #000000;
z-index: 1;
}

#sidebar {
position: relative;
float: left;
left: 0px;
top: 0px;
width: 152px;
max-width: 152px;
min-height: 900px;
text-align: left;
background-color: #98B5ED;
border: solid 0px #000000;
z-index: 9;
}

#content {
position: relative;
float: left;
left: 0px;
top: 0px;
width: 745px;
max-width: 745px;
min-height: 893px;
_height: 893px;
padding-left: 10px;
padding-top: 5px;
padding-right: 5px;
text-align: left;
voice-family: "\"}\"";
voice-family: inherit;
background-color: #FFFFFF;
border: solid 1px #000000;
z-index: 1;
}

#sidebar_right {
position: relative;
float: left;
right: 0px;
top: 0px;
width: 0px;
max-width: 0px;
min-height: 900px;
text-align: left;
background-color: #98B5ED;
border: solid 0px #000000;
z-index: 9;
}

#contactbox {
position: relative;
left: 0px;
top: 0px;
width: 150px;
max-width: 150px;
height: 100px;
max-height: 100px;
text-align: center;
vertical-align: middle;
background-color: #7895CD;
border: solid 1px #000000;
z-index: 9;
}

#submenu {
position: relative;
left: 0px;
top: 5px;
width: 150px;
max-width: 150px;
height: 200px;
max-height: 200px;
text-align: left;
vertical-align: center;
background-color: #7895CD;
border: solid 1px #000000;
z-index: 9;
}

#helpmenu {
position: relative;
left: 0px;
top: 10px;
width: 150px;
max-width: 150px;
height: 200px;
max-height: 200px;
text-align: left;
vertical-align: center;
background-color: #7895CD;
border: solid 1px #000000;
z-index: 9;
}

#product {
text-align: center;
vertical-align: top;
border: solid 0px #000000;
}

#biindiana {
position: relative;
left: 650px;
top: 0px;
width: 500px;
max-width: 500px;
text-align: center;
vertical-align: top;
border: solid 0px #000000;
margin: 0px 0px 0px 0px;
padding: 0px;
}
Jul 25 '07 #1
Share this Question
Share on Google+
1 Reply


harshmaul
Expert 100+
P: 490
Hi,

I think this markup should do it.

<img src="blah.jpg" style="position:absolute; top:0px; right:0px;" width="50" height="50" alt="description" />

Happy Coding :)
Jul 30 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.