|
HTML - Image Links, Minor Problem
Hello all, thought maybe someone could help me with a basic problem I'm having. I am fairly new to html and stuff but am off to a start to get a site running.
The problem I am having is that the image i am using to link is offset vertically with vspace = 11 in order to line up lines with a border type thing. However, when you click the image link it includes the 11 pixels underneath it from vspace as part of the clickable link. Is there a way to make it so that only the image itself is a link and still add the 11 pixel spacing under it to get the image to line up with the rest of the site? Thanks! Code: <img style="width: 51px; height: 57px;" alt=" " src="images/icon/left.bmp"><a href="main.html"><img style="border: 0px solid; width: 92px; height: 30px;" alt=" " src="images/icon/bt1.bmp" vspace="11"></a> Code is just the part of the 2 images: the first image, and the linked image that I want to line up with the first image. Similar TutorialsA link on a particular website to my website was published incorrectly. I contacted the webmaster but the problem is that they work VERY slow and the necessary change will not be done for a while. They added a "space" and a "backslash" to my address. It reads "whateverwebsite.com /" So when people click on it they are given a server error and the site won't load. Is there anything I can do to make my web address pull up with that space after .com? Thank you for any help you can provide. This is really hurting my business since its the main external link to our site. Hey Guys, I just got my latest project online and finished the flash banner for it but for some reason the flash banner seems to be off by 1 pixel to the right, its hardly noticeable but it's buggin me. I dont know if this is an HTML fix or CSS but this is the site. Thanks! Here's what I have... http://img378.imageshack.us/img378/502/currentmw7.jpg ...and here's what I'm trying to get... http://img388.imageshack.us/img388/3810/wantedvp6.jpg Basically, just rid of the white space above "Looking Out For You". Here's the coding for the page in a text file... http://www.megaupload.com/?d=JG3ELL2T If anyone can help me with coding or anything (most likely a table I have to fix), that would amazing and greatly appreciated! Thank You! Hey guys: I am new to this and have been catching on real quick. This is for my final project for college and i have one minor issue i have been looking into for the past 20 minutes now. I cannot get the nav bar on the left to align to the top near the banner i had created. Very simple for some but an issue for me. Sorry to bother you guys, and i did search for this issue. Thanks in advanced, Oh and heres the site: http://academ.hvcc.edu/~02479568/rude_rsx/photos.htm Deric <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> #nav-menu #photos { color: #607650; font-weight: bold; } </style> <title>Photography</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="template.css" type="text/css"> </head> <body> <table> <tr> <td colspan="2"><img src="img/banner.jpg" alt="cars"></td> </tr> <tr> <td width="218" height="766"> <div id="nav-menu"> <ul> <li><a href="index.htm" id="home">Home</a></li> <li><a href="photos.htm" id="photos">Photos</a></li> <li><a href="mods.htm" id="mods">List of Mods</a></li> <li><a href="insp.htm" id="insp">Inspirations</a></li> <li><a href="events.htm" id="events">Events</a></li> <li><a href="contact.htm" id="contact">Contact Me</a></li> </ul> </div> </td> <td valign="top" width="488"> <div class="content"> <center><h2>Photos</h2></center> <p>This page will show you phot's of my vehicle taken my a Nikon D40 SLR Camera. Pictures taken and photoshopped by M.I.</p> <BR> <center><p>(Click Images to Enlarge)</p></center> <table> <tr> <td><a href="img/MyS3.jpg"><img align="left" src="img/MyS3.jpg" border="2" alt="My Rsx" width="200" /></a></td> <td><a href="img/MyS2.jpg"><img align="left" src="img/MyS2.jpg" border="2" alt="My Rsx" width="200" /></a></td> </tr> <tr> <td><a href="img/MyS1.jpg"><img align="left" src="img/MyS1.jpg" border="2" alt="My Rsx" width="200" /></a></td> <td><a href="img/MyS4.jpg"><img align="left" src="img/MyS4.jpg" border="2" alt="My Rsx" width="200" /></a></td> </tr> <tr> <td><a href="img/MyS5.jpg"><img align="left" src="img/MyS5.jpg" border="2" alt="My Rsx" width="200" /></a></td> <td><a href="img/MyS6.jpg"><img align="left" src="img/MyS6.jpg" border="2" alt="My Rsx" width="200" /></a></td> </tr> <tr> <td><a href="img/MyS7.jpg"><img align="left" src="img/MyS7.jpg" border="2" alt="My Rsx" width="200" /></a></td> <td><a href="img/MyS9.jpg"><img align="left" src="img/MyS9.jpg" border="2" alt="My Rsx" width="200" /></a></td> </tr> </table> </div> </td> </tr> </table> </body> </html> CSS file: body { background-color: #C2C2C2; margin-left: 100px; } .content { color: #5D734D; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; margin-left: 2em; margin-right: 2em; } .leftnav { background-color: #C2AD67; width: 217px; } #nav-menu ul { list-style: none; padding: 0; margin: 0; } #nav-menu li a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; height: 45px; line-height: 45px; width: 217px; display: block; border: none; border-bottom: 3px solid #000000; color: #755F3E; text-decoration: none; text-align: top; text-indent: 0.8cm; } #nav-menu li a:hover { color: #FFFFFF; font-weight: bold; background-color: #424242; } /* Hide from IE5-Mac \*/ #nav-menu li a { float: none; } /* End hide */ #nav-menu { width: 217px; } I have this image of 5 boxes that all should lead to a differnt link. How to I put in five different links in the specific spots? Hello, im new to html. I am making a basic website and have used some images to link to my other pages. However the links do work but everytime i use them the new page opens in a new window. I have clicked the normal non-image links and they open in the same window. I would link the image links to open in the same window but i am unsure how i would do this. The code which i have used for my images is the following: <a href="http://E:\Website\ContactUs.html" target="_blank"> <img src="E:\Website\Contactusbutton.PNG"height="66" border="2"/></a> Hope someone can help, Thanks. So I made an images and I want to be able to link the image to a target Is there a way we can link the images to different targets without cutting the picture u? heres an example I have an large image with 10 different girls.. Is it possible to click each individual with a different target? Matt Hello, I'm just starting out with html and I am taking a course. I got this assignement to create a website that will include 9 questions, for each right answer one part of a picture(that I have sliced into 9 parts already)will appear. I was thinking something like this, it's a bit rough but you get the idea: If you get the first answer right, the first part of the 9 parts should appear, if wrong nothing would happen. The true or false text should be some kind of hyperlink. I'm really clueless of how to solve this task and I would appreciate some help, I am working in Dreamweaver CS5 for the record. Thanks. http://www.grannysoycandles.com The menu links on the left side are working in IE but not in FF. Its only when they are in the "buttons" div. I put one in the "body" div and it worked fine. Any ideas why? Internet Explorer works fine Firefox does not weird...usually its the other way around... Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Granny Soy Candles</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <style type="text/css"> :active, :focus{ outline:none; } </style> </head> <body bgcolor=#E0E0E0> <div id="div1"> <div id="banner"> <img src="http://www.grannysoycandles.com/images/banner.jpg"> </div> </div> <div id="div2"> <div id="body"> <center><b><h3>Welcome To Granny Soy Candles</h3></b></center> Welcome to the new home of Granny Soy Candles. Please be patient while the site is updated and created. We will be up and running within the next few weeks. Very soon we will be providing you with quality soy candles that are better for your home and your family. Please come back and visit us soon! <br> </div> <div id="buttons"> <a href="http://www.grannysoycandles.com/"><img src="http://www.grannysoycandles.com/images/home1.jpg" border="0"></a> <br> <a href="http://www.grannysoycandles.com/candles.html"><img src="http://www.grannysoycandles.com/images/candles0.jpg" border="0"></a> <br> <img src="http://www.grannysoycandles.com/images/button0.jpg" border="0"> <br> <img src="http://www.grannysoycandles.com/images/button0.jpg" border="0"> <br> <img src="http://www.grannysoycandles.com/images/button0.jpg" border="0"> <br> </div> <div id="div3"> </div> </body> </html> Quote: #div1 { background: url(images/bgheader.jpg) repeat-x; float: left; width: 915px; height: 165px; } #div2 { background: url(images/bgmiddle.jpg); background-repeat: repeat; float: left; width: 915px; } #div3 { background: url(images/bgfooter.jpg) repeat-x; float: left; width: 915px; height: 51px; } #banner { padding-top: 30px; padding-left: 1px; } #buttons { padding-top: 30px; } #body { position: absolute; width: 675px; padding-left: 220px; padding-top: 15px; } Sorry may sound like a noobish question but this is the first time I have made a site, but i have added images to my site as links but they move when the browser window is adjusted, so just wanted to know how to keep them fixed in one position. this is my site: www.d1ndesigns.com thanks Hi, I have very little coding experience, but am trying to set up a page for a friend. I'm having a bit of trouble with some of my text (some links in particular) hiding behind an image. It displays perfectly in Firefox, but is messed up in IE7. Was wondering if someone could take a look at my code and see if they can see what the problem is? http://vitalia.100webspace.net/ The only coding I've ever done was html don't know any css haven't ever used ftp or anything like that. I've just learned a bit here and there on the net while building a couple of personal pages. I tried putting in some td and tr tags but that makes my entire table disappear. *sigh* Hi there, I am not able to figure out why there are blue lines around my images on this page http://www.surveys.hottestdeals.info. If i want to get rid of them, where should i make the changes in CSS sheets? Thanks for any help. Kris Hi, I'm hoping you guys can help me. I'm very new to all this so i apologize if my questions seem dumb. I'm starting a new business and selling on Ebay. Instead of doing all my listing in HTML code I'm doing it on Photoshop, then hosting it on Photobucket and then putting the HTML code for it in the Ebay HTML code box etc. This is all fine and works. I'm doing it this way as I know what I'm doing with Photoshop but don't have a clue with HTML tbh. I also need to get it all up and running asap. The problem is I want live links on my listing so that when the text is clicked on, it will take customers to my website, other products etc. Obviously i cant embed the HTML code for the links as its just a jpeg hosted image. Does anyone know a way I can somehow overlay the links over the image using HTML in the Ebay HTML code box? Is there some kind of code to overlay the text over the image, position it accurately and as a live link? Any help or guidance would be really appreciated. Thanks, Chris. Ok, I have made a main page which is basically an image rollover. The rollover reveals text which is just part of the image. I want to make this text into links. I can't seem to be able to edit the rollover image in Dreamweaver. I tried placing an area map on the original image but that doesn't work. Any suggestions? Thanks muchly! Hello, I have an image that I want to cut into about 10 separate links. Is this hard? How do I do this? Thanks, Hi there, I have a problem with two pages on my website; the right-nav images are not working (in IE7). I have checked the links in the code and they are set up correctly, however the links seem inactive once tested. They do work fine in Firefox. The links are nested in a table, that is inside another (main) table, and they are not set as background images for the cell. Please see http://www.centralbancmtg.com/test/contact.html to see what I am talking about. The links that do not work are the "Mortgage Brokers - Click Here", "Today's HOT Programs" and "Employee Login" located on the right column. The follwoing link has the same problem: "Todays' HOT Programs" (first 2/3rds of the image are not "clickable") on: http://www.centralbancmtg.com/test/brokers.html I am not an expert and need help immediately. I'm sure it's an easy fix but if you have a solution please let me know ASAP! Thank you! Well title says it all, when I try to do an image and have it linked some where a blue box will appear around it only on firefox and IE, not on Opera. How do I get rid of it??? I am using Dreamweaver Help PLEASE! I want to embed a social media block on my page that has all the little buttons and all the little links happy together. I almost had it too using this: <p> <a href="http://www.sample site.com" target="_blank"> <img src="http://my image" width="32" height="32" alt="RSS" title="RSS Coming Soon"> </a> This repeated so I had 6 little images for social media connections. In Internet Explorer all links worked, but there was a little line sticking out the right side of each image. In Safari only my last three image links worked but they have no annoying little line. Why? Anyone? Anyone? This is so frustrating! I have a set of image links on the home page of my website, just like this: <a href="t-store.aspx"><img border="0" alt="Online Store" src="site/include/cssstore.gif"></a> For some reason, they don't work at all on Safari (on a Mac, no idea about Windows Safari). I don't really see what could possibly be causing that. There doesn't seem to be anything in the CSS that could cause this either, the div is just: text-align: center; float: right; width:200px; Worst comes to worst, I could make them into text (which might have been the right thing to do from the beginning), but now I just want to figure this out! Any ideas? EDIT: Text links didn't work either, but other links on the page do. Is there something that would make links not work in one div on a page? I made a link in the middle of a paragraph and now the text that follows the links is activated and appears red when I roll over it (as do my links). I thought I ended the links properly but perhaps not. Any advice? Xhtml 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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>About</title> <link rel="stylesheet" type="text/css" href="../style.css" /> <meta name="generator" content="BBEdit 8.6" /> </head> <body> <div id="wrap"> <div id="header"> <p id="navbuttons"> <a href="../index.html">home</a> <a href="artists.html">artists</a> <a href="writing.html">writing</a> <a href="about.html"class="current">about</a> <a href="links.html">links</a> <a href="contact.html">contact</a> <a href="listings_news.html">news+listings</a> </div> <!-- end #header --> <div id="main"> <div class="about"> <p>Gray Art seeks to promote an active discussion about contemporary art. We are interested in up and coming artists who are do not yet have representation, and we will feature a new artist every two weeks on our <a href="artists.html"> ARTISTS<a/> page. We like art that is fun, offensive, loud, political and bold and are open to any and all media. Writers and critics (professional or not) are encouraged to submit essays, reviews and rants to be posted in the WRITING section. </p> <br> </div> <!-- end .about --> <div class="about2"> <p> If you would like your art to be featured on our artists page, please send several images as well as a brief description of yourself and your work to artists@grayart.com. If you want to write for Gray Art, please send an a brief description of what you want to write about to writing@grayart.com.</p> </div> <!-- end .about2 --> </div> <!-- end #main --> </div> <!-- end #wrap --> </body> </html> __________ CSS code: /* alignment ------------- */ body {margin:0;padding:0;} #header {position:relative; top:-2.7em;} #wrap {max-width: 900px; min-width: 480px; background:url(header_graphic.jpg) no-repeat; width:90%; margin:20px auto; padding:30px 20px 0 0; } #navbuttons {position:relative;top:2.5em;left:14em} /* index ------------- */ .upnow h1 {margin-left:100px; margin-top:70px;} .table p {margin-left:135px; margin-top:25px;} .photo img {left:7empx;position:relative; margin:20px;margin-top:0px;} .photo img {border:none;} /* artists ------------- */ #sidebar {position:relative;margin-left:75%;width:20%;background:red;padding:4px;align:top; border: 2px dashed black;} .feature h1 {margin-left:100px;margin-top:70px;} /* writing ------------- */ .new h1 {position:relative;margin-top:50px;margin-left:100px;} .essays {position:relative;margin-top:30px;margin-left:100px;} .reviews {position:relative;margin-top:2em;margin-left:100px;} /* about ------------- */ .about p {position:relative;margin-top:100px;margin-left:100px;width:500px;} .about2 p {position:relative;margin-left:100px;width:500px;} /* links ------------- */ .links {text-align:center;margin-left:190px;margin-top:100px;postion:relative;} /* text styles ------------- */ #navbuttons {font-family: "Futura", sans-serif; font-weight:lighter;right:-6em;font-size:14px;color:black;text-transform:uppercase;word-spacing:25px} a:link {color:black;} a:visited {color:black;} a:active, a:focus, a:hover {color:red;} a {text-decoration:none;color:black;hover:none} a:hover.current {color:gray;cursor:default} /* index ------------- */ .upnow h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;} .table p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px; white-space:non-wrapping;} /* artists ------------- */ .feature h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;} /* writing ------------- */ .new h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 18px;text-transform:uppercase;} .essays h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;} .essays p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;} .reviews h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;} /* iframe ------------- */ iframe { position: absolute; left: 60%; top: 10em; width: 200px; scrollbar-face-color:##FFFFFF; scrollbar-shadow-color:#d7d7d7; scrollbar-highlight-color:#d7d7d7; scrollbar-3dlight-color:#d7d7d7; Scrollbar-Darkshadow-Color:#d7d7d7; scrollbar-arrow-color:#7a7a7a; scrollbar-track-color:#FFFFFF; } /* about ------------- */ .about p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;} .about2 p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;} /* links ------------- */ .links h1, h2 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 16px;text-transform:uppercase;} .links p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;} |
|||||||