CODEWITHSUNDEEP
htmlcssz-index
Stephen Martin
Stephen Martin

Reputation: 199

Links not clickable in any browser

I have some Social Media icons that are image links. I am able to highlight them, so I know that they are not covered by any other page elements. However, they are not linking to anything.

The links in my header work just fine, and after some debugging I've learned that any link (whether it be an image or text) does not work when placed in the #container div.

Here is a link to my site: http://stevepolitodesign.comlu.com/

Here is the HTML:

<!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>Steve Polito Design</title>

<!--[if lt IE 7]>
    <link rel="stylesheet" href="css/ie6.1.1.css" media="screen, projection" type="text/css" />
<![endif]-->

<!-- CSS -->
<link href="css/normal.css" rel="stylesheet" type="text/css" media="screen" />

<!-- FONTS -->
<link href="fonts/@font-face.css" rel="stylesheet" type="text/css" />

<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script  src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script  src="js/site_js.js" type="text/javascript"></script>

</head>

<body>

    <div id="banner"> <!-- START BANNER --> 

        <img src="images/logo.png" width="121" height="121" alt="Steve Polito Design Logo"  class="logo"/>  

    </div> <!-- END HEADER -->

    <div id="header"> <!-- START HEADER -->

        <div id="navigation"> <!-- START NAVIGATION -->

            <ul class="leftNav">
                <li class="left"><a href="#about" class="scrollTo">about</a></li>
                <li class="right"><a href="#services" class="scrollTo">services</a></li>
            </ul>

            <ul class="rightnav">
                <li class="left"><a href="#work" class="scrollTo">work</a></li>
                <li class="right"><a href="#contact" class="scrollTo">contact</a></li>

            </ul>
        </div> <!-- START NAVIGATION -->

    </div> <!-- END HEADER -->

    <div id="container"> <!-- START CONTAINER -->

        <div id="about"> <!-- START ABOUT -->

            <blockquote class="displayText">
                <h1 class="aboutHeading">i create beautiful things for both <span class="grey">print</span> and <span class="grey">web.</span></h1>
            </blockquote>

            <p class="aboutText">my name is steve polito, and i love design. whether it be for print or for web, i believe the most successful design is always the most simple. i enjoy the challenge that comes with every project, and use each undertaking as a learning experience. my portfolio contains works made using photoshop, illustrator, indesign, dreamweaver, after effects, html + css and jquery. you can also check out my resume here.</p>

            <div id="socialMedia"> 
                <a href="www.facebook.com"><img src="images/FB.png" height="32" width="32" alt="Facebook" /></a>
                <a href="www.flickr.com"><img src="images/FLICKR.png" height="32" width="32" alt="FlickR" /></a>
                <a href="www.youtube.com"><img src="images/YOUTUBE.png" height="32" width="32" alt="Youtube"/></a>  
            </div>

      </div>  <!-- END ABOUT -->

      <div id="services"> <!-- START SERVICES -->

            <blockquote class="displayText">
                <h1 class="servicesHeading">here is what i<span class="red"> do</span> and what i <span class="red">know.</span></h1>
                <a href="index.html" title="TEST">TEST</a>
            </blockquote>

            <div id="myServices"> <!-- START MYSERVICES --> 

                <ul class="print">
                    <li class="listHeading">print.</li>
                    <li>logo</li>
                    <li>branding</li>
                    <li>publications</li>
                    <li>package</li>
                    <li>posters</li>
                </ul>

                <ul class="web">
                    <li class="listHeading">web.</li>
                    <li>micro sites</li>
                    <li>seo</li>
                    <li>drupal</li>
                    <li>web design</li>
                </ul>

                <ul class="skills">
                    <li class="listHeading">skills.</li>
                    <li>photoshop</li>
                    <li>illustrator</li>
                    <li>indesign</li>
                    <li>html+css</li>
                    <li>jquery</li>
                    <li>seo</li>
                    <li>drupal</li>
                </ul>

            </div> <!-- START MYSERVICES -->

      </div> <!-- END SERVICES -->

      <div id="work"> <!-- START WORK -->

        <blockquote class="displayText">
            <h1 class="workHeading">here is a sample of my <span class="white"> work.</span></h1>
        </blockquote>

      </div> <!-- END WORK -->

      <div id="contact"> <!-- START CONTACT -->

        <blockquote class="displayText">
            <h1 class="contactHeading">i would <span class="red"> love </span> to here from<span class="red"> you.</span></h1>
        </blockquote>

      </div> <!-- END CONTACT -->

    </div> <!--END CONTAINER -->

</body>
</html>

Here is the CSS:

@charset "UTF-8";
/* CSS Document */

/* CSS RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* HTML TAGS */

body {
    background:url(../images/960_BG.jpg);
    background-repeat: repeat-x;
    background-color:#000;
}


/* LAYOUT */

#header {
    width: 100%;
    height: 64px;
    background:url(../images/header_BG.png);
    background-repeat:repeat-x;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

#navigation {
    width: 90%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

#header ul li a:link{
    display: inline-block;
    text-decoration:none;
    font-family: 'TeXGyreAdventorBold';
    font-size: 20px;
    color: #aa2c23;
    text-shadow: 0px 1px 0px #000;
}

#header ul li a:visited{
    display: inline-block;
    text-decoration:none;
    font-family: 'TeXGyreAdventorBold';
    font-size: 20px;
    color: #aa2c23;
    text-shadow: 0px 1px 0px #000;
}

#header ul li a:hover{
    display: inline-block;
    text-decoration:none;
    font-family: 'TeXGyreAdventorBold';
    font-size: 20px;
    color: #666;
    text-shadow: 0px 1px 0px #000;
}

#header ul li a:active{
    display: inline-block;
    text-decoration:none;
    font-family: 'TeXGyreAdventorBold';
    font-size: 20px;
    color: #666;
    text-shadow: 0px 1px 0px #000;
}

#banner {
    width: 168px;
    height: 175px;
    position: fixed;
    background:url(../images/banner_BG.png);
    background-repeat: no-repeat;
    right: 50%;
    margin-right: -84px;
    top: -5px;
    z-index: 1;
    text-align: center;
}

#container {
    width: 100%;
    max-width: 960px;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    z-index: -1;
}

#about {
    width: 100%;
    max-width: 940px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 0px;
    padding-top: 175px;
    height: 825px;
}

#socialMedia {
    display: block;
    text-align: center;
    width: 300px;
    margin-right:auto;
    margin-left: auto;
    margin-top: 50px;
}

#socialMedia a:link {
    display: inline-block;
    opacity: .5;
    margin: 0 5% 0 5%;
}

#socialMedia a:visited {
    display: inline-block;
    opacity: .5;
    margin: 0 5% 0 5%;
}

#socialMedia a:active {
    display: inline-block;
    opacity: .5;
    margin: 0 5% 0 5%;
}

#socialMedia a:hover {
    display: inline-block;
    opacity: 1;
    margin: 0 5% 0 5%;
}

#services {
    width: 100%;
    max-width: 940px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 0px;
    padding-top: 175px;
    height: 825px;
}

#myServices {
    margin-top: 50px;
    width: 81%;
    margin-left: auto;
    margin-right: auto;
}

#work {
    width: 100%;
    max-width: 940px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 0px;
    padding-top: 175px;
    height: 825px;
}

#contact {
    width: 100%;
    max-width: 940px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 0px;
    padding-top: 175px;
    height: 825px;
}

/* CLASSES */

.leftNav {
    float: left;
    width: 35%;
}

.rightnav {
    float: right;
    width: 35%;
}

.left {
    display: block;
    width: 30%;
    float: left;
    margin-left: 0%;
    text-align:left;
}

.right {
    display: block;
    width: 30%;
    float: right;
    margin-right: 0%;
    text-align:right;
}

.logo {
    display: inline-block;
    width: 121px;
    height: 121px;
    margin-top: 15px;
}

.displayText {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right:auto;
    text-align: center; 
}

.grey {
    color:#666;
}

.aboutText {
    font-family: 'TeXGyreAdventorRegular';
    color: #FFF;
    font-size:15px;
    line-height: 25px;
    margin-top: 50px;
    width: 81%;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.aboutHeading {
    font-family: 'TeXGyreAdventorBold';
    font-size: 82px;
    color: #FFF;
    line-height: 100px;
    text-shadow: 0px 2px 1px #000;
}

.servicesHeading {
    font-family: 'TeXGyreAdventorBold';
    font-size: 82px;
    color: #666;
    line-height: 100px;
    text-shadow: 0px 2px 1px #000;
}

.red { 
    color: #aa2c23;
}

.print {
    display:block;
    width: 10%;
    margin-left: 0%;
    font-family: 'TeXGyreAdventorRegular';
    font-size: 15px;
    color: #333;
    line-height: 25px;
    float:left;
}

.web {
    display: block;
    width: 10%;
    margin-left: 34%;
    font-family: 'TeXGyreAdventorRegular';
    font-size: 15px;
    color: #333;
    line-height: 25px;
    float:left;
}

.skills {
    display: block;
    width: 10%;
    margin-left: 34%;
    font-family: 'TeXGyreAdventorRegular';
    font-size: 15px;
    color: #333;
    line-height: 25px;
    float:left;
}

.listHeading {
    font-family: 'TeXGyreAdventorBold';
    font-size: 40px;
    color: #aa2c23;
    line-height: 100px;
    text-shadow: 0px 2px 1px #000;  
}

.workHeading {
    font-family: 'TeXGyreAdventorBold';
    font-size: 82px;
    color: #aa2c23;
    line-height: 100px;
    text-shadow: 0px 2px 1px #000;
}

.white {
    color: #FFF
}

.contactHeading {
    font-family: 'TeXGyreAdventorBold';
    font-size: 82px;
    color: #fff;
    line-height: 100px;
    text-shadow: 0px 2px 1px #fff;
}

Upvotes: 1

Views: 2502

Answers (2)

Koen Peters
Koen Peters

Reputation: 12916

The problem lies in this part of your css. Drop the z-index and it works

#container {
  width: 100%;
  max-width: 960px;
  margin-left:auto;
  margin-right:auto;
  position: relative;
  z-index: -1;
}

Upvotes: 3

Ernesto
Ernesto

Reputation: 1592

It seems like your links are comming out with a wrong url in your site. Like yourdomain.com/www.facebook.com. Try putting the absolute addresses there maybe. Like http://www.facebook.com in the href attribute.

Upvotes: 1

Related Questions