HTML - Box Around Images For Description
Hi,
I am building a website and have a lot of different images on it. I am trying to put a 3D type of box around the image - so that I can put in a description for the different images. Attached are 2 images - 1 with a screenshot of my images and the other of a screenshot from another website of what I am trying to achieve. The only difference is that I am trying to put a box around the image as well and would like to keep the description below the image in some instances and beside the image in other instances (see screenshot 1). Any help would be much appreciated. Thanks. Similar Tutorialshow do I set my description for my site when it is found via a search engine? I have a meta description tag, but when i search my site on google, yahoo, msn, etc... the description doesnt fit my meta one.... any better way to set a description? <meta name="description" content="wonderfull beach - blue bay - rooms- hoiliday fresh air google3a970ace18e26dae.html"> Can anyone tell me what the google html file in the description tag is. Its is probably SEO related. I have not been able to find anything about it. Can it be the sitemap XML file in some disguise? Best regards Hi everyone I have read a few articles on this and I would like to explain what I am doing. In the site I am developing I have put the sites logo in a div and in the CSS I have put the image of the logo as the background-image. I would like to know if there are any tricks when adding the alt, title and long description tags? I am also using a h1 inside the div with the logo bg image with a text indent so the text doesnt show. This helps with SEO. The div is also clickable using a technique I found at BonRouge: http://bonrouge.com/br.php?page=faq#divlink I would just like some opinions please? I have given the div a title with the logo's name inside the title. But can I do more by adding an alt tag and long description? Any advice is much appreciated! Thanks! Try googling "SWTOR". The first link has a very nice description, e.g., several links to the material within etc. How can I do this? Can someone link some sample code? Is this all done within the meta description? Thanks all! Love the advice here on this forum ) I followed this guide he http://googlewebmastercentral.blogsp...scription.html My site: www.designjetpartsfast.com My code (Important part in red): 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> <title>HP DesignJet Parts FAST!</title> <script type="text/javascript" src="jquery-1.7.1.min"></script> <script type="text/javascript" src="browser-detection.js"></script> <LINK REL="SHORTCUT ICON" href="/favicon.ico"> <style type="text/css" media="screen"> <!-- @import url("main.css"); @import url("browser-detection.css"); --> </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT"> <meta name="DESCRIPTION" content="Shop and receive HP DesignJet parts FAST! Our exclusive focus on HP DesignJet parts has helped us accumulate a large inventory of parts ready to ship!" /> <meta name="keywords" content="designjet, designjet parts, design jet, HP, plotters" /> </head> <body> <!--HEADER LOGO--> <div id="headerLogoContainer"> <div id="loginRegisterCart"> <a href="http://designjetpartsfast.com/component/option,com_virtuemart/page,shop.registration/Itemid,39/">Sign In / Register</a> | <a href="http://designjetpartsfast.com/component/page,shop.cart/option,com_virtuemart/Itemid,41/"><img src="images/cart.gif" alt="cart icon"> Cart</a> </div> <div id="headerLogo"> <img src="images/headerLogo.jpg" alt="DesignJet Parts FAST banner"> </div> </div> <!--Links--> <div id="topLinks"> <div class="centerMe"> <a class="moveMeRight" href="index.htm">Home</a> <a class="moveMeRight" href="http://designjetpartsfast.com/component/option,com_contact/Itemid,3/.htm">Ask Tom</a> <a class="moveMeRight" href="http://designjetpartsfast.com/component/option,com_simplefaq/Itemid,30/">FAQs</a> <a class="moveMeRight" href="http://designjetpartsfast.com/content/view/13/34/.htm">Terms & Conditions</a> <a href="http://www.youtube.com/user/FixYourDesignJet#p/u/0/bbD_DWxceXc">Youtube Channel</a> </div> </div> <div id ="bodyContent"> <div id ="bodyContent_leftColumnParts"> <img src="images/shop_DesignJetParts.gif" alt="Shop DesignJet Parts FAST"> <table> <tr><td><a href="http://designjetpartsfast.com/component/page,shop.browse/category_id,10/option,com_virtuemart/Itemid,1/">DesignJet 100 Series</a></td></tr> <tr><td><a href="http://designjetpartsfast.com/component/page,shop.browse/category_id,14/option,com_virtuemart/Itemid,1/">DesignJet 400 Series</a></td></tr> <tr><td><a href="http://designjetpartsfast.com/component/page,shop.browse/category_id,15/option,com_virtuemart/Itemid,1/">DesignJet 500 Series</a></td></tr> <tr><td><a href="http://designjetpartsfast.com/component/page,shop.browse/category_id,16/option,com_virtuemart/Itemid,1/">DesignJet 600 Series</a></td></tr> <tr><td><a href="http://designjetpartsfast.com/component/page,shop.browse/category_id,17/option,com_virtuemart/Itemid,1/">DesignJet 700 Series</a></td></tr> <tr><td><a href="http://designjetpartsfast.com/component/page,shop.browse/category_id,18/option,com_virtuemart/Itemid,1/">DesignJet 800 Series</a></td></tr> <tr><td><a href="http://designjetpartsfast.com/component/page,shop.browse/category_id,19/option,com_virtuemart/Itemid,1/">DesignJet 1000 Series</a></td></tr> <tr><td><a href="http://designjetpartsfast.com/component/page,shop.browse/category_id,21/option,com_virtuemart/Itemid,1/">DesignJet 5000 Series</a></td></tr> <tr><td><a href="http://designjetpartsfast.com/component/page,shop.browse/category_id,22/option,com_virtuemart/Itemid,1/">DesignJet 5500 Series</a></td></tr> <tr><td><a href="http://designjetpartsfast.com/component/page,shop.browse/category_id,25/option,com_virtuemart/Itemid,1/">DesignJet CP Series</a></td></tr> <tr><td><a href="http://designjetpartsfast.com/component/page,shop.browse/category_id,27/option,com_virtuemart/Itemid,1/">DesignJet T Series</a></td></tr> <tr><td class="noBottomBorder"><a href="http://designjetpartsfast.com/component/page,shop.browse/category_id,28/option,com_virtuemart/Itemid,1/">DesignJet Z Series</a></td></tr> </table> </div> <div id="bodyContent_welcomeToDesignJetPartsFastLogo"> <img src="images/welcomeToDesignJetPartsFast.jpg" alt="Welcome to DesignJet Parts FAST"> </div> <div id="bodyContent_tomContent"> <object width="291" height="271"><param name="movie" value="http://www.youtube.com/v/8WqTDxADEl0?version=3&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/8WqTDxADEl0?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="291" height="271" allowscriptaccess="always" allowfullscreen="true"></embed></object> <img class="tomInfo" src="images/bodyTomContent.jpg" alt="Tom's Content"> </div> <div id="featuredProductsLabel"> <img src="images/shop_featuredProducts.gif" alt="Featured Products"> </div> <div id="featuredProducts"> <table> <tr> <td><a href="http://designjetpartsfast.com/component/page,shop.product_details/flypage,shop.flypage/product_id,234/option,com_virtuemart/Itemid,1/">DesignJet 800 GL\2 Formatter C7769-69441 <br /><font color="fff">$335.00</font><br /><img src="images/800GL2Formatter.jpg" alt="Featured Product #1"></a></td> <td><a href="http://designjetpartsfast.com/component/page,shop.product_details/category_id,25/flypage,shop.flypage/product_id,105/option,com_virtuemart/Itemid,1/">DesignJet CP Carriage + Belt C4723-69096 C4704-60207 <br /><font color="#000000">$379.00</font><br /><img src="images/cpCarriageAndBelt.jpg" alt="Featured Product #2"></a></td> <td><a href="http://designjetpartsfast.com/component/page,shop.product_details/category_id,18/flypage,shop.flypage/product_id,216/option,com_virtuemart/Itemid,1/">DesignJet 800 GL\2 Formatter C7769-60260 <br /><font color="#000000">$335.00</font><br /><img src="images/800GL2Formatter.jpg" alt="Featured Product #3"></a></td> <td><a href="http://designjetpartsfast.com/component/page,shop.product_details/category_id,17/flypage,shop.flypage/product_id,87/option,com_virtuemart/Itemid,1/">HP DesignJet 755CM Inkjet Plotter <br /><font color="#000000">$895.00</font><br /><img src="images/755CM_inkjetPlotter.jpg" alt="Featured Product #4"></a></td> <td><a href="http://designjetpartsfast.com/component/page,shop.product_details/flypage,shop.flypage/product_id,219/option,com_virtuemart/Itemid,1/">HP 3.2GB EIO Hard Drive C2985-69003 <br /><font color="#000000">$199.00</font><br /><img src="images/800GL2Formatter.jpg" alt="Featured Product #5"></a></td> </tr> </table> </div> </div> <div id="footer"> <div class="centerMe">8331 Waterswolde Lane • Fort Wayne, IN 46825 (260) 348-5653 • Copyright ©2012 • HP DesignJet Parts FAST!</div> </div> </div> </body> </html> Despite the code seemingly correct, Google & Yahoo seem to ignore it. I have heard Google takes at least 6 hours to propagate any changes in the index.html, but it's been about 12 hours now and nothing has changed. Here is what Google displays: (see attachment) As you can tell from the attachment, it's retrieving text from the body of my index file. This is NOT what I want. It needs to read from the meta description instead. How do I get rid of my automatic golive meta description and write my own? Here is my current source. <title>Watch It Mister! Funny Gay Videos, Gay Videos of Hot Emo Guys Kissing, and More Gay Videos!</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta content="Adobe GoLive 5" name="generator"> <meta content="Lavation Design" name="author"> <meta content="index, follow" name="robots"> <meta content="Free gay video sharing community." name="abstract"> <meta content="Watch It Mister is an online gay video sharing community. Lots of Gay Videos, anything from funny gay videos to gay emo guys kissing. This is the home of gay videos.=" name="keywords" href="style.css" type="text/css" <META rel="stylesheet" description?>>> <link type="text/css" rel="stylesheet" href="/css/anylink.css"> Hello. When you do a search for my company which is Nikki Vain, the title and description shows up as [FLASH] Title NAME*: EMAIL*: MESSAGE*: File Format: Shockwave Flash Title NAME*: EMAIL*: MESSAGE*: nikkivain.com/flash/main_v8.sw I went in to my ftp and changed the index.html so this would not happen at www.nikkivain.com and it is fine there. I am so confused Thanks for the help in advance I am having problems with putting HTML code into an RSS 2.0 description tag. If I escape the HTML using <![CDATA[, the HTML shows up fine when the feed is viewed with Firefox 2.0, IE7, and various feed readers. The problem occurs when browsers like IE6 and Netscape view the .xml feed, as these do not support native RSS. To allow the latter browsers to easily display the feed, I use XSL to transform the XML into something much nicer. However, the escaped HTML shows up as literal characters (code) in the feed when viewed with IE6 and Netscape. How can I show HTML in the description tag of an XML feed using XSL? I also get literal characters when trying entity-encoded HTML. Hi, I'm kinda new to HTML.. I want to add 2 different images aligned horizontally, but one would be aligned on the left of the page, and one to the right.. how would I do that? I need to display 40-50 images, one at a time, with a forward and backward button. No timer. Seems easy enough, but I don't know how to do it. Any tips would be greatly appreciated. Hello! I'm new to these forums and am looking for a little help with my website I'm currently building. I'm trying to look for a unique way to display my images on a page. One particular way I'm thinking of is to hover over a tumbnail of the image and it pops up bigger so you can see it. Is there any code out there for that? Can't seem to find the discrepancy within the code. All the image files are in the same location. As stated in the title, some images appear and some do not. http://webpages.charter.net/projects...vertmedia.html Thanks for you help, -=Devil Duck=- Hi, I currently have a bit of a problem, you can see for yourself at http://el-nath.net/forum Notice that all the images are around 3-4 pixels off their place that they're supposed to be at. Can someone please view the source code and give me a solution? Hello, Yes on the same computer, I am quite happy with FF, but when I check the same image on IE, it seems lower quality image even though it is the same image on the same site!! Hi People, I am trying to take a basic background image. Split it into 3 chunks (top bar, middle blank 1px high, bottom bar) The idea was that I would set the middle image to be 1px and make it repeat so that when the user scrolls down the page, the background image scales accordingly. Also so that it would look ok via different browsers. I cut my image into three, no problem there. I then thought it would be a simple case of inserting my image and setting the CSS accordingly but I am getting different results in IE and FF (but of course). Example: HTML CODE HTML Code: <div id="image1"><img src="images/image1.jpg" alt="image description"></div> CSS CODE PHP Code: body { margin-top:20px; } #image1 { text-align: center; padding-top: 540px; padding-bottom: 0; } When I put this in, the image moves down to the bottom of the page in both IE and FF. Of course FF looks like it place the image in the right place but IE ends up putting lots of white space underneath the image. Any ideas ? Also, Is there a much simpler way of getting the image to scale according to the person scrolling? I am keep to learn a few different methods as it all helps. Thank you all I'm currently in the process of rebuilding my website and I'm having some trouble. I'm looking to get the page to look like this: http://img170.imageshack.us/img170/5833/designwh9.png This is what I'm at right now: http://www.bclw.ca/content/index2.html The buttons (unlike in the image design) are not touching each other. Is there a way to do this only using HTML? Or am I going to have to purchase one of those Website Design programs? Thanks for any help you can give! The title thread says it all i can't get the image next to each other it always seems to end up underneath...here is a screenshot. The arrow is pointing to were I want it to go. So how do I do thi guys ? Heyya, new here, and still fairly new to html. I just started using SSI includes (for obvious reasons), but I'm having an issue. When I preview the actual include file (menu.html), it looks just like it should. To see what it should look like, check out the front page, which just uses the HTML code rather than an insert. www.armoredchampions.com But when I use the include on a page, there is a gap between the two lines. I was originally using a <br> tag, but it had a gap, as if I was using <p>. I then eliminated the tag and made the table border just a little bit wider than the image in order to solve the issue, but the gap is still there. To see what it looks like you can check out this page: www.armoredchampions.com/staff.shtml Can anyone help me with this? I would really really appreciate it how can i put images on my page using html or css where you cant right click and copy the image or see the image url. (kinda like a background image, but where i can add several of them) |