2017-09-30 1 views
0

Je crée mon site Web personnel en utilisant HTML et CSS. J'ai créé quelques tuiles en CSS. J'ai du mal à le relier à un autre site Web. Je veux dire, si je clique sur la tuile, elle devrait me rediriger vers un lien approprié.lier un carreau de css à un lien de site Web

Ceci est mon code html.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800); 
 
*{ 
 
    box-sizing:border-box; 
 
} 
 
body { 
 
    background:#246BB2; 
 
} 
 
h1{ 
 
    font-family:'Open Sans',Arial,Helvetica,sans-serif; 
 
    font-size:72px; 
 
    color:#FFFFFF; 
 
    position: absolute; 
 
    top:0px; 
 
    margin:0px; 
 
} 
 
h2{ 
 
    font-family:'Open Sans',Arial,Helvetica,sans-serif; 
 
    font-size:48px; 
 
    color:#FFFFFF; 
 
    position:relative; 
 
    top:50px; 
 
} 
 
div { 
 
    inline-block; 
 
    padding:0px; 
 
    margin:0px; 
 
} 
 
#container { 
 
    height:40%; 
 
    width:30%; 
 
    margin:auto; 
 
    position: absolute; 
 
    top:30%; 
 
    left:30%; 
 
    background:#687F8B; 
 

 
} 
 
#tl{ 
 
    height:33.34%; 
 
    width:33.34%; 
 
    position:absolute; 
 
    top:0%; 
 
    left:0%; 
 
    background:#FF5050; 
 
    box-shadow:5px 7px 0px 0px #662020; 
 
    transition:all ease .35s; 
 
} 
 
#tc{ 
 
    height:33.34%; 
 
    width:33.34%; 
 
    position:absolute; 
 
    top:0%; 
 
    left:33.34%; 
 
    box-shadow:5px 7px 0px 0px #663D29; 
 
    background:#FF9966; 
 
    transition:all ease .35s; 
 
} 
 
#tr{ 
 
    height:33.34%; 
 
    width:33.34%; 
 
    position:absolute; 
 
    top:0%; 
 
    left:66.67%; 
 
    background:#FFFF66; 
 
    transition:all ease .35s; 
 
} 
 
#ml{ 
 
    height:33.34%; 
 
    width:33.34%; 
 
    position:absolute; 
 
    top:33.34%; 
 
    left:0%; 
 
    background:#99FF66; 
 
    box-shadow:5px 7px 0px 0px #3D6629; 
 
    transition:all ease .35s; 
 
} 
 
#mc{ 
 
    height:33.34%; 
 
    width:33.34%; 
 
    position:absolute; 
 
    top:33.34%; 
 
    left:33.34%; 
 
    background:#00FF99; 
 
    box-shadow:5px 7px 0px 0px #00663D; 
 
    transition:all ease .35s; 
 
} 
 
#mr{ 
 
    height:33.34%; 
 
    width:33.34%; 
 
    position:absolute; 
 
    top:33.34%; 
 
    left:66.67%; 
 
    background:#0099FF; 
 
    transition:all ease .35s; 
 
} 
 

 
div p { 
 
    font-family: 'Open Sans',Arial,Helvetica,sans-serif; 
 
    color:#FFFFFF; 
 
    font-weight:bold; 
 
    text-align:center; 
 
    position:relative; 
 
    font-size:50px; 
 
    top:30%; 
 
    margin:0px; 
 
}
<h1>CSS Tile Menu</h1> 
 
<div id="container"> 
 
<div id="tl"><p>1</p></div> 
 
<div id="tc"><p>2</p></div> 
 
<div id="tr"><p>3</p></div> 
 
<div id="ml"><p>4</p></div> 
 
<div id="mc"><p>5</p></div> 
 
<div id="mr"><p>6</p></div>

J'ai essayé d'insérer de la part html du code et donner le lien que le travail href..it na pas.

J'ai aussi essayé de le relier au CSS..mais c'est impossible sans CSS.

Quelqu'un peut-il m'aider avec quelques idées en reliant un CSS CSS à un lien?

code

est adopté de https://codepen.io/Tectonics0x3F/pen/EfAgr

+0

pourquoi le href ne fonctionne pas? –

Répondre

0

Pourquoi ne pas simplement ceci:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800); 
 
*{ 
 
    box-sizing:border-box; 
 
} 
 
body { 
 
    background:#246BB2; 
 
} 
 
h1{ 
 
    font-family:'Open Sans',Arial,Helvetica,sans-serif; 
 
    font-size:72px; 
 
    color:#FFFFFF; 
 
    position: absolute; 
 
    top:0px; 
 
    margin:0px; 
 
} 
 
h2{ 
 
    font-family:'Open Sans',Arial,Helvetica,sans-serif; 
 
    font-size:48px; 
 
    color:#FFFFFF; 
 
    position:relative; 
 
    top:50px; 
 
} 
 

 
#container { 
 
    max-width:400px; 
 
    margin:100px auto 0; 
 
    background:#687F8B; 
 

 
} 
 
.tile { 
 
    width:32.33%; 
 
    height:100px; 
 
    position:relative; 
 
    top:0; 
 
    left:0; 
 
    display:inline-block; 
 
    margin-bottom:5px; 
 
    transition:all ease .35s; 
 
} 
 
.tile:hover { 
 
top:-5px; 
 
left:-5px; 
 
} 
 
#tl{ 
 
    background:#FF5050; 
 
    box-shadow:5px 7px 0px 0px #662020; 
 
} 
 
#tc{ 
 
    box-shadow:5px 7px 0px 0px #663D29; 
 
    background:#FF9966; 
 
} 
 
#tr{ 
 
    background:#FFFF66; 
 
} 
 
#ml{ 
 
    background:#99FF66; 
 
    box-shadow:5px 7px 0px 0px #3D6629; 
 
} 
 
#mc{ 
 
    background:#00FF99; 
 
    box-shadow:5px 7px 0px 0px #00663D; 
 
} 
 
#mr{ 
 
    background:#0099FF; 
 
} 
 

 
div a { 
 
    font-family: 'Open Sans',Arial,Helvetica,sans-serif; 
 
    color:#FFFFFF; 
 
    font-weight:bold; 
 
    text-align:center; 
 
    font-size:50px; 
 
    margin:0px; 
 
    display:block; 
 
    text-decoration:none; 
 
}
<h1>CSS Tile Menu</h1> 
 
<div id="container"> 
 
<div id="tl" class="tile"><a href="#">1</a></div> 
 
<div id="tc" class="tile"><a href="#">2</a></div> 
 
<div id="tr" class="tile"><a href="#">3</a></div> 
 
<div id="ml" class="tile"><a href="#">4</a></div> 
 
<div id="mc" class="tile"><a href="#">5</a></div> 
 
<div id="mr" class="tile"><a href="#">6</a></div> 
 
</div>

Ils étaient beaucoup de postion absolue que je pense qu'ils sont inutiles.