2016-04-13 17 views
1

Neden emin değilim, ama CSS'mdeki bir şey HTML kodumun kopyalarını oluşturuyor. CSS'ye oldukça yeniyim, belki bir şeyleri özlüyorum! İşte Kodum ekstra <a> bağlantı üretiyor

benim HTML:

<section class="once"> 
<div class="third" id="third"> 
<a href="http://69.195.124.168/~onceweso/?page_id=8" class="post" style="background-image: url(http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg);"> 
<div class="post-overlay"> 
<div class="post-header"> 
<h2 class="homepage-title">The List</h2> 
</div> 
</div></a> 

<a href="http://69.195.124.168/~onceweso/?page_id=8" class="post" style="background-image: url(http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg);"> 
<div class="post-overlay"> 
<div class="post-header"> 
<h2 class="homepage-title">The List</h2> 
</div> 
</div></a> 

<a href="http://69.195.124.168/~onceweso/?page_id=8" class="post" style="background-image: url(http://media.mydogspace.com.s3.amazonaws.com/wp-content/uploads/2013/08/puppy-500x350.jpg);"> 
<div class="post-overlay"> 
<div class="post-header"> 
<h2 class="homepage-title">The List</h2> 
</div> 
</div></a> 
</div> 
</section> 

Ve burada Benim CSS: http://69.195.124.168/~onceweso/?page_id=544 (şifre: defa) Bu örnek görüntülerle URL

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

section.once { 
    width: 100%; 
    position: relative; 
    float: left; 
    padding-bottom: 10px; 
    z-index: 2; 
} 

.third { 
    margin-top: -3.95%; 
} 

.third .post { 
    display: block; 
    width: 30.7%; 
    margin-top: 3.95%; 
    padding: 10%; 
    float: left; 
    position: relative; 
    background-size: cover; 
    background-position: center; 
} 

.post-header { 
    position: absolute; 
    right: 30px; 
    bottom: 30px; 
    left: 30px; 
    } 

.homepage-title { 
    font-size: 1.375em; 
    line-height: 120%; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: #222; 
    word-break: break-word; 
    -ms-word-break: break-word; 
} 

.post-overlay { 
    background: rgba(0,0,0,0.75); 
    opacity: 0; 
} 

.post-header { 
    bottom: 35px; 
} 

::selection { 
    background: #444; 
    color: #FFF; 
} 

Sonunda benim hedef bir metin yerleşimi eklemektir.

Teşekkür ederiz!

cevap

2

<a>'un içine <div>'u ekleyemezsiniz.

Bu yasadışı olduğu için, tarayıcı ilk olarak <a> etiketini örtük olarak kapatır.