Eliminar franja superior

[miriamgomez]

Hola:

Os cuento mi problema:

Uso el siguiente CSS:

Código CSS:

body {
    background-color:#900;
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    color: #FFF;
    background-image:url(objetos/fondo%20anaranjado.png);
    background-repeat: repeat;
}
#capaMadre { width: 1024px;
                      margin: 0 auto;
                      overflow: hidden ;
           background-color:#000
}
 

Pero me queda un franja superior donde se ve la iamgen de fondo, como hacer para que la capa negra comience justo en el borde superio?

[rigobcastro]

Agregale esto al css del body

Código CSS:

body {
    background-color:#900;
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    color: #FFF;
    background-image:url(objetos/fondo%20anaranjado.png);
    background-repeat: repeat;
        padding : 0;
        margin : 0;
        width: 100%;
}
#capaMadre { width: 1024px;
                      margin: 0 auto;
                      overflow: hidden ;
           background-color:#000
}
 

Te recomiendo que uses un RESET antes de iniciar cualquier inclusión CSS.

RESET = http://meyerweb.com/eric/tools/css/reset/

Saludos!

[miriamgomez]

Muchas gracias, arreglado.

Y ahora quedare como una panfila:

Que es un reset?

[rigobcastro]

Un Reset CSS es una hoja de estilos o CSS que tiene como objetivo reducir inconvenientes de margenes, tamaños de fuentes, lineas por defecto, etc. Todos aquellos problemas que traen las etiquetas HTML por defecto y que a la hora de crear nuestros propios estilos nos generan problemas como el que tuviste.

En resumen generaliza toda la pagina y la deja lista sin valores por defecto.

Este reset que te pase solo restablece a 0 lineas por defecto de tamaños, margenes externas e internas y lineas de altura en las fuentes. Hay otros que ademas de eso, normalizan todo y ponen colores, efectos y demás para que cuando la página no tenga ningún estilo creado, no se vea tan normal.

Es muy importante porque así nos ahorramos mucho tiempo y podemos partir de 0 para nuestros nuevos estilos.

Haz de cuenta que es una plantilla css que te deja en 0 todos los valores por defecto.

Saludos!

[miriamgomez]

Gracias por la informacion¡¡¡


una duda que me ha surguido:

Al ponerle margin y paddind 0 en el body anula el resto de los padding de las distintas capas?

un saludo

[rigobcastro]

Iniciado por miriamgomez

Gracias por la informacion¡¡¡


una duda que me ha surguido:

Al ponerle margin y paddind 0 en el body anula el resto de los padding de las distintas capas?

un saludo

No, no lo hace y recuerda que las hojas de estilo CSS se leen en cascada como su acronimo lo indica, asi que va desde la primera linea hasta la ultima. Un caso particular es que en cada linea lee de izquierda a derecha. Pero en fin, un ejemplo claro.

Código CSS:

body{ padding:0; margin:0 }
.clase{ padding:10px; margin:10px; }
 

Se tendría en cuenta el padding y el margin de .clase asi esté dentro del body.

Saludos!

[miriamgomez]

Pues hago algo mal¡¡¡

Quiero separar el texto del borde derecho del div cabecera, y no se donde fallo:

Código CSS:

body {
background-color:#900;
 text-align: center;
 font-family: "Times New Roman", Times, serif;
 font-size: 18px;
 color: #FFF;
 background-image:url(objetos/fondo%20anaranjado.png);
 background-repeat: repeat;
 padding : 0;
 margin : 0;
 width: 100%;
 
}
#capaMadre { width: 1024px;
             margin: 0 auto;
             overflow: hidden ;
    
}
#cabecera {
    width:1024px;
    height: 104px;
    overflow:hidden;
    background-image: url(objetos/cabecera.jpg);
    background-repeat: no-repeat;
    text-align: right;
    padding-right: 350px;
}
 

[rigobcastro]

Lo que pasa es que #cabecera tiene el mismo ancho de su contenedor #capaMadre 1024px pero le estás agregando un padding-right en 350px. Los padding aumentan el ancho de esa capa, ten en cuenta y presente eso. Si quieres definir el ancho usa las matematicas.

ANCHO CAPA MADRE - PADDING CAPA HIJA = ANCHO CAPA HIJA

Asi el width de #contenedor según lo que pones sería 674px.

Pero veo que estás estructurando una página, y si quieres que ese contenedor te vaya hacia la derecha o izquierda tienes que indicarlo con la propiedad float.

ejemplo:

Código CSS:

#capaMadre{ width:1024px; display:block; clear:both; }
#contenedor{ float:right; padding-right; 350px; height: 400px; }
 

Cuando haces esto no hay necesidad de indicar el ancho de las capas hijas. Sin embargo, hay que usar un normalizador de floats para que esto no tenga problemas en algunos navegadores.

No sé que tan avanzado estés en CSS pero si necesitas más ayuda sobre floats y diagramación, acá dentro del foro hay un sub-foro dedicado a todo esto.

Saludos!

[miriamgomez]

Parece que todo va bien, muchas gracias¡¡¡