Foros del Web » Creando para Internet » CSS »

Problemas con Padding

Estas en el tema de Problemas con Padding en el foro de CSS en Foros del Web. Ok. Tengo este código: Código PHP: < html > < head > < title > Maquetando CSS </ title > < link href = "style.css"  rel = ...
  #1 (permalink)  
Antiguo 20/11/2010, 12:37
Avatar de bandolera  
Fecha de Ingreso: abril-2009
Mensajes: 613
Antigüedad: 14 años, 11 meses
Puntos: 7
Pregunta Problemas con Padding

Ok.
Tengo este código:
Código PHP:
<html>
<
head>
<
title>Maquetando CSS</title>
<
link href="style.css" rel="stylesheet" type="text/css" />
</
head>

<
body>
<
div id="header">CABECERA</div>

<
div id="wrapper">
    <
div id="main">
        <
div id="column1">
AQUI VAN LOS MENUS
La prueba que se quiere hacer es que el texto no sobrepase el ancho de la columna
se supone que debería truncarse o simplemente quedar debajo  automáticamentey si eso no funciona significa que algo no está bien.
        </
div>
        <
div id="column2">
AQUI EL CUERPO
        
</div>
    </
div>
</
div>
<
div id="footer">
 
FOOTER
</div>
</
body>
</
html
El CSS:
Código PHP:
body {
    
font-familyArialHelveticasans-serif;
    
background-color#FFFFF;
    
color#000;
    
margin:0;
    
padding:0;
    
border:0
}
#header {
    
width:100%;
    
background-color:#FFCC33;
}

#wrapper {
    
width:100%;
    
height:auto;
    
margin:auto;
}

#main {
    
width:100%;
    
overflow:hidden;
    
height:auto;
}
#column1 {
    
width:20%;
    
background-color:#5B7444;
    
float:left;
}
#column2 {
    
width:80%;
    
background-color:#47697E;
    
float:left;
}

#footer {
    
width:100%;
    
background-color:#FCF1D1;

El problema que tengo es que quiero tener márgenes para el contenido en Header, columna1, columna2 y el footer. Pero al poner padding 5px 5px 5px 5px se mueven las columnas.
Cómo soluciono este problema?
  #2 (permalink)  
Antiguo 20/11/2010, 16:11
Avatar de luckystrikede11  
Fecha de Ingreso: octubre-2009
Ubicación: Concepcion, Chile
Mensajes: 240
Antigüedad: 14 años, 5 meses
Puntos: 17
Respuesta: Problemas con Padding

creo que manejando las columnas y el wrapper con anchos fijos te resultaría
__________________
www.jcabezas.net
  #3 (permalink)  
Antiguo 20/11/2010, 16:40
Avatar de bandolera  
Fecha de Ingreso: abril-2009
Mensajes: 613
Antigüedad: 14 años, 11 meses
Puntos: 7
Respuesta: Problemas con Padding

Cita:
Iniciado por luckystrikede11 Ver Mensaje
creo que manejando las columnas y el wrapper con anchos fijos te resultaría
Pero se supone que deben ajustarse a cualquier ancho de pantalla, por eso lo hice así.
  #4 (permalink)  
Antiguo 21/11/2010, 04:15
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Problemas con Padding

Hola:

Cita:
Iniciado por bandolera Ver Mensaje
El problema que tengo es que quiero tener márgenes para el contenido en Header, columna1, columna2 y el footer. Pero al poner padding 5px 5px 5px 5px se mueven las columnas.
Tienes que tener en cuenta que si el ancho a un div es:

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

La forma de solucionarlo es reduciendo un poco el width de la caja.

Para que lo entiendas un poco mejor léete este artículo.

Saludos.

  #5 (permalink)  
Antiguo 27/11/2010, 07:33
Avatar de bandolera  
Fecha de Ingreso: abril-2009
Mensajes: 613
Antigüedad: 14 años, 11 meses
Puntos: 7
Pregunta Respuesta: Problemas con Padding

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:



Tienes que tener en cuenta que si el ancho a un div es:

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right

La forma de solucionarlo es reduciendo un poco el width de la caja.

Para que lo entiendas un poco mejor léete este artículo.

Saludos.

Bueno, ya distribuí mejor mis columnas, pero no encuentro la solución a esto:
¿Cómo puedo ponerle una línea entre la columna1 y la columna2 y que siga siendo fluido?
Pues si pongo un padding 1px en el lado derecho de la columna1 el porcentaje cambia. Cómo soluciono esto??

Etiquetas: padding
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 03:25.