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;
}