Foros del Web » Creando para Internet » CSS »

problema con centrado de divs

Estas en el tema de problema con centrado de divs en el foro de CSS en Foros del Web. Buenos dias, Agradezco cualquier ayuda que me puedan prestar. Necesito centrar el contenido de la web. Actualmente esta todo alineado a la izquierda y no ...
  #1 (permalink)  
Antiguo 01/03/2011, 03:21
 
Fecha de Ingreso: octubre-2010
Mensajes: 9
Antigüedad: 7 años, 2 meses
Puntos: 0
Pregunta problema con centrado de divs

Buenos dias,

Agradezco cualquier ayuda que me puedan prestar.

Necesito centrar el contenido de la web. Actualmente esta todo alineado a la izquierda y no logro centrarlo, manteniendo las alineaciones internas de cada div.

Otra peculiaridad es el fondo del NIVO Slider. Necesito que ocupe el 100% del ancho de la web, tal como veis en la imagen.

Me podriais decir cual es fallo?

Muchas gracias por anticipado.

Un saludo.



Estilo CSS
Código:
body {	font: 10pt/14pt Helvetica, Arial, sans-serif; margin: 0; padding: 0; height: 100%; background: #fff;}
#wrapper { float: left; width: 100%; overflow: hidden; position: relative;}

#container { width: 100%; margin: 0 auto; padding: 0 0 0 0; float: none; }
#container:after { display: block; visibility: hidden; content: "."; height: 0; line-height: 0; font-size: 0; clear: both; }

#header, #content, #footer {width: 980px; float: left; }
#header { position: relative; z-index: 999;/*for the subnavs not to get covered by anything*/ }
#footer { padding: 4px 860px; margin: 0px 0px 0px -860px; position: fixed; bottom: 0px; z-index: 99999; height: 25px; /*special treatment due to the background*/ }
#content { /*border-top: 1px solid #dde6ea;*/ margin-top: -10px; padding-top: 0px; padding-bottom: 60px; }
HTML
Código:
<body>
<div id="wrapper"> 
	<div id="container"> 
		<div id="header">
			<h1><a href="index.html">PUNTECH</a></h1>
			<p style="color: #FFF" id="helpdesk"><span style="color: white;">ESP | ENG | CAT</span> Llámenos y le informaremos sin compromiso al 902303535</p>
			<div id="nav">
			  <ul>
					<li class="current"><a href="index.html">Portada</a></li>
					<li><a href="acercade.html">Sobre PUNTECH</a>
						
					</li>
					<li><a href="productos.html">Productos</a>
						
					</li>
					
					<li><a href="partners.html">Partners</a>
						
					</li>
					<li><a href="estrategia.html">Estrategia</a>
						
					</li>
					
					<li class="last-child"><a href="contact.html">Contacto</a></li>
				</ul> 
			</div>
			<!-- #nav - end -->
		</div>
		<!-- #header - end -->
		<!-- InstanceBeginEditable name="content" -->
		<div id="slider-wrapper">
		<div id="slider">
    <img src="images/presentacion/1IMAGEN.jpg" alt="" />
    <img src="images/presentacion/2IMAGEN.jpg" alt="" />
    <img src="images/presentacion/3IMAGEN.jpg" alt="" />
    <img src="images/presentacion/4IMAGEN.jpg" alt="" />
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
		<div id="content">
		
						<!-- .highlights - end -->
        
        <span class="separator"></span><br>
			<div class="columns">
				
					
						<div class="third">
							<img src="images/titulo_lanzamiento.jpg" alt="" />
							<img src="images/lanzamiento.jpg" alt="" />
							<span class="separator"></span><a href="lanzamiento_smartech_adapt.html"><img src="images/mas_info.jpg" alt="" /></a>
                            
                            
							
						</div>
						<div class="third">
							<img src="images/titulo_casos.jpg" alt="" />
                            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10.0.0.0" width="280" height="125">
    <param name="movie" value="images/casos_exito/casosexito.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent">
    <embed src="images/casos_exito/casosexito.swf" quality="high" type="application/x-shockwave-flash" width="280" height="125" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent"></embed>
</object>
<span class="separator"></span><img src="images/mas_info_casosexito.jpg" alt="" />
							
						</div>
					
					
				
				<div class="third">
					<img src="images/titulo_ampliacion.jpg" alt="" />
					<img src="images/ampliacion.jpg" alt="" /><span class="separator"></span><a href="ampliacion_capital_puntech.html"><img src="images/mas_info.jpg" alt="" /></a>
        


							
				  <!-- testimonials - end -->
				</div>
                
			</div>                
			
			<span class="separator"></span>
             
			</div>
             
            
			
			<!-- .highlights - end -->
						
			<!-- .feature-tour - end -->
			
			
			
			
			
			
		
		
<!-- InstanceEndEditable -->
		<!-- #content - end -->
		<div id="footer">
			
                    <h3><a href="informacion_legal.html"><font color="#ffffff">Información Legal</font></a> | <a href="contact.html"><font color="#ffffff">Contacto</font></a> |</h3>
                  </div>
			
		</div>
		<!-- #footer - end -->
	</div>
	<!-- #container - end -->
</div>			
<!-- #wrapper - end --> 
<!--
CSS del NIVO Slider
Código:
#slider-wrapper {
    background:url(images/background_puntech.jpg) repeat-x 50% 77%;
    width:2000px;
    height:500px;
    margin:0 auto;
    padding-top:150px;
    /*margin-top:50px;*/
}

#slider {
	position:relative;
    width:980px;
    height:450px;
    margin-left:0px;
	background:url(nivo_slider/loading.gif) no-repeat 50% 50%;
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	border:0;
	display:block;
}

.nivo-controlNav {
	position:absolute;
	left:450px;
	bottom:-30px;
}
.nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	background:url(nivo_slider/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.nivo-controlNav a.active {
	background-position:0 -22px;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(nivo_slider/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}
  #2 (permalink)  
Antiguo 01/03/2011, 05:39
Avatar de iwexcoder  
Fecha de Ingreso: mayo-2009
Ubicación: San Carlos de Bariloche
Mensajes: 404
Antigüedad: 8 años, 6 meses
Puntos: 16
Respuesta: problema con centrado de divs

Tienes que ir a tu contenedor principal y usar CSS asi...

Código CSS:
Ver original
  1. #contenedor {
  2. position:relative;
  3. margin: 0px auto;
  4. width:800px;
  5. height:auto:
  6.  
  7. }

Yo veo que tenes la capas...


Código CSS:
Ver original
  1. #wrapper { float: left; width: 100&#37;; overflow: hidden; position: relative;}
  2.  
  3. #container { width: 100%; margin: 0 auto; padding: 0 0 0 0; float: none; }
  4.  
  5. #container:after { display: block; visibility: hidden; content: "."; height: 0; line-height: 0; font-size: 0; clear: both; }

...si "wrapper" es la capa principal el float:left esta mal...luego el "container", el float:none es innecesario, y el padding 0 0 0 0 esta mal

...intenta como te puse mas arriba...y cambia lo que te digo
__________________
iWexCoder.com - Programación - Desarrollo Movil - Programación Web www.iwexcoder.com
  #3 (permalink)  
Antiguo 01/03/2011, 06:13
 
Fecha de Ingreso: octubre-2010
Mensajes: 9
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: problema con centrado de divs

Hola,

gracias por responder, pero no funciona lo que me apuntas. Ademas no se de donde sale el width=800px.

Un saludo.

Etiquetas: centrar
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 07:42.