Foros del Web » Creando para Internet » CSS »

Como hacer enlace que ocupe todo el contenedor

Estas en el tema de Como hacer enlace que ocupe todo el contenedor en el foro de CSS en Foros del Web. Hola vereis Tengo un menu en una misma linea mas o menos como veis abajo: Empresa > Utiles > Organizacion El problema que tengo es ...
  #1 (permalink)  
Antiguo 10/06/2009, 07:42
 
Fecha de Ingreso: enero-2009
Mensajes: 55
Antigüedad: 8 años, 11 meses
Puntos: 0
Como hacer enlace que ocupe todo el contenedor

Hola vereis

Tengo un menu en una misma linea mas o menos como veis abajo:

Empresa > Utiles > Organizacion

El problema que tengo es que a los usuarios se les hace complicado.......clicar, ya que tienen que acertar con el texto del link, para solucionarlo he localizado por ahi alguna idea, utilizando una imagen de fondo y poniendo el enlace en bloque:

navenlace a {background-image:url(nav-fondo2.gif);
color:#666666;
display:block;
text-decoration:none;
width:100%;}

¿cómo hacer para que los enlaces ocupen todo el espacio de la celda o capa donde están situados? O dicho de otra forma: ¿cómo hacer para que el enlace se muestre con todo el espacio disponible dentro del contenedor en el que está? Pero sin cambiarle el display a block...

Un saludo
  #2 (permalink)  
Antiguo 10/06/2009, 07:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como hacer enlace que ocupe todo el contenedor

¿Cómo tienes hecho el menú? ¿los enlaces están dentro de una lista (ul/li)? o ¿"andan sueltos"?
Al código que has puesto, añade un tamaño a los enlaces (ancho y alto) y así aumentas la superficie sensible.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 10/06/2009, 07:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como hacer enlace que ocupe todo el contenedor

Cita:
Iniciado por albertoroales Ver Mensaje
¿cómo hacer para que el enlace se muestre con todo el espacio disponible dentro del contenedor en el que está? Pero sin cambiarle el display a block...
¿Por alguna razón especial sin usar display blok? Con padding, pero ocupará simplemente más que el texto (lo que tú queiras), no exactamente toda su caja.
  #4 (permalink)  
Antiguo 10/06/2009, 08:42
 
Fecha de Ingreso: enero-2008
Mensajes: 614
Antigüedad: 9 años, 11 meses
Puntos: 57
Respuesta: Como hacer enlace que ocupe todo el contenedor

Cita:
Iniciado por albertoroales Ver Mensaje
¿cómo hacer para que los enlaces ocupen todo el espacio de la celda o capa donde están situados? O dicho de otra forma: ¿cómo hacer para que el enlace se muestre con todo el espacio disponible dentro del contenedor en el que está? Pero sin cambiarle el display a block...
El display:block ya lo tienes, te refieres a que no hay que quitarlo?

Para que el link ocupe todo el contenedor donde esta, se debe utilizar display:block
Código:
<div style="width:200px;border:1px solid black;">
<a href="#" style="display:block">Link</a>
</div>
Si quitas display:block el link unicamente "funcionara" cuando el raton este por encima del texto
  #5 (permalink)  
Antiguo 10/06/2009, 17:43
 
Fecha de Ingreso: enero-2009
Mensajes: 55
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Como hacer enlace que ocupe todo el contenedor

Hola este es el codigo que tengo:

<div id="menuseccion">
<a href="nav.html">Nav</a>
<b>></b>
<a href="made.html">Made</a>
<b>></b>
<a href="agro.html">Agro</a>
<b>></b>
<a href="aero.html">Aero</a>
</div>

Estilo:

#menuseccion{height:19px;width:433px;background:#7 F8BA1;margin:0 0 0 310px;}
#menuseccion a{font-size:7pt;text-decoration:none; color:#2E3852;margin-left:13px;}

Por lo que he estado mirando voy a tener que hacer un enlace con una imagen dentro, aunque creo que es un poco engorroso..es lo que ahi.

Alguna sugerencia...
  #6 (permalink)  
Antiguo 10/06/2009, 17:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como hacer enlace que ocupe todo el contenedor

Con tu código, añadiendo un borde para que veas la zona sensible y un pequeño cambio del color de fondo para el :hover.
En mi primera respuesta, creo que entendí al reves lo del block. Disculpas.
Ahora sólo tienes que cambiar alguna cosilla para adaptarlo a tus necesidades.
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>Caja Fija</title>
  4. <style type="text/css">
  5. * {margin:0; padding: 0; position: relative;}
  6. #menuseccion{height:19px;width:433px;background:#7 F8BA1;margin:0 0 0 310px;}
  7. #menuseccion a{font-size:7pt;text-decoration:none; color:#2E3852;margin-left:13px;display:inline-block; padding:10px; border:1px solid #000;}
  8. #menuseccion a:hover {background: #cdcdcd;}
  9. </head>
  10. <div id="menuseccion">
  11. <a href="nav.html">Nav</a>
  12. <b>></b>
  13. <a href="made.html">Made</a>
  14. <b>></b>
  15. <a href="agro.html">Agro</a>
  16. <b>></b>
  17. <a href="aero.html">Aero</a>
  18. </div>
  19. </div>
  20. </html>
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 11/06/2009 a las 05:49 Razón: se coló un doble <<
  #7 (permalink)  
Antiguo 11/06/2009, 03:17
 
Fecha de Ingreso: enero-2009
Mensajes: 55
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Como hacer enlace que ocupe todo el contenedor

OK¡¡¡ Perfecto solucionado, por curiosidad la clave esta en "display:inline-block" que hace concretamente??

Esto ejemplo es muy practico ya que en la web que he realizado, algunos susuarios se quejaban que en los menus tenian que acertar en el propio texto para poder clicar y esta solucion de kseso? es perfecta ya que te ahorra el incluir una imagen como link.

Gracias¡
  #8 (permalink)  
Antiguo 11/06/2009, 03:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como hacer enlace que ocupe todo el contenedor

Como te dije en mi primer mensaje, la clave no está en el inline-block (que lo puedes quitar y verás que no pasa nada), sino en el padding:10px.
  #9 (permalink)  
Antiguo 11/06/2009, 06:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como hacer enlace que ocupe todo el contenedor

Cita:
Iniciado por Mikmoro Ver Mensaje
Como te dije en mi primer mensaje, la clave no está en el inline-block (que lo puedes quitar y verás que no pasa nada), sino en el padding:10px.
Efectivamente, Mik. La clave está en el padding para lograr lo que Alberto quería. Pero me quise ahorrar la siguiente consulta: "es que lo que tengo a continuación se monta en los enlaces".

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 11/06/2009, 06:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como hacer enlace que ocupe todo el contenedor

Oh, sí, sí, no te respondía realmente a ti, claro, sino a:
Cita:
Iniciado por albertoroales Ver Mensaje
OK¡¡¡ Perfecto solucionado, por curiosidad la clave esta en "display:inline-block" que hace concretamente??
Y como ves, no te has ahorrado la siguiente
  #11 (permalink)  
Antiguo 11/06/2009, 06:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como hacer enlace que ocupe todo el contenedor

Nunca se me dio bien ni hacer profecías ni prevenciones, y menos las adivinaciones
Buen día, Mik
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 11/06/2009, 06:27
 
Fecha de Ingreso: enero-2009
Mensajes: 55
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Como hacer enlace que ocupe todo el contenedor

Haber si sabeis como se puede solucionar esto, en firefox funciona OK pero en IE me paso lo siguinete,, si no tengo ningun elemento o capa debajo funciona perfectamente, el problema es si tiene algo debajo, en este caso el titulo de la seccion.

he provado de todo pero no atiende a razon el maldito IE
index.html
<div id="menuseccion">
<a href="hist.html">Hist</a>
<b>></b>
<a href="equip.html">Equip</a>
<b>></b>
<a href="met.html">Met</a>
<b>></b>
<a href="res.html">Res</a>
</div>
<div id="tituloempresa">
<h1>EMPRESA</h1>
</div>

Estilos:

#tituloempresa {text-align:right; color:#7F8BA1;font-size:42pt;line-height:31pt;}

#tituloempresa h1{float:right;}

#menuseccion{height:19px;width:433px;background:#7 F8BA1;margin:0 0 0 310px;}

#menuseccion a{font-size:7pt;text-decoration:none; color:#2E3852;margin-left:2px;;padding-bottom:30px;padding-left:3px;padding-top:3px;display:inline-block;padding-right:3px}

#menuseccion b{font-size:7pt;text-decoration:none; color:#2E3852;margin-left:2px;padding-bottom:30px;padding-left:3px;padding-top:3px;display:inline-block;}

#menuseccion a:hover{font-size:7pt;text-decoration:underline;color:white;}

Haber si veis algo que yo no veo, por que he intentado de todo..
Un saludo
  #13 (permalink)  
Antiguo 11/06/2009, 06:33
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Como hacer enlace que ocupe todo el contenedor

Y no has probado a hacer un menú con <ul> y <li>?
__________________
No diseñes usando tablas.
  #14 (permalink)  
Antiguo 11/06/2009, 06:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como hacer enlace que ocupe todo el contenedor

Cita:
Iniciado por albertoroales Ver Mensaje
Haber si sabeis como se puede solucionar esto, en firefox funciona OK pero en IE me paso lo siguinete,, si no tengo ningun elemento o capa debajo funciona perfectamente, el problema es si tiene algo debajo, en este caso el titulo de la seccion.
Cita:
Iniciado por kseso? Ver Mensaje
Nunca se me dio bien ni hacer profecías ni prevenciones, y menos las adivinaciones
Buen día, Mik
¿Qué es "esto"?

Y recuerda. Cada consulta en su tema.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 11/06/2009, 06:57
 
Fecha de Ingreso: enero-2009
Mensajes: 55
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Como hacer enlace que ocupe todo el contenedor

Disculpa kesso? por si mi pregunta no ha sido adecuada, pero llevo con esto mas de tres horas y uno ya pierde un poco el norte de hacer prueba error...

Mis disculpas.
  #16 (permalink)  
Antiguo 11/06/2009, 07:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como hacer enlace que ocupe todo el contenedor

No, Alberto, no es por mi, sino por ti.
La consulta original de este hilo ya se ha solucionado, y posiblemente muchos usuarios ya no vean los nuevos comentarios pensando que son más o menos offtopic. Y te quedarás sin su ayuda.
Sólo es por eso.

Lo que si es cierto es mi pregunta: "¿Qué es "esto"?". Porque no se a qué te refieres.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #17 (permalink)  
Antiguo 11/06/2009, 07:28
 
Fecha de Ingreso: enero-2009
Mensajes: 55
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Como hacer enlace que ocupe todo el contenedor

OK.

Lo que me esta pasando es que tengo mi menu y lo que he hecho es darle mucho padding-bottom, (el por que dejemoslo de momento) el caso es que, debajo tengo otro elemento concretamente un titulo, lo que me pasa es que si me acercocon el puntero por debajo al link sin tener debajo dicho titulo cuando el puntero entra dentro del area delimitada por dicho link ya coje el foco a distancia, siembargo si dicho link esta encima del titulo, solo coje el foco justo cuando estoy encima del testo del link ya que me elimina la zona que le tengo habilitada con el padding.

Es un poco dificil de explicar asi, si quieres te envio el codigo..si no te es molestia y lo ves, ya que la unica forma que se me ha ocurrido de solucionarlo es poniendo una imagen de fondo con dicho titulo y asi ya no ahi problema, pero es una chapuza

Perdona pero ya ando algo desperado, ya que en firefox me funciona bien pero el IE me desquicia¡¡ XDD
  #18 (permalink)  
Antiguo 11/06/2009, 07:36
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como hacer enlace que ocupe todo el contenedor

Alberto, no suele ser bien visto el tráfico por mp de la información (esto es un foro público) y personalmente no respondo las consultas que me llegan por privados.

Publica la parte del código aquí, envolviéndola con la etiqueta:
Y mientras tanto, para ver hasta dónde llega cada elemento, puedes colocar provisionalmente un borde de 1px a cada elemento. Así verás lo que ocupa cada uno y las superposiciones de ellos.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #19 (permalink)  
Antiguo 11/06/2009, 07:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como hacer enlace que ocupe todo el contenedor

Cita:
Iniciado por albertoroales Ver Mensaje
Lo que me esta pasando es que tengo mi menu y lo que he hecho es darle mucho padding-bottom, (el por que dejemoslo de momento) el caso es que, debajo tengo otro elemento concretamente un titulo, lo que me pasa es que si me acercocon el puntero por debajo al link sin tener debajo dicho titulo cuando el puntero entra dentro del area delimitada por dicho link ya coje el foco a distancia, siembargo si dicho link esta encima del titulo, solo coje el foco justo cuando estoy encima del testo del link ya que me elimina la zona que le tengo habilitada con el padding.
O no entiendo, o no pillo el problema, porque parece simplísimo: la caja del título queda por encima del padding del elemento del menú, por eso no parece habilitado hasta que sales del título.

Sí, como te dicen pon un enlace, porque parece algo extraño, máxime empezando mal la consulta por un: "(el por que dejemoslo de momento)", ya que podría ser fundamental, claro.
  #20 (permalink)  
Antiguo 12/06/2009, 04:16
 
Fecha de Ingreso: enero-2009
Mensajes: 55
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Como hacer enlace que ocupe todo el contenedor

Bueno antes de nada , pido mis disculpas a Mikmoro y a kseso? por mis pesimas explicaciones, del problema que estava teniendo, en resumidas cuentas ya lo he solucionado, siguiendo el comentario de Milkmoro:

"la caja del título queda por encima del padding del elemento del menú, por eso no parece habilitado hasta que sales del título."

Llevo solo unos meses en esto del CSS, y ando algo verde, me imagino que con el paso del tiempo ire madurando mas mi experiencia con esto del diseño web y sus quebraderos de cabeza entre IE y Mozilla XDD, a mayores tendre que perder menos los nervios XDDD.

De todas formas muchas gracias por la ayuda prestada¡

Un saludo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:34.