No consigo que una capa ocupe el ancho que quiero

[Algadir]

Hola buenas:

Antes que nada tengo que decir que acabo de iniciarme en esto de las CSS y capas ya que he tirado hasta ahora de tablas. La verdad es que es todo un descubrimiento y le veo muchas ventajas pero no consigo aún hacerme con el tema. Resulta que estoy resideñando una web que estoy haciendo y me apoyé en un código a modo de ejemplo que diseña un modelo como el que hago. Tengo una capa contenedora y dentro tengo la capa "cabecera" simplemente con el logotipo, una cabecera "menusuperior" a modo de barra de navegación con opciones generales, luegos dos capas una a la izquierda con el menú lateral y otra capa a la derecha para el texto en sí. Y por fin la capa que hace de pie de página. Pues bien. A la tabla contenedora le doy 780px de ancho (de momento sigo optimizando la web para 800x600). El caso es que le doy ese mismo ancho a las capas del logotipo, del menú superior y del pie de página y la única que encaja bien con ese ancho es la del menú superior pero no la del logotipo ni la del pie de página. Os dejo los estilos de estas tres capas por si os sirve de algo (igual tiene explicación lógica y estoy ciego):
...
#cabecera {
height : 71px;
width : 780px;
background-color: #FFFFFF;
}
...
#menusuperior {
background-color : #4F5181;
padding : 3px 10px 5px 10px;
border-top : 1px solid #CCCCCC;
border-bottom : 1px solid #CCCCCC;
text-align : right;
width : 780px;
}
...
#piedepagina {
clear : both;
color : #FFFFFF;
text-align : center;
margin : 0px 0px 0px 0px;
padding-bottom : 10px;
background-color: #8B99C6;
width : 780px;
}

Un saludo y gracias.

[Algadir]

Buenas:

He probado la página en Mozilla e Internet Explorer y sale muy distinto en cada uno. Mientras que con el Mozilla la capa del logotipo y del pie ocupan el ancho, la del menú superior sobrepasa el ancho y se sale, pero en el Internet Explorer el menú superior ocupa bien el ancho y las dos capas restantes no llegan. ¿A qué se debe? ¿hay forma de arreglarlo?.

Gracias.

[rkpost]

tu problema son los padding. No todos los navegadores se manejan igual pero si vos le das un ancho X a un contendor y luego le asignas padding Y, el resultado va a ser q te va a ocupar X+Y

[rkpost]

para esa clase de estructuras podes hacer

Código:

BODY {
margin: 0px;
padding: 0px;
text-align: center;
}

#content {
text-align: left;
width: 800px;
margin-left: auto;
margin-right: auto;
}

#header {
// no hace falta especificar ancho
}

#main {
float: left;
width: 500px;
}

#mnu-right {
float: left;
width: 300px;
}

#footer {
width: 800px;
float: left;
clear: both;
}

recorda, cuando apliques paddings y definas un ancho... las cosas no van a quedar como lo esperado. Si usas una cosa trata de obviar la otra.

[Algadir]

Hola rkpost:

Gracias por responder y por tomarte la molestia de incluir un código a modo de ejemplo. Probaré como dices y ya entiendo lo que quieres decir. Ya te comentaré como ha ido y gracias por el aviso.

Miles de gracias ;).

[Algadir]

Hola rkpost:

Como te dije lo probé y ya funciona bien. Simplemente tuve que quitar el padding de la capa que tiene el menú superior y ya funcionó perfectamente. La verdad es que está quedando muy simple pero hay que decir que se mejora bastante reduciendo código y para luego hacer los cambios. Lo que pasa es que siempre he pensado que el padding es el espacio entre el contenido y los bordes de una celda (hablando de tablas) no pensé que en capas el padding afectase a que una misma capa se desplazase por eso, pensé que afectaba al contenido no a la capa en sí o igual es que con las capas es otra cosa o llevo ya mucho tiempo con una idea errónea del uso del padding y de conceptos generales y eso que llevo ya tiempo usando html y tablas. En fin, el caso es que funcione y te agradezco tu ayuda.

Un saludo.