|
HTML - Table Inserting Image
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>
Similar TutorialsI have an image I want to insert into a simple table Cell. My code is as follows: <table> <tr><td align ="left"> img src = "/modules/Quotes/cqilogo.gif"></td></tr> </table> When I access the page I get: img src = "/modules/Quotes/cqilogo.gif"> I know the image is in the right place and it will work if I set it inside a paragraph. What have I got wrong?? Thanks alot Hello we i insert pic only show in fix area but i wanna show it in my my complete page (not backgroud) pic. This is my code <img src="abc.gif" alt="abc" /> <img src="abc.jpg" alt="abc rock" width="304" height="228" /> i wanna show my pic only as header and in whole page you can see this in forum header. and see link for example http://uploadpic.org/v.php?img=JvzHJN0gmm please help me I'm trying to insert a background image from my CSS into a table and not having any luck getting the image to appear. This is what the CSS looks like: #trekBike { background-image: url(assets/photos/bluerackbike.jpg); height: 188px; width: 250px; z-index: inherit; position: relative; top: 10px; left: 10px; } and in my table I try to call the style like this: <table width="791" border="0" cellspacing="1" cellpadding="2"> <tr> <td><div id="trekBike"></td> How should I be referencing the CSS? I'm new to HTML and I am just playing around with a few things to work on learning it. I am just using notepad and trying to insert an image to my web page. I have the image saved in the same folder as my notepad.html. I've tried both these codes but neither have seemed to work <img src="/image.jpeg" alt="image" /> and <img src="/folder/image.jpeg" alt="image" /> Could someone help me figure out exactly what I am doing wrong. Also if you know of any sites that are good at explaining the very basics would be nice too. Thank you. Hello, I am wanting to insert an image on a mail that doesnt have to be downloaded to be seen, with my corporate identity, and make this image be a link to my web thankyou I have a problem that is driving me crazy. I am not an expert by any means with html, but I can usually figure these things out, and this one has stumped me. For my site, I have an .png image that is an outline for what I want my advertisement to be located within. Below is the banner: location: Code: http://www.topsocomsites.com/skins/darktheme/ad-outline.png How do I use HTML to insert my javascript ad code that displays my banners to be located in the empty space of the above outline? Thanks in advance for your help! Here 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 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 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 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 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 <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 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 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? 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. 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> 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. 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. |
|||||||