Foros del Web » Creando para Internet » CSS »

¡El "padding" me ignora!

Estas en el tema de ¡El "padding" me ignora! en el foro de CSS en Foros del Web. ¡¡Hola!! Tengo un diseño de una web a dos columnas tal que así: Código HTML: #izquierda { float:left; width:200px; } #derecha { padding-left:10px; } Mi ...
  #1 (permalink)  
Antiguo 17/08/2009, 08:48
 
Fecha de Ingreso: junio-2008
Ubicación: secreto
Mensajes: 65
Antigüedad: 9 años, 6 meses
Puntos: 2
Exclamación ¡El "padding" me ignora!

¡¡Hola!!

Tengo un diseño de una web a dos columnas tal que así:
Código HTML:
#izquierda
{
 float:left;
 width:200px;
}

#derecha
{ 
 padding-left:10px;
}
Mi problema es que la columna derecha no respeta la propiedad "padding" y siempre se queda el contenido pegado a la parte izquierda de ese div.

¿¿Qué estoy haciendo mal??

¡Muchas gracias!
__________________
UsuarioSecreto
unblogsecreto.blogspot.com
  #2 (permalink)  
Antiguo 17/08/2009, 08:52
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: ¡El "padding" me ignora!

En vez de padding prueba con margin
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 17/08/2009, 08:54
 
Fecha de Ingreso: junio-2008
Ubicación: secreto
Mensajes: 65
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: ¡El "padding" me ignora!

He probado con los dos... y no hay manera... no lo entiendo...en cualquier caso... no quiero que los div se separen...

GRacias!
__________________
UsuarioSecreto
unblogsecreto.blogspot.com
  #4 (permalink)  
Antiguo 17/08/2009, 09:01
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: ¡El "padding" me ignora!

Tendrias que colocar mas codigo o un link para poder visualizar la pagina entonces y ver el codigo fuente
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #5 (permalink)  
Antiguo 17/08/2009, 09:12
 
Fecha de Ingreso: junio-2008
Ubicación: secreto
Mensajes: 65
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: ¡El "padding" me ignora!

Mira este es mi CSS:
#contenedor
{
margin-left: 330px;
margin-right: 330px;
background-color:red;
}

#izquierda
{
float:left;
width:230px;
background-color:orange;
border-right: 2px solid #ffffff;
}

#derecha
{
padding-left:6px;
background-color:purple;
}

Aquí tengo una imagen la de web: http://img31.imageshack.us/img31/1598/dibujoydc.jpg

Mi objetivo es que las imágenes de la columna derecha tengan un padding y no queden tan pegadas a ese borde blanco chiquitito (que pertenece a la columna de la izquierda)

¡Mcuhas gracias por tu ayuda!
__________________
UsuarioSecreto
unblogsecreto.blogspot.com
  #6 (permalink)  
Antiguo 17/08/2009, 09:21
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: ¡El "padding" me ignora!

Una cosa más podrias escribir el html tambien
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #7 (permalink)  
Antiguo 17/08/2009, 09:24
 
Fecha de Ingreso: junio-2008
Ubicación: secreto
Mensajes: 65
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: ¡El "padding" me ignora!

Por supuesto!

<body>
<div id="contenedor">

<div id="menu"></div>

<div id="imagen_principal">
<p align="center"><img src="images/titulo.jpg"> </p>
</div>

<div id="izquierda">
<div id="item_izquierda">
<img src="images/cara.jpg">
</div>

<div id="izquierda_vacio"></div>
<div id="izquierda_vacio"></div>
<div id="izquierda_vacio"></div>
<div id="izquierda_vacio"></div>
<div id="izquierda_vacio"></div>

</div>

<div id="derecha">

<div id="item_derecha">
<img src="images/web.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor

incidunt ut labore et dolore magna aliqua.
</div>

<div id="item_derecha">
<img src="images/photos.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor

incidunt ut labore et dolore magna aliqua.
</div>

</div>


<div id="clear" style="clear:both">

</div>

</body>
__________________
UsuarioSecreto
unblogsecreto.blogspot.com
  #8 (permalink)  
Antiguo 17/08/2009, 09:51
 
Fecha de Ingreso: mayo-2008
Mensajes: 489
Antigüedad: 9 años, 6 meses
Puntos: 8
Respuesta: ¡El "padding" me ignora!

Hola Usuario desconocido, prueba no utilizar id para anclar el css y mejor utiliza un class.

Suerte.
  #9 (permalink)  
Antiguo 17/08/2009, 10:17
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: ¡El "padding" me ignora!

Copialo y pegalo a un html nuevo y verifica lo que hice

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. *{margin: 0; padding: 0; border: 0; position:relative:}
  3. html, body{background-color: #fff;}
  4.  
  5. #contenedor{
  6.     width: 700px;
  7.     margin: 0 auto;
  8. }
  9.  
  10. #izquierda{
  11.     float:left;
  12.     /*Le restas los 2px del borde*/
  13.     width: 198px;
  14.     background-color:orange;
  15. }
  16.  
  17. #derecha{
  18.     float: right;
  19.     width: 490px;
  20.     background-color:purple;
  21. }
  22. </head>
  23. <div id="contenedor">
  24.     <div id="derecha">
  25.         <br /><br /><br />
  26.         derecha
  27.     </div>
  28.     <div id="izquierda">
  29.         izquerda
  30.         <br /><br /><br /><br />
  31.     </div>
  32.     <div id="clear" style="clear:both"></div>
  33. </div>
  34.  
  35. </body>
  36. </html>

Para que funcione la centralización necesitas dejar el doctype y el margin: 0 auto;
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #10 (permalink)  
Antiguo 17/08/2009, 12:53
 
Fecha de Ingreso: junio-2008
Ubicación: secreto
Mensajes: 65
Antigüedad: 9 años, 6 meses
Puntos: 2
De acuerdo Respuesta: ¡El "padding" me ignora!

¡Hola!

He probado tu código y he cambiado el contenedor de esto:
Código:
#contenedor
{
 margin-left: 330px;
 margin-right: 330px;
}
a esto:
Código:
#contenedor
{
 width:600px;
 margin:0 auto;
}
y los div "izquierda" y "derecha" les he puesto la propiedad "float:left" y "float:right" respectivamente...

Me funciona a la perfección, ¡MUCHAS GRACIAS! me has ahorrado un infarto cerebral.. xD xD

Lo que me queda ahora... es entenderlo...

No se que diferencia hay en decir al contendor un "margin:auto" a como lo tenia yo, que le daba una cantidad... y e que puede afectar al padding que yo comentaba...

Y por otro lado... El float:right para la columna de la derecha, nunca lo he usado porque al de la izquierda siempre le decía float:left... ¿debe de hacerse así?

¡De nuevo muchas gracias por la ayuda!
__________________
UsuarioSecreto
unblogsecreto.blogspot.com
  #11 (permalink)  
Antiguo 17/08/2009, 13:01
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: ¡El "padding" me ignora!

Ya estabas parece que apunto de una combulción con tanta emoción

El margin: 0 auto con logicamente declarando el doctype arriba en el html logra que se centralice la paginaweb.

Para lo segundo declarar el float: right yo siempre lo he hecho. No sé, si no se deba (creo que debes declararlo para evitar errores, algún experto en el tema te indicara que es lo que se debe hacer). Pero mientras tanto verifica en internet si hay alguna información que te diga lo que debes hacer. Si encuentras algo lo escribes aqui para tambien aprender . Bueno me dejas saber.

PD: Tambien se me olvido quitar lo de /*Le restas los 2px del borde*/ Es que tu codigo tenia un borde a la derecha de 2px y yo lo habia dejado pero al modificar quite la parte que tu hiciste y se me olvido aumentar los 2px al width y quitar el comentario
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
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 16:07.