Como optimizo el width de un sitio?

[gerard094]

Verán, estoy creando este sitio por primera vez desde 0 (a puro texto), le asigné al body un width de 100%.
Al menu-principal y a las etiquetas también. Pero al probar en la máxima resolución, se ve asi:




El css aplicado es el siguiente:

Código:

.inicio{
	background:url(../images/La%20Empresa/Sin-t%C3%ADtulo-2.png) no-repeat;
	 background-size:contain;
}

/* CABECERA */

#cabecera{
	width:100%;
	height:160px;
	/*background:#0FF;*/
}
	.logo{
		width:356px;
		height:100px;
		background:url(../images/foundation/logo.png)
	}
	
	.mimenu{
		height:52px;
		width:auto;
	}
	
/* FIN CABECERA */

#cuerpoizq{
    width: 50em;
	height:626px;
	/*background:#F00;*/
	background-color:rgba(0,0,0,0.5);
}
#cuerpoder{
	width:100%;
	height:626px;
	/*background:#33F;*/
	background-color:rgba(255,255,255,0.7);
}

Tampoco logro entender por que todo está desplazado a la izquierda.

[alzacon]

Yo no entiendo cual es problema, el ancho de parece funcionar bien. ¿Todo desplazado a la izquierda? Como quieres que esté si no le indicas lo contrario. Lo único sería la imagen de fondo, pero por el tamaño que le indicas es normal que salga así.

[gerard094]

Iniciado por alzacon

Yo no entiendo cual es problema, el ancho de parece funcionar bien. ¿Todo desplazado a la izquierda? Como quieres que esté si no le indicas lo contrario. Lo único sería la imagen de fondo, pero por el tamaño que le indicas es normal que salga así.

Se ve claramente como el menú está desplazado completamente a lo ancho, pero el resto no lo acompaña, y no sé por que está desplazado a la izquierda si no hay nada que indique la alineación, se supone que debe estar todo en el medio.

[alzacon]

Iniciado por gerard094

Se ve claramente como el menú está desplazado completamente a lo ancho, pero el resto no lo acompaña, y no sé por que está desplazado a la izquierda si no hay nada que indique la alineación, se supone que debe estar todo en el medio.

Una de dos: o usas las peores palabras para explicarte o tienes un lio tremendo de lo que crees saber. Porque lo que creo que estas llamando menú dudo que se esté desplazando sino ensanchando.

¿Por qué se supone que debe estar todo en medio? ¿Cuando usas un programa tipo word también se supone que tienen que estar centradas las lineas de texto porque sí?

[gerard094]

Perdón, dije desplazar en vez de ensanchar, y sí, si alejas la vista de todo sitio web, el sitio quedará siempre en medio de la pantalla, nunca se va a ver desde la izquierda.

[JustinKO]

Pon el html que nos enteremos mejor.

Saludos

[Verkia]

Si quieres centrar el contenido añade al body{margin: 0 auto;} y para que la imagen sea el ancho total prueba con background-size:cover;

[alzacon]

No me has respondido a:

¿Por qué se supone que debe estar todo en medio?

Que es la pregunta importante.

El ejemplo que puse puede resultar no ser tan bueno como creía. Voy a intentar poner otro con sólo texto: dos lineas puestas en el foro.

Línea no centrada
Línea centrada

La razón de porque uno esta centrado y el otro no.

Código HTML:

Línea no centrada
[CENTER]Línea centrada[/CENTER]

Como ves le aplico un estilo a uno para que se centre, pues en tú caso no hay nada que indique al navegador que centre los elementos (al menos en el CSS que has puesto). Por lo tanto tienes que usar alguna propiedad en tu CSS que te centre el estilo de los elementos.

[pzin]

Aconsejo hacer caso de lo que dice alzacon e ignorar el mensaje de Verkia, que no tiene mucho sentido práctico.

[gerard094]

Iniciado por Verkia

Si quieres centrar el contenido añade al body{margin: 0 auto;} y para que la imagen sea el ancho total prueba con background-size:cover;

Ya intenté el margin 0 auto, pero no funciona

Iniciado por alzacon

No me has respondido a:
Que es la pregunta importante.

El ejemplo que puse puede resultar no ser tan bueno como creía. Voy a intentar poner otro con sólo texto: dos lineas puestas en el foro.

La razón de porque uno esta centrado y el otro no.

Código HTML:

Línea no centrada
[CENTER]Línea centrada[/CENTER]

Como ves le aplico un estilo a uno para que se centre, pues en tú caso no hay nada que indique al navegador que centre los elementos (al menos en el CSS que has puesto). Por lo tanto tienes que usar alguna propiedad en tu CSS que te centre el estilo de los elementos.

Al aplicar

Código:

<center> </center>

al body solo me centra el logo y uno de los divs, pero ni el fondo ni el div inferior.

Este es el html:

Código:

<body class="inicio">

	<div id="cabecera">
		<div  class="logo">
					
		</div>
		<div id="menu-principal">
			<div class="mimenu">
				
<div id="ariext87_container" class="ux-menu-container ux-menu-clearfix">

	<ul id="ariext87" class="ux-menu ux-menu-horizontal">
					<li class="ux-menu-item-main ux-menu-item-level-0 ux-menu-item101 ux-menu-item-parent-pos0">
				<a href="/debrecen/" class=" ux-menu-link-level-0 ux-menu-link-first" title="">
					Inicio									</a>
						</li>
					<li class="ux-menu-item-main ux-menu-item-level-0 ux-menu-item-parent ux-menu-item135 ux-menu-item-parent-pos1">
				<a href="/debrecen/index.php/productos" class=" ux-menu-link-level-0 ux-menu-link-parent" title="">
					Productos										<span class="ux-menu-arrow"></span>
									</a>
			
	<ul class="ux-menu-sub ux-menu-init-hidden">
					<li class=" ux-menu-item-level-1 ux-menu-item139">
				<a href="/debrecen/index.php/productos/fabricacion-propia" class=" ux-menu-link-level-1 ux-menu-link-last" title="">
					Fabricación Propia									</a>
						</li>
			</ul>
			</li>
					<li class="ux-menu-item-main ux-menu-item-level-0 ux-menu-item140 ux-menu-item-parent-pos2">
				<a href="/debrecen/index.php/alquiler-de-equpos" class=" ux-menu-link-level-0" title="">
					Alquiler de Equipos									</a>
						</li>
					<li class="ux-menu-item-main ux-menu-item-level-0 ux-menu-item136 ux-menu-item-parent-pos3">
				<a href="/debrecen/index.php/representaciones" class=" ux-menu-link-level-0" title="">
					Representaciones									</a>
						</li>
					<li class="ux-menu-item-main ux-menu-item-level-0 ux-menu-item137 ux-menu-item-parent-pos4">
				<a href="/debrecen/index.php/contacto" class=" ux-menu-link-level-0" title="">
					Contacto									</a>
						</li>
					<li class="ux-menu-item-main ux-menu-item-level-0 ux-menu-item138 ux-menu-item-parent-pos5">
				<a href="/debrecen/index.php/debrecentv" class=" ux-menu-link-level-0 ux-menu-link-last" title="">
					Debrecen TV									</a>
						</li>
			</ul>
</div>
			</div>
		</div>
	</div>
	<div id="cuerpoizq">

	</div> 
	<div id="cuerpoder">
	</div>

</body>

</html>