|
HTML - Added Image Now The Href's Don't Work
I wonder if someone knows of the problem I have.
This is the site... http://www.fitterbydesign.co.nz The images have just been added and now the links between pages don't seem to work. Is the answer to this glaringly obvious? Many thanks for any help you can give me! Similar TutorialsHi all -- I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> My images look very clear in Google Chrome and very pixelated in Internet Explorer. Why? i followed this help post http://www.htmlforums.com/html-xhtml...ie-108215.html, and i got to a certain point but now im stuck. I wanted to remove the big space that you see under the header. the link to my blog is http://kumarradio.tumblr.com. and the coding of the blog is posted as an attachment. heres the new line i added for a faster reference. <body> <h1 align=center><img src="http://img69.imageshack.us/img69/6729/newn.gif" id="" alt=""/></a> </h1> what should i change so that the space is removed ? Hey was wondering if there's a quick solution, a tag like the 'title' tag maybe, to insert text with an a href link that is a thumbnail that also puts a line of text below it, describing it perhaps? example <a href src="../images/rocket01.jpg" title="rocket" +TEXT="this a rocket"... thanks F Hi, I have folder image to keep my images where abc.gif is inside. By using "/" infront of the source it couldn't find the image. Any advices? http://www.freewebs.com/stevenwang/ Now I've tried this a few different ways, none of which give me the ideal picture I have in my head. This is my personal website for my clothing line, which I plan to launch fairly soon after everything is said and done. It's all hand drawn (sketchy), black/white, very simple website layout. What I want to do, is move the links (the images) as they are current inline with "Lit." I want the top of the T in "Lit" to be aligned with the top of the "T" in "About." Then I want my twitter and facebook links to be flush with the bottom of the "C" in "Contact" The only way at this point I see this functioning is with an IMAGE MAP, which I really don't want to do... It's not browser friendly. Is there anyway we can float some tables to do this? And which is the best way for adding an iframe inside the hand drawn border/box. Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML><HEAD><TITLE>Get Lit, A Clothing Company</TITLE> <META http-equiv=content-type content="text/html; charset=ISO-8859-1"> <META name="keywords" content=""> <META name="description" content=""> </HEAD> <A href="http://stevenwang.webs.com/home.htm" target=main><IMG alt="" src="http://stevenwang.webs.com/lit_top_left_001.gif" border=0></A><BR> <A href="http://www.facebook.com" target="_blank"><IMG alt="" src="http://stevenwang.webs.com/fb_1.gif" border=0></A><IMG alt="" src="http://stevenwang.webs.com/spacer_top_nav.gif" border=0><A href="http://www.twitter.com" target="_blank"><IMG alt="" src="http://stevenwang.webs.com/twit_1.gif" border=0></A><IMG alt="" src="http://stevenwang.webs.com/spacer_top_nav.gif" border=0><A href="http://www.twitter.com" target="_blank"><IMG alt="" src="http://stevenwang.webs.com/nav_001.gif" border=0></A><IMG alt="" src="http://stevenwang.webs.com/spacer_top_nav.gif" border=0><A href="http://www.twitter.com" target="_blank"><IMG alt="" src="http://stevenwang.webs.com/nav_002.gif" border=0></A> <BR> <IMG alt="" src="http://stevenwang.webs.com/spacer_top_nav.gif" border=0><IMG alt="" src="http://stevenwang.webs.com/align_right.gif" border=0><A href="http://www.twitter.com" target="_blank"><IMG alt="" src="http://stevenwang.webs.com/nav_003.gif" border=0></A> <P align=center> <IMG alt="" src="http://stevenwang.webs.com/litco_bg.gif" border=0> </P> <!-- --><script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script></BODY></HTML> On one of my web pages im currently writing one Image wont show up and i have no idea why here is an extract of the code Quote: <table width='100%' border='0'> <td width='33.333%'></td> <td width='33.333%'> <img scr='http://chaos-realm.servegame.org/images/under-construction.gif' align='center' alt="Error... Unable to load Picture"> </td> <td width='33.333%'></td> </table> And it always shows the Alt text not the picture i have practically the same code in a different area Quote: <table width='100%' border='0'> <td width='33.333%'> </td> <td width='33.333%'> <img scr='http://chaos-realm.servegame.org/images/under-construction.gif' align='center' alt="Error... Unable to load Picture"> </td> <td width='33.333%'> </td> </table> And that one works, so im wondering why wont the first one work, ive tried it as a BMP and JPG image aswell. If you visit the website in the first code youll see the mage does exist Any Help would be amazning, Thanks in advance, Eldara How do I get my image gallery to work? [html] Example I am trying to do exactly what they have done here, with the image thumbs on the same table, and the next button will scroll through them. My Result Whats going on? p.s. i have attached the HTML file in the zip folder, and if u dont want to download that i have attached it as a txt file. Okay, I received some pictures from a fashion designer to use for her Web site. I first tested the code by using a different image that I found on Google and it worked. However, when I used her image it was broken. The next option I tried was I used my photobucket account and make an HTML reference to the image. Even when I upload it to photobucket it gives me an error. So...I don't know if it's still my problem or possibly she gave me the wrong product. The images were .jpg. Here's the image code I tried: <img src="/pictures/ct1.jpg"/> If it's not the code, then what can I do to make sure she gives me pictures that work? <a href="http://zentaur.zed.ro/?hero=CharName" title="Legend of Mir 3 server zentaur - Free MMORPG"><img src="http://zentaur.zed.ro/zb-box.jpg" width="150" height="200" border="0" alt="Legend of Mir 3 server zentaur - Free MMORPG"></a> It works in my editor, but when I paste it into my blogger account, it says its not complete because of the IMG tag. <A HREF="http://www.trueprotein.com/"><IMG SRC="http://i10.tinypic.com/4tqy6ux.jpg"</A> Thanks This is the code my shopping cart provider sent me: Code: <a href="HOST URL/ecom/gb.php?c=cart&i=LFR-1&cl=hidden&ejc=2" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"><img src="HOST URL/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> I am trying to get this to launch (I removed the img tag code to prevent the button from drawing) from an Image Map. Instead of opening a window over the page, it opens the shopping cart in another tab. I need this to open normally (as a window with the original page in the background). After several days, I'm stumped. Here is the image map code for reference: Code: <map name="MAP"> <area shape="rect" coords="765,229,934,253" href="#"> </map> It is my present understanding that many fonts do not work on the internet, but they will in programs like Microsoft Word. Is that correct? If so, how does a guy get a font added that he insists on keeping. Thanks ! Can anyone help me figure our why the side menu is missing when I added HTML code. If I take the code away, the side menus appear. Thanks! Here is the page http://www.tedskitchen.com/Side/Cate...r/Lo_Mein.html Code: <div id="container">
<div id="indexHtml1" style="position:absolute;left:430px;top:200px;width:700px;z-index:80">
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Recipe">
<font face="Arial" font size="1" color="#8B000">
<h1 property="v:name">Chicken Lo Mein</h1></font><br><br><br>
<img src="/images/Lo_Mein2.jpg" style="position:absolute;top:80%;left:1%;margin:-83px 0px 0px -200px;" rel="v:photo" width="130" height="110" right="300"color="#8B000"/>
<font face="Arial" font size="1px">
<div style="position:absolute;left:1px;top:38px;width:700px;z-index:60;>
<span property="v:summary">Boiled Chinese noodles, in a tangy sauce,</span><br/>
<span property="v:summary">stri fried with Chinese vegetable.</span><br/><br/><br/>
<br/>
<br/>
<font face="Arial" font size="3px">
<div style="position:absolute;right:195px;width:700px;top:90;z-index:60>
By: <span property="v:author">Photo by: Suat Eman</span>
<span rel="v:Review">
<span typeof="v:Review-aggregate">
<span rel="v:rating">
<span typeof="v:Rating">
<span property="v:average">4.0</span> stars based on
<span property="v:count">35</span> reviews
</span>
</span>
</span>
</span>
<br/>
<br/>
<font face="Arial" font size="2px">
<div right:200px;width:700px;z-index:60;>
Prep time: <span property="v:prepTime" content="PT30M">30 min</span>
Cook time: <span property="v:cookTime" content="PT1H">30 min</span>
Total time: <span property="v:totalTime" content="PT1H30M">30 min</span>
Servings: <span property="v:yield">6</span><br/>
<br/>
<br/>
<br/>
<font face="Arial" font size="3px">
<span rel="v:ingredient">
<span typeof="v:Ingredient">
<span property="v:amount">1/2 lb</span>:
<span property="v:name">Chinese noodles</span>
<br/>
<span property="v:amount">1/2 lb</span>:
<span property="v:name">Cooked chicken (chunked), shrimp or pork</span>
<br/>
<span property="v:amount">1 bunch</span>:
<span property="v:name">fresh green scallions</span>
<br/>
<span property="v:amount">1 knob</span>:
<span property="v:name"> fresh ginger</span>
<br/>
<span property="v:amount">3-4</span>:
<span property="v:name">cloves garlic</span>
<br/>
<span property="v:amount">1 lb</span>:
<span property="v:name">bean sprouts</span>
<br/>
<span property="v:amount">1/2 cup</span>:
<span property="v:name">pea pods</span>
<br/>
<span property="v:amount">1/2 cup</span>:
<span property="v:name">shredded Chinese cabbage</span>
<br/>
<span property="v:amount">2 1/2 tablespoons</span>:
<span property="v:name">soy sauce</span>
<br/>
<span property="v:amount">2 1/2 tablespoons</span>:
<span property="v:name">hosin sauce</span>
<br/>
<span property="v:amount">1 teaspoon</span>:
<span property="v:name">cornstarch</span>
<br/>
<span property="v:amount">1/4 tablespoons</span>:
<span property="v:name">sea salt</span>
<br/>
<span property="v:amount">3 tablespoons</span>:
<span property="v:name">peanut oil</span>
<br/>
<span property="v:amount">1 tablespoon</span>:
<span property="v:name">dry sherry</span>
</span>
<br/>
<br/>
<br/>
<br/>
<div property="v:instructions">
1. Boil noodles according to package directions; rinse briefly under cold<br/>
water and drain set aside.<br/>
2.Slice scallions lengthwise then into 1 inch longs pieces.<br/>
Wash and peel ginger, then grate using a fine grater.<br/>
Peel and finely mince garlic. Wash bean sprouts well in cold running water.<br/>
3.In a small bowl, combine soy and oyster sauce, salt and cornstarch.<br/>
4.Heat peanut oil in a large wok or skillet until sizzling hot.<br/>
Add pork, onion and ginger, stirring constantly for 1 minute.<br/>
Add garlic, and sherry; stir in bean sprouts<br/>
(and other vegetables and shrimp, if using) and soy sauce mixture.<br/>
5.Quickly stir in noodles and stir fry for 3 minutes<br/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hey, I need to create Lightbox with embeded Flickr albums with added facebook like buttons, any one know how to? ive set up lightbox. Any help would be greatly appreciated! Many Thanks, Bernie Can someone help here. I have tried other groups and no help. I have a web page with image buttons. This is supposed to take me to difrent web pages depending on which button is clicked. This works in Firefox and Opera but not in IE8 http://www.des-otoole.co.uk/cms/admin/pages.php Desmond. I'm trying to setup HREF (Hyperlinks) to go to UNC. The reason for this, is that I need to have users click a link on the page to install their printers, so any example of a UNC (that they could type into the run line) would be: \\PRINT-SERVER\PRINTER1 or \\Print-server\Printer2 But, when I type this in to my HREF statement, I get a permissions error when I try to click the link. However, if I copy that same link into the run line, it works. Can anyone help me here? Thanks very much in advance! Hello, I specified an if/else statement. Now, I would like to, in addition to "getting an element by Id", include an anchor (i.e., href="#span1"). below is what I have so far. where do I insert my reference to an anchor (i.e., href=...)? thanks! <SCRIPT language="JavaScript"> <!-- function getSet() { var r=Math.random(); if (r>0.5) {document.getElementById('set1').style.visibility='visible'; else {document.getElementById('set2').style.visibility='visible'; } //--> </SCRIPT> Hi there, I`ve been doing some programming in java and delphi, but now its time for me to try to learn some html/css, and later some php. Anyways, I`m making this test site, where the meny consists of 4 text elements, all containing a href: <a href="foto.html" target="myFrame" id="menu_items">foto</a>; I`m using an external .css file to controll the graphics of the site, and there I have edited the a:visited, hover, active... When I click on one of the menu items, the color changes, as when I hover too. But I would like the first element of my menu, home, to be active when the page loads. How can I do this? Hope you understand my question. Thanks in advance! EDIT: Ok, there has to be an easy answer to this one, so maybe I just didn't explain my problem good enough. =) When I enter the page for the first time (after writing the adress in the adressbar and clicking "GO"), the page loads, and shows the "home" section. My page contains the site-logo, menu, and an iframe which shows the pages (home, foto, contact, and so on) as html files included in the site. As a default, it loads with the home.html in the iframe, and therefor the text "home" in the menu wont change color to the active color, which I set in the external .css file. But when I click on either of the menu items now, after loading the page, it changes color and works fine. What I want, is to set the "home" text in the meny to the active color (or in the active state) when the page is loaded. Sorry for any bad english, doing my best. And again, thanks I am making a simple webpage with a menubar (pictures as navigation) and an iframe. I want the pictures in the navigation bar to open different external webpages in the iframe. Now the problem is that these three pictures (blog, works, contact) are linked with href to a javascript because of the image swap effect. (i.e href=javascript:staySet). How do I make them open pages in the iframe when they already have a href value? The page can be viewed he http://stereocilia.net/ This is what I have so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {
display: block;
text-align: center;
}
body,td,th {
color: #000;
}
body {
background-image: url(http://www.stereocilia.net/background.jpg);
background-repeat: no-repeat;
background-color: #eeeeee;
}
</style>
<Script Language=JavaScript>
var prevClicked = "";
function staySet(curr){
tmpStr = curr.toString();
if (prevClicked != "")
{
document.getElementById(prevClicked).disabled = false;
document.getElementById(prevClicked).src = prevClicked+'1.png'
}
document.getElementById(tmpStr).disabled = true;
document.getElementById(tmpStr).src = tmpStr+'2.png';
prevClicked = tmpStr;
}
</Script>
</head>
<body bgcolor="#ffffff" leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">
<div align="center"><table border="0" bordercolor="" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr style="background-color:#121616">
<th scope="col"><table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="546">
<!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="ina.png" fwstyle="Dreamweaver" fwdocid = "592585180" fwnested="0" -->
<tr>
<td><img src="ina_spacer.gif" width="214" height="1" border="0" alt="" /></td>
<td><img src="ina_spacer.gif" width="110" height="1" border="0" alt="" /></td>
<td><img src="ina_spacer.gif" width="110" height="1" border="0" alt="" /></td>
<td><img src="ina_spacer.gif" width="110" height="1" border="0" alt="" /></td>
<td><img src="ina_spacer.gif" width="2" height="1" border="0" alt="" /></td>
<td><img src="ina_spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="5"></a></td>
<td><img src="spacer.gif" width="1" height="100" border="0" alt="" /></td>
</tr>
</table></th>
</tr>
</table>
</div></td>
</tr>
<tr>
<td><div align="center">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="546">
<tr>
<td><img src="ina_blank.png"/></td>
<td><a href=javascript:staySet('A')><img src='A1.png' border="0px" id='A' onMouseover="SwapImage('A')" onMouseout="SwapImage('A')"></a> </td>
<td><a href=javascript:staySet('B')><img src='B1.png' border="0px" id='B' onMouseover="SwapImage('B')" onMouseout="SwapImage('B')"></a> </td>
<td><a href=javascript:staySet('C')><img src='C1.png' border="0px" id='C' onMouseover="SwapImage('C')" onMouseout="SwapImage('C')"></a> </td>
<td valign="top"><p style="margin:0px"></p></td>
<td><img src="ina_spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
</table>
</div></td>
</tr>
</table>
<iframe
name="iframe"
width="100%"
height="100%"
src="http://www.htmlforums.com/"
frameborder="0"
scrolling="yes" >
</iframe>
</iframe>
</div>
</body>
</html>
|
|||||||