Como hacer enlace que ocupe todo el contenedor

albertoroales · #1 (**permalink**) 10/06/2009, 06:42

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

kseso? · #2 (**permalink**) 10/06/2009, 06:53

¿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.

Mikmoro · #3 (**permalink**) 10/06/2009, 06:55

Cita:

Iniciado por albertoroales

¿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.

posman · #4 (**permalink**) 10/06/2009, 07:42

Cita:

Iniciado por albertoroales

¿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

albertoroales · #5 (**permalink**) 10/06/2009, 16:43

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...

kseso? · #6 (**permalink**) 10/06/2009, 16:52

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Caja Fija</title>
<style type="text/css">
* {margin:0; padding: 0; position: relative;}
#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;display:inline-block; padding:10px; border:1px solid #000;}
#menuseccion a:hover {background: #cdcdcd;}
</style>
</head>
<body>
<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>
</div>
</html>

Un saludo

albertoroales · #7 (**permalink**) 11/06/2009, 02:17

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¡

Mikmoro · #8 (**permalink**) 11/06/2009, 02:42

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.

kseso? · #9 (**permalink**) 11/06/2009, 05:03

Cita:

Iniciado por Mikmoro

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

Mikmoro · #10 (**permalink**) 11/06/2009, 05:12

Oh, sí, sí, no te respondía realmente a ti, claro, sino a:

Cita:

Iniciado por albertoroales

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

Y como ves, no te has ahorrado la siguiente

kseso? · #11 (**permalink**) 11/06/2009, 05:23

Nunca se me dio bien ni hacer profecías ni prevenciones, y menos las adivinaciones

Buen día, Mik

albertoroales · #12 (**permalink**) 11/06/2009, 05:27

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

hades87 · #13 (**permalink**) 11/06/2009, 05:33

Y no has probado a hacer un menú con <ul> y <li>?

kseso? · #14 (**permalink**) 11/06/2009, 05:36

Cita:

Iniciado por albertoroales

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?

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.

albertoroales · #15 (**permalink**) 11/06/2009, 05:57

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.

kseso? · #16 (**permalink**) 11/06/2009, 06:06

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

albertoroales · #17 (**permalink**) 11/06/2009, 06:28

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

kseso? · #18 (**permalink**) 11/06/2009, 06:36

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

Mikmoro · #19 (**permalink**) 11/06/2009, 06:56

Cita:

Iniciado por albertoroales

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.

albertoroales · #20 (**permalink**) 12/06/2009, 03:16

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