Hello Guys I have a little question:
I am using a css slider (im not allowed to use javascript) which is working perfectly. Only problem is, when I use it, whe website jumps to the top, how do i manage to fix this?
PS: When testing use 4 pictures size 500 by 500 and call them 1s,2s,3s,4s. place them in the same folder.
Regards
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<link rel="stylesheet" href="Standart.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<div id='headline'>
<h1> Test </h1>
</div>
<br>
<br>
<br>
<br>
<div class="slider-holder">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<span id="slider-image-4"></span>
<div class="image-holder">
<img src="1s.jpg" class="slider-image" />
<img src="2s.jpg" class="slider-image" />
<img src="3s.jpg" class="slider-image" />
<img src="4s.jpg" class="slider-image" />
</div>
<div class="button-holder">
<a href="#slider-image-1" class="slider-change"></a>
<a href="#slider-image-2" class="slider-change"></a>
<a href="#slider-image-3" class="slider-change"></a>
<a href="#slider-image-4" class="slider-change"></a>
</div>
</div>
<div id="ubba">
<p>
Überschrift:
</p>
</div>
<div id="besch">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</body>
</html>
My CSS:
@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);
body, html {
padding: 0;
margin: 0;
}
h1 {
padding: 0;
margin: 0;
}
#headline {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 24px;
position: relative;
text-align: center;
color: #ffffff;
background-color: #000000;
}
#bild {
}
#bildweg {
}
#ubba {
font-family: "Open Sans", sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
padding-left: auto;
margin-top: auto;
}
#besch {
font-family: "Open Sans", sans-serif;
font-size: 20px;
text-align: left;
padding-right: 60%;
padding-left: 5%;
margin-top: 0%;
}
body { background: #ffffff; }
#slidy-container {
width: 70%; overflow: hidden; margin: 0 auto;
}
.slider-holder
{
width: 500px;
height: 500px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder
{
width: 2000px;
background-color: #FFF;
height: 500px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slider-image
{
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slider-image-1:target ~ .image-holder
{
left: 0px;
}
#slider-image-2:target ~ .image-holder
{
left: -500px;
}
#slider-image-3:target ~ .image-holder
{
left: -1000px;
}
#slider-image-4:target ~ .image-holder
{
left: -1500px;
}
.button-holder
{
position: relative;
top: -20px;
}
.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 10px;
background-color: #ffffff;
}