CSS + Cycle2 Slideshow: Probleme mit padding-top

Trainspotter · #1 (**permalink**) 07.06.2017, 16:01

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: Zugbilder
Folgendes Problem: 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?

Code:

<!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 {
	max-height: 180px;
	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;
	/*Textfarbe */
	color: #FFFFFF;
	width: auto;
	height: auto;
}
.info{
	background-color: #C7C7C7;
	border-radius: 3px;
	padding-top: 0px;
}
/* Gallerie Vorschau auf hauptseite */
.gallery {
	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{
	display: flex;
	flex-basis: 23%;
	align-items: 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;
}
.cards {
	width: 100%;
	height: auto;
	max-width: 800px;
	max-height: 800px;
	align-items: center;
}
.footer {
	max-height: 180px;
	background-color: #000000;
	border-top: 3px solid #960002;
	border-bottom: 3px solid #960002;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;*/
	border-radius: 3px;
	margin-top: 30px;
}

gruß

Trainspotter

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS von Plugin beisst!	expand	CSS	0	28.09.2012 17:44
Wie vergrößere ich die Gallery Boxen?	butters	CSS	3	27.11.2011 02:56
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 14:30
Problem mit CSS in Joomla 1.5	noobilicius	CSS	6	25.09.2008 20:24
DIV immer ganze Breite - normal?!?!?	csski	CSS	3	02.07.2008 12:20