www.webdeveloper.com
Results 1 to 4 of 4

Thread: PDF links will not work on my site

  1. #1
    Join Date
    Mar 2014
    Posts
    3

    PDF links will not work on my site

    I have 4 PDF links towards the bottom of the page. I can only get the first one on the left to work. Clicking on the other links does nothing.

    spencerheisedesign.com/gallery.html
    *it may take a few seconds for the picture icons to pop up, not sure why it does that.

    here's the html coding for the View PDF section

    div id= "downloadlink">
    <a href="imagesportfolio/Save Gas While Driving.pdf">View PDF</a>
    </div>

    <div id= "downloadlink2">
    <a href="imagesportfolio/jiffycar presentation.pdf">View PDF</a>
    </div>

    <div id= "downloadlink3">
    <a href="imagesportfolio/olympic brochure.pdf">View PDF</a>
    </div>

    <div id= "downloadlink4">
    <a href="imagesportfolio/soca viewbook final.pdf">View PDF</a>
    </div>


    here's the css for the View PDF section.

    #downloadlink
    {

    font-family:"Aleo", "Century Gothic Bold", Palantino, Serif;
    font-color: #FFA500;
    font-size: 17px;
    right:-52px;
    bottom: 17px;
    align: center;
    position: relative;
    z-index: 300;



    }

    #downloadlink2
    {

    font-family:"Aleo", "Century Gothic Bold", Palantino, Serif;
    font-color: #FFA500;
    font-size: 17px;
    right: -145px;
    bottom: 38px;
    align: center;
    position: relative;
    z-index: 200;
    }

    #downloadlink3
    {

    font-family:"Aleo", "Century Gothic Bold", Palantino, Serif;
    font-color: #FFA500;
    font-size: 17px;
    right:-241px;
    bottom: 59px;
    align: center;
    position: relative;
    z-index: 100;
    }

    #downloadlink4
    {
    font-family:"Aleo", "Century Gothic Bold", Palantino, Serif;
    font-color: #FFA500;
    font-size: 17px;
    right: -335px;
    bottom: 80px;
    align: center;
    position: relative;
    z-index: 0;
    }

  2. #2
    Join Date
    Oct 2013
    Posts
    483
    <div>s are, by default, the width of the page (or what's left of that width from the beginning point of the <div>) unless specified otherwise. The <div> for your first link therefore is overlaying the other 3. Reverse the z-index numbers and all the links should work. Or specify the width of each <div> so it won't overlay the other links thereby making z-index irrelevant.

  3. #3
    Join Date
    May 2014
    Posts
    893
    Well... the CSS shouldn't impact things, EXCEPT you seem to be relative positioning them which moves where they are DRAWN, but NOT where you can click on them or where they are in flow.... and that's most likely your problem.

    Relative positioning like that usually means you're doing something wrong. You seem to be using them to either do margin, padding or possibly even float's job. You are also trying to use properties that don't even exist in CSS like font-color... and repeating the same values over and over in the CSS that could simply be said once if you targeted off a parent element. Of course, serif fonts have legibility issues on screen (say it with me, serif is for print, sans is for screen, serif is for print, sans is for screen) and it looks like you're on the bandwidth wasting webfont bandwagon -- I'd axe that too.

    Since you seem to be trying to style them into a single line... well... and all that redundant CSS... well...

    Semantically I'd make that a list. No stupid ID/classes needed since we'd have inheritance.

    Code:
    <ul id="pdfLinks">
    	<li><a href="imagesportfolio/Save Gas While Driving.pdf">View PDF</a></li>
    	<li><a href="imagesportfolio/jiffycar presentation.pdf">View PDF</a></li>
    	<li><a href="imagesportfolio/olympic brochure.pdf">View PDF</a></li>
    	<li><a href="imagesportfolio/soca viewbook final.pdf">View PDF</a></li>
    </ul>
    Might also help if the text inside those links actually said WHICH one is trying to be viewed, instead of the uselessly vague "View PDF".

    As to positioning them:

    Code:
    #pdfLinks {
    	/* position the UL in flow where you want it, do not APo or RelPo it! */
    	font:normal 1.25em/1.5em arial,helvetica,sans-serif;
    }
    
    #pdfLinks li {
    	display:inline;
    }
    
    #pdfLinks a {
    	padding:0 1em;
    	color:#FFA500;
    }
    --- EDIT ---

    Wait, no... huh, you have images. They just kinda popped into existence after two minutes of crap loading in the background. Lemme guess, some stupid javascript 'wait to load before showing stuff' bandwidth wasting garbage? Yup, edge-preload crap. Do yourself a favor and axe that nonsense and get those images into the bloody markup as normal images; preferably as optimized thumbs.

    Are these links supposed to be related to those images? If so, why are you not putting those images into anchors along with this text?

    You've really lost me on what the devil you are trying to do here, it's all a gibberish mess of how not to build a website. (much of that I suspect lies in your falling for the noodle-doodle BS notion that Adobe has any clue how websites should be built)

    Some other advice -- if your TITLE attribute is identical to the content of the tag it's on, you shouldn't be using TITLE. The CENTER tag has no business on any website written after 1997, nor does the ALIGN attribute on DIV... lemme guess, you're using that steaming pile of manure known as Dreamweaver, aren't you?
    Last edited by deathshadow; 05-25-2014 at 03:51 PM.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    May 2014
    Posts
    30
    you just removing the bottom style from your css coding of 4 dives.
    It was working as good.
    The edited css code as given below:

    /* CSS Document */

    #downloadlink
    {
    font-family:"Aleo", "Century Gothic Bold", Palantino, Serif;
    font-color: #FFA500;
    font-size: 17px;
    right:-52px;
    /*bottom: 17px;*/
    align: center;
    position: relative;
    z-index: 300;



    }

    #downloadlink2
    {
    font-family:"Aleo", "Century Gothic Bold", Palantino, Serif;
    font-color: #FFA500;
    font-size: 17px;
    right: -145px;
    /*bottom: 38px;*/
    align: center;
    position: relative;
    z-index: 200;
    }

    #downloadlink3
    {

    font-family:"Aleo", "Century Gothic Bold", Palantino, Serif;
    font-color: #FFA500;
    font-size: 17px;
    right:-241px;
    /*bottom: 59px;*/
    align: center;
    position: relative;
    z-index: 100;
    }

    #downloadlink4
    {
    font-family:"Aleo", "Century Gothic Bold", Palantino, Serif;
    font-color: #FFA500;
    font-size: 17px;
    right: -335px;
    /*bottom: 80px;*/
    align: center;
    position: relative;
    z-index: 0;
    }

    just apply this code instead of your css code.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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