4 Replies Latest reply on Dec 13, 2010 6:06 PM by KP_2011

    Linked image properties

    SeventhShin

      I'm very new to all this web desgin, but I am very pleased with where I have gotten on my own. Can't figure this last bit out.

       

      I am making a photo website, and I have thubnails of all my photos laid out on various pages, the plan is to have each thumbnail link to a larger image. My problem is when I make an image a link, I get a box grey box around my image which turns to blue on rollover (just like my text)

       

      seen here:

      http://www.bizz-101.com/portfolio/naderzad/Projects.html

       

      I would like to remove the box/border, which I can't figure out how to do. Idealy, I'd like to have the thumbnail look faded on rollover, something similar to a 50% opacity white over the image. Is there anyway something like that can be done, or do I have to creatie rollover images for each and every thumbnail?

       

      Also, I'm just starting working on this now, but I want to have the larger images link to one another (after clicking on a thumbnail) but because they are all differnt sizes I'm getting the links for previous/next all over the place, anyway I can set text to stay in one spot so I can just change the image and save it as a differnt page with the links in the same spot on every page.

       

      Any feedback on my wip website is also welcome.

       

      Thanks for the help.

        • 1. Re: Linked image properties
          Nancy OShea Adobe Community Professional & MVP

          Add this to your CSS code.

           

          a img {border:none}/**removes borders from LINKED images**/

           

          img {border:none} /**removes borders from NON-LINKED images**/

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          www.alt-web.com/
          www.twitter.com/altweb
          www.alt-web.blogspot.com

          • 2. Re: Linked image properties
            fermium5 Level 1

            If you copy and paste Nancy O's response, don't forget the semicolon at the end:

             

            a img {border:none;}/**removes borders from LINKED images**/

             

            img {border:none;} /**removes borders from NON-LINKED images**/

             

            Just looking out!

             

            Chris F

             

            www.christmaseverymonth.com

            www.misnowremoval.com

            • 3. Re: Linked image properties
              Nancy OShea Adobe Community Professional & MVP

              If you copy and paste Nancy O's response, don't forget the semicolon at the end:

              A semicolon isn't required on the last property rule.  It's only needed when another property rule follows. But it won't hurt to add one if it makes you feel better. 

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              www.alt-web.com/
              www.twitter.com/altweb
              www.alt-web.blogspot.com

              • 4. Re: Linked image properties
                KP_2011

                Can anyone tell me why

                 

                a img { border: none; }

                 

                or

                 

                even more specifically: ( I have tested with both versions, same results)

                 

                a img {

                border-top: 0px none;
                border-right: 0px none;
                border-bottom: 0px none;
                border-left: 0px none;

                }

                 

                would not be working? Would rollover images be different? they have the same 'img' tag?

                 

                I managed to get the border no not appear in my header by adding

                 

                .container .header p a img {
                border-width: 0px;
                border-style: none;
                padding-left: 10px;
                }

                 

                although i'm not sure if this is actually what is stopping the border from appearing as when I disable these rules in the CSS styles panel the border is still not appearing.

                 

                 

                here is the page i'm having problems with:

                http://www.simcockit.com.au/products.html

                The logo's in the header are links and I have no border appearing, but if you scroll down to the pdf images the border (bottom gold) is appearing.

                 

                here is the code from my external css

                 

                @charset "utf-8";

                body {
                background: #fff url(../_images/dark-tech-digital-art-7922.jpg);
                color: #004151;
                font: 100%/1.4 "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif;
                margin: 0;
                padding: 0;
                text-align: justify;
                }

                /* ~~ Element/tag selectors ~~ */
                ul, ol, dl {  padding: 0;
                margin: 0;
                }
                h1, h2, h3, h4, h5, h6, {
                margin-top: 0;  padding-right: 15px;
                padding-left: 10px; text-align: center;
                }

                p {
                text-align:justify;
                padding: 10px 0px 0px;
                }
                h4 {
                text-align:center;
                font-weight:normal;
                }

                 

                a img {

                border-top: 0px none;
                border-right: 0px none;
                border-bottom: 0px none;
                border-left: 0px none;

                }

                a:link, a:visited {
                color:#E67B19;
                text-decoration:none;
                font-weight: 600;
                }

                a:hover, a:active {
                color: #E67B19;
                border-bottom: 1px dashed #cb7d20;
                font-weight: bold;
                }

                /* ~~ this fixed width container surrounds the other divs ~~ */
                .container {
                width: 1050px;
                background: #FFF;
                margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
                }

                .header {
                background:  #fff;
                height:240px;
                text-align: right;
                }

                .container .header p {
                text-align: right;
                padding-right: 10px;
                }

                .container .header p a {
                font-weight: normal;
                color: #004151;
                text-decoration: underline;
                padding: 0px;
                border-bottom: none;
                }

                #myoblogoimage {
                float: right;
                padding-bottom: 5px;
                }

                #SITCLogo {
                float: left;
                padding-bottom: 5px;
                padding-left: 10px;
                }


                .container .header p a img {
                border-width: 0px;
                border-style: none;
                padding-left: 10px;
                }
                .image a:hover, a:active {
                border-bottom: 0px #FFF;
                }


                .container .header #NavBar {
                border: 2px solid;
                border-color:#666 #666 #000 #000;
                text-align: left;
                background-color: #333;
                height:39px;
                }

                .content {
                padding: 10px;
                border-bottom: #FFF;
                }

                /* ~~ The footer ~~ */
                .footer {
                padding: 10px 10px 10px 10;
                background: #222;
                color:#FFF;
                font-size:80%;
                height: 30px;
                margin: 10px;
                }

                .container .footer ul li {
                display: inline;
                padding: 5px;
                padding-left:7px;
                background: #666;
                border-colour: #333 #333 #999 #999;
                margin-left: 2px;
                border-top: 1.5px solid #333;
                border-right: 1.5px solid #CCC;
                border-bottom: 1.5px solid #999;
                border-left: 1.5px solid #333;
                }

                .container .footer ul li a {
                color: #D6D6D6;
                background:url(../_images/Gold-Ball-Bullet12p.gif);
                background-position: 0px 3px;
                background-repeat: no-repeat;
                padding-left:15px;
                }
                .container .footer ul li a:hover, a:active{
                color:#F7C519;
                border-bottom: 1.99px solid #F7C519;
                }


                .fltrt {   float: right;
                margin-left: 8px;
                }

                .fltlft { float: left;
                margin-right: 8px;
                }

                .clearfloat { clear:both;
                height:0;
                font-size: 1px;
                line-height: 0px;
                }

                .SimcockITConsulting {
                font-weight: bold;
                }

                .ItalicsLeftSmlSpcing {
                font-style: italic;
                line-height: 1.1em;
                }

                 

                any insight would be appreciated