centrar html con anchos 100%

[mcarmen1980]

Buenos dias.
Estoy terminando mi proyecto web y se me plantea una duda.
Por favor me pueden decir como puedo colocar mi backgound 100% y mi contenido centrado, sin utilizar url background-image?
Quiero poner with:100% en el caso del top, menu, contenido y footer, pero en este caso se coloca todo a la izquierda del navegador.
Lo que quiero conseguir es separar mediante colores las secciones de la web.

No se si me he explicado bien.
Gracias.

ejemplo de lo que estoy haciendo (es imagen, para que sepan como quiero que quede) http://www.dissenysoriola.com/alsan-pruebas/empresa.html

[Bandit]

Hola mcarmen1980:
Para todo el contenido principal, crea un div con id="contenedor".
En el CSS para centrarlo utiliza:
#contenedor{margin:0 auto; width="90%}

Espero haberte sido de ayuda.

[mcarmen1980]

Gracias, pero no es lo que pretendo. No funciona.

[C2am]

Puedes, en vez de una imagen publicar/subir lo que tienes hasta ahora, para ver el por qué se ubica a la izquierda tal como dices.
Es decir para ver como estás maquetando tu web

Saludos

[mcarmen1980]

Hola. Subo lo que tengo realizado para que veáis exactamente lo que os comento. A ver si encontráis alguna solución o algún fallo en la maquetación.
Gracias.
http://www.dissenysoriola.com/alsan-pruebas/servicios.html

[C2am]

Una rápida respuesta sería mas o menos así:

Código HTML:

<div id="wrapper"> ancho 100%
 
  <div id="top">  
   <ul>menu</ul> 
  </div>
 
<div id="logo"> 
  <img src="logo"/> <!-- como es el logo no debe ir como fondo -->
</div>
 
<div id="content">
    slider
</div>
<div id="contenido">
contenido
</div>
<footer>
  <section>pie de pagina </section>
</footer>
 
</div>
 

Código CSS:

#wrapper{
background: gris; /* igual que contenido */
width:100%;
}
 
#top{
background: grisoscuro /* igual que menu */
margin:0 auto;
width:100%;
height:auto; /* o la necesaria para que contenga el menu */
}
 
#menu{
background: grisoscuro;
margin: 0 auto; /* lo importante es el auto de los margenes laterales */
width:1060px; /*aunque se recomienda 960px */
}
 
#logo{
background: blanco ;
width:100%;
text-align:center; /* en caso de meter la imagen directamente sin caja (div) */
}
#logo img{
margin: 0 auto; 
width:1060px; 
}
 
#content{ /*que está en el css del slider */
margin: 0 auto; /* lo importante es el auto de los margenes laterales */
width:1060px; 
}
 
#contenido{
background:grisclaro; /*igual que wrapper */
margin: 0 auto; /* lo importante es el auto de los margenes laterales */
width:1060px; 
}
 
footer{
background: negro;
width:100%;
}
 
footer section {
margin: 0 auto; /* lo importante es el auto de los margenes laterales */
width:1060px; 
 
}
 

Espero que entiendas lo que quise decir.
Saludos

Por las dudas un burdo ejemplo: http://jsfiddle.net/c2am/7PumF/1/embedded/result/

[mcarmen1980]

C2am, gracias. Parecía que iba a funcionar...
He captado lo que me querías decir, he añadido una class (margin 0 auto, ancho 100%) a cada div principal y listo !
No se si es la mejor opción pero funciona.

[pzin]

Iniciado por mcarmen1980

He captado lo que me querías decir, he añadido una class (margin 0 auto, ancho 100%) a cada div principal y listo !

Si un elemento mide de ancho un 100% no hace falta que se le añadan márgenes laterales automáticos, porque lo que sobre de 100% va a ser siempre cero.

[C2am]

Es cierto lo que dice Bonez, y a mi se me coló el margin auto en #top, lo cual no es necesario.

[pouparo]

no se si entendi bien...
pero no seria..en el body, indicarle cuanto seria el ancho...y poner margin: auto y despues a cada parte ahi si el 100%, xq sino el 100% no seria centrado, seria todo...


o sea..

body{
margin:auto;
width:1000px;
}

#cuerpo{
width:100%
}

[memoadian]

¿indicarle un ancho al body?

no lo creo.

[raexman]

No puedes centrar de esa manera elementos flotados. Te recomiendo que quites el flotado a todos los elementos que sean contenedores como (citando los que vi en servicios.html):

• .logo
• #content
• #contenido

Quitándoles el float, y agregandoles el centrado con margen que mencionaron anteriormente resolvería tu problema. Un tip adicional, te recomiendo meterle más coco al nombramiento de los elementos, ya que #content y #contenido crean conflicto a alguien que quiera leer tu código. Espero te haya servido!

[pouparo]

Iniciado por memoadian

¿indicarle un ancho al body?

no lo creo.

Hola, xq no? Yo no se mucho, pero me habian enseñado a hacerlo asi, lo hacia centrando el body y poniendole cuanto queria de ancho, y despues a todos los divs les indicaba float left, y si x ej ponia dos divs uno al lado del otro para hacer dos columnas, si sumaban mas qu el width del body, seguia abajo...

[memoadian]

Iniciado por pouparo

Hola, xq no? Yo no se mucho, pero me habian enseñado a hacerlo asi, lo hacia centrando el body y poniendole cuanto queria de ancho, y despues a todos los divs les indicaba float left, y si x ej ponia dos divs uno al lado del otro para hacer dos columnas, si sumaban mas qu el width del body, seguia abajo...

¿que pasa con las pantallas que tienen más de 1000px de ancho si le pones 1000px al body?

se vería un espacio en blanco entre el monitor y el body.

lo mejor es usar un div contenedor del ancho que quieras, con margin:auto. Y el body ocupando todo el ancho de la pantalla.

[pouparo]

No, el body le pones por ej 1000 y lo centrasy le pones un color de fondo... Te van a quedra 1000 px en el medio, q le pones color mediante los divs que pongas, ponele, head, contenido, foooter, etc... Y si la pantalla tiene mas de 1000 px, se va a vermas del xolor de fondo...que es la idea, q el comtenido quede centrado y al costado un color o imagen de fondo..

[Middrel]

Es mejor dejar el body sin un ancho específico y colocar un contenedor con un ancho en porcentaje. Lo comento por que el problema viene cuando son diferentes resoluciones, entonces tendrías que hacer diferentes estilos para cada una.

Con un contenedor en porcentajes te ahorras eso en una sola clase de estilos y listo.

Por ejemplo:

Body a 1000px de ancho y background de x color.

Resolución a 1920 -> Se centra la imagen y ocupa 1000px sobran 460 px de cada lado pero el fondo los cubre.

Resolución a 1440 -> Se centra la imagen y ocupa 1000px sobran 220 px de cada lado pero el fondo los cubre.

Resolución menor a 800 -> A la imagen ya se le cortaron 200px. Hay que hacer un media query para ajustarlos y por cada resolución menor.

Esto sin tomar en cuenta que en todas las resoluciones el sitio se irá viendo distinto.

Con porcentaje todas las resoluciones tienen un 100%. Si lo ajustas a un 80% por ejemplo, siempre habrá un 80%.

Saludos!

[emprear]

Yo realmente los envidio, porque entre esto

Iniciado por mcarmen1980

Por favor me pueden decir como puedo colocar mi backgound 100% y mi contenido centrado, sin utilizar url background-image?

y los ejemplos propuestos, NO entiendo nada

100% de que, de ancho?
http://foros.emprear.com/css/bg-size...ound-size.html
100% de ancho y alto?

Contenido centrado?
http://foros.emprear.com/css/bgcolor...ide_fondo.html
http://foros.emprear.com/css/bgcolor...de_grises.html

y porque no usar background-image: url().... ?