|
HTML - Spacing Images With Captions On Page
I'm sorry I can't provide a url because I'm not online yet, but here is my problem.
I am trying to post a series of images with text descriptions of each image, but I can't seem to align the images so they are spaced evenly. (Basically like tabs in between the photos) I have tried the following things: <img src="party23.jpg" width="150" height="150" hspace=50>Blowing out candles <img src="party24.jpg" width="150" height="150">The cake<br> what I got was the pictures separated from the text - and the next picture's placement spaced from the end of the 1st picture's text, instead of from the first picture. I have also tried this: <img src="party23.jpg" width="150" height="150">Blowing out candles <center><img src="party24.jpg" width="150" height="150">The cake</center><br> what I got was the first picture & text was fine but the 2nd was centered on a new line instead of to the right of the first picture. Then I tried: <img src="party23.jpg" width="150" height="150">Blowing out candles <img src="party24.jpg" width="150" height="150">The cake<br> I might be able to get this to work...but I would have to count the spaces from the end of each text until the space where the photo needs to go so I know how many  's to insert.. and since all the text captions are different, that would be really time-consuming since there are alot of photos. Anyone able to help me find an easier way?? Any help greatly appreciated!! Similar TutorialsI have a lot of images I want to put on a page. I have no trouble sizing them, and lining them up as I want. I am however having big-time trouble getting captions under them. Is there somewayt to do this either in html or CSS? Including a sample. Want to take the alt text and change to caption, centered under each photo. Anyhelp would be appreciated. <html> <head> <title>In The Field</title> </head> <style type="text/css"> img {border: 4px solid black; float: center; padding: 40px; margin: 40px; font-family: "GC Times": color: white; body{font-family: Verdana; impress;} h1 {font-size: 25;} h2 {font-size: 35;} h3 {font-size: 30;} p {text-indent: 3em;} text {font-weight: bold;} } </style> <body leftmargin="100" rightmargin="50"> <body bgcolor="#FFA07A"> <hr color="black"> <h1 align="center"><font color="black" font size="45">"A Few Photos"</h1> <hr color="black"> <br> <h1 align="left"><font color="tan" font size="5"></h1> <a href="thumbs/Auto.jpg"><img src="images/AutoGiveaway.jpg" width="375" height="265" border="0" alt="Harry Bodofsky, FMDAC VP giving the keys to the lucky winner at Treasure Weekend, 1985"></a> <a href="thumbs/DickandJimmythumb.jpg"><img src="images/DickandJimmy.jpg" width="375" height="265" border="0" alt="Dick Tichian & Jimmy Normandi"></a> <a href="thumbs/GarrettAChunt.jpg"><img src="images/GarrettAChunt.jpg" width="375" height="265" border="0" alt="Charles Garrett signaling the start of the hunt"></a> <a href="thumbs/Fisherthumb.jpg"><img src="images/Fisher.jpg" width="375" height="265" border="0" alt="The Fisher crew, Scott Warner, Me, Jim Lewellen & Fred Brust/Atlantic City 1985"></a> <a href="thumbs/GarrettSemingarthumb.jpg"><img src="images/GarrettSeminar.jpg" width="375" height="265" border="0" alt="Charles Garrett's Seminar, Atlantic City"></a> <a href="thumbs/FMDACHunt.jpg"><img src="images/FMDACHunt.jpg" width="375" height="265" border="0" alt="Jack Lowry, Alan Holcombe, Dick Stout & Gary Bischke, Atlantic City 1986"></a> 7<a href="thumbs/CharlesDickAlanthumb.jpg"><img src="images/CharlesDickAlan.jpg" width="375" height="265" border="0" alt="Charles Garrett, Dick Stout & Alan Holcombe, Atlantic city, 1985"></a> <a href="thumbs/Longleathumb.jpg"><img src="images/Longleat.jpg" width="375" height="265" border="0" alt="First formal meeting of the World Council, Longleat Castle, England 1986"></a> <a href="thumbs/Unloadingthumb.jpg"><img src="images/Unloading.jpg" width="375" height="265" border="0" alt="Cliff Steffens & Ed Laub unloading the coins for the first Atlantic City Hunt"></a> <a href="thumbs/weekendcrowdthumb.jpg"><img src="images/weekendcrowd.jpg" width="375" height="265" border="0" alt="A beautiful day in Atlantic City"></a> <a href="thumbs/FMDACoffic Any help would be appreciated. Hello I have an image in my html page, 'aigned left', and the text is pressed right againt the edge, almost no space at all. Now I have a border on the image, so if I play with "H space" it spaces with the border too, which is a pain. how can I put a space so the text isn't right against the border? If you say CSS, I know very little about css, so would need some guidance. Thank you. I have a problem with my banner. the images have gaps between them, so it looks tacky. Here is the Site: http://www.freewebs.com/jaceyanimation/sitetemplate.htm (I don't have any problems with the sidebar) Here is the code i made for it: HTML Code: <a href="http://www.freewebs.com/jaceyanimation/index.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%201.PNG" border="0" alt="Jacey"></a> <img src="http://www.freewebs.com/jaceyanimation/Part%202.PNG" border="0" alt=""><br> <a href="http://www.freewebs.com/jaceyanimation/index.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%203.PNG" border="0" alt="Home"></a> <a href="http://www.freewebs.com/jaceyanimation/about.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%204.PNG" border="0" alt="About"></a> <a href="http://www.freewebs.com/jaceyanimation/product.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%205.PNG" border="0" alt="Products"></a> <a href="http://www.freewebs.com/jaceyanimation/game.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%206.PNG" border="0" alt="Game"></a> <a href="http://www.freewebs.com/jaceyanimation/animation.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%207.PNG" border="0" alt="Animation"></a><br> <img src="http://www.freewebs.com/jaceyanimation/Part%208.PNG" border="0" alt=""> Can anyone suggest what i could do, or even better, fix the code? I've been working on a new project and I'm using tables to create a layout, I know it's not a good idea but I don't know CSS enough to use DIV's. But I have the table set up into 3 columns, and 2 rows. Top right row has images layered on top of each other for navigation... Everything works fine but the problem is there is spacing in between each of the images. They have no code in between or spacing, it is just messed up. If anyone has any idea help would be greatly appreciated. Hey guys. I am in the middle of making a new Mod for vbulletin and I ran into a bit of a snag. If you go to www.chosen-wow.com/forumlist.php, you will see at the top that there is a "Raid Progression" table. In that table, you will see quite a few pictures with spaces between all of them. How do I make the space between each image in a row go away? In other words, what code am I missing from the table code below? Code: <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" colspan="2">Chosen Raid Progression</td>
</tr>
</thead>
<tbody>
<tr>
<td class="alt1" width="50%">
<center><div class="progress_title">Karazhan</div>
<img src="progression_mod/kz_1_dead.jpg" width="53" height="71">
<img src="progression_mod/kz_2_dead.jpg" width="48" height="71">
<img src="progression_mod/kz_3_dead.jpg" width="48" height="71">
<img src="progression_mod/kz_4_dead.jpg" width="48" height="71">
<img src="progression_mod/kz_5_dead.jpg" width="47" height="71">
<img src="progression_mod/kz_6_dead.jpg" width="48" height="71">
<img src="progression_mod/kz_7_dead.jpg" width="47" height="71">
<img src="progression_mod/kz_8_dead.jpg" width="47" height="71">
<img src="progression_mod/kz_9_dead.jpg" width="62" height="71">
<div class="progress_title">Serpentshrine Cavern</div>
<img src="progression_mod/ssc_1_alive.jpg" width="53" height="71">
<img src="progression_mod/ssc_2_alive.jpg" width="48" height="71">
<img src="progression_mod/ssc_3_alive.jpg" width="48" height="71">
<img src="progression_mod/ssc_4_alive.jpg" width="48" height="71">
<img src="progression_mod/ssc_5_alive.jpg" width="47" height="71">
<img src="progression_mod/ssc_6_alive.jpg" width="48" height="71">
<img src="progression_mod/ssc_7_bkg.jpg" width="47" height="71">
<img src="progression_mod/ssc_8_bkg.jpg" width="47" height="71">
<img src="progression_mod/ssc_9_bkg.jpg" width="62" height="71">
<div class="progress_title">Mount Hyjal</div>
<img src="progression_mod/mh_1_alive.jpg" width="53" height="71">
<img src="progression_mod/mh_2_alive.jpg" width="48" height="71">
<img src="progression_mod/mh_3_alive.jpg" width="48" height="71">
<img src="progression_mod/mh_4_alive.jpg" width="48" height="71">
<img src="progression_mod/mh_5_alive.jpg" width="47" height="71">
<img src="progression_mod/mh_6_bkg.jpg" width="48" height="71">
<img src="progression_mod/mh_7_bkg.jpg" width="47" height="71">
<img src="progression_mod/mh_8_bkg.jpg" width="47" height="71">
<img src="progression_mod/mh_9_bkg.jpg" width="62" height="71">
</center>
<td class="alt1" width="50%">
<center><div class="progress_title">Outdoor & World</div>
<img src="progression_mod/wld_1_dead.jpg" width="53" height="71" border="0">
<img src="progression_mod/wld_2_dead.jpg" width="48" height="71" border="0">
<img src="progression_mod/wld_3_alive.jpg" width="48" height="71">
<img src="progression_mod/wld_4_alive.jpg" width="48" height="71">
<img src="progression_mod/wld_5_alive.jpg" width="47" height="71">
<img src="progression_mod/wld_6_bkg.jpg" width="48" height="71">
<img src="progression_mod/wld_7_bkg.jpg" width="47" height="71">
<img src="progression_mod/wld_8_bkg.jpg" width="47" height="71">
<img src="progression_mod/wld_9_bkg.jpg" width="62" height="71">
<div class="progress_title">Tempest Keep</div>
<img src="progression_mod/tk_1_dead.jpg" width="53" height="71">
<img src="progression_mod/tk_2_alive.jpg" width="48" height="71">
<img src="progression_mod/tk_3_alive.jpg" width="48" height="71">
<img src="progression_mod/tk_4_alive.jpg" width="48" height="71">
<img src="progression_mod/tk_5_bkg.jpg" width="47" height="71">
<img src="progression_mod/tk_6_bkg.jpg" width="48" height="71">
<img src="progression_mod/tk_7_bkg.jpg" width="47" height="71">
<img src="progression_mod/tk_8_bkg.jpg" width="47" height="71">
<img src="progression_mod/tk_9_bkg.jpg" width="62" height="71">
<div class="progress_title">Black Temple</div>
<img src="progression_mod/bt_1_alive.jpg" width="53" height="71">
<img src="progression_mod/bt_2_alive.jpg" width="48" height="71">
<img src="progression_mod/bt_3_alive.jpg" width="48" height="71">
<img src="progression_mod/bt_4_alive.jpg" width="48" height="71">
<img src="progression_mod/bt_5_alive.jpg" width="47" height="71">
<img src="progression_mod/bt_6_alive.jpg" width="48" height="71">
<img src="progression_mod/bt_7_alive.jpg" width="47" height="71">
<img src="progression_mod/bt_8_alive.jpg" width="47" height="71">
<img src="progression_mod/bt_9_alive.jpg" width="62" height="71">
</center>
</td>
</tr>
</tbody>
</table>
Thanks in advance. Hello everyone. I have been given to task to create a signature template. I am pretty new to html. I am trying to remove the vertical spacing in between the website link/phone number and job title. I have sat here playing around with it for about an hour without much luck. What can I do? --------------------------------- here is the code i am using --------------------------------- <p> <strong><font color="blue">_______________________________________________</font></strong> </p> <p style="MARGIN-RIGHT: 0px" dir="ltr"> <font color="gray" size="4" face="Arial Narrow"><font color="gray"><strong>Debra Scott</strong></font>   ; <strong><font size="2">Newmarket Chamber of Commerce</font></strong> <br /> <font size="2"><strong><em>President & Ceo & nbsp;   ; <font size="1">"Leading Businesses. Leading Communities"</font></em></strong></font><font size="4"> </font></font> </p> <font color="#808080" size="4" face="Arial Narrow"></font><font color="gray" size="4" face="Arial Narrow"> <font color="#000000" face="Times New Roman"></font><font color="#000000" face="Times New Roman"><a href="http://www.newmarketchamber.ca" target="_blank"><font color="gray" size="1" face="Arial Narrow"><strong><img class="floatLeft" style="WIDTH: 20px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=296" width="36" height="34" />Newmarket Chamber Website</strong></font></a><font size="3"><font color="gray" size="1" face="Arial Narrow"><strong> <img class="floatLeft" style="WIDTH: 24px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=299" width="36" height="34" />905 898-5900 ex. 223</strong></font></font></font> <br /> <font color="#d5d500" size="3" face="Times New Roman">_______________________________________________</font></font> </p> I've tried and tried and can't figure this one out, probably VERY easy for others. I've got a table with images and I can't figure out how to remove the spacing betwen the table rows. Here is a link http://www.4wheelcustoms.com/new%20template/index.html Notice both sides of the navagation images have horizontal spacing around them. Any help is appreciated. Hi, I am designing my first website by teaching myself HTML using google, etc, so I am very new to designing from scratch (without using Dreamweaver, etc). My webpage is not online yet, so I can't post a link - sorry! First, I am using .png image files which look great in Google Chrome, but when I check my page in IE, the images look horrible - very pixelated. Why is that, and is there a way to fix them? My only thought would be to use a "smoothed out" image such as a .jpg, however that might make the problem even worse. Second, I am using frames and in my main frame I'm using a table with text on the left column and an image on the right column. Again, in Google Chrome it looks great with the text at the very top of the frame/table, but in Firefox, there is tons of space at the top of the table which makes the text too "tall" for the window, and a scroll bar is necessary. I hope I've explained this properly and would greatly appreciate your help - I have many more questions as well! Thanks so much, Kristen Hi there, for my website I would like to have small images, but when clicked on, enlarge in the current window, not another window, and does not link to a blank page with the picture. I don't know if HTML can do this or not, what would be my best option? I don't think wordpress supports javascript either? Thanks, ps2cho Hi, What are the possible locations inside a webpage for images? I know images can be directly inside the html tags, but where else there? Can I have images inside a table? If, then does it have to be inside a row? If, then does it have to be inside a cell? Can images be somewhere else? Is this kind of structure totally ok? Code: <html> <img /> <table> <img /> <tr> <img /> <td> <img /> </td> </tr> </table> </html> Hey guys are the images on this page showing up for people: http://www.anotherlookonline.com/content/photo-gallery Thanks for the help! JT hello i can't get my web page to display a picture from picture folder i have to use notepad its for my college assignments. anyone have any ideas what i'm doing wrong? Please follow this link and observe how the page scrolls up after you have been taken there. It scrolls up because, unless you've been here before and have all the images stored on your computer, the images are continually downloaded and they expand the height of the page causing it to expand down and causing your browser to scroll up. Incidentally, the point at which you were supposed to be linked to ends up further down the page. Is there a way of preventing this? Is there a way of getting the browser to stick to the original point on the page where you were linked to? This has been an issue with me for a very long time and this is the first time I'm asking the help of others to help me cure the problem. Take a look at www.tenniselbowpros.com. There is an image of a girl at the top of the page. She is holding a tennis racket. The image displays in 4 individual rows within the table. The problem is, there is a gap between the 2nd and 3rd images, and 3rd and 4th, leaving white space between the images and not butting them against each other so that the image looks as though it is one. What am I doing wrong with the layout or configuration of the cells? How do I fix this problem? I created the graphic elements in photoshop, then exported the html and images from photoshop. Then opened those files in Dreamweaver. If all of the cells had remained exactly how I imported them into Dreamweaver, all images butt up against each other just fine and I have no problem. But, if I add more text which lengthens some of the cells, then the table starts to go haywire and my images start separating. Please help. thanks Hello, I'm not sure if what I'm asking is possible using html, but I'm going to ask anyway... I'm trying to figure out how to have a sidebar randomly cycle through a series of images each time the page is loaded/refreshed. I'd like the same image displayed at the top and bottom of my sidebar, one image each at the top and bottom of my menu list. But I want to make sure that the image displayed at top and bottom are the same one. Here's my current version of the site: http://home.comcast.net/~blayne81/l5rrpgweb/ You can see the menu on the left side of the page and the two images at the top and bottom of the menu. I have another eight or so images I'd like it to display randomly or cycle through in order (it really doesn't matter which), whenever the page loads/reloads so I don't have to manually pick which image appears every page I write, the code will do that for me. Thanks for your help, Brienprime Hello People, I have 5 images that i want to display one by one after regular interval's of time . I dont know how to do this in HTML .Can you please help me. Thanks in advance, Kluserner Hi I have written a gallery where a user can upload a photograph. This uses a form to upload the photo, and insert data into a MySQL table. What I want to do, is instead of having to go through the submit button, have a button where the user can click, this will upload the image, create a thumbnail, display the thumbnail on the page - but the page is not refreshed........... Can this be done with AJAX? Bearing in mind, I have little/no experience with Javascript - but I'm willing to learn! If this can be done, and it's using AJAX, are there tutorials out there to which I could be directed? Many thanks S Dear all. I see this done many times on many websites (especially comic websites) where an image has a forwards and backwards arrow button, and images selected correspondingly. Ideally I want the [img src="images/001.jpg"] file name to increase by one each time. So all I have to do is add more images in ever increasing filenames to the images folder, 002.jpg, 003.jpg etc. How do I add one to a filename and then refresh the page? Can I do this in XHTML ? Many thanks. 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 On my website, there is a Gallery of several pictures and I made a special page for use as a popup, which matches the main website with the one image (the popup is to show the image larger, when clicked on from the gallery) However, I do not want to make 50 duplicate pages for use as a popup (click for larger image), I would rather have the one page then in the main gallery, call whichever photo should be in the popup. As an example of what I'm trying to do (not the code I'm using, but rather trying to make myself clear: Main page: <a href="popup.html" onclick="return popitup('popup.html') ImageToUse="classic001_lg.jpg""><img src="classic001_sm.jpg" width="320" height="268" border="0" /></a> Then in the popup: <img src=ImageToUse width="650" height="506" /> Thank you, - Randy |
|||||||