1
이미지 링크 인 소셜 미디어 아이콘이 있습니다. 나는 그들을 강조 할 수있어 다른 페이지 요소에 의해 다루어지지 않는다는 것을 알고있다. 그러나, 그들은 아무것도에 연결되지 않습니다.브라우저에서 링크를 클릭 할 수 없습니다.
내 헤더의 링크는 정상적으로 작동하며 일부 디버깅을 한 후에는 #container div에 배치 할 때 이미지 나 텍스트와 같은 링크가 작동하지 않는다는 것을 알게되었습니다. HTML 여기 http://stevepolitodesign.comlu.com/
됩니다 : 여기
<!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>
@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;
}
링크 앞에 http가 있어야합니다. – j08691