Slider, Umgebenes Div falsche Höhe zu Einzel-Slider-Div-Elemente

Grille

Grille

Erfahrenes Mitglied
Hallo,

Ich möchte einen Slider erstellen, scheitere aber schon an der normalen HTML/CSS Einrichtung.
Der HTML-Aufbau ist dieser:

HTML: 
<div class="box">
    <article class="image BigSlider layout-0 imgori-4" id="c20">
        <div class="PicSlider slide" id="PicSlider-20">
            <div class="item active">
                <img width="1920" height="400" alt="" src="fileadmin/_processed_/csm_slyderTest_01_b3f085a8c4.png">
                <div class="PicSlider-caption"><p>Beschreibung zum Bild...</p></div>
            </div>
            <div class="item ">
                <img width="1920" height="400" alt="" src="fileadmin/_processed_/csm_slyderTest_02_ff81e8fd0a.png">
                <div class="PicSlider-caption"><p>Beschreibung zum Bild...</p></div>
            </div>
            <div class="item ">
                <img width="1920" height="400" alt="" src="fileadmin/_processed_/csm_slyderTest_03_f4f47eeecc.png">
            </div>
            <div class="item ">
                <img width="1920" height="400" alt="" src="fileadmin/_processed_/csm_slyderTest_04_bb34e207dd.png">
            </div>
        </div>
    </article>
</div>

div.box -> ist eigentlich nur eine Breite gebende Box für den gesamten Dokumentenaufbau
div.PicSlider -> muss so hoch sein, dass alle Elemente im Slider voll sichtbar sind und weitere Inhalte der Seite nach "unten gedrückt" werden.
div.item -> ist eigentlich unsichtbar nur div.item.active -> ist sichtbar. WICHTIG alle Elemente sind übereinander geordnet.

Dies sind zur Zeit die CSS-Einstellungen:
HTML: 
.box {    margin-left: auto;    margin-right: auto;    padding-left: 20px;    padding-right: 20px;    width: 960px;}

section.slider div.PicSlider {
    display: block;    height: auto;    left: 0;    overflow: hidden;    position: absolute;
    top: 0;}

.BigSlider {
    position: relative;
}

section.slider div.PicSlider div.item {    display: block;    height: auto;    opacity: 0;    pointer-events: none;    width: 100%;    z-index: 999;}


section.slider div.PicSlider div.item.active {    display: block;    opacity: 1;
    pointer-events: auto;
    z-index: 1000;
}

größtes Problem ist: div.PicSlider ist nicht so hoch wie der Inhalt. Das scheint was mit "position: absolute;" und "position: relative;" zu tun zu haben.

zweites Problem: wenn es einen "article.BigSlider" gibt, dann soll das Elternelement "div.box" diese CSS-Eigenschaften bekommen:
HTML: 
display: block;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
width: 100%;

Kann ich das mit CSS lösen, oder muss ich da mit Javascript rumbasteln?


Vielen Dank für eure Hilfe.
 
Hallo ... Problem ist, dass ich den Slider an die Inhaltsausgabe für Typo3 anpassen muss. die vorgefertigten Slider haben alle verschiedene DIV-Boxen-Konstruktionen und Klassen die ich entwerde über TypoScript neu ausgeben muss, oder im JavaScript des Sliders anfertigen muss.

ein weiteres Problem: ich möchte den Slider modular haben. Es soll auch möglich sein mehrere Slider in einer Seite laufen zu lassen.

Außerdem ist es mir immer wichtig das, was ich benutze, auch zu verstehen. Was "vorgefertige Slider" an unnötigem Ballast mit sich herumtragen, möchte ich nicht mit übernehmen.

Würde mich über Hilfe sehr freuen.
 
Hallo nochmal,

Dieses ist jetzt mein CODE ...

Problem ist, dass die Div's item übereinander gestapelt werden sollen (position:absolute) und das umgebene Div ".box" dann nicht mehr erkennt, wie hoch der Inhalt ist. Kann man hier eine art "clear" ansetzen, damit nach der Positionierung die Umgebenden Div's wieder die richtige Höhe haben****?

HTML: 
<!DOCTYPE html>
<html lang="de">
	<head>
		<style type="text/css">
			div.box {
				margin-left: auto;
				margin-right: auto;
				padding-left: 20px;
				padding-right: 20px;
				width: 1000px;
				margin-top:100px;
				overflow:hidden;
				display:block;
				height:400px;
			}
			div.PicSlider {
				position:relative;
				top:0px;
				left:0px;
				display:block;
			}
			div.item {
				position:absolute;
				top:0px;
				left:0px;
				display:none;
			}
			div.active {
				display:block;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<article class="image BigSlider layout-0 imgori-4" id="c20">
				<div class="PicSlider slide" id="PicSlider-20">
					<div class="item active">
						<img width="1920" height="400" alt="" src="slyderTest_01.png">
						<div class="PicSlider-caption">
							<p>
								Beschreibung zum Bild...
							</p>
						</div>
					</div>
					<div class="item ">
						<img width="1920" height="400" alt="" src="slyderTest_02.png">
						<div class="PicSlider-caption">
							<p>
								Beschreibung zum Bild...
							</p>
						</div>
					</div>
					<div class="item ">
						<img width="1920" height="400" alt="" src="slyderTest_03.png">
					</div>
					<div class="item ">
						<img width="1920" height="400" alt="" src="slyderTest_04.png">
					</div>
				</div>
			</article>
		</div>
	</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück