|
HTML - Image Behind Table
i have an image that is a background tspo a table. if i try to add another table row, the table expands, and a white space is added. In dreamweaver it seems that there is enough space, but in other browsers, it shows the expanded table. is there a code that makes table absolute or should i strictly define the height and width of table to expand so that it does not expand to show extra white space
Similar TutorialsHere is an image depicting the trouble I'm having: I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes. It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly. Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image. Then I'd do this for every one of my images, and a collage would be formed. The problem is, the table makes large white spaces wherever the image sizes don't match! How do I get rid of these spaces, or is there an entirely different code/approach I should be using? Thanks! Here is my current code: HTML Code:
<html>
<head>
<style type="text/css">
table.nospace {
padding: 0; margin: 0;
border-collapse: collapse;
}
table.nospace tr {
padding: 0; margin: 0;
}
table.nospace td {
padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>
<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
</TR>
</TABLE>
</body>
</html>
I made my layout in photoshop, then divided it into pieces as I always do in order to insert the individual pieces into a table. My table has no borders, no cellspacing, and no cellpadding. Everything is aligned perfectly, but when I changed one of the images to an image map, the alignment with that particular image was off. Is there any reason why this may be happening? I am having some trouble and just can't figure it out. Please look at http://katopia.com/clientfiles/vineandsun/ and see the gaps under the two images of the woman on the right (you can see the gaps best in IE). What is going on? I've told the table cell to be the exact same size as the image. I'm using CSS, too, but I just am not seeing where I went wrong. Thanks for the help! I have just started using strict XHTML instead of HTML (because it makes my drop-down menus work in all browsers). But now all table rows that contain images using image tags are too high. Look here, where I have used background colors to show row heights: http://colatinaexit.com/index1.shtml This is a stripped-down page that I am using to try to figure this out. But I'm missing something (I just don't know what). Look at the rows under the main image. The first row has no image tag and a partial green background color. It uses a CSS class and a background image for the corner. The second row is identical. Notice that the heights are correct and they are aligned right next to each other vertically. Now look at the 3rd row. It contains several image tags and the partial blue background color shows that it is too high. It is defined as 10 high, all the images are defined as 10 high (and, in fact, they ARE 10 pixels high). Look at the 4th row (partial green background). No image tags, no CSS. and the height is right. The 5th row? Partial blue background color. It has an image tag, plus a CSS class that defines its height as 10px, and no background image. Too high overall. I've tried all the combinations I can think of. And every combination that includes an image tag is too high. Why? What am I missing? BTW, I know that I should be using only CSS and div tags, but I have an older version of Dreamweaver and it doesn't do WYSIWYG for CSS very well. So it would be really helpful for me to understand why table rows with images are overly high. Thanks, Paul I created a table and on one side is an image and the other side words. I would like to center the image vertically and horizontally within the <td> tag. Right now the image is on the top of the area it's in This code I'm using now is.... <img src="http://www.elevatingyourbusiness.com/images/6 Step Process201x178.jpg" width="201" height="178" alt="6 Step Process Photo" /> For a better picture of how "lopsided" the picture/words look you can go to www.ElevatingYourBusiness.com It's the graphic under the title starting "World-Class Management " I'm open to any other suggestions you might have that will make this particular area look eye pleasing. Thanks in advance. I'm actually having the same problem I've seen wandering about, and I've already considered all the given advice and nothing seems to be working. The background image is split into a 3x3 table for easier loading, and now I'm getting a small gap between the rows themselves. This is the page: http://akito.clavis-sama.com/ I don't have any <p> tags and my margins are all set to 0 already. Yet I have those lines in the middle of my table for the header image. Any clue as to what the problem could be? <table> <tr align="center"> <td align="justify" <script src="http://tag.contextweb.com/TagPublish/getjs.aspx?action=VIEWAD&cwrun=200&cwadformat=300X250&cwpid=510467&cwwidth=300&cwheight=250&cwpnet=1 &cwtagid=41771"></script> </td></tr></table> this can be seen on my site englishtrunkshowco ---click any category on home page, then scroll down and you will see the misalignment of the ad Hello I'm building a website for someone and because I built the website in a way that if the browser window width becomes smaller, the width of the content on the page becomes smaller as well, so the page's height increases. Normally, using height="100%" inside a image tag would work to get the image height to be the same as the height of the page, but because of some scripts I've had to use, that only seems to set the height of the image to its original size. Also, I can't use the CSS equivalent either, that still doesn't do the trick. So I was wondering if there is an alternative to the height property that I could use. By the way, the image is inside a table if that helps at all. Thanks Drider I'm new to the forum and hope i'm asking in the right place. I have modified some code to break one image into seperate images and display them at different places on a page, but i would like to use one of the images as a background to a table, below is the code (excluding javascript) to seperate one item that i've called Logo and show it on it's own; <body onload="crop('images/New_Logo.png', 'Logo', 0, 0, 960, 99); > <div id="Logo" style="width:960px; height:99px; margin-bottom:20px;"></div> I've tried different variations to show as background but it wouln't work, i was thinking along the lines of <table background="Logo"> .... </table> Hello fellow helper By now you probably know my topics by name and find them somewhat annoying due to their difficult nature.. (ive gotten few to no replies on them..) Anyways, im back.. with.... a simple question! Its about tables.. i havent studied them yet. Just getting into whole table thing. I want to insert an image that will serve as a LEFT outer border that will connect the header image and the image below. To get the point check this out: http://.com/FINAL.html It is a 38 x 24 .png.. and i was thinking about stretching it to fit. Dont know if thats the solution.. but hey, thats why im posting. Please tell me what codes to insert and where. The image i was talking about is located he http://.com/blokjee.png Appreciate any help! Dont be shy.. please. Thanks. HTML Code: <div>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</div>
<div align="center"> </div>
<table style="border-collapse: collapse; width: 600px;" align="center" border="2" bordercolor="#410d3e" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left">
<table style="width: 90%;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<tbody>
<tr>
<td id="YMLPZCTD" align="center" valign="top">
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" width="100%">
<table style="width: 100%;" class="YMLPBT" id="YMLPBT" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<div align="right"><img src="http://www..com/top.png" border="0" height="110" width="711" /></div>
<td id="YMLPBTTD" align="left" valign="top">
<div><b> <font color="#410d3e" face="verdana,geneva" size="3"> <br /> Nieuwsbrief februari 2010</font></b></div>
<table style="width:100%;" class="YMLPS3" id="YMLPS3" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width: 100%;" align="left" valign="top">
<tbody>
<tr>
<td align="left">
<table style="width: 100%;" border="0" cellpadding="45" cellspacing="0">
<tbody>
<tr>
<td style="width: 100%;" align="left" valign="top">
<div><p> <font face="verdana,geneva" size="2">Beste Lezer van mijn eerste nieuwsbrief, <br>
<br>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
<font color="#410d3e">
<br>
<br>
<br>
<div align="center"><img src="http://www..com/koord.jpg" border="0" height="189" width="170"/>
<br>
<a href="http://.com/basis.html"target=”_blank” ><b>Asitisinheaven.com</b></a></font></p></div>
Ik nodig je van harte uit om <a href="http://www..com"target=”_blank” >mijn website</a> te bezoeken.<br>
Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
<a href="[FORWARDTOFRIEND]"target=”_blank” >Stuur deze email door naar een vriend of vriendin.</a></p>
</p><p>
Mocht je geen belangstelling hebben om op de hoogte te blijven van<br>
mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</div>
<div><font face="verdana,geneva" size="2"><br /> Met vriendelijke groet,<br /> <br>
Jan M.M. Boesten<br>
<a id="link" href="http://www..nl"target=”_blank” >www..nl</a><br></p>
</font>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</table>
<div><img src="onder.png"></div>
hi all, I'm trying to just put an image in a table but for the life of me can't see where i've gone wrong. here is the code: <table id=table1 align=center background=weddingband/weddingcard.gif></table> The image is in the corresponding folder. this is the css: #table1 { border: )0px solid blue;} #table1 td{ border: 0px ;} help appreciated, thanks, r Browsing the internet for a gift I saw something I liked and want to incirporate somethign similar. This webpage has a table nd the image overlapping the top row... any ideas how I would do this? I believe it will be a <div> tag issue but unsure. The table I have is this: Quote: <table border="1" width="810" id="table1" style="border-collapse: collapse" bordercolor="#252525"> <tr> <td bgcolor="#252525" height="34"><b> <font face="Arial Narrow" style="font-size: 13pt" color="#FFFFFF"> Title</font></b></td> </tr> <tr> <td> My text</td> </tr> </table> The image is a PNG as the background is transparent. I want it to run against the right hand side and overlap into the top row also. Hi, I'm trying to make a border with a 50x50px image repeated around it this is the code I have so far; <html> <head> <title>div test</title> <style type="text/css"> #outer { background-image: url(http://i890.photobucket.com/albums/a...oxBorder.jpg); background-repeat: repeat; background-color: #cccccc; width:100%; padding: 3em; } #inner { background-color:#ffffff; padding: 2em; } p {margin: 0px;} </style> </head> <body> <div id="outer"> <div id="inner"> <p> Blah blah blah </p> </div> </div> </body> </html> I want the image around the border to be showing the same as it does at the top, at the bottom. And i want the size of the table to be increased when new text is added into it each time. Can somebody please help me? Thankkksss. Hi everyone, My website, currently at http://www.mlcprop.com/index2.html , is having issues. They a 1.) There is lots of extra space at the bottom when viewed in IE. 2.) The drop-down menu (click "apartments") doesn't display properly in IE; there is supposed to be a green background. It displays fine in Safari/Firefox/Opera however. 3.) I'm having trouble getting the bottom section to work properly. There's supposed to be a green gradient background for the content area that fades out to the page's brown background color. I did this by creating a central table cell with a tiling background image of the green gradient that's very tall and narrow. However, some pages are VERY long... such as thisone. How do I account for this? I tried matching the cell's background color to the image but it doesn't seem to match, or should I just make my tiling green background super long to account for this? I didn't want the file size to be huge. The lower left table cell ("footl") doesn't seem to display properly either. There's supposed to be an image there, a subtle shadow effect. It displays fine on the right ("footr"). Can anyone help with any of these? Thanks so much, Tatiana Im a extreme newbie to html. So be kind. Here is what I want to do. I have a table with 6 icons in 6 cells in column 1. In column 2 I have merged all 6 cells to form 1 cell. I want the user to be able to change the text in the column 2 merged cells depending on which icon they roll over in column 1. Where do I start?? Thanks, Frank M Comments on this post tr84 agrees: It's been a very long time since I've had to play around with HTML, and apparently it's true what they say, if you don't use it, you lose it... Anyway, I'm here with what will undoubtedly seem like a foolish question to the more experienced coders: I designed and sliced a simple little template in photoshop and was attempting to get all the sliced images formed together in a nice little table so I could put together a page... Only problem is: After I switch from a 7x2 table to a 3x2 table, I get this odd repeating line to the right... The code I'm using for this is as follows: HTML Code: <html> <title>SkateLand of Milton - Home Page</title> <body ALIGN="MIDDLE" bgcolor="#3e7600"> <table cellpadding="0" cellspacing="0"> <TR VALIGN="MIDDLE"> <TD WIDTH="47" HEIGHT="339" style="width: 47px;background-image:url(images/slice_01.png);"/></TD> <TD WIDTH="63" HEIGHT="339" style="width: 63px;background-image:url(images/slice_02.png);"/></TD> <TD WIDTH="81" HEIGHT="339" style="width: 81px;background-image:url(images/slice_03.png);"/></TD> <TD WIDTH="255" HEIGHT="339" style="width: 255px;background-image:url(images/slice_04.png);"/></TD> <TD WIDTH="72" HEIGHT="339" style="width: 72px;background-image:url(images/slice_05.png);"/></TD> <TD WIDTH="69" HEIGHT="339" style="width: 69px;background-image:url(images/slice_06.png);"/></TD> <TD WIDTH="63" HEIGHT="339" style="width: 63px;background-image:url(images/slice_07.png);"/></TD> </TR> <TR VALIGN="MIDDLE"> <TD WIDTH="47" HEIGHT="63" style="width: 47px;background-image:url(images/slice_08.png);"/></TD> <TD WIDTH="63" HEIGHT="63" style="width: 63px;background-image:url(images/slice_09.png);"/></TD> <TD WIDTH="81" HEIGHT="63" style="width: 81px;background-image:url(images/slice_10.png);"/></TD> <TD WIDTH="255" HEIGHT="63" style="width: 255px;background-image:url(images/slice_11.png);"/></TD> <TD WIDTH="72" HEIGHT="63" style="width: 72px;background-image:url(images/slice_12.png);"/></TD> <TD WIDTH="69" HEIGHT="63" style="width: 69px;background-image:url(images/slice_13.png);"/></TD> <TD WIDTH="63" HEIGHT="63" style="width: 63px;background-image:url(images/slice_14.png);"/></TD> </TR> </table> <table cellpadding="0" cellspacing="0"> <TR VALIGN="MIDDLE"> <TD WIDTH="47" HEIGHT="542" style="width: 47px;background-image:url(images/slice_15.png);"/></TD> <TD WIDTH="540" HEIGHT="542" style="width: 540px;background-image:url(images/slice_16.png);"/></TD> <TD WIDTH="81" HEIGHT="542" style="width: 81px;background-image:url(images/slice_17.png);"/></TD> </TR> <TR VALIGN="MIDDLE"> <TD WIDTH="47" HEIGHT="56" style="width: 47px;background-image:url(images/slice_18.png);"/></TD> <TD WIDTH="540" HEIGHT="56" style="width: 540px;background-image:url(images/slice_19.png);"/></TD> <TD WIDTH="81" HEIGHT="56" style="width: 81px;background-image:url(images/slice_20.png);"/></TD> </TR> </table> </body> </html> I'm kind of left scratching my head on this one... I don't really know how to solve this. I need to add a image inside the table in html Page., pls help me how to write a code for inserting image inside table? I have a logo image and a table (being used as a nav.) I want the table to be centered vertically on the right side of the logo. Here is what I have so far: css: HTML Code: body .logo {position:absolute;
}
table {width: 65%;
margin: 20px auto 0px auto;
border-bottom: 3px solid #3399cc;
}
html: HTML Code: <div> <div id="Drafting & Design Logo" class="logo"> <img src="menu/Logo.png" height="155" width="139"> </div> <div> <table> <tr> <td width=18.3%><a href="#" id="drafting" target="_new" /></td> <td width=25%><a href="#" id="programming" target="_new" /></td> <td width=18.3%><a href="#" id="resume" target="_new" /></td> <td width=18.3%><a href="#" id="contact" target="_new" /></td> </tr> </table> </div> </div> I want the entire thing centered in 65% of the browser window. Right now the image off to the left and the table is centered. When I change the margins on the image it doesn't do what I would like it to. Also, the reason I don't add it to the table is because I want to have a line under the nav bar stopping at the logo. Any help would be greatly appreciated. Hi everyone. I am having a problem with a image within a table. The image within the table displays fine in FIREFOX, where in IE, the image does not appear. There is no red x, just the image does not appear. Any ideas? i tried searching the forums for this problem, no luck on my end. Unless i suck at searching Quote: <table width="1000" height="30" border="1"> <tr background="RightSide.jpg"> <th width="200" height="25" scope="row"><span class="style11">Link 1 </span></th> <td width="200" height="25"><div align="center" class="style11"><strong>Link 2</strong> </div></td> <td width="200"><div align="center" class="style11"><strong>Link 3 </strong></div></td> <td width="200"><div align="center" class="style11"><strong>Link 4 </strong></div></td> <td width="200"><div align="center" class="style11"><strong>Link 5 </strong></div></td> </tr> </table> This is the table and image Hi,, in the attached file .. i was tryin to set image ->contact_13.jpg as the background image for that cell.. as <TD COLSPAN=6 background="images/contact_13.jpg"></TD> but its not setting it correctly .. the path and name of image is correct .. as far as i see it .. <td background='xyz.jpg'></td> works .. is it because of the colspan thing .. |
|||||||