|
HTML - Text Under Pictures.
I'm green at html.
I designed a webpage 10years ago using html for dummies, but I have not touched it since. Things have changed and I have forgotten, but google has helped me. What I do struggle with is having pictures side by side and text under them. using: <a href="6922_13_x.jpg"><img src="6922_13_x_thumbnail.jpeg" width="335" height="282" /></a> <a href="6969_01_x.jpg"><img src="6969_01_x_thumbnail.jpeg" width="125" height="280" /></a> gets the thumbnails side by side, but once adding <p>text</p> they change position. Help would be appreciated deply. Similar Tutorialshttp://www.reliablegaming.com/test/games2.html I cant seem to get text under each picture, only on the sides....could someone do 1 and resend code so i can see how you did it? 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>Welcome to Reliablegaming</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
font-size: 14px;
font-weight: bold;
}
-->
</style>
</head>
<body>
<table width="969" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15" class="l-bg"><img src="images/bg-left.gif" alt="Reliablegaming" width="15" height="19" /></td>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="940" height="208">
<param name="movie" value="images/top01.swf" />
<param name="quality" value="high" />
<embed src="images/top01.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="940" height="208"></embed>
</object></td>
</tr>
<tr>
<td><img src="images/barbg.gif" alt="Reliablegaming" width="940" height="58" border="0" usemap="#Map" href="#" /></td>
</tr>
<tr>
<td align="center" valign="top" class="bg1"><blockquote><span class="style1"><u>ReliableGaming - Game Packages</u></span><br>
<p align="center"><a href="Drag to a file to make a link."><img src="images/bf2.jpg" width="100" height="100" /></a> <img src="images/bf2142.jpg" alt="" width="100" height="100" /> <img src="images/css.jpg" alt="" width="100" height="100" /> <img src="images/cs1.6.jpg" alt="" width="100" height="100" /> <img src="images/cscz.jpg" alt="" width="100" height="100" /></p>
<p align="center"><img src="images/dod.jpg" alt="f" width="100" height="100" /> <img src="images/dods.jpg" alt="f" width="100" height="100" /> <img src="images/tf2.jpg" alt="f" width="100" height="100" /> <img src="images/css.jpg" alt="f" width="100" height="100" /> <img src="images/css.jpg" alt="f" width="100" height="100" /></p>
<p align="center"><img src="images/css.jpg" alt="f" width="100" height="100" /> <img src="images/css.jpg" alt="f" width="100" height="100" /> <img src="images/css.jpg" alt="f" width="100" height="100" /> <img src="images/css.jpg" alt="f" width="100" height="100" /> <img src="images/css.jpg" alt="f" width="100" height="100" /></p>
<p align="center"><img src="images/css.jpg" alt="rwer" width="100" height="100" /> <img src="images/css.jpg" alt="werwer" width="100" height="100" /> <img src="images/css.jpg" alt="werwe" width="100" height="100" /> <img src="images/css.jpg" alt="ewrwe" width="100" height="100" /> <img src="images/css.jpg" alt="rwer" width="100" height="100" /></p>
<p align="center"> </p>
<p align="center"> </p>
</blockquote>
</td>
</tr>
<td height="30" align="center" valign="middle" class="bg1"><a href="#" class="footerlink">Home</a> | <a href="terms.html" class="footerlink">Terms of Service</a> | <a href="http://www.reliablegaming.com/modernbill/order/?v=1" class="footerlink">Packages</a> | <a href="forums/" class="footerlink">Forums</a> | <a href="mailto:admin@reliablegaming.com" class="footerlink">Contact Us</a> | <a href="index.html" class="footerlink">ReliableGaming</a></td>
<tr>
<td><img src="images/footer.gif" width="939" height="74" border="0" /></td>
</tr>
</table></td>
<td width="15" class="r-bg"><img src="images/bg-right.gif" alt="Reliablegaming" width="15" height="19" /></td>
</tr>
</table>
<map name="Map" id="Map"><area shape="rect" coords="152,4,263,26" href="mailto:admin@reliablegaming.com" />
<area shape="rect" coords="34,7,113,25" href="forums/" />
<area shape="rect" coords="734,6,855,25" href="/support.html" />
</map>
</body>
</html>
how can i place text and pictures where i want i would be nice by using cordinates but i don't know how... Hi, I usually use frames to split my pages into sections. No problem the But you can think that having a page with over 25 frames defined in the HTML code is quite confusing at times. I wanted to ask if and how it is possible to position an image/paragraph/table/etc. at exact pixel-coordinates. My example: I want to place an image at (50px|50px) and a table at (200px|100px) Thanks in advance.... PS: (x|y) Hi, I can make basic websites but I am not very skilled in web design. I am in need of help. Since I made the website inside Photoshop using slices, I need to create a table at the center of the website. Since the center of the website is made of slices of jpeg images, I cannot create a table nor add any text here without disturbing the images. I can get around this by making the pictures part of the cell background, but when I try and remove the images in the center after, the cell background images repeat over and over, and the whole website is unaligned and a big mess! Below is a picture of what I mean... I have included a zip file containing my html pages and image folder. Please download it he http://homepage.ntlworld.com/stephan.../Portfolio.zip The file I need help with is work.html. I can ensure you it's virus free. I want to show my photoshop work off on a website, this is the reason why I am making this website. hello, how can i place pictures i wrote a poem left side and need place a pic right side of the poem but it goes right side of where the poem end any help appreciated I created this website, http://solarroadways.com/news.html and everything I created worked. Then my client added new content and pictures by themself and apparently the images load but then disappear in IE. Debugging didn't help, go figure. Anyone encounter this problem? Im hoping to put a animated picture on top of a header, but not sure how... All help appreciated Heres some of my code: <html> <body background="black.jpeg"> <head> <div id="header"><h1>Faed's Money Making Guide 2009</h1></div> <div id="links"><ul> <li><a href="links 1.htm"></li> Main</a> <li><a href="mainpage.html"></li> Introduction</a> <li><a href="page1.html"></li> Agility</a> <li><a href="page2.html"></li> Construction</a> <li><a href="page3.htm"></li> Cooking</a> <li><a href="page4.htm"></li> Crafting</a> <li><a href="page5.htm"></li> Farming</a> <li><a href="page6.htm"></li> Fletching</a> <li><a href="mainpage.htm"></li> Fishing</a> <li><a href="mainpage.htm"></li> Firemaking</a> <li><a href="mainpage.htm"></li> Herblore</a> <li><a href="mainpage.htm"></li> Hunter</a> <li><a href="mainpage.htm"></li> Magic</a> <li><a href="mainpage.htm"></li> Mining</a> <li><a href="mainpage.htm"></li> Prayer</a> <li><a href="mainpage.htm"></li> Ranging</a> <li><a href="mainpage.htm"></li> RuneCrafting</a> <li><a href="mainpage.htm"></li> Slayer</a> <li><a href="mainpage.htm"></li> Smithing</a> <li><a href="mainpage.htm"></li> Summoning</a> <li><a href="mainpage.htm"></li> Theiving</a> <li><a href="mainpage.htm"></li> Woodcutting</a> </ul> </div> There are about 200 photos in a folder d:\photos\. How to make a script to display slideshow of all photos one by one without entering each photo's name? I found a script which displays all photos but need to input all photos' name. Relating to: http://www.envirotechuk.org/show.php?page=2 I'm trying to get the news section of this page up and running properly, and this is a "template" I have come up with so far, but as you can see it is a very ugly look, very simple, and does not align properly. The code I am using for this page so far is: <br><blockquote><h1><font face="century gothic,comic sans ms,dotum">News from 26-30th April, 2010</font></h1></blockquote> <p><br> [image-left:parliamentfinal.jpg] <B>Parties Clash Over Climate Change Credentials </B><br><br> For more information, visit <A HREF="http://www.independent.co.uk/environment/climate-change/parties-clash-over-climate-credentials-1954632.html">http://www.independent.co.uk/environment/climate-change/parties-clash-over-climate-credentials-1954632.html</A> <br><p><hr><p> [image-left:renewablefinal.jpg] <b>Britain reaches milestone for renewable energy </B><br><br> For more information, visit <A HREF="http://www.independent.co.uk/environment/climate-change/britain-reaches-milestone-for-renewable-energy1952990.html">http://www.independent.co.uk/environment/climate-change/britain-reaches-milestone-for-renewable-energy-1952990.html</A> <br><br><br><p><hr><p> [image-left:airportfinal.jpg] <b>Empty skies proved that airports cause pollution </b><br><br> For more information, visit <A HREF="http://www.independent.co.uk/environment/climate-change/parties-clash-over-climate-credentials-1954632.html">http://www.independent.co.uk/environment/climate-change/parties-clash-over-climate-credentials-1954632.html</A> <br><P><hr><p> [image-left:earthquakefinal.jpg] <b>Tiny climate changes may trigger quakes</b><br><br> For more information, visit <A HREF="http://www.independent.co.uk/environment/climate-change/tiny-climate-changes-may-trigger-quakes-1948432.html">http://www.independent.co.uk/environment/climate-change/tiny-climate-changes-may-trigger-quakes-1948432.html</A> <br><br><p><hr><p> [image-left:batteryfinal.jpg] <b>Giant batteries could make renewable energy more reliable</b><br><br> For more information, visit <A HREF="http://www.guardian.co.uk/environment/2010/apr/26/gravel-batteries-renewable-energy-storage">http://www.guardian.co.uk/environment/2010/apr/26/gravel-batteries-renewable-energy-storage</A> <br><br><p><hr><p> Does anyone know of anything I can do to make the page look a bit better, and to line up better. All the pictures are 100x(52-100) pixels, but I can only find ways to set the maximum width, nowhere can I seem to resize it to 100x100, or something along those lines. Maybe a good website that resizes pictures to exact sizes? Or is there a template I can use to separate the articles a bit more and give it a uniform look, that will allow for the different heights of the pictures? Any help would be appreciated. when working locally in the latest Version of IE. They show up fine in FireFox. I searched the forum but it didn't turn any thing up. I tried my setting in IE but can't figure this out. Does anyone have a simple fix for this? Thanks....tg when I preview my website a active x bar shows up and another thing is that my pictures are not showing. What can I do? can a border be made around a picture without making a table? TIA Hi, guys. Both new to forums and HTML, but learning fast! I'm currently working on a project, got design and everything ready, and I have created all <div-tags> that I need. I now have a problem with pictures now showing up as I want them. I have created a graphic element for example, with squares on the bottom of the page, and the file is saved as .png, with an opacity. When I specify which file it is in the CSS file, pictures won't show up. Might it be cause the file has an opacity on the direct graphic, and if so; is it possible to set opacity in the HTML.code, or do I need to start with PHP too? Cheers, Is there a code that randomly shows one of e.g. three pictures that changes everytime you refresh the page? And/Or, something that changes the image fading from one into the other on a continuous loop. Thanks. Hello, im just wondering if someone can help me with a little problem i have, im currently building a website using dreamweaver 8, and i have got a gallery page that when i load the page using the f12 (browse file localy) it shows the page fine with all the pictures, yet when i load the page onto the host and then view the page live it will not show any of the pictures, it does not even mention it cannot pic them up. I have tried both ftp the page to the host and also copied the code from dreamweaver into the hosts site creation tool. The page is not exceeding the hosts limit and i have barely used the memory i am currently paying for. The page is www.grangefarmairsoft.co.uk/031206.html, or the code is: <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Grange Farm Airsoft</title> <style type="text/css"> <!-- body { background-color: #A9AE5C; .style5 {font-size: xx-large} --> </style> <script type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onLoad="MM_preloadImages('http://grangefarmairsoft.co.uk/More_hover.gif','http://grangefarmairsoft.co.uk/booking_hover.gif')"> <p align="center"><font color="#2A1F00" face="Arial, Helvetica, sans-serif"></font><a href="http://grangefarmairsoft.co.uk/Book.html " onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Booking','','http://grangefarmairsoft.co.uk/booking_hover.gif',1)"></a><font color="#2A1F00" face="Arial, Helvetica, sans-serif"></font><a href="http://grangefarmairsoft.co.uk/Book.html " onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Booking','','http://grangefarmairsoft.co.uk/booking_hover.gif',1)"></a><img src="http://grangefarmairsoft.co.uk/gfalogo.jpg" alt="title" width="924" height="148" border="0" usemap="#Map" longdesc="http://grangefarmairsoft.co.uk/gfalogo.jpg"> <map name="Map"> <area shape="rect" coords="39,84,272,133" href="http://grangefarmairsoft.co.uk/Book.html"> <area shape="rect" coords="311,85,424,131" href="http://grangefarmairsoft.co.uk/more.html"> <area shape="rect" coords="460,84,640,132" href="http://grangefarmairsoft.co.uk/forum.html"> <area shape="rect" coords="678,86,884,132" href="http://grangefarmairsoft.co.uk/Gallery.html"> <area shape="rect" coords="58,7,881,71" href="http://grangefarmairsoft.co.uk/index.html"> </map> </p> <p align="center"><a href="http://grangefarmairsoft.co.uk/pic031206.html"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2404.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2404.JPG" alt="" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2405.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2405.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2406.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2406.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2407.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2407.JPG" alt="" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2408.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2408.JPG" alt="" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2409.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2409.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2410.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2410.JPG" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2414.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2414.JPG" alt="" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2415.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2415.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2416.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2416.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2417.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2417.JPG" alt="" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2418.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2418.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2419.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2419.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2420.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2420.JPG" alt="" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2421.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2421.JPG" alt="" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2422.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2422.JPG" alt="<empty>" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2422.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2423.JPG" alt="<empty>" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2424.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2424.JPG" alt="<empty>" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2425.JPG"><img src="http://grangefarmairsoft.co.uk/pic031206/100_2425.JPG" alt="<empty>" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2426.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2426.JPG" alt="<empty>" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2427.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2427.JPG" alt="<empty>" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2428.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2428.JPG" alt="<empty>" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2429.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2429.JPG" alt="<empty>" width="300" height="250" border="0"> </a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2430.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2430.JPG" alt="<empty>" width="300" height="250" border="0"></a><a href="http://grangefarmairsoft.co.uk/pic031206/100_2431.JPG"> <img src="http://grangefarmairsoft.co.uk/pic031206/100_2431.JPG" alt="<empty>" width="300" height="250" border="0"> </a></p> </body> </html> Please can someone help me, i presume it is just a scripting error on my side as im not a verry good at html. Although i have done both the script and used the user front end to try and make this page, the problem is still there. Final note, the web site is for a combat simulation sport called airsoft, it is a lot like paintballing but uses replica guns that fire rubber pellets at a low velocity which is totaly leagal in the uk (well at the moment), just incase anyone wonders why the pictures are of people with guns. Thanks for any help possible I was able to get this page to display fine in IE 7 but not in IE8 or firefox. The pictures move a little bit but does not move all the way to the end. Please help http://www.cantonwong1.com/dish.html I have 40 .jpg picures/photos that I want to display on a web page. They have all been through the thumbnail process, and none is larger than 25k. However, when trying to open the page on a dial up connection, the process stops (times out) before all the pictures can be completely displayed. Is there some remedy for this? Is there a way to download them in groups of, say, 10, so the browser can catch up and complete the displays? I don't really have a clue... Thanks... Hi! I have put a hyperlink for each picture in my web (http://apeslab.netfirms.com/cgi-bin/randexample.pl ). I now randomize the order of the pix. It means that every time you reload the website, the order of the pix is different. Yet, I cannot figure out how I can put the hyperlink for each pic. So, for instance, I want the cibershot (digi_came3.jpg) to have a hyperlink to yahoo.com. What I wrote for this website is: #!/usr/bin/perl use CGI; $query = new CGI; $v01= "/images/degi_came1.jpg"; $v02= "/images/degi_came2.jpg"; $v03= "/images/degi_came3.jpg"; $l01= "http://www.yahoo.com"; $l02= "http://www.google.com"; $l03= " http://www.asahi.com"; print $query->header; print $query->start_html(-title=>'Mental Rotation'); print "<FONT FACE = 'arial' SIZE = '2'>"; print "<B>Image Rating Example.</B><BR> <BR> Each image depicts two objects. In some cases, one object is a simple rotation of the other. In other cases, the two objects are not the same. For each image, decide whether the objects are the <I>same</I> ( i.e., one is a simple rotation of the other) or whether they are <I>different</I>. <BR><BR>"; print "<FORM ACTION = 'mailto:takao\@asu.edu ' METHOD = 'post' ENCTYPE = 'text/plain'> "; @varlist= ("v01", "v02", "v03"); @linklist= ("l01", "l02", "l03"); srand; @new = (); while (@varlist){ push(@new, splice(@varlist, rand @varlist,1)); } @varlist= @new; print "<CENTER>"; for($i = 0; $i <= 2; ++$i){ $image= $varlist[$i]; $link= $linklist[$i]; print "<a href =$$link> <IMG SRC=$$image width = '180' height = '180'><a><BR>"; print "<TABLE> <TR> <TD ALIGN='center'><I>Same</I><BR> <INPUT TYPE = 'radio' NAME = $varlist[$i] value = '1' > </TD>"; print "<TD ALIGN='center'><I> Different</I><BR> <INPUT TYPE = 'radio' NAME = $varlist[$i] value = '2' > </TD></TR></TABLE><BR>"; } print "<INPUT TYPE = 'submit' VALUE = 'Submit my responses'>"; print "</FORM></FONT></CENTER>"; print $query->end_html; ----------------------------------------------------------------------- As you see, whatever the picture on the top has a link to "yahoo.com" in this program (and I know why, but I cannot figure out how I can make the pictures have right hyperlinks). I also cannot figure out how I can put a sentence next to each pic ("cibershot", for example) and this sentence moves with the pic. Any suggestions/comments would be appreciated. Thanks, --Taka hi all can anyone tell me how to add changing pictures in webpage. thanks in advance.............. |
|||||||