selectores - un enlace href para div completo en HTML/CSS
link rel= stylesheet para que sirve (8)
Esto es lo que estoy tratando de lograr en HTML / CSS:
Tengo imágenes en diferentes alturas y anchuras, pero todas son menos de 180x235. Entonces, lo que quiero hacer es crear un div con border y vertical-align: middle them all. Lo he hecho con éxito, pero ahora estoy atascado en cómo correctamente un enlace href todo el div .
Aquí está mi código:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
</div>
Tenga en cuenta que para copiar fácilmente aquí, el código de estilo está en línea.
Leí en alguna parte que simplemente puedo agregar otro div principal encima del código y luego hacer un href dentro de eso. Sin embargo, según algunas investigaciones, no será un código válido.
Entonces, para resumirlo de nuevo, necesito que todo el div ( #parentdivimage ) sea un enlace href.
ACTUALIZACIÓN 06/10/2014: usar div''s dentro de a''s es semánticamente correcto en HTML5.
Tendrá que elegir entre los siguientes escenarios:
<a href="http://google.com">
<div>
Hello world
</div>
</a>
que es semánticamente incorrecto, pero funcionará.
<div style="cursor: pointer;" onclick="window.location=''http://google.com'';">
Hello world
</div>
que es semánticamente correcto pero implica el uso de JS.
<a href="http://google.com">
<span style="display: block;">
Hello world
</span>
</a>
que es semánticamente correcto y funciona como se esperaba, pero ya no es un div.
¿Por qué no <div> elemento <div> y lo reemplazas con un <a> ? El hecho de que la etiqueta de anclaje no sea un div no significa que no pueda darle un estilo con la display:block , altura, ancho, fondo, borde, etc. Puede hacer que se vea como un div pero aun así actuar como un enlace . Entonces no confía en el código inválido o JavaScript que puede no estar habilitado para algunos usuarios.
Dos cosas que puedes hacer:
Cambie
#childdivimagea un elementospany cambie#parentdivimagea una etiqueta de anclaje. Esto puede requerir que agregue un poco más de estilo para que las cosas se vean perfectas. Esto es preferible, ya que usa el marcado semántico y no depende de javascript.- Utilice Javascript para vincular un evento de clic a
#parentdivimage. Debe redirigir la ventana del navegador modificandowindow.locationdentro de este evento. Este es TheEasyWay TM , pero no se degradará con gracia.
En su lugar, convierta el div de id="childdivimag" un span , y ajuste eso en un elemento a. Como el span y el img son elementos en línea por defecto, esto sigue siendo válido, mientras que un div es un elemento de nivel de bloque y, por lo tanto, un marcado no válido cuando está contenido dentro de un a .
Hazlo asi:
Parentdivimage debería tener ancho y alto especificados, y su posición debería ser:
position: relative;
Justo dentro de parentdivimage, junto a otros divs que el padre contiene debes poner:
<a href="linkt.to.smthn.com"><span class="clickable"></span></a>
Luego en el archivo css:
.clickable {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 1;
}
La etiqueta span llenará su bloque principal que es parentdiv, debido a la altura y el ancho establecidos en 100%. Span estará en la parte superior de todos los elementos circundantes debido a que establece un índice z más alto que otros elementos. Finalmente, se hará clic en span, porque está dentro de una etiqueta ''a''.
Lo que haría sería poner un tramo dentro de la etiqueta <a> , configurar el tramo para bloquear y agregar el tamaño al tramo, o simplemente aplicar el estilo a la etiqueta <a> . Definitivamente manejar el posicionamiento en el estilo de etiqueta <a> . Agregue un onclick event a a where JavaScript capturará el evento, luego devuelva falso al final del evento JavaScript para evitar la acción predeterminada del href y el burbujeo del clic. Esto funciona en casos con o sin JavaScript habilitado, y cualquier AJAX puede manejarse en el oyente de Javascript.
Si está utilizando jQuery, puede usar esto como su oyente y omitir el onclick en la etiqueta a.
$(''#idofdiv'').live("click", function(e) {
//add stuff here
e.preventDefault; //or use return false
});
esto le permite adjuntar oyentes a cualquier elemento modificado según sea necesario.
Saliendo de lo que dijo Surreal Dreams, probablemente sea mejor escribir la etiqueta de anclaje en mi experiencia, pero realmente depende de lo que estés haciendo. Aquí hay un ejemplo:
Html:
<div class="parent-div">
<a href="#">Test</a>
<a href="#">Test</a>
<a href="#">Test</a>
</div>
Entonces el CSS:
.parent-div {
width: 200px;
}
a {
display:block;
background-color: #ccc;
color: #000;
text-decoration:none;
padding:10px;
margin-bottom:1px;
}
a:hover {
background-color: #ddd;
}
poner display:block en el elemento de anclaje. y / o zoom:1 ;
pero deberías hacer esto.
a#parentdivimage{position:relative; width:184px; height:235px;
border:2px solid #000; text-align:center;
background-image:url("myimage.jpg");
background-position: 50% 50%;
background-repeat:no-repeat; display:block;
text-indent:-9999px}
<a id="parentdivimage">whatever your alt attribute was</a>