|
HTML - Display Images And Text In Html Table
I have list of files in a folder which are to be displayed in html table.
Each file should be shown as follows ------------ | image1| | | ------------ <image 1 file name> ------------ | image2| | | ------------ < image 2 file name> its image and name of the file below the image. I am new to this html and needs help! Thank you, Krishna. Similar TutorialsI just started learning HTML, and made a file just to try out the various things I have learned. The below is said file. When I attempt to view it my picture does not appear, and I don't understand why. Help is much appreciated. <html> <head> <title>Test page</title> </head> <body> <center><h1>Yay for me</h1></center> <p>This is cool</p> <p>Bla bla bak</p> <ul> <li>Yay</li> <li>for</li> <li>me</li> </ul> <br> <img src=“Caster.jpg” /> </body> </html> how do I display html code as text? The page is an html document, I want users to be able to highlight and copy a piece of html code. I have tried putting it in a text box in a form, but I can't seem to do it without the code being read as REAL html. Thanks in advance Hugeknot Hello, My name is Eli and I cannot figure out why in the 2nd and 3rd rows of this HTML table there are empty spaces between the columns, making these rows go over the table width limitation of 770. I would really appreciate some help, as it is getting very frustrating and I am sure there is a very simple solution that I am missing. I've searched threads but could not find the right answer. Here is the table HTML code: <table border="0" align="left" cellspacing="0" cellpadding="0" width="770"> <tr> <td width="770" height="1" colspan="2" bgcolor="#FFFFFF"><img src="http://yst.sale-la-vie.com/images/spacer.gif" alt="spacer" width="4" height="1" border="0" align="middle" /></td> </tr> <tr> <td colspan="2" align="left" valign="top" bgcolor="0"><img src="http://yst.sale-la-vie.com/images/main-mid.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/right-mid.jpg" alt="" border="0" /></a></td> </tr> <tr> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-necklaces-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-earringss-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-goodlook-img.jpg" alt="" border="0" /></a></td> </tr> <tr> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-bracelets-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-summer-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-newlook-img.jpg" alt="" border="0" /></a></td> </tr> </table> Thanks and best wishes, Eli All right, I've stumbled upon a bit on a design block. I'm not sure what I want to do to display images. I don't know if I want to do a gallery...or just have thumbnails and then you click on them to view a larger image...I just don't know what I want to do. So, I was wondering if someone out there could help me and decide what would be best to use with my layout - which here is what it looks like: http://i46.tinypic.com/jj74hw.png - here is the homepage thus far: http://thexoticzoo.webs.com/home.html Any suggestions and help on coding? Hi, I have this msql database containing images, when user enter a query, the program needs to display images back, what is the usual practice for this kind of task? copy all those images to a folder and refer to them with img tag? delete all of them later? care to share some of your tips? Thanks, A.C. In the following code, the image display is inconcsistent: - Firefox: works in all cases - IE7 over Internet: works - IE7 locally: image does not display; I get a placeholder. - IE7 locally on my other computer: works. By "locally", I mean that the HTML file and the image are on my local hard disk; by "Internet", I mean that the HTML file and the image are on the server at my web site service. The image is in the same directory as the HTML file in all cases. Here's the code: <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html> <head> <title>My Page</title> </head> <body> <p>Welcome to My Page</p> <img height="231" width="346" border="0" src="roadtrip003.gif"> </body> </html> I suspect an IE7 setting on the offending computer, but I've looked around quite a bit and it ain't obvious to me. Any thoughts? I am making a page with a load of thumbnails which are links to other pages. The code is essentially... Code: <a href="#">
<img src="thumbnail" />
<span>
<img src="larger image with some nice css styling" />
</span>
</a>
a span has display none and and a:hover span has display block. What I want to know is does the larger image load with the whole page or does it only load when you hover on the link. I.E. does having loads of hidden images effect page load time? Thanks Hi, I hope I'm posting in the right area as this is my first thread. The problem I'm facing is I have 7 links in a row | Link 1 | Link 2 | Link 3 | Link 4 | Link 5 | Link 6 | Link 7 | and below those links I have nothing. What I want is for Text to appear on rollover on Link 1 and stay there until Link 2 or another link is hovered over. Example: Mouse hovers on Link 1 - called Free Home Survey Text appears below row of links about Free Home Surveys that the company does Mouse hovers on Link 3 - called Personalisation Text appears below the row of links about Personalisation etc Any help would be greatly appreciated. Thanks in advance Hi, this is appleguy.......6142! I was wondering how to make a text box display something somewhere else for example (This does not work)---- ------------------------------------------------------------------ [page1.html] (Pretend this is a text box)>>> [Text Text Text...] [page2.html] -This is the text displayed in the text box->>>Text Text Text... HOW DO I DO THAT PLEASE HELP!! Hi all, I'm helping a friend out with his website but have come across a bit of an issue which I think may be related to the web server itself although I'm sure there's a way round it? http://www.pixelrite.co.uk/completed/ Basically my friend wants to be able to upload images that he has worked on into this folder so people can then browse to the above url and simply download the images they want. I used to have a similar thing on an old site of my own which was just a load of files I had uploaded into a folder, anyone could then download them from there. I suspect it's some sort of server side security implemented by the host... is there some way to insert a very basic index.html page into the folder that somehow would show any files that were currently in that folder allowing someone to right click and download them? Thanks in advance! Hello, I have designed sites in the past but am in need of some assistance. I am designing a website for an artist who wants to be able to offer his clients fine art prints for sale. He needs to be able prints with several different product options; i.e. canvas print with 1" stretch, 2" stretch and framed prints. I want to be able to offer check boxes (or equivalent) that will display an image of the different product options available. If the 1" stretch check box is checked I need an image of a canvas on a 1" gallery wrap frame to be displayed. If they click on the "frame" check box, I need an image of a framed painting to be displayed. What is the best method to use to accomplish this? I've researched and experimented but am at a bit of a loss. Any help will be greatly appreciated. Thank you in advance!! -John http://www.sedition-gaming.com/test/ As you can see at the top, the images themselves aren't cooperating. How do I put them in their place? Thanks in advance. Hi, I'm trying to make a table to hold the "news" section for my website, I want to have the table have smooth edges, and I was thinking of having a "side" "corner" etc. and run them in smaller tables aroudn the outline, and have them repeat if new content is added, when I tried this it ended up messy, any ideas? thanks! - much like http://www.ask.com/?&o=101881&l=dis&&qsrc=119 Hey guys I got help on a project I'm doing from Eri. Seems he used this tag in the code which is posted below. Anyways I did some research apparently Safari doesn't like this tag. His solution works great in IE6, IE7, and FF2/3 but in safari the layout dies. Has anyone messed with this type of solution. Check this out to see what I'm mean if you want a visual representation: http://browsershots.org/http://along...index_new.html Eric HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Personal Shopping and Concierge Services</title> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> <meta name="keywords" content="INSERT KEYWORDS HERE" /> <meta name="description" content="INSERT DESCRIPTION HERE" /> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> <div id="wrap"> <div id="whitebox"> <div id="header"> <div id="logo"> </div><!-- end div logo --> <div id="pagetitle"> <h1>along came mary</h1> <h2>personal shopping and concierge services<br /> the metro atlanta area</h2> </div><!-- end div pagetitle --> <div class="clear"> </div> </div><!-- end div header --> <div id="main"> <div id="sidebar"> <div id="links"> <ul> <li><a href="/">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Services</a></li> <li><a href="#">Customer Feedback</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Links</a></li> </ul> </div><!-- end div links --> <div class="clear"> </div> <div id="icea" align="center"> <img src="assnbanner2.jpg" alt=" " /> <p><a href="#">Proud Member of the International Concierge & Errand Association</a></p> </div><!-- end div icea --> </div><!-- end div sidebar --> <div id="content"> <h1>Take a deep breath. Call Mary. Relax. It's handled.</h1> <p> Whether it is shopping, running errands, organizing your home or office, caring for your pets and home while you are away or just waiting for a service contractor to arrive, Along Came Mary is ready when you are. It's like having a personal assistant for you and your home! </p> <p> Along Came Mary specializes in personal shopping and concierge services for individuals and families in the metro Atlanta area. Based in Vinings, an Atlanta, Georgia suburb, Along Came Mary prides itself on providing reliable, top-notch customer service to its clients. Our primary goal is to help busy people create a more balanced and therefore enjoyable lifestyle. When life becomes hectic, being able to make that call for help relieves stress and calms nerves! </p> <p> We know your time is valuable and thank you for visiting our site to learn more about how Along Came Mary can help you create a more balanced, productive, and manageable life. <a href="#">Contact us</a> so that we can show you how good life can truly be! </p> <p> Mary Snelson<br /> <a href="#">mary@marylovesshopping.com</a> </p> <p> 404.422.7564 </p> </div><!-- end div content --> <div class="clear"> </div> </div><!-- end div main --> </div><!-- end div whitebox --> <div id="footer"> <p> <a href="/">Home</a> | <a href="#">About Us</a> | <a href="#">Our Services</a> | <a href="#">Customer</a> | <a href="#">Contact Us</a> | <a href="#">Links</a> </p> </div><!-- end div footer --> </div><!-- end div wrap --> </body> </html> CSS Code: * {
margin: 0px;
padding: 0px;
border: 0px none transparent;
border-spacing: 0px;
}
body {
background-color: #fcc1df;
}
#wrap {
width: 100%;
height: 100%;
border: 0px none transparent;
margin-bottom: 15px;
}
#whitebox {
width: 700px;
height: auto;
background-color: #ffffff;
border: 2px solid #000000;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 700px;
background-color: #ffffff;
border-bottom: 2px solid #e5e5e5;
height: 160px;
display: table;
}
#logo {
width: 135px;
height: 156px;
background-image: url('ACM-Logo.png');
float: left;
display: table-cell;
}
#pagetitle {
width: 561px;
height: 160px;
display: table-cell;
vertical-align: middle;
position: relative;
margin-left: 135px;
}
#pagetitle h1 {
font-size: 250%;
font-weight: bold;
margin-left: 12px;
margin-bottom: 0px;
margin-top: 30px;
}
#pagetitle h2 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 80%;
margin-left: 12px;
font-weight: normal;
margin-top:0px;
}
#main {
width: 696px;
height: 100%;
}
#sidebar {
width: 140px;
background-color: #ffffff;
position: relative;
float: left;
height: 100%;
display: table-cell;
}
#links {
margin-bottom: 10px;
float: left;
height: auto;
margin-left: 10px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 80%;
line-height: 125%;
}
#sidebar ul {
list-style-type: none;
margin-right: 5px;
}
#sidebar a:link {
color: #000000;
}
#sidebar a:visited {
color: #000000;
}
#sidebar a:hover {
color: #f1037f;
}
#icea {
width: 140px;
height: 100%;
display: table-cell;
vertical-align: bottom;
padding-top: 100px;
}
#icea a:link {
color: #0000ff;
text-decoration: none;
}
#icea a:visited {
color: #0000ff;
text-decoration: none;
}
#icea a:hover {
color: #f1037f;
text-decoration: underline;
}
#icea img {
width: 132px;
height: 96px;
border: 0px none transparent;
}
#icea p {
font-family: Arial, verdana, Helvetica, sans-serif;
font-size: 70%;
line-height: 175%;
text-align: center;
margin-left: 4px;
margin-right: 4px;
}
#content {
width: 442px;
background-color: #ffffff;
padding-left: 12px;
height: 100%;
position: relative;
margin-left: 142px;
border-left: 2px solid #e5e5e5;
display: table-cell;
}
#content h1 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
margin-top: 0px;
margin-bottom: 10px;
}
#content p {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 90%;
}
#content a:visited {
color: #0000ff;
text-decoration: none;
}
#content a:hover {
color: #f1037f;
text-decoration: underline;
}
#content img {
width: 132px;
height: 96px;
border: 0px none transparent;
}
#content p {
font-family: Arial, verdana, Helvetica, sans-serif;
font-size: 85%;
padding-bottom: 18px;
line-height: 125%;
}
#footer {
width: 696px;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
}
#footer p
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 90%;
text-align: center;
}
#footer a:link {
color: #808080;
text-decoration: none;
border-bottom: thin dotted #808080;
}
#footer a:visited {
color: #808080;
text-decoration: none;
border-bottom: thin dotted #808080;
}
#footer a:hover {
color: #808080;
text-decoration: none;
border-bottom: thin dotted #f1037f;
}
div.clear {
clear: both;
font-size: 0%;
line-height: 0%;
width: 100%;
}
Hi, I cannot get a table to display in a div on my site. If I change <table> to <div>, it works, but it is very tabular data and I need table styling. Code: <div id="stats_panel" style="display:none;"> <!--display is turned on by js when a button on page is clicked -->
<a href="javascript:GoBack()"><img src="files/images/misc-images/close-button.png" alt="" style="float:left; position:relative; height:40px; width:40px; z-index:1;" /></a>
<div id="stats_inside">
<div style="border:0; padding:2; width:100%;">
<div style="border-collapse: collapse; margin: 3px auto; border: 1px solid blue;">
<div><div>table</div></div></div></div></div>
Above works, below will not work Code: <div id="stats_panel" style="display:none;"> <!--display is turned on by js when a button on page is clicked -->
<a href="javascript:GoBack()"><img src="files/images/misc-images/close-button.png" alt="" style="float:left; position:relative; height:40px; width:40px; z-index:1;" /></a>
<div id="stats_inside">
<table><td>hello</td></table>
</div>
Further, anything after the <table> declaration disappears. It will not show up. Site is www.uhstitans.com/schedule2.php Click one of the Stats buttons to see the pop-up. FURTHER INFO - EDIT I just noticed that by adding <table>, the content appears at the bottom of the page, instead of being hidden (display:none in the stats_panel div. also, the info trailing it drops to the bottom of the page. In a perfect world, it would all wait until the js is activated and then appear in the center of the page. THis is the result I get when I do not include <table> ad include <div>. Thanks in advance, Todd I have several websites that I maintain and update. A lot of them are just textual changes and I would think my customers can do these themselves by editing a simple .txt file. I was hoping my choices are avalable so that I can just insert this tag into my web pages and then give them login info to their edit page or show them how to upload the .txt file. I hope this is an easy one with several answers. Is it possible these tags could discipline your rankings in the search engines? Thanks, Jason I'm setting up a table showcasing a bunch of logos and they're all different widths. I saved the Jpegs as all the same height. I need help coding it though I want the page to look like this but it looks like this when I use this code Quote: <table border="0"> <tbody> <tr> <td><a href="http://www.champssports.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/champs.png"/></a></td> <td><a href="http://www.ladyfootlocker.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/footlocker.png"></a></td> <td><a href="http://www.drjays.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/drjays.png"></a></td> </tr> <tr> <td><a href="http://www.shoecity.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/shoecity.png"></a></td> <td><a href="http://www.shiekhshoes.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/sheik.png"></a></td> <td><a href="http://www.finsihline.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/finishline.png"></a></td> <td><a href="http://www.jimmyjazz.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/jimmyjazz.png"></a></td> </tr> </tbody> </table> and I don't even know how I would code that green square image that says "thes are some of our retailers" it wouldn't go within that table right? Any help is appreciated! Hi everyone, I'm creating a fan site for South Park, and I'm attempting to create a kind of layout type thing. I'm not new to HTML, but I'm not too experienced with tables and layouts. So, anywho, there is a break in between my banner image and the table. I want it to look like the banner is part of the table, but I'm not succeeding. I REALLY need help. Could someone PLEEEEEEEAAAAAASE help me?!?!? URL: http://www.freewebs.com/patrickduffylegland/index.htm my site is REALLY rough right now. I just started. If anyone knows, I would like to make the light blue part in the table separate from the dark blue part. Like the light blue part would be a different table if anyone knows how to do that. It would just make it easier since the light blue part will be the menu. Heres my HTML code so far: <html> <head> <title>Patrick Duffy Leg Land - Keeping the World Safe From Crab People since 2007</title> </head> <body> &nbs p; <img src="http://www.freewebs.com/patrickduffylegland/top_banner.png"> <table align="center" width="780" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="72" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="5" background="http://www.freewebs.com/patrickduffylegland/table_bg.png"> <tr> <td class="espacio2"> <font color="#CCCCCC" face="verdana" size=1><br></font> </td> </tr> </table> </td> </tr> This code is taken from here (select gallery). I have been asked to add extra images to the gallery and the idea is to have a more button and replicate the same page but with new images - but I can't get it to work. I've tried editing the original image names with the new ones I;ve created. The image on the right shows but not on the left. Also the images don't seem to have the border The code: <div style=" margin:16 0 0 22px; line-height:13px " class="w2"><img src="images/4_p1.jpg" alt="" border="0" align="left" style="margin-right:30px "><a href="gallery.html" target="cont"><img src="images/4_p2.jpg" alt="" border="0"></a><a href="gallery2.html" target="cont"><img src="images/4_p3.jpg" alt="" border="0" style="margin-left:19px "></a><br> <br style="line-height:19px "><a href="gallery3.html" target="cont"><img src="images/4_p4.jpg" alt="" border="0"></a><a href="gallery4.html" target="cont"><img src="images/4_p5.jpg" alt="" border="0" style="margin-left:19px "></a><br> <br style="line-height:19px "><a href="gallery5.html" target="cont"><img src="images/4_p6.jpg" alt="" border="0"></a><a href="gallery6.html" target="cont"><img src="images/4_p7.jpg" alt="" border="0" style="margin-left:19px "></a></div> <div style=" margin:15 0 0 167px; line-height:13px " class="w2"><strong>Dream Catcher I have received so much help from the experts here that I am having a blast trying new things with HTML. But, now I've run into another little problem that I just can't figure out. So here I am again seeking the advice of the experts. I have a table and I am trying to get an image in it. I can get the image in, but because the particular cell that the image is in (as a background btw) is longer than the image, the image repeats itself below the image I want. Other than shortening the cell itself, is there a way to keep this background image from repeating itself within the cell of the table? Thanks, Vance |
|||||||