クリックしてターゲット領域をオーバーラップする

Question

サードパーティのリンクを対象とする4つの単純なimgとh4があります。クラスprojectImage2が重なり、他の3ページの多くはクリック

<a href="https://eliottenos.github.io/eliott-game/"<div class="game"<h4>Game Application</h4></div></a> 

<a href="https://github.com/eliottenos/filebucket-client"><img class="projectImage2"src="http://i.imgur.com/iiGiuX7.png" 
title="FileBucket Application" /></a> 

<a href="https://eliottenos.github.io/filebucket-client/"><div 
    class="fileBucket"><h4>FileBucket Application</h4></div></a> 

    <a href="https://github.com/eliottenos/eliott-game"><img 
    class="projectImage1"src="http://i.imgur.com/iiGiuX7.png" title="Game 
    Application" /></a> 

私はCSSでそれをオフに投げることができることを考えることができる唯一のものを対象としていますか？私は、問題はリンクが、どのようにあなたのHTMLは構造化されていないだけで、適切な外観であった

.game { 
    position: absolute; 
    padding-left: 250px; 
    padding-right: 250px; 
    padding-top: 130px; 
} 

.fileBucket { 
    position: absolute; 
    padding-left: 250px; 
    padding-right: 250px; 
    padding-top: 200px; 
} 

.projectImage2 { 
    height: auto; 
    width: auto; 
    top: 450px; 
    left: 440px; 
    max-width: 100px; 
    max-height: 70px; 
    position: absolute; 
    display: inline; 
} 

.projectImage1 { 
    height: auto; 
    width: auto; 
    top: 380px; 
    left: 440px; 
    max-width: 100px; 
    max-height: 70px; 
    position: absolute; 
    display: inline; 
} 

Answer 1

だから、ポジションがあります：絶対ではほとんどすべてに、そのすべてが、すべてをオーバーラップされて、私は強く、あなたが使用することをお勧めブートストラップテンプレートを使用すると、ブートストラップで簡単に列と行を設定することができます。私はリンクを正しい位置に置こうとしましたが、あなたはポジションを持っています：絶対的にすべてに、htmlがどのようにレイアウトされているかを変更する必要があります。たとえば、htmlの別の部分の下にあるものその内容の

あなたはhtmlを横の行として考える必要があります。左か右かに関係なく、同じ行に表示されている場合はdivの下に置いてください。左側が4列を占め、右側が8列を取り、合計の列幅は常にまで追加

<div class="row"> 
    <div class="col-md-4"> 
     Contact Details, Phone Number etc... 
    </div> 
    <div class="col-md-8"> 
     <p> 
     Fullstack Web Developer coming from a diverse, technical business background. Having worked and traveled the world, I have acquired a breadth of skill sets through different industries which has culminated in my goal of becoming a trained fullstack web developer. 
    </p> 
    <ul class="main"> 
     <li>Write HTML, CSS, and JavaScript for displays in contemporary browsers with responsive design practices</li> 
     <li>Develop back-end web applications and APIs using a modern programming languages and MVC web development framework</li> 
     <li>Collaborate with teams using an agile development workflow and widely-accepted collaboration practices using Git and GitHub for version control</li> 
     <li>Improve and demonstrate web development skill-set by building a series of full-stack web applications</li> 
    </ul> 
    </div> 
</div> 

：たとえば

は、ブートストラップを使用して、コンテンツのため、あなたはこのような何かを行うことができます12.そういうこともできます。

<div class="row"> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
</div>