|
HTML - Background Images In Tables
I have an 8 year old website with 99.9% valid HTML4.01 transitional code. The only problem I'm having is that the attribute "BACKGROUND" in my tables is not recognized as valid. I need to use images as backgrounds in some of my tables. Is there any way I can do this with HTML, or maybe an in line style sheet? I'm not at all familiar with CSS so I'm hoping that there is another way. Thanks.
Similar TutorialsI need my background image in the main table to stretch the entire length of the viewers browser whenever the content of the page is not enough to require the use of the entire page. Using table height at 100% it will only extend as far as the farthest south piece of content on the page, which might not be the bottom of the browser window. The site is here, and i'm currently using a table height of 750px to take it off the bottom of the page. However in IE i get an unwanted scrollbar. Is there an easy workaround of do i just accept the scrollbar is going to be there? Also, if your bored can you tell me why IE wont valign the td to the top of the cell, whereas FF will, and how i might fix that pls? Thx! Hi everyone, I'm new here and a total newbie - so please bear with me! I want to create a table with 3 rows x 5 columns: Row 1: basic text Row 2: clickable image Row 3: clckable text The image in row two would be in the forum gallery, but the destination when the user clicks the image should be to the bands website. No matter what I do, i can't get a clickable image to sit into the table! If anyone could help with this simple piece of code I would really appreciate it. Thanks, Dave http://www.shiningstarwebdesign.com/pawcb/coaches.htm I used the design portion of Dreamweaver to put pictures in to the tables that say Competitor 1, 2, 3, and 4, and when opened in a browser, the pictures did not appear. I checked the HTML and couldn't find the problem. Does anybody know why these pictures are not showing up? Please take a look at the image I attached to this post. If you look closely, you can tell that the bottom half of the lightbulb, the "Imaginit" title, and the yellow bar to the left of that is all one image file. Above that is a larger image (part of which has the top half of the lightbulb) that spans the whole page. I'm sure you can tell by the break in the lightbulb and the white borders around the image where this question is going... I'm trying to get rid of those breaks. Currently, the large image on top is in its own span tag. Below that everything else is organized in a table structure. I've messed with border-collapse: collapse, tried setting the margins to negative values (of em, px, & pt), set border widths to 0. Nothing gets rid of those spaces. Setting the background color for the cells I think would work, but the problem there is that the bottom-half-lightbulb/Imaginit image's cell is set to colspan=2, rowspan=2. Is it possible to have the image just be "laid" over four individual cells? Just a thought. I'm doing this in Visual Studio 2005/ASP.NET if that helps any. Thanks for anyone's help. Hi all, I've been trying to fix this bug which won't go away. Yeah, it's basically images in tables, but before you cringe, I gotta declare that I'm using tables to display graphical data (that is, thumbnails in grids). I'm not using tables explicitly for layout. Visit the emulated-page at http://varlern.com/CrappyBug.html to see the problem. There's 4 cells. Notice that in every cell, there's some gaps at the right, top and bottom inside each cell (the left sides have no gaps). For a quick glance, below's the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.tablestyle
{
table-layout:fixed;
width:740px;
border-collapse:separate;
border-spacing:3px;
}
.tablestyle tr td
{
border:1px solid black;
width:175px;
height:175px;
}
</style>
</head>
<body>
<table class="tablestyle">
<tr>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
</tr>
</table>
</body>
</html>
I've searched the forums and tried all kinds of tricks and fixes suggested for others who've encountered this before.... I've tried using "display:block" on the <img> tag, I've set the cellspacing, cellpadding, padding, margin, hspace, vspace, cols, rows, line-height, font-size and almost every dimension related tag in CSS / HTML to 0 .......but the darn thing just REFUSE to go away! I'm really angry, I tell you. Hopefully, someone can help! The problem occurs in both IE 6.0 and FF. Thanks! Xeon I'm trying to put a background on my website Im using Wordpad I put the code in but it's coming up as a image not as a background. <body BACKGROUND="...."> Am i using the rong code? Hi, this is probably an easy question, but I'm a complete html newb so here goes: I want to put an image on my nevada refinance website of a house or something and then set it into the background so I can overlay a form for submitting your zipcode to get free mortgage quotes. I've found suggestions for setting a background image for the whole page, but I don't want to do that, just put an image on the page and set it into the background to the text box goes over the top. Can someone give me a little advice on how to do this? Hi, I'm trying to put some background images into my web page. But in this case I don't wan't them to cover all the background, nor to repeat themselves. I wan't different images as a backgrond. One would be the head banner at the top, the other one would be the image as background of the index and navigation bar at the left and the other image would be the one that serves as background to the site's content to the right. I need to know how to align this images into the exact position I need them to be, and how to upload this images. I used this code: TD width=160 background="imagename" border="0"" height=345></TD> however, it doesn't takes it as a background but as an image and it pushes the text down instead of being behind. So, please if someone could explain me about this I would be very grateful. Thanks a lot. I just wanted to know if we can put 2 background images in the same webpage ? The first 200 pixels (height) should have one image and the rest of the webpage should have another image. Is this possible in anyway ? Thnx in Advance Hey All Groovie forum you got here Ok, now to my main point... I want to be able to stretch a image (banner) fully across the screen. I dont want to adjust the height, just make it run from one to side to the other. Also how do I stretch the background image to fullscreen without css? Cheers Hi, Please help me. I have issue with the background images, when the width of the page/table increases background images are not expending /auto resizing dependent on the column/td width. Please let me know how to solve this issue. Please find code below. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <tr> <td width="1%" height=60px; background="/images/tabs.1.1.gif" style="background-repeat:no-repeat;" > test1 </td> <td width="25%" height=60px; background="/images/tabs.2.gif" style="background-repeat:no-repeat;"> test2 </td> <td width="25%" height=60px; background="/images/tabs.3.gif" style="background-repeat:no-repeat;"> test3 </td> <td width="25%" height=60px; background="/images/tabs.4.gif" style="background-repeat:no-repeat;"> test4 </td> <td width="23%" height=60px; background="/images/tabs.5.gif" style="background-repeat:no-repeat;"> test5 </td> <td width="1%" height=60px; background="/images/tabs.6.gif" style="background-repeat:no-repeat;"> test6 </td> </tr> </TABLE> </BODY> </HTML> Thanks, Raj Hey everyone, im new to this site and am hoping that someone on here can help me with this small but annoying problem I have been having. I am designing my first java script site for a friend, and am really happy with the design. However when the site is viewed in Internet Explorer the background image for the header lock onto the page instead of aligning to middle. See it for yourself here. I dont want to have to redesign the layout, but im not happy with leaving that problem as it looks really unprofessional for a business site. I am relatively new to this, but am a quick learner, just hoping someone can help push me in the right direction. Thanks for any help you can offer. Josh I am designing a website for an author and generally I only do ColdFusion developing so I am a bit weak nowadays on HTML and CSS, but I was trying to figure out a way to resize a background image without editing. Basically, I am making a table and I want the image to take up 100% of the background of said table. Is there some CSS style code that I could put in to do that? Thank you very much for your help. It is much appreciated. I have a centered background image, with a navigation div over the image. Now, I want to put my body div under the picture, CENTERED, and the only way I know how is to use <br /> This is my problem. When I put <br />'s, it looks good in one browser, but terrible in another. Is there some way, hopefully in CSS to center AND absolutely position my div? Hi... I have the following table: HTML Code: <table width="180" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="#"><img src="http://www.radioimaging101.com/images/a65.jpg" width="180" height="37" border="0" /></a></td> </tr> <tr> <td> <img src="http://www.radioimaging101.com/images/spacer.gif" width="180" height="10" /></td> </tr> <tr> <td> <a href="#"><img src="http://www.radioimaging101.com/images/a72.jpg" width="180" height="37" border="0" /></a></td> </tr> <tr> <td> <img src="http://www.radioimaging101.com/images/spacer.gif" width="180" height="10" /></td> </tr> <tr> <td> <a href="#"><img src="http://www.radioimaging101.com/images/a76.jpg" width="180" height="37" border="0" /></a></td> </tr> <tr> <td> <img src="http://www.radioimaging101.com/images/spacer.gif" width="180" height="10" /></td> </tr> <tr> <td> <a href="#"><img src="http://www.radioimaging101.com/images/a82.jpg" width="180" height="37" border="0" /></a></td> </tr> </table> What I want to do is make those images (a65.jpg) part of the background, so that I can place objects on top and cover it up when needed, but have it show through when not covered by another object. I know this is probably remarkably simple, but I've just never had to do it before and haven't had luck with my trial and error approach. Any help is appreciated. This code is on the page at http://www.radioimaging101.com/index.php Thanks! I'm trying to do a profile layout design using multiple background images in the body. body background-image: url('http://www.geocities.com/korknup/HATEBOOK/LOGO.jpg') is it even possible to embed more than one image in the body, like an image gallery? Hi all! I'm currently doing a site, where i all the content is in a roundcornered box, in the middle. There is an black fading outer glow on the box. Then here is the problem: I want the background to be a striped pattern. But how do i make it striped under the fading? Thanks in advance! Hello! I'm having this problem and am not sure if it can be solved: I have table with text. The text length varies as it is user-inputed. I want to have, as background, 2 graphics that encapsulate it on the vertical axis. They look like "[" and "]" but inverted. What I am aiming to do is have the text start with the "inverted-[", continue to stretch and then end with "inverted-]". How can it be done, please? There is only one TD and both graphics willl get covered with text, so I can't have one as background for the text TD and the last one just at the end without any text on it... |
|||||||