Grille
Erfahrenes Mitglied
Hallo,
Ich möchte einen Slider erstellen, scheitere aber schon an der normalen HTML/CSS Einrichtung.
Der HTML-Aufbau ist dieser:
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:
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:
Kann ich das mit CSS lösen, oder muss ich da mit Javascript rumbasteln?
Vielen Dank für eure Hilfe.
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.