Foros del Web » Creando para Internet » CSS »

Top margin desaparece

Estas en el tema de Top margin desaparece en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 11/05/2008, 17:19
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Top margin desaparece

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?
  #2 (permalink)  
Antiguo 11/05/2008, 17:51
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
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;
  #3 (permalink)  
Antiguo 11/05/2008, 18:05
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
Re: Top margin desaparece

Cita:
Iniciado por cleft Ver Mensaje
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.
  #4 (permalink)  
Antiguo 11/05/2008, 18:46
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
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?
  #5 (permalink)  
Antiguo 11/05/2008, 18:50
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
Re: Top margin desaparece

Cita:
Iniciado por salbatore Ver Mensaje
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.
  #6 (permalink)  
Antiguo 11/05/2008, 18:50
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
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.
  #7 (permalink)  
Antiguo 11/05/2008, 18:54
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
Re: Top margin desaparece

Cita:
Iniciado por cleft Ver Mensaje
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.
  #8 (permalink)  
Antiguo 11/05/2008, 19:07
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
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?
  #9 (permalink)  
Antiguo 11/05/2008, 19:10
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
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.
  #10 (permalink)  
Antiguo 11/05/2008, 19:17
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Antigüedad: 9 años, 9 meses
Puntos: 1
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 (permalink)  
Antiguo 11/05/2008, 19:36
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
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...
  #12 (permalink)  
Antiguo 11/05/2008, 19:44
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
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?
  #13 (permalink)  
Antiguo 14/05/2008, 19:35
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Re: Top margin desaparece

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?

Última edición por salbatore; 14/05/2008 a las 19:47
  #14 (permalink)  
Antiguo 15/05/2008, 02:15
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
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 (permalink)  
Antiguo 15/05/2008, 11:09
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
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.
  #16 (permalink)  
Antiguo 15/05/2008, 11:15
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
Re: Top margin desaparece

Cita:
Iniciado por salbatore Ver Mensaje
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.
  #17 (permalink)  
Antiguo 15/05/2008, 11:18
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
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.
  #18 (permalink)  
Antiguo 15/05/2008, 11:35
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
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
  #19 (permalink)  
Antiguo 15/05/2008, 11: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
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.
  #20 (permalink)  
Antiguo 15/05/2008, 14:07
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
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...
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 06:20.