Author Topic: Größenanpassung bei Ebenen  (Read 98 times)

Offline ISPSL

  • Posts: 12
  • Gender: Male
Größenanpassung bei Ebenen
« on: October 19, 2018, 12:38:47 PM »
Hallo liebe Forenteilnehmer,

ich habe ein Problem mit der Höhenanpassung des header-Containers durch die SlideShow.

Folgende Aufteilung des body:
Code: [Select]
<body>

<nav>
<div id="hauptmenu"></div>
</nav>

<header>
<div id="bilderwechsel" class="hide-mobile">[[SlideShow?dir=kopfbilder]]</div>
</header>

<nav>
<div id="seitenmenu"></div>
</nav>

<article></article>

<aside></aside>

<footer></footer>

</body>
Der Body ist mit flex: column wrap; definiert.
Die WebsiteBaker Version 2.12.0 ist installiert

Das Droplet für die SlideShow habe ich vor Jahren mal gefunden, und fand es bisher ganz gut.
Code: [Select]
if($scriptsin=="media"){
$wb_page_data = str_replace('</head>','<script src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/jquery-3.3.1.min.js"></script><script src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/slideshow.js"></script></head>', $wb_page_data );
} elseif ($scriptsin=="template") {
$wb_page_data = str_replace('</head>','<script src="'.TEMPLATE_DIR.'/jquery-3.3.1.min.js"></script><script  src="'.TEMPLATE_DIR.'/slideshow.js"></script></head>', $wb_page_data );
}
else {
$wb_page_data = str_replace('</head>','<script src="'.TEMPLATE_DIR.'/jquery-3.3.1.min.js"></script><script src="'.TEMPLATE_DIR.'/slideshow.js"></script></head>', $wb_page_data );
}

$folder=opendir(WB_PATH.MEDIA_DIRECTORY.'/'.$dir.'/.');
$names = array();
while ($file = readdir($folder))  {
    $ext=strtolower(substr($file,-4));
    if ($ext==".jpg"||$ext==".gif"||$ext==".png"){
        $names[count($names)] = $file;
    }
}
closedir($folder);
reset(shuffle($names));
array_unshift($names," ");
if(isset($width)){$width=' width="'.$width.'"';}else{$width="";}
if(isset($height)){$height=' height="'.$height.'"';}else{$height="";}
$count=1;

while(($image=next($names))and(($count<=$num)or(!isset($num)))){

if( $count ==1){$class=' class="active"';}else{$class='';}

$name=substr($image,0,-4);
if($link=="y"){$images=$images.'<a href="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/'.$image.'" target=_blank>';}
if(file_exists(WB_PATH.MEDIA_DIRECTORY.'/'.$dir.'/thumbs/'.$image.'.thumb.jpg')){
$images=$images.'<img src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/thumbs/'.$image.'.thumb.jpg" alt="'.$name.'" '.$width.$height.' border=0"/>';
}else{
$images=$images.' <img src="'.WB_URL.MEDIA_DIRECTORY.'/'.$dir.'/'.$image.'" alt="'.$name.'" '.$width.$height.$class.' />';
}
if($link=="y"){$images=$images.'</a>';}
$count++;
}

return '<div id="slideshow">'.$images.'</div>';

Es funktioniert auch.

Das CSS für die SlideShow sieht folgendermaßen aus:
Code: [Select]
#bilderwechsel {
position:relative;
max-width: 1200px;
max-height: 250px;
padding-bottom: 19%;
}

#bilderwechsel IMG {
width: 100%;
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#bilderwechsel IMG.active {
z-index:10;
opacity:1.0;
}

#bilderwechsel IMG.last-active {
z-index:9;
}
Jetzt zur Problemschilderung:
Der header-Container, sowie auch die Ebene #bilderwechsel haben nicht die gleiche Höhe wie die Bilder. Deshalb habe ich auch
Code: [Select]
#bilderwechsel {
padding-bottom: 19%;
}
eingefügt, damit der zweite nav-Container nicht unter den Bildern angezeigt wird und dadurch nicht mehr sichtbar ist.
Verkleinere ich jetzt das Browserfenster, so reichen aber die 19% nicht mehr aus. Der Wert müsste erhöht werden, damit die 2. Navigationsleiste sichtbar bleibt.

Das habe ich mit einer „Krücke“ gemacht:
Code: [Select]
@media only screen and (min-device-width: 600px) and (max-device-width: 700px){
#seitenmenu {
padding-top: 65px;
}
}

@media only screen and (min-device-width: 700px) and (max-device-width: 800px){
#seitenmenu {
padding-top: 45px;
}
}

@media only screen and (min-device-width: 800px) and (max-device-width: 900px){
#seitenmenu {
padding-top: 25px;
}
}

@media only screen and (min-device-width: 900px) and (max-device-width: 1000px){
#seitenmenu {
padding-top: 15px;
}
}

@media only screen and (min-device-width: 1000px) and (max-device-width: 1200px){
#seitenmenu {
padding-top: 20px;
}
}
Es sieht aber gelinde gesagt sehr bescheiden aus.

Deshalb meine Frage:
Weiß jemand eine Lösung, wie sich der header-Container der Größe der Bilder anpasst?

Ich freue mich sehr auf Eure Antworten.
 :-)

Offline dbs

  • Betatester
  • **
  • Posts: 7527
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Größenanpassung bei Ebenen
« Reply #1 on: October 19, 2018, 01:26:53 PM »
Hallo, besser wäre ein Link zu einer Testseite oder zum Problem selbst.
Statt mit Höhe in px könntest du auch vw versuchen. Das vw ist die Breite des Viewports, also eine Abhängigkeit der Höhe von der Breite des Browsers.
Bessere Lösung wäre ein morderneres Modul wie miniSlider.

Offline ISPSL

  • Posts: 12
  • Gender: Male
Re: Größenanpassung bei Ebenen
« Reply #2 on: October 19, 2018, 03:13:57 PM »
Hallo dbs,
vielen Dank für Deinen Lösungsvorschlag.
Das sieht schon ein bisschen besser aus. Ich habe die Höhe von #bilderwechsel mal mit einer vw-Einheit versehen und überall padding-top und padding-bottom rausgeschmissen.
Den miniSlider werde ich mir mal ansehen.  :-)

Vielen Dank

 

postern-length