I am developing a web page. This has a menu and below it there is a slideshow but at the moment of squashing down the slideshow is superimposed on the menu and I do not know why that happens.
ccs
CSS DEL MENU:
* {
margin: 0;
padding: 0;
}
body {
background: #fffffa;
}
header {
width: 100%;
overflow: :hidden;
background: #252932;
margin-bottom: 20px;
}
.weapper {
width: 90%;
max-height: 160px;
margin: auto;
overflow: hidden;
}
header .logo {
color: #f2f2f2;
font-size: 50px;
line-height: 200px;
float: left;
}
header nav {
float: right;
line-height: 200px;
}
header nav a {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 10px 20px;
line-height: normal;
font-size: 20px;
font-weight: bold;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
header nav a:hover {
background: #f56f3A;
border-radius: 50px;
}
.header2 {
position: fixed;
height: 100px;
}
.header2 .logo {
line-height: 100px;
font-size: 30px;
}
.header2 nav {
line-height: 100px;
}
.contenido p {
margin-bottom: 1em;
}
@media screen and (max-width: 950px) {
header .logo,
header nav {
width: 100%;
text-align: center;
line-height: 100px;
}
.header2 {
height: auto;
}
.header2 .logo .header2 nav {
line-height: 50px;
}
}
css del slideshow:
* {
margin:0;
padding:0;
}
body {
background:#f2f2f2;
}
.main {
width:90%;
max-width:1000px;
margin:20px auto;
}
.slides {
width:100%;
}
.slides img {
width:100%;
}
.slidesjs-pagination {
background:#424242;
list-style:none;
overflow:hidden;
}
.slidesjs-pagination li {
float:left;
}
.slidesjs-pagination li a {
display:block;
padding:13.5px 20px;
color:#fff;
text-decoration:none;
}
.slidesjs-pagination li a:hover {
background:#000;
}
.slides .active {
background:#000;
}
.slidesjs-navigation{
background:#000;
color:#fff;
text-decoration:none;
display:inline-block;
padding:13.5px 20px;
float:right;
}HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DOCUMENT</title>
<link rel="stylesheet" type="text/css" href="menu.css">
<link rel="stylesheet" type="text/css" href="slideshow.css">
<link rel="stylesheet" type="text/css" href="font.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="header.js"></script>
</head>
<body>
<header>
<div class="weapper">
<div class="logo">
Reynaldo.inc
</div>
<nav>
<a href="#">INICIO</a>
<a href="#">SERVICIOS</a>
<a href="#">PROYECTOS</a>
<a href="#">CONTACTOS</a>
</nav>
</div>
</header>
<div class="main">
<div class="slides">
<img src="Galeria/balloon_sky_flight_sunset_clouds_119652_800x600.jpg">
<img src="Galeria/piopio_new_zealand_mountains_rocks_grass_evening_119665_800x600.jpg">
<img src="Galeria/singapore_building_night_city_119649_800x600.jpg">
<img src="Galeria/sneakers_legs_red_mountains_119647_800x600.jpg">
<img src="Galeria/traffic_lights_indicator_sign_119607_800x600.jpg">
</div>
</div>
<script src: "jquery-1.9.1.min.js"></script>
<script src="js/jquery.slides.js"></script>
<script>
$(function() {
$(".slides").slidesjs({
play: {
active: true,
effect: "slide",
interval: 3000,
auto: true,
swap: true,
pauseOnHover: false,
restartDelay: 2500
}
});
});
</script>
<section class="contenido weapper">
</section>
</body>
</html>header.js $ (document) .ready (function () {
$(window).scroll(function(){
if( $(this).scrollTop() > 0 ){
$('header').addClass('header2');
} else {
$('header').removeClass('header2');
}
});
});
