www.webdeveloper.com
Results 1 to 3 of 3

Thread: Help creating <a href link in Behance's Prosite

  1. #1
    Join Date
    Apr 2012
    Posts
    1

    Help creating <a href link in Behance's Prosite

    Hello,

    Is there anyone out there who has experience hand coding a site created with Behance's Prosite?

    I've created my portolio site using Prosite. View it here: www.nancysiegelgraphicdesign.com.
    I want to add a simple link from an image to an external/other website. In using Prosite, this requires going into the code and adding the link yourself. I know some basic html and tried to add the
    I can't seem to get it to work.

    I image I want to make clickable/link to another site is the LinkedIn image on the About page.

    Although the image I uploaded is called Linkedin_logo.jpg, I believe it is here in the Prosite code:

    <img class="orig_avail" src="http://behance.vo.llnwd.net/profiles13/898917/projects/3049229/852cc9eed3cdab4731bff63bfac05f38.jpg"

    The page I want to link to is http://www.linkedin.com/pub/nancy-siegel/4/302/547.

    When I write the code
    <a href="http://www.linkedin.com/pub/nancy-siegel/4/302/547"><img src="http://behance.vo.llnwd.net/profiles13/898917/projects/3049229/852cc9eed3cdab4731bff63bfac05f38.jpg" /> </a>
    I can't seem to get it to work.

    This is the code as it is now:
    </div></li>
    <li class="module image last" id="module-28933855"><img class="orig_avail" src="http://behance.vo.llnwd.net/profiles13/898917/projects/3049229/852cc9eed3cdab4731bff63bfac05f38.jpg" height="44" width="175"><div class="spacer" style="height: 0px"></div></li>
    </ul></div>

    I will gladly let someone who can help me look at the actual code.

    Also - I'd like to move the image so that it's left justified under the text.
    Thanks so very much

  2. #2
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    I can take a look at it. To make an image clickable though all you need is
    Code:
    <a href="http://www.whatever.com"><img src="link/to image.jpg"></a>
    That is the basics of it. I advise not using html or css to resize the image. Use an image program such as Fireworks, GIMP, Infranview, etc to properly resize the images and reduce the file size. It will still load the full image file even if it is sized down with HTML or CSS. This will lead to pages loading slower and is generally bad practice. If you still can't get it let me know and I will happily take a look at it for you.
    ----------------------------------------------------------------------------------------------
    WYSIWYG editors will never beat my hand written code!!!! Learn to do it in notepad and learn how to actually control your website! Current Project http://www.jmcanineservices.com

  3. #3
    Join Date
    Nov 2002
    Posts
    2,632
    If your designing tool has you hand coding stuff and creating as big of a mess in terms of code as the following, you might want to look at a different tool.

    Here's an "as is" section of formatted code

    Code:
    <div id="primary-project-content" class="project-styles">
            <ul id="project-modules" style="padding-top: 15px; background-color: transparent;">
                <li class="module text first" id="module-28016009">
                    <div class="text-center">
                        <span style="color: rgb(18, 18, 18); font-family: proxima-nova-1, proxima-nova, helvetica, arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 19px; ">
                            After spending 11 years as an intranet, television and video producer, I am finally pursuing my dream to be a graphic designer.
                        </span>
                        <div>
                            <span style="color: rgb(18, 18, 18); font-family: proxima-nova-1, proxima-nova, helvetica, arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 19px; ">
                                <br>
                            </span>
                        </div>
                        <div id="yui_3_3_0_3_133469111191346">
                            <span style="color: rgb(18, 18, 18); font-family: proxima-nova-1, proxima-nova, helvetica, arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 19px; ">
                                I believe in listening carefully to what clients say, reading and experiencing as much as possible, and that no one is too important to get the coffee
                            </span>
                            <span style="font-family: proxima-nova-1, proxima-nova, helvetica, arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 19px; ">
                                .
                            </span>
                        </div>
                        <div id="yui_3_3_0_3_133469111191346">
                            <span style="font-family: proxima-nova-1, proxima-nova, helvetica, arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 19px; ">
                                <br>
                            </span>
                        </div>
                    </div>
                    <div class="spacer" style="height: 0px"></div>
                </li>
                <li class="module text last" id="module-29039747">
                    <div class="text-center">
                        <span style="font-size: 15px; font-weight: bold; font-style: normal; font-family: verdana, geneva, sans-serif; ">
                            <a style="text-align: left; display: inline; text-decoration: none; " href="http://www.linkedin.com/pub/nancy-siegel/4/302/547" target="_blank">Linkedin</a>
                        </span></div><div class="spacer" style="height: 0px">
                    </div>
                </li>
            </ul>
        </div>
    Here's what you could have done

    Code:
    <div id="about">
        <p>
            After spending 11 years as an intranet, television and video producer, I am finally pursuing my dream to be a graphic designer.
        </p>
        <p>
            I believe in listening carefully to what clients say, reading and experiencing as much as possible, and that no one is too important to get the coffee
        </p>
        <p>
            <a href="http://www.linkedin.com/pub/nancy-siegel/4/302/547" target="_blank">Linkedin</a>
        </p>
    </div>
    I know what one I would want to maintain. Komodo Edit or the JavaScript version of Eclipse would be better. Granted, you have to hand code it all, but your site is basic enough to where it won't be that much to do really.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles