Перемещение дисплея: заблокировать текст ссылки в нижней части div - PullRequest
Новая
       1

Перемещение дисплея: заблокировать текст ссылки в нижней части div

0 голосов
/ 05 января 2012

Итак, у меня есть этот Div, у которого есть эффект переворачивания, когда он меняет цвет границы при переворачивании, чтобы сделать этот div ссылкой, я поместил ссылку в DIV и дал ему Display: Blockсвойство, так что он заполняет див.

Что мне невероятно сложно сделать, так это выровнять текст по левому нижнему углу этого div, сохранив блокировку, чтобы вся область пролонгации оставалась ссылкой.

ЛЮБЫЕ решения этой проблемы, я был бы очень признателен, спасибо за вашу помощь заранее, я боролся с этим некоторое время.

http://www.klossal.com/media/index_test.html

этотестовая страница и это код: 

<!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> 
 <title>MEDIA</title> 
</head> 

<SCRIPT TYPE="text/javascript"> 
<!-- 
function mouseover() 
{ 
document.getElementById("thediv").style.borderLeft="10px solid black";  
} 
function mouseout() 
{ 
document.getElementById("thediv").style.borderLeft="10px solid #898787";
}

//--> 
</SCRIPT>
<style type="text/css"> 

</style>

</HEAD> 
<link rel="shortcut icon" href="\favicon.ico"> 


<body> 

<DIV style="width:200px;height:200px;border-left:10px solid #898787" id=thediv     
onmouseover="mouseover()" onmouseout="mouseout()">
<a style="padding-top:1cmpx;" href="www.klossal.com">LINK IT BABY</a>
<DIV>

</body> 
</html> 

</body>

Ответы [ 2 ]

0 голосов
/ 05 января 2012

Чтобы выровнять что-то по низу, можно установить position на absolute и bottom на 0px. Это выровняет его по низу первого родителя, который расположен как абсолютный, так и относительный.

В вашем случае установите position для DIV на relative, position для ссылки на absolute и bottom для ссылки на 0px:

http://jsfiddle.net/rodin/jxyZz/

И, между прочим, вы можете добиться эффекта ролловера с помощью чистого CSS, смотрите скрипку. Если вы хотите сделать весь блок ссылкой, он должен быть A и текстом DIV (вы сделали это наоборот).

0 голосов
/ 05 января 2012

Вы можете добавить дополнительный элемент span, который будет располагаться внизу ссылки. Обратите внимание, что вы также можете создать эффект наведения в css: http://jsfiddle.net/Te23c/

Html

текст 
a{
    width: 200px;
    height: 200px;
    display: block;
    position: relative
}

CSS 

a:hover{
    background: lime
}

span{
    position:absolute;
    bottom:0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...