Как добавить ссылку "a href" в "div"?
6 ответов
не можете ли вы окружить его тегом a?
<a href="#"><div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div></a>
в этом случае это не имеет значения, поскольку между ними нет контента div
s.
ни один браузер прокрутите вниз к нему.
на a
элемент будет выглядеть так:
<a href="mypageName.html#buttonOne">buttonOne</a>
или:
<a href="mypageName.html#linkedinB">linkedinB</a>
попробуйте реализовать с помощью javascript следующее:
<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
function myhref(web){
window.location.href = web;}
</script>
Я говорю:
<a href="#"id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
тем не менее, это все равно будет ссылка. Если вы хотите изменить свою ссылку на кнопку, Вы должны переименовать #buttonone в #buttonone a { ваш css здесь }.
попробуйте создать класс с именем overlay
и примените к нему следующий css:
a.overlay { width: 100%; height:100%; position: absolute; }
убедитесь, что он помещен в расположенный элемент.
теперь просто разместить <a>
тег с этим классом внутри div, который вы хотите связать:
<div id="buttonOne">
<a class="overlay" href="......."></a>
<div id="linkedinB">
<img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>
</div>
</div>
PhilipK может работать, но это не проверить, потому что вы не можете поместить блочный элемент (div
) внутри встроенного элемента (a
). И когда ваш сайт не подтвердит, что W3C Ninja придет для вас!
другим советом было бы попытаться избежать встроенного стиля.
ваши решения не работают для меня, у меня есть следующий код. Как поместить link в последние два divs.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<style>
/* Import */
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
* {
font-family: "Quicksand", sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.025s ease;
}
/* Colors */
#ora {
background-color: #e67e22;
}
#red {
background-color: #e74c3c;
}
#orab {
background-color: white;
border: 5px solid #e67e22;
}
#redb {
background-color: white;
border: 5px solid #e74c3c;
}
/* End of Colors */
.B {
width: 240px;
height: 55px;
margin: auto;
line-height: 45px;
display: inline-block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#orab:hover {
background-color: #e67e22;
}
#redb:hover {
background-color: #e74c3c;
}
#whib:hover {
background-color: #ecf0f1;
}
/* End of Border
.invert:hover {
-webkit-filter: invert(1);
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
}
</style>
<h1>Flat and Modern Buttons</h1>
<h2>Border Stylin'</h2>
<div class="B bo" id="orab">See the movies list</div></a>
<div class="B bo" id="redb">Avail a free rental day</div>
</html>