Foros del web, para los que viven de bits

salbatore · 11-may-2008, 16:19

Hola, foreros:

No se cual es la razon pero el top margin que tiene mi <a> desaparece sin motivo aparente, por lo menos para mi, jeje.

Mirar este es mi codigo:

Código HTML:

<div style="margin: 0pt auto; text-align: center; height:31px; background:#00FFFF">
<ul>
  <li style="display: inline;"><a style="padding-top:8px; padding-left:29px; padding-right:29px; padding-bottom:8px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; background:#009933" href="direccion.php">Link</a></li>
  </ul>
</div>

¿Sabeis cual es la razon?

cleft · 11-may-2008, 16:51

En si, no es que "desaparezca". Sencillamente el elemento <a> actua de la manera correcta (y aqui va la razon) puesto que predeterminadamente es un elemento de tipo "inline".

Dichos elementos no pueden contener relleno (padding) superior e inferior. Eso lo hacen los elementos de tipo block.

Recomendaciones:
1. Pasa tu elemento <a> a tipo block "display: block" si lo que deseas es darle relleno a los 4 lados.
2. Procura utilizar shorthands para que tu codigo sea mas liviano.

Ej. La siguiente linea:
padding-top:8px; padding-left:29px; padding-right:29px; padding-bottom:8px

Es lo mismo que escribir:
padding: 8px 29px;

Mikmoro · 11-may-2008, 17:05

Cita:

Iniciado por cleft

Dichos elementos no pueden contener relleno (padding) superior e inferior. Eso lo hacen los elementos de tipo block.

Creo que sí pueden tener padding, lo que no pueden tener es margin, ¿no?

Mikel.

salbatore · 11-may-2008, 17:46

Hola de nuevo...

He probado lo que me dices, ahora si se ve, pero no veo los elementos en linea que es lo que yo deseaba, ya que tengo mas de un elemento en la lista.

¿Alguna solucion?

Mikmoro · 11-may-2008, 17:50

Cita:

Iniciado por salbatore

Hola, foreros:

No se cual es la razon pero el top margin que tiene mi <a> desaparece sin motivo aparente, por lo menos para mi, jeje.

¿Sabeis cual es la razon?

¿Dónde tienes un top margin, como dices? No lo veo

Mikel.

cleft · 11-may-2008, 17:50

Ups. Hubo un error de escritura. (La pregunta de el es clara, sobre el margin)

Aunque "margin" si pueden tener, pero laterales siendo inline.

Si lo que deseas es que el <a> no toque los bordes de tu <li> o <div> aplicale relleno a dichos elementos.

Mikmoro · 11-may-2008, 17:54

Cita:

Iniciado por cleft

Aunque "margin" si pueden tener, pero laterales siendo inline.

Sí. Me refería a superior e inferior que citas en la frase "Dichos elementos no pueden contener relleno (padding) superior e inferior"

Y aunque la pregunta parezca clara, para mi habla de margin, pone padding y que el margin desaparece. Yo no lo entiendo, disculpad, porque si es padding no desaparece, y margin no hay.

Mikel.

salbatore · 11-may-2008, 18:07

Hola de nuevo...

Soy un garrulo, jeje, me equivoque en mi primer mensaje, tenia que haber puesto top padding por top margin...

No se que me ocurrio... sorry...

Entonces... ¿sabeis cual es mi problema?

Mikmoro · 11-may-2008, 18:10

¿Y entonces cómo que desaparece el padding-top? Con tu código no lo veo desaparecer. Ya dirás.

Mikel.

cleft · 11-may-2008, 18:17

salbatore,
muestranos el codigo que tienes, ya que en uno de tus mensajes dices que hay mas de un elemento en la lista.

salbatore · 11-may-2008, 18:36

Hola de nuevo...

He comprobado haber si estaba equivocado, y para comprobarlo lo he probado en dos servidores diferentes, uno de ellos gratuito (tripod), y me he dado cuenta que el css se ve diferente, no me lo puedo creer...

¿Es posible que el mismo css se vea diferente?

PD: saber que en firefox se ve bien... pero en IE no...

salbatore · 11-may-2008, 18:44

Hola de nuevo...

Me he dado cuenta de que si se quita la altura de 31px al div que contiene la lista funciona perfectamente, pero no se por que se ve 1 pixel de espacio entre el inicio del div y su contenido...

¿Alguna solucion?

salbatore · 14-may-2008, 18:35

Hola, foreros:

Lo he vuelto hacer de nuevo todo, pues no sabia el error
Mirar el link: http://usuarios.lycos.es/salbatore/ . Si os fijais el menu tiene los <a> con un fondo amarillo y un padding superior e inferior de 10px. El problema es que esta superpuesto al color morado, es decir el div llamado title. Lo que busco ahora es que los botones esten dentro del div de color verde, ya lo estan, pero falta el padding-top y padding-bottom tambien lo esten, es decir, no se salgan del div de color verde. ¿Una ultima ayudita?

Mirar el html:

Código HTML:

<div id="common_header">
		<div id="common_header_login">
			login
		</div>
		
		<div id="common_header_title">
		title
		</div>
		
		<div id="common_header_menu">
			<ul>
		    <li><a href="index.php">index</a></li>
		    <li><a href="view.php">view</a></li>
		    <li><a href="insert.php">insert</a></li>
		    <li><a href="register.php">register</a></li>
			</ul>
	    </div>
	</div>

Y el css:

Código HTML:

body {margin:0; text-align:center}

	#common_header {}
	
		#common_header_login {background:#00FF99; width:700px; margin:0 auto 0 auto;}
		
		#common_header_title {background:#CC3399; height:150px; width:750px; margin:0 auto 0 auto;}
		
		#common_header_menu { background:#00FF00; text-align:center}
			#common_header_menu ul {list-style:none; display:inline;}
				#common_header_menu li {display:inline;}
					#common_header_menu a {background:#FFFF00; padding:10px 30px; position:relative; display:inline;}

Una solucion?

Mikmoro · 15-may-2008, 01:15

Seguramente lo puedes solucionar dando un alto al contenedor del menú y ajustando dentro el menú con line-height:

#common_header_menu { background:#00FF00; text-align:center; height:38px;}
#common_header_menu ul {list-style:none; display:inline; line-height:40px;}

Mikel.

salbatore · 15-may-2008, 10:09

Hola, Mikel:

Ya he probado eso, y logicamente funciona. Pero buscaba algo mas elegante, es decir, no me gusta que se deba indicar la altura a dos objetos, pues si te fijas la altura que tiene los <a> esta producida por padding y, por lo tanto, si el usuario aumenta el tipo de letra la altura que le hemos dado al contenedor que los contiene sera demasiado pequeña...

¿Alguna otra forma?

PD: no entiendo como puede ser tan complicado diseñar con css, con lo rapido que son las tablas... jeje.

Mikmoro · 15-may-2008, 10:15

Cita:

Iniciado por salbatore

si el usuario aumenta el tipo de letra la altura que le hemos dado al contenedor que los contiene sera demasiado pequeña...

En este caso el remedio más usual es darle el tamaño en "em" de manera que si se aumenta o reduce el tamaño de letra, el contendor también lo hace.

Mikel.

Mikmoro · 15-may-2008, 10:18

O incluso así:

#common_header_menu { text-align:center}
#common_header_menu ul {list-style:none; display:block;background:#00FF00; padding:10px 30px;}

Mikel.

salbatore · 15-may-2008, 10:35

Hola de nuevo:

He probado el ultimo codigo que me has dado, Mikel, funciona correctamente, pero lo que busco es no tener que dar dos veces los valores de padding, es decir, no hay alguna forma de que la altura de #common_header_menu sea ajustable al padding de los elementos de su interior.

Como lo hacian las tablas por ejemplo. Es que tener que dar los valores de las cosas dos veces no me parece lo mas correcto, es como un apaño, y apaños no quiero, busco limpieza, jeje.

¿Entiendes?, jeje

Mikmoro · 15-may-2008, 10:42

Es la segunda vez que tratamos este asunto, y sigo sin entender por qué para ti dar la medida a dos selectores te parecen "apaños", o menos "elegante". Te aseguro que no pillo tu concepto del diseño css.

En tu caso, el padding no va a hacer crecer su contenedor. Lo siento pero es así. Quizá alguien encuentre otra solución. Suerte.

Mikel.

salbatore · 15-may-2008, 13:07

Hola de nuevo...

Entonces tendre que resignarme, jeje, y poner dos veces los datos...

Muchisimas gracias por toda la ayuda que me has dado, menuda cantidad de respuestas, jeje...

Gracias...

11-may-2008, 16:51	#2 (permalink)
cleft Fecha de Ingreso: febrero-2008 Mensajes: 62	Re: Top margin desaparece En si, no es que "desaparezca". Sencillamente el elemento <a> actua de la manera correcta (y aqui va la razon) puesto que predeterminadamente es un elemento de tipo "inline". Dichos elementos no pueden contener relleno (padding) superior e inferior. Eso lo hacen los elementos de tipo block. Recomendaciones: 1. Pasa tu elemento <a> a tipo block "display: block" si lo que deseas es darle relleno a los 4 lados. 2. Procura utilizar shorthands para que tu codigo sea mas liviano. Ej. La siguiente linea: padding-top:8px; padding-left:29px; padding-right:29px; padding-bottom:8px Es lo mismo que escribir: padding: 8px 29px;

11-may-2008, 17:05	#3 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.929	Re: Top margin desaparece Cita: Iniciado por cleft Dichos elementos no pueden contener relleno (padding) superior e inferior. Eso lo hacen los elementos de tipo block. Creo que sí pueden tener padding, lo que no pueden tener es margin, ¿no? Mikel.

11-may-2008, 17:46	#4 (permalink)
salbatore Fecha de Ingreso: abril-2007 Mensajes: 538	Re: Top margin desaparece Hola de nuevo... He probado lo que me dices, ahora si se ve, pero no veo los elementos en linea que es lo que yo deseaba, ya que tengo mas de un elemento en la lista. ¿Alguna solucion?

11-may-2008, 17:50	#5 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.929	Re: Top margin desaparece Cita: Iniciado por salbatore Hola, foreros: No se cual es la razon pero el top margin que tiene mi <a> desaparece sin motivo aparente, por lo menos para mi, jeje. ¿Sabeis cual es la razon? ¿Dónde tienes un top margin, como dices? No lo veo Mikel.

11-may-2008, 17:50	#6 (permalink)
cleft Fecha de Ingreso: febrero-2008 Mensajes: 62	Re: Top margin desaparece Ups. Hubo un error de escritura. (La pregunta de el es clara, sobre el margin) Aunque "margin" si pueden tener, pero laterales siendo inline. Si lo que deseas es que el <a> no toque los bordes de tu <li> o <div> aplicale relleno a dichos elementos.

11-may-2008, 17:54	#7 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.929	Re: Top margin desaparece Cita: Iniciado por cleft Aunque "margin" si pueden tener, pero laterales siendo inline. Sí. Me refería a superior e inferior que citas en la frase "Dichos elementos no pueden contener relleno (padding) superior e inferior" Y aunque la pregunta parezca clara, para mi habla de margin, pone padding y que el margin desaparece. Yo no lo entiendo, disculpad, porque si es padding no desaparece, y margin no hay. Mikel.

11-may-2008, 18:07	#8 (permalink)
salbatore Fecha de Ingreso: abril-2007 Mensajes: 538	Re: Top margin desaparece Hola de nuevo... Soy un garrulo, jeje, me equivoque en mi primer mensaje, tenia que haber puesto top padding por top margin... No se que me ocurrio... sorry... Entonces... ¿sabeis cual es mi problema?

11-may-2008, 18:10	#9 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.929	Re: Top margin desaparece ¿Y entonces cómo que desaparece el padding-top? Con tu código no lo veo desaparecer. Ya dirás. Mikel.

11-may-2008, 18:17	#10 (permalink)
cleft Fecha de Ingreso: febrero-2008 Mensajes: 62	Re: Top margin desaparece salbatore, muestranos el codigo que tienes, ya que en uno de tus mensajes dices que hay mas de un elemento en la lista.

11-may-2008, 18:36	#11 (permalink)
salbatore Fecha de Ingreso: abril-2007 Mensajes: 538	Re: Top margin desaparece Hola de nuevo... He comprobado haber si estaba equivocado, y para comprobarlo lo he probado en dos servidores diferentes, uno de ellos gratuito (tripod), y me he dado cuenta que el css se ve diferente, no me lo puedo creer... ¿Es posible que el mismo css se vea diferente? PD: saber que en firefox se ve bien... pero en IE no...

11-may-2008, 18:44	#12 (permalink)
salbatore Fecha de Ingreso: abril-2007 Mensajes: 538	Re: Top margin desaparece Hola de nuevo... Me he dado cuenta de que si se quita la altura de 31px al div que contiene la lista funciona perfectamente, pero no se por que se ve 1 pixel de espacio entre el inicio del div y su contenido... ¿Alguna solucion?

15-may-2008, 01:15	#14 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.929	Re: Top margin desaparece Seguramente lo puedes solucionar dando un alto al contenedor del menú y ajustando dentro el menú con line-height: #common_header_menu { background:#00FF00; text-align:center; height:38px;} #common_header_menu ul {list-style:none; display:inline; line-height:40px;} Mikel.

15-may-2008, 10:09	#15 (permalink)
salbatore Fecha de Ingreso: abril-2007 Mensajes: 538	Re: Top margin desaparece Hola, Mikel: Ya he probado eso, y logicamente funciona. Pero buscaba algo mas elegante, es decir, no me gusta que se deba indicar la altura a dos objetos, pues si te fijas la altura que tiene los <a> esta producida por padding y, por lo tanto, si el usuario aumenta el tipo de letra la altura que le hemos dado al contenedor que los contiene sera demasiado pequeña... ¿Alguna otra forma? PD: no entiendo como puede ser tan complicado diseñar con css, con lo rapido que son las tablas... jeje.

15-may-2008, 10:15	#16 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.929	Re: Top margin desaparece Cita: Iniciado por salbatore si el usuario aumenta el tipo de letra la altura que le hemos dado al contenedor que los contiene sera demasiado pequeña... En este caso el remedio más usual es darle el tamaño en "em" de manera que si se aumenta o reduce el tamaño de letra, el contendor también lo hace. Mikel.

15-may-2008, 10:18	#17 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.929	Re: Top margin desaparece O incluso así: #common_header_menu { text-align:center} #common_header_menu ul {list-style:none; display:block;background:#00FF00; padding:10px 30px;} Mikel.

15-may-2008, 10:35	#18 (permalink)
salbatore Fecha de Ingreso: abril-2007 Mensajes: 538	Re: Top margin desaparece Hola de nuevo: He probado el ultimo codigo que me has dado, Mikel, funciona correctamente, pero lo que busco es no tener que dar dos veces los valores de padding, es decir, no hay alguna forma de que la altura de #common_header_menu sea ajustable al padding de los elementos de su interior. Como lo hacian las tablas por ejemplo. Es que tener que dar los valores de las cosas dos veces no me parece lo mas correcto, es como un apaño, y apaños no quiero, busco limpieza, jeje. ¿Entiendes?, jeje

15-may-2008, 10:42	#19 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 2.929	Re: Top margin desaparece Es la segunda vez que tratamos este asunto, y sigo sin entender por qué para ti dar la medida a dos selectores te parecen "apaños", o menos "elegante". Te aseguro que no pillo tu concepto del diseño css. En tu caso, el padding no va a hacer crecer su contenedor. Lo siento pero es así. Quizá alguien encuentre otra solución. Suerte. Mikel.

15-may-2008, 13:07	#20 (permalink)
salbatore Fecha de Ingreso: abril-2007 Mensajes: 538	Re: Top margin desaparece Hola de nuevo... Entonces tendre que resignarme, jeje, y poner dos veces los datos... Muchisimas gracias por toda la ayuda que me has dado, menuda cantidad de respuestas, jeje... Gracias...

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado