Hallo Leute,
ich bin derzeit dabei mir im Selbststudium HTML, CSS zu lernen. In der Praxis soll das später meine Webseite für meine Trainspotting Bilder werden.
Hier die URL: http://riedochs.com/1/index.html
Folgende Probleme, für jede Hilfe bin ich dankbar:
1: Ich habe die Slideshow mit cycle2 realisiert, nur bekomme ich das padding-top und padding-bottom nicht hin, die Ränder sind beide unten. Wo liegt der Fehler?
2: Ich würde gerne ein Overlay über die Slideshow legen wie hier unter blurring: Link Nur bekomme ich das nicht hin.
3. Zu guter letzt soll das Overlay, bzw die Slideshow als Link zu der Vollbild Slideshow mit Juicebox (Alternativen sind willkommen) dienen.
Das alles hat garantiert noch jede Menge Fehler, bin noch am Anfang. Hier der Quellcode für die HTML und CSS.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Zugbilder</title>
<link href="css/template.css" rel="stylesheet"type="text/css">
<!-- include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- include Cycle2 -->
<script src="js/jquery.cycle2.min.js"></script>
<script src="js/jquery.cycle2.caption2.min.js"></script>
</head>
<body>
<div class="container">
<header class="header">
<h1 class="logo">Eisenbahnbilder</h1>
</header>
<section class="info">
<p> Letzte Aktualisierung: dd.mm.yyyy </p>
<p> ToDo: Slideshow overlay, Slideshow link. Juicebox </p>
</section>
<div class="gallery">
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-caption-plugin=caption2
data-cycle-pause-on-hover=true
data-cycle-speed=200
data-cycle-loader="wait"
data-cycle-overlay-fx-sel=">div"
>
<img src="bilder/gallerie/Trainspotting_2017_03_30/Trainspotting 2017_03_30_001.jpg" class="cards">
<img src="bilder/gallerie/Trainspotting_2017_03_30/Trainspotting 2017_03_30_002.jpg" class="cards">
<img src="bilder/gallerie/Trainspotting_2017_03_30/Trainspotting 2017_03_30_003.jpg" class="cards">
<img src="bilder/gallerie/Trainspotting_2017_03_30/Trainspotting 2017_03_30_004.jpg" class="cards">
</div>
</div>
<section class="footer">
<p> test test </p>
</section>
</div>
</body>
</html>Code
@charset "UTF-8";
/*Body*/
body {
font-family: Cambria, serif;
background-color: #C7C7C7;
/* margin: 0;*/
}
/* Container */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #C7C7C7;
}
/* Header */
.header {
/* height: 180px; */
max-height: 180px;
/*width: 100%;
height: 100%; */
background-color: #000000;
border-bottom: 3px solid #960002;
background-image: url(../bilder/logo.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
border-radius: 3px;
}
.logo {
text-align: center;
font-size: 50px;
font-weight: bold;
letter-spacing: 10px;
text-shadow: 1px 1px 4px #960002;
padding-top: 50px;
/*line-height: 2em; */
/*Textfarbe */
color: #FFFFFF;
width: auto;
height: auto;
}
.info{
background-color: #C7C7C7;
border-radius: 3px;
padding-top: 0px;
}
/* Gallerie Vorschau auf hauptseite */
.gallery {
/* clear: both;
display: inline-block;
width: 100%;
background-color: #C7C7C7;
padding-bottom: 35px;
padding-top: 0px;
margin-top: -5px;
margin-bottom: 0px; */
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: #C7C7C7;
border-top: 1px solid #960002;
border-bottom: 1px solid #960002;
border-right: 1px solid #960002;
border-left: 1px solid #960002;
border-radius: 5px;
padding-bottom: 35px;
}
.cycle-slideshow{
/* width: 20%; */
display: flex;
flex-basis: 23%;
align-items: center;
/*text-align: center;
float: left;
margin-left: 1%;
margin-right: 1%;*/
/* fuer text overlay */
overflow: hidden;
border-radius: 3px;
border-top: 2px solid #960002;
border-bottom: 2px solid #960002;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 35px;
background-color: #000000;
/*width: 100%;
height: auto;
max-width: 800px;
max-height: 800px;*/
}
.cards {
width: 100%;
height: auto;
max-width: 800px;
max-height: 800px;
align-items: center;
}
.footer {
/* height: 180px; */
max-height: 180px;
/*width: 100%;
height: 100%; */
background-color: #000000;
border-top: 3px solid #960002;
border-bottom: 3px solid #960002;
/* background-image: url(../bilder/logo.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;*/
border-radius: 3px;
margin-top: 30px;
}