0

Dear Experts

I have following codes

<html>
<head><h1>Image and data in table column</h1></head>

<style type="text/css">

.bg	{widht:100%;height:100%}
.al	{text-align:center;}


</style>

<body>

<table width="50%" height="100px" border="1" cellpadding='0' cellspacing="0">
	<tr>
		<td widht="25%" background="DREAM.JPG" tabindex="2" title="The Code Project"><h3 class="al">Hello</h3></td>		

		<td widht="25%" bgcolor=pink><h3>world</h3></td>
		
	</tr>
</table>

</body>
</html>

In column I want to stretch the image that is in attached file

Please help

Attachments DREAM3.JPG 20.19 KB
4
Contributors
7
Replies
8
Views
5 Years
Discussion Span
Last Post by Dandello
0

you can't do it on a table but you can do it using div's, image and absolute positions on the divs.. google it and you will find how ;)

0

These codes work fine for me

<html>
<head><h1>Image and data in table column</h1></head>
 
<style type="text/css"> 
 
.bg	{
	position:absolute;
	z-index:-1;
	width:98%;
	height:91px;
	top:70px;
	left: 15px;
}
 
.al	{text-align:center;}
 
 
</style>
 
<body>
 
<table width="50%" height="100px" border="1" cellpadding='0' cellspacing="0">
	<tr>
		<td width="25%"><img class="bg" src="DREAM.JPG">
	  <h3 class="al">Hello</h3></td>		
 
		<td width="25%" bgcolor=pink><h3>world</h3></td>
		
	</tr>
</table>
 
</body>
</html>

Let me know about my code method.

0

SOrry but I think you need to learn some more on HTML before you do anything else and then CSS.

Firstly, the <head> tag in HTML is for head information like the title of your page, meta tags and links to external style sheets, not somewhere to put a <H1> heading - that goes in the body of your HTML.

Secondly, if you are using CSS to style your page (as you should) then there is no need whatsoever to use tables for layout and mixing the two makes even less sense, plus don't set inline stlyes as you have done for the td bgcolor=pink.

Move your CSS to an external stylesheet and then apply your background image to the body tag or a div that is set for the main container of your content (if the background image changes on different pages for example).

Then use your divs/classes to set the layout and content (based on your code, set the background image in the #container div in your CSS and use to classes to format your words in your h3 heading):

<body>
  <h1>Image and data in table column</h1>
  <div id="container">
    <h3><span class="a1">Hello</span>
    <span class="world">World</span>
    </h3>
  </div>
</body>

Much neater and semantic.
Votes + Comments
The problem here is bad coding, I fully agree.
inappropriate comment that don't help in any way to resolve the problem
-1

Dear Sir,

If you want to teach me something then tell me about positions.

0

Rule 1- make sure your code is valid (http://validator.w3.org/)
When asking for advice to correct a detail, if the basic code is broken, nothing we advise will make that detail right until the overall html is right. See Purplepixie's comment above.

Edited by Dandello: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.