5 Replies Latest reply on Sep 7, 2010 11:49 AM by Photomojorising

    Margins and padding around image links are clickable. How do I set only the image as the link?

    Photomojorising

      I am having trouble formatting links that I have added to my images. I used css rules to set the layout of my page, using the margin feilds in the css rules to dictate most of the layout. I got everything to where it needs to be visually, however I'm having trouble after adding links. Anytime I set an image as a link, the white space around the image that is associated with the margin is also a clickable part of the link. I tried using padding instead of margins for the layout but that was no help. I want only the image itself to be the link so that the margins between thumbnails in a gallery are not clickable links. How do I do this while maintaining the layout of the page?

        • 2. Re: Margins and padding around image links are clickable. How do I set only the image as the link?
          Photomojorising Level 1

          Heres the 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=UTF-8" />
          <title>Untitled Document</title>
          <style type="text/css">
          <!--
          body {
              margin: 0;
              padding: 0;
              text-align: center;
              color: #4C4C4C;
              font-family: "century gothic", "Century Gothic";
              font-size: 14px;
              background-color: #FFF;
          }
          .leftarrow {
              padding-right: 15px;
              padding-left: 10px;
          }
          img {
          }
          .align10pxbtm {
              padding-left: 4px;
          }
          .align4lft15top20btm {
              padding-top: 30px;
              padding-left: 4px;
              padding-bottom: 20px;
          }
          .imageinfo {
              padding-left: 55px;
          }
          .rightarrow {
              padding-right: 20px;
          }
          .align20pxleft20pxbtm {
              padding: 0px;
              margin-bottom: 20px;
              margin-left: 20px;
          }
          .oneColFixCtr #container {
              width: 800px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
              background: #FFFFFF; /* 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. */
              margin-top: 0;
              margin-right: auto;
              margin-bottom: 0;
              margin-left: auto;
              padding-top: 20px;
          }
          .oneColFixCtr #mainContent {
              padding-top: 0;
              padding-right: 0px;
              padding-bottom: 0;
              padding-left: 0px;
          }
          .header1 {
              font-family: "century gothic", "Century Gothic";
              font-size: 36px;
              font-style: normal;
              padding-top: 20px;
              padding-bottom: 20px;
              line-height: 36px;
              color: #4C4C4C;
          }
          .align4lft40top20btm {
              padding-top: 40px;
              padding-bottom: 20px;
              padding-left: 4px;
          }
          .align20lft40btm {
              padding-bottom: 40px;
              padding-left: 20px;
          }
          .header2 {
              font-family: "century gothic", "Century Gothic";
              font-size: 24px;
              font-style: normal;
              word-spacing: 53px;
              padding-left: 53px;
              color: #4C4C4C;
          }
          .align4pxlft20btm {
              padding-left: 4px;
              padding-bottom: 20px;
          }
          .align4lft40btm {
              padding-bottom: 40px;
              padding-left: 4px;
          }
          .align4lft {
              padding-left: 4px;
          }
          .align4lft15btm {
              padding-bottom: 15px;
              padding-left: 4px;
          }
          .projecttitlespacing {
              font-family: "century gothic", "Century Gothic";
              font-size: 18px;
              padding-right: 60px;
              padding-bottom: 20px;
              line-height: 36px;
          }
          .projecttitlespacing2 {
              font-family: "century gothic", "Century Gothic";
              font-size: 18px;
          }
          a:link {
              font-style: normal;
              color: #4C4C4C;
              text-transform: none;
              font-weight: normal;
              font-variant: normal;
              text-decoration: none;
              margin: 0px;
              padding: 0px;
          }
          a:visited {
              color: #4C4C4C;
              text-decoration: none;
          }
          a:hover {
              color: #000;
              text-decoration: none;
          }
          a:active {
              color: #4C4C4C;
              text-decoration: none;
          }
          :focus
          {
            -moz-outline-style: none;
          }
          a img { border: none; }

           

          -->
          </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 class="oneColFixCtr" onload="MM_preloadImages('file:///Macintosh HD/Users/anthonyshumski/Desktop/Website/Thumbnails/realitybyproxy150thumb2.jpg','file:/// Macintosh HD/Users/anthonyshumski/Desktop/Website/Thumbnails/TheBlackAngels15thumbrollover.jpg')">

           

          <div id="container">
            <div id="mainContent">
              <h1 align="left" style="font-weight:normal; &gt; &lt;span class=; font-family: 'century gothic', 'Century Gothic';"Header1"><span class="Projecttitlesspacing"><span class="Projecttitlesspacing"><span class="header1">TONY SHUMSKI </span><span class="header2">PHOTOGRAPHY BLOG CONTACT</span><a href="DanAuerbach001.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','file:///Macintosh HD/Users/anthonyshumski/Desktop/Website/Thumbnails/realitybyproxy150thumb2.jpg',1)"><img src="file:///Macintosh HD/Users/anthonyshumski/Desktop/Website/Thumbnails/ realitybyproxy150thumb.jpg" name="Image8" width="225" height="150" border="0" class="align4lft40top20btm" id="Image8" /></a><a href="theblackangels01.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','file:///Macintosh HD/Users/anthonyshumski/Desktop/Website/Thumbnails/TheBlackAngels15thumbrollover.jpg',1)" ><img src="file:///Macintosh HD/Users/anthonyshumski/Desktop/Website/Thumbnails/TheBlackAngels15thumb.jpg" name="Image7" width="225" height="150" border="0" class="align20pxleft20pxbtm" id="Image7" /></a><img src="SimulatedStimuli001webthumb.jpg" width="224" height="150" class="align20pxleft20pxbtm" /><img src="Danauerbach05v3small.jpg" width="99" height="150" class="align4lft40btm" /><img src="Detached1small001.jpg" width="225" height="150" class="align20lft40btm" /><img src="mojomoloko001.jpg" width="105" height="150" class="align20lft40btm" /><img src="Papadosio09thumb.jpg" width="225" height="150" class="align20lft40btm" /><br />
              </span></span><span class="projecttitlespacing">REALITY BY PROXY </span><span class="projecttitlespacing"><a href="theblackangels01.html">THE BLACK ANGELS</a></span> <span class="projecttitlespacing">SIMULATED STIMULI</span><br />
              <span class="projecttitlespacing">DAN AUERBACH</span> <span class="projecttitlespacing">DETACHED</span> <span class="projecttitlespacing">MOJO MOLOKO</span> <span class="projecttitlespacing">PAPADOSIO <br />
              </span></h1>
              <h1 align="left" style="font-weight:normal; &gt; &lt;span class=; font-family: 'century gothic', 'Century Gothic';"Header1"><span class="Projecttitlesspacing">
                <!-- end #mainContent -->
              </span></h1>
            </div>
          <!-- end #container --></div>
          </body>
          </html>

          • 3. Re: Margins and padding around image links are clickable. How do I set only the image as the link?
            hans-g. Adobe Community Professional & MVP

            Hi,

             

            you should click into the space(s) next to your image(s). See numer 1.

             

            drLink01.jpg

             

             

            In DW you will see the path. You only have to delete this link, you will see this (in my German DW what means something like: Do you really want to replace the link?):

             

            drLink02.jpg

             

            Click ok, and control your work by clicking into your images, these link(s) has(have) to be still there.

             

            Hans-G.

             

            P.S.

            I found some 'file:///Macintosh HD/Users/...jpg. Herefore I'll post for you Murray's comment:

             

            Here's the problem with your code:

             

            DW thinks that every file you have linked to is outside the local root folder for the site. It's trying desperately to keep a valid link to those files, but clearly its use of the 'file:///'-type link will not work on the web.  Have you defined a site for this project?  What is the path to the root folder?

            1 person found this helpful
            • 4. Re: Margins and padding around image links are clickable. How do I set only the image as the link?
              MurraySummers Level 8

              I believe the best way to solve this problem would be to contain each image in a div that is sized appropriately.  Put the margins and padding on the div.  Put the links on the images.  The divs will need to be floated to get them on the same horizontal line.

               

              Make sense?

              • 5. Re: Margins and padding around image links are clickable. How do I set only the image as the link?
                Photomojorising Level 1

                Thanks for the quick response! Everything seems to be working properly now.