les dejo el codigo que tengo a ver si me ayudan a depurarlo.
Código HTML :
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Altieri</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>
<script src="js/jquery.slides.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$("#slideshow").slidesjs({
height: 400,
navigation: {
active:false,
effect:"fade"
}
});
});
</script>
</head>
<body>
<header>
<div id="logo"><p>Altieri</p><span>Inmobiliaria</span></div>
<nav>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Alquileres">Alquileres</a></li>
<li><a href="#" title="Ventas">Ventas</a></li>
<li><a href="#" title="Servicios">Servicios</a></li>
<li><a href="#" title="Sobre Nosotros">Sobre Nosotros</a></li>
<li><a href="#" title="Contacto">Contacto</a></li>
</ul>
</nav>
</header>
<section id="main">
<div id="no-slide">
<section id="slideshow">
<div class="slide">
<img class="thumb" src="http://lorempixel.com/970/530/city/" alt="#">
<article>
<hgroup><h2 href="#">Titulo de articulo</h2></hgroup>
<p class="date">26 de diciembre de 2014 en <a href="#">Categoria 1</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam arcu enim, consequat eu faucibus condimentum, eleifend sed tortor. Donec non mauris orci. Aenean venenatis odio nunc, eu consectetur nunc placerat ut. Pellentesque tortor ante, laoreet a accumsan sit amet, sagittis quis ex. Donec sed nunc rutrum, sollicitudin justo eu, tincidunt nulla. Nunc pharetra justo nisl, in vehicula nisl vulputate eget. Ut nec pretium tellus. Praesent varius in nulla in consectetur.</p>
</article>
</div>
<div class="slide">
<img class="thumb" src="http://lorempixel.com/970/530/city/" alt="#">
<article>
<hgroup><h2 href="#">Titulo de articulo</h2></hgroup>
<p class="date">26 de diciembre de 2014 en <a href="#">Categoria 1</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam arcu enim, consequat eu faucibus condimentum, eleifend sed tortor. Donec non mauris orci. Aenean venenatis odio nunc, eu consectetur nunc placerat ut. Pellentesque tortor ante, laoreet a accumsan sit amet, sagittis quis ex. Donec sed nunc rutrum, sollicitudin justo eu, tincidunt nulla. Nunc pharetra justo nisl, in vehicula nisl vulputate eget. Ut nec pretium tellus. Praesent varius in nulla in consectetur.</p>
</article>
</div>
<div class="slide">
<img class="thumb" src="http://lorempixel.com/970/530/city/" alt="#">
<article>
<hgroup><h2 href="#">Titulo de articulo</h2></hgroup>
<p class="date">26 de diciembre de 2014 en <a href="#">Categoria 1</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam arcu enim, consequat eu faucibus condimentum, eleifend sed tortor. Donec non mauris orci. Aenean venenatis odio nunc, eu consectetur nunc placerat ut. Pellentesque tortor ante, laoreet a accumsan sit amet, sagittis quis ex. Donec sed nunc rutrum, sollicitudin justo eu, tincidunt nulla. Nunc pharetra justo nisl, in vehicula nisl vulputate eget. Ut nec pretium tellus. Praesent varius in nulla in consectetur.</p>
</article>
</div>
</section>
<aside>
</aside>
</section>
<footer>
<h6 id="copyright">WebMaster Horacio A. Boquet</h6>
</footer>
</body>
</html>Código CSS :
/* Theme Name: Nombre Tema Theme URL: www.miweb.com Version: 0.1 Author: Horacio Andres Boquet Author URL: www.Facebook.com/teeswood */ /*-----Estilos Generales-----*/ *{ margin: 0px; padding: 0px; } body{ background:#fff; font-size:12pt; font-family: 'Yanone Kaffeesatz', sans-serif; } header, #main, footer{ background: #fff; margin:0px auto; width: 95%; } a{ color:#bf2222; text-decoration: none; } a:hover{ text-decoration: underline; } /*--------Header-------*/ header{ margin-top:20px; margin-bottom: 20px; overflow: hidden; width: 95%; height: 500px; } header #logo{ width: 25%; float:left; } header #logo p{ font-family: 'Yanone Kaffeesatz', helvetica, arial; font-size: 4rem; font-weight: 100; text-align: left; color:000; } header #logo span{ display: block; font-family: 'Yanone Kaffeesatz', helvetica, arial; position: relative; text-align: left; width: 35%; font-weight: 400%; left: 40px; margin-bottom: 10px; color:000; } header nav{ background: #191919; width: 65%; float: right; padding: 5px 0px; margin-top: 30px; margin-right: 45px; } header nav ul{ float: right; } header nav ul li{ display: inline-block; margin-left: 35px; margin-bottom: 10px; margin-right: 9px; padding-right: 10px; list-style: none; } header nav ul li a{ font-family: 'Yanone Kaffeesatz', helvetica, arial; font-weight: 300; font-size: 1rem; color:#fff; } header nav ul li a:hover{ color:#bf2222; } /*--------MAIN-----------*/ #main{ overflow:hidden; } /*-----Slideshow------*/ #main #slideshow{ width: 100%; float: left; overflow: hidden; margin-bottom: 20px; } #main #slideshow .thumb{ width: 49%; float: left; margin-right: 2%; } #main #slideshow article{ float:left; font-family: 'Yanone Kaffeesatz', helvetica, arial; font-size: 1rem; text-align: justify; width: 49%; color: #000; } #main #slideshow article h2{ font-family: 'Yanone Kaffeesatz', helvetica, arial; font-size: 2rem; font-weight:400; text-align: left; } #main #slideshow article .date{ font-family: 'Yanone Kaffeesatz', helvetica, arial; font-size: .8rem; font-weight: 400; margin-bottom: 10px; color: #777777; } #main #slideshow .slidesjs-pagination li{ background: #000; width: 20px; height: 20px; margin-right: 10px; display: inline-block; } #main #slideshow .slidesjs-pagination li a{ width: 20px; height: 20px; display: block; font-size: 0px; } #main #slideshow .slidesjs-pagination li .active{ background: #333; }
