figcaption ausserhalb css Slider positionieren

akdesign

Erfahrenes Mitglied
Hallo Zusammen,

gibt es eine Möglichkeit, die Bildunterschrift in einem Slider mit figcaption auch außerhalb dieses Sliders zu positionieren, also im Prinzip in einer eigenen div?

html
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HOPE International Communications</title>
<meta name="description" content="HOPE ist eine auf länderübergreifende und multikulturelle Kommunikation ausgerichtete Werbeagentur mit Standorten in England, Frankreich Deutschland und den USA. Zu den Kompetenzschwerpunkten gehören Print, Packaging und Corporate Design.">
<meta name="Keywords" content="Agence conseil en communication, Full Service, Alsace, Elsaß, Strasbourg Straßburg, Strasburgo, B to B, Industriewerbung, Marketing Services, below the line, stratégie marketing, approche terrain, media planning, mix communication, time to market, R.O.I. , marketing interculturel, High Tech, knowledge-based, savoir-faire, Know-how, marketing direct">
<meta name="revisit-after" content="7 days" >
<meta http-equiv="reply-to" content="philippe.holtzweiler@hope-communications.com">
<meta name="author" content="HOPE International Communications" >
<meta name="language" content="de, fr, en, it">
<meta name="publisher" content="HOPE International Communications">
<meta name="copyright" content="HOPE International Communications">
<meta name="audience" content="Alle">
<meta name="robots" content="index,follow">
<meta http-equiv="imagetoolbar" content="false">
<meta name="author" content="HOPE International Communications - Philippe Holtzweiler">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link href="style.css" rel="stylesheet">
<link href="slideshow.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 920;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slideContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }   
});
</script>

</head>

<body>

    <div id="wrapper">
   
        <header><img src="images/logo.png" class="logo"></header>
       
        <main><!--<img src="images/background.jpg">-->
       
        <nav_klein>
            <ul>
                <li><a href="#">Impressum</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Kontakt</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Intro</a></li>
            </ul>
        </nav_klein>
       
        <nav2>
            <ul>
                <li><a href="#">Anzeigen</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Broschüren</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Sales Support</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Newsletter</a></li>
            </ul>
        </nav2>
       
       
       
        <div id="galerie">
       
            <!-- Slideshow HTML -->
            <div id="slideshow">
                <div id="slideContainer">
                    <div class="slide">
                    <img src="slidebilder/luisina_1.jpg" width="243" height="311" border="0" style="margin-left: 30px;"/>
                    <img src="slidebilder/luisina_2.png" width="220" height="210" border="0" style="margin-left: 100px; margin-top: 125px;"/>
                        <figcaption>Diese Kampagne für den führenden französischen Spezialisten im Bereich Arbeitsplatten und Spülen ist in Wohn- und Frauenzeitschriften geschaltet worden. Markante Gestaltung und High-End-Positionierung stehen im Vordergrund: Für die Premium-Marke Luisina, die sich noch im Aufbau befindet, stehen Sichtbarkeit und Image im Vordergrund.</figcaption>
                    </div>
                       <div class="slide">
                        <img src="slidebilder/luisina_1.jpg" width="243" height="311" border="0" style="margin-left: 30px;"/>
                        <img src="slidebilder/luisina_2.png" width="220" height="210" border="0" style="margin-left: 100px; margin-top: 125px;"/>
                        <figcaption>Diese Kampagne für den führenden französischen Spezialisten im Bereich Arbeitsplatten und Spülen ist in Wohn- und Frauenzeitschriften geschaltet worden. Markante Gestaltung und High-End-Positionierung stehen im Vordergrund: Für die Premium-Marke Luisina, die sich noch im Aufbau befindet, stehen Sichtbarkeit und Image im Vordergrund.</figcaption>
                    </div>
                    <div class="slide">
                    <img src="slidebilder/luisina_1.jpg" width="243" height="311" border="0" style="margin-left: 30px;"/>
                    <img src="slidebilder/luisina_2.png" width="220" height="210" border="0" style="margin-left: 100px; margin-top: 125px;"/>
                        <figcaption>Diese Kampagne für den führenden französischen Spezialisten im Bereich Arbeitsplatten und Spülen ist in Wohn- und Frauenzeitschriften geschaltet worden. Markante Gestaltung und High-End-Positionierung stehen im Vordergrund: Für die Premium-Marke Luisina, die sich noch im Aufbau befindet, stehen Sichtbarkeit und Image im Vordergrund.</figcaption>
                    </div>
                </div>
            </div>
            <!-- Slideshow HTML -->   
   
        </div>
           
   

           
        </main>
       
        <nav>
            <ul>
                <li><a href="#">Classic Media</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">New Media</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Corporate</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Packaging</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Promotions &amp; POS</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Language transcreations</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Interpersonal communication</a></li>
            </ul>
        </nav>
       
    </div>
   
</body>
</html>


css:
Code:
@charset "UTF-8";
/* CSS Document */

html, body {
    background-color: #00131b;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 100%; /*wichtig, für die sich daran ausrichtenden anderen Schriftgrößen > in der Regel 16px >> 1em = 16px >> 1.5em = 24:16 >> 1.5 x 16 = 24*/
    border-width: 0px;
    font-style: normal;
    /*color: aqua;*/
}

#wrapper    {
    margin-left: auto; /*mittig setzen*/
    margin-right: auto;
    max-width: 1366px; /*hier bleibt Angabe in px >> alle anderen Werte dann in %*/
    height: 830px;
    /*background-color: aqua;*/
}

header    {
    width: 100%;
    height: 12.048193%;
    /*background-color: antiquewhite;*/
}

.logo    {
    float: right;
    margin: 1.8% 0px 0px 0px;
    height: 69%;
}

main    {
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    max-width:100%;
    height: 79.518072%;
    /*background-color:blueviolet;*/
}

#galerie    {
    /*background-color: chartreuse;*/
    background-image: url(images/wrapper.jpg);
    background-repeat: no-repeat;
    max-width: 920px;
    width: 100%;
    height: 500px;
    position: relative;
    top: 100px;
}




/*Navi unten*/
/*nav {
    width: 100%;
    height: 70px;
}*/

nav {
    height: 70px;
    position: absolute;
    /*background-color: aqua;*/
}


nav ul     {
    list-style: none;
    padding: 0;
    border: 0;
    margin: 15px 0px 0px 15px;
}

nav li     {
    display: inline;
}

nav a     {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    color: #6b7b87;
    text-decoration: none;
    font-weight: normal;
   
}

nav a:hover     {
    color: #fff;
}

.linie {
    color: #990000;
    font-weight: bold;
}


/*Navi oben*/

nav2 {
    position: absolute;
    width: 920px;
}


nav2 ul     {
    list-style: none;
    border: 0;
    /*background-color: aqua;*/
    float: right;
    margin: 70px 0px 0px 0px;
}

nav2 li     {
    display: inline;
}

nav2 a     {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 100%;
    color: #6b7b87;
    text-decoration: none;
    font-weight: normal;
   
}

nav2 a:hover     {
    color: #fff;
}

nav2 a:active     {
    color: #fff;
}

.linie {
    color: #990000;
    font-weight: bold;
}



/*Navi Impressum*/

nav_klein {
    height: 50px;
    position: absolute;
    z-index: 100;
}


nav_klein ul     {
    list-style: none;
    border: 0;
    /*background-color: aqua;*/
    float: left;
    margin: 70px 0px 0px 15px;
    padding: 0;
}

nav_klein li     {
    display: inline;
}

nav_klein a     {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 70%;
    color: #6b7b87;
    text-decoration: none;
    font-weight: normal;
   
}

nav_klein a:hover     {
    color: #fff;
}

nav_klein a:active     {
    color: #fff;
}

.linie {
    color: #990000;
    font-weight: bold;
}




               
/*Mobile Version - Tablet*/

@media only screen and (max-width: 1024px)    {
   

   
#wrapper    {
    max-width: 1366px; /*hier bleibt Angabe in px >> alle anderen Werte dann in %*/
    height: 830px;
    /*background-color: blue;*/
    margin: 0;
    padding: 0;
}

#header    {
    width: 100%;
    height: 10%;
}

.logo    {
    float: right;
    margin: 1.8% 0px 0px 0px;
    height: 70%;
}

#content    {
    /*background-color: chartreuse;*/
    /*background-image: url(images/background.jpg);
    background-repeat: no-repeat;*/
    max-width:100%;
    height: 79.518072%;
    background-color:blueviolet;
}

#galerie    {
    /*background-color: chartreuse;*/
    /*background-image: url(images/wrapper.jpg);
    background-repeat: no-repeat;*/
    max-width: 920px;
    width: 100%;
    height: 500px;
    margin-top: 100px;
    position: relative;
}
   
}


und css für die Slideshow:
Code:
@charset "UTF-8";
/* CSS Document */


/**
* Slideshow style rules.
*/
#slideshow {
    width: 920px;
    margin: 0;
    padding: 0;
    height:500px;
    z-index:10;
    position: absolute;
    /*background-color:#fff;*/
}


#slideContainer {
    overflow: hidden;
    width: 810px;
    height: 500px;
    position: absolute;
    margin: 30px 0px 0px 50px;
    /*background-color: antiquewhite;*/
}


.slide {
      margin:0 auto;
    width:800px;
    height:450px;
    display: flex;  /*für vertikale Zentrerung*/
      align-items: center; /*für vertikale Zentrerung*/
    /*justify-content: center; /*für zusätzlich horizontale Zentrerung*/
}




/**
* Slideshow controls style rules.
*/
.control {
  display:block;
  width:40px;
  height:500px;
  text-indent:-1000px;
  position:absolute;
  cursor: pointer;
    /* Transparenter Hintergrund:
  filter:alpha(opacity=8); /* IE
  opacity:0.8; /* allgemein
  -moz-opacity:0.8; /* Mozilla
  -khtml-opacity:0.8; /* KTHML
  -opera-opacity:0.8; /* Opera
    */
  z-index: 99;
   
}


#leftControl {
  top:224px;
  left:10px;
  background:url(images/pfeil_links.gif) no-repeat 0 0;
}

#rightControl {
  top:224px;
  right:0;
  background:url(images/pfeil_rechts.gif) no-repeat 0 0;
}

figcaption {
    width: 350px;
    background-color: aquamarine;
    height:400px;
}


Wäre super dankbar für einen Lösungsvorschlag.

Andrea
 
gibt es eine Möglichkeit, die Bildunterschrift in einem Slider mit figcaption auch außerhalb dieses Sliders zu positionieren, also im Prinzip in einer eigenen div?
Grundsätzlich/theoretisch kann <figcaption> (wie so ziemlich jedes andere HTML-Element auch) jederzeit mit position:absolute (oder fixiert position:fixed) aus seinem normalen Textfluss genommen, und mittels der wählbaren Startpositionen top|right|bottom|left im Viewport wie gewünscht umpositioniert werden.

Dazu ist zunächst in diesem Demo Dein CSS nicht enthalten:
Praktisch nein, weil sich die Positionierung auf die Boxengrenzen der übergeordneten (Slider)Container bezieht, die selbst schon position:absolute besitzen, und sich alles innerhalb des Viewports von #galerie mit position:relative abspielt.

Im zweiten Demo sind die relevanten CSS-Snippets der Sliderumgebung dazugekommen:
[edit]TippEx[/edit]
 
Zuletzt bearbeitet:
OK, SpiceLab, vielen Dank, da hab ich auf alle Fälle schon wieder was gelernt.

Gibt es denn eine Möglichkeit, eine Galerie anzulegen mit im Prinzip 2 Slidecontainer, in dem einen die Bilder, in dem anderen der Text - mit Bezug zueinander, also dass bei Klick beide Inhalte wechseln?
 
Hallo SpiceLab,

jetzt habe ich ein neues Problem: und zwar verschiebt sich bei Sprung auf einen Anker innerhalb der Galerie die ganze Seite etwas nach oben.

Woran könnte das liegen?


HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HOPE International Communications</title>
<meta name="description" content="HOPE ist eine auf länderübergreifende und multikulturelle Kommunikation ausgerichtete Werbeagentur mit Standorten in England, Frankreich Deutschland und den USA. Zu den Kompetenzschwerpunkten gehören Print, Packaging und Corporate Design.">
<meta name="Keywords" content="Agence conseil en communication, Full Service, Alsace, Elsaß, Strasbourg Straßburg, Strasburgo, B to B, Industriewerbung, Marketing Services, below the line, stratégie marketing, approche terrain, media planning, mix communication, time to market, R.O.I. , marketing interculturel, High Tech, knowledge-based, savoir-faire, Know-how, marketing direct">
<meta name="revisit-after" content="7 days" >
<meta http-equiv="reply-to" content="philippe.holtzweiler@hope-communications.com">
<meta name="author" content="HOPE International Communications" >
<meta name="language" content="de, fr, en, it">
<meta name="publisher" content="HOPE International Communications">
<meta name="copyright" content="HOPE International Communications">
<meta name="audience" content="Alle">
<meta name="robots" content="index,follow">
<meta http-equiv="imagetoolbar" content="false">
<meta name="author" content="HOPE International Communications - Philippe Holtzweiler">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link href="style.css" rel="stylesheet">
<link href="slideshow.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 1050;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slideContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
  
    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }  
});
</script>

</head>

<body>

    <div id="wrapper">
  
        <header><img src="images/logo.png" class="logo"></header>
      
        <main><!--<img src="images/background.jpg">-->
      
        <nav_klein>
            <ul>
                <li><a href="#">Impressum</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Kontakt</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Intro</a></li>
            </ul>
        </nav_klein>
      
        <nav2>
            <ul>
                <li><a href="#">Anzeigen</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#broschueren">Broschüren</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="newmedia.html">Sales Support</a></li>
                <li class="linie">&nbsp;|&nbsp;</li>
                <li><a href="#">Newsletter</a></li>
            </ul>
        </nav2>
      
      
      
        <div id="galerie">
      
            <!-- Slideshow HTML -->
            <div id="slideshow">
                <div id="slideContainer">
                    <div class="slide">
                    <img src="slidebilder/luisina_1.jpg" width="243" height="311" border="0" style="margin-left: 30px;"/>
                    <img src="slidebilder/luisina_2.png" width="220" height="210" border="0" style="margin-left: 300px; margin-top: 125px;"/>
                        <figcaption><span class="linie_fig">|</span>&nbsp;<strong>Luisina</strong><br>Diese Kampagne für den führenden französischen Spezialisten im Bereich Arbeitsplatten und Spülen ist in Wohn- und Frauenzeitschriften geschaltet worden. Markante Gestaltung und High-End-Positionierung stehen im Vordergrund: Für die Premium-Marke Luisina, die sich noch im Aufbau befindet, stehen Sichtbarkeit und Image im Vordergrund.</figcaption>
                    </div>
                       <div class="slide">
                    <img src="slidebilder/groupama.jpg" width="215" height="280" border="0" style="margin-left: 500px;"/>
                        <figcaption><span class="linie_fig">|</span>&nbsp;<strong>Groupama</strong><br>
                         Die französische Groupama gehört europaweit zu den großen international tätigen Versicherungs&shy;gesellschaften. Eine Teilbelegung im Stern hat den Auftakt zum Aufbau ihrer Deutschland-Präsenz gegeben.</figcaption>
                    </div>
                    <div class="slide">
                    <img src="slidebilder/lafayette.jpg" width="117" height="350" border="0" style="margin-left: 600px;"/>
                        <figcaption><span class="linie_fig">|</span>&nbsp;<strong>Galeries Lafayette</strong><br>
                         Für den Straßburger Standort der Galeries Lafayette stellt die deutsche Kundschaft eine sehr attraktive Premium-Zielgruppe dar. Sie wird über spezifische Anzeigen und In-House-Aktionen angesprochen, die den Pariser Luxus-Flair der Warenhauskette konsequent transportieren.</figcaption>
                    </div>
                
                      <div class="slide" id="broschueren">
                    <img src="slidebilder/president_rezeptheft.png" width="331" height="242" border="0" style="margin-left: 30px;"/>
                        <figcaption><span class="linie_fig">|</span>&nbsp;<strong>Rezeptheft Pr&eacute;sident</strong><br>
                         Dauer-Sichtbarkeit im unmittelbaren Anwendungsumfeld: ein einleuchtendes Ziel, das vom Crème Fraîche-Rezeptheft konsequent umgesetzt wird. Raffinierte Rezepte unterstreichen die Gourmet-Positionierung, folienkaschiertes, wischfestes Papier sorgt für Lebensdauer im gnadenlosen Küchenbiotop.</figcaption>
                  </div>
                 
                 
                 </div>
            </div>
            <!-- Slideshow HTML -->  
  
        </div>
      
      

          
        </main>
      
        <nav>
            <ul>
                <li class="active">Classic Media</li>
                <li class="linie">&nbsp;&nbsp;|&nbsp;&nbsp;</li>
                <li><a href="#">New Media</a></li>
                <li class="linie">&nbsp;&nbsp;|&nbsp;&nbsp;</li>
                <li><a href="#">Corporate</a></li>
                <li class="linie">&nbsp;&nbsp;|&nbsp;&nbsp;</li>
                <li><a href="#">Packaging</a></li>
                <li class="linie">&nbsp;&nbsp;|&nbsp;&nbsp;</li>
                <li><a href="#">Promotions &amp; POS</a></li>
                <li class="linie">&nbsp;&nbsp;|&nbsp;&nbsp;</li>
                <li><a href="#">Language transcreations</a></li>
                <li class="linie">&nbsp;&nbsp;|&nbsp;&nbsp;</li>
                <li><a href="#">Interpersonal communication</a></li>
            </ul>
        </nav>
      
    </div>
  
</body>
</html>


CSS:
@charset "UTF-8";
/* CSS Document */

html, body {
    background-color: #00131b;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 100%; /*wichtig, für die sich daran ausrichtenden anderen Schriftgrößen > in der Regel 16px >> 1em = 16px >> 1.5em = 24:16 >> 1.5 x 16 = 24*/
    line-height: 130%;
    border-width: 0px;
    font-style: normal;
    /*color: aqua;*/
}

#wrapper    {
    margin-left: auto; /*mittig setzen*/
    margin-right: auto;
    max-width: 1366px; /*hier bleibt Angabe in px >> alle anderen Werte dann in %*/
    height: 830px;
    /*background-color: aqua;*/
}

header    {
    width: 100%;
    height: 12.048193%;
    /*background-color: antiquewhite;*/
}

.logo    {
    float: right;
    margin: 1.8% 0px 0px 0px;
    height: 69%;
}

main    {
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    max-width:100%;
    height: 79.518072%;
    /*background-color:blueviolet;*/
}

#galerie    {
    /*background-color: chartreuse;*/
    background-image: url(images/wrapper.jpg);
    background-repeat: no-repeat;
    max-width: 1050px;
    width: 100%;
    height: 500px;
    position: relative;
    top: 100px;
}

.linie_fig {
    color: #990000;
    font-weight: bold;
    padding: 0px 5px 0px 0px;
    font-size: 130%;
    vertical-align: 20%;
}


/*Navi unten*/
/*nav {
    width: 100%;
    height: 70px;
}*/

nav {
    height: 70px;
    position: absolute;
    /*background-color: aqua;*/
}


nav ul     {
    list-style: none;
    padding: 0;
    border: 0;
    margin: 15px 0px 0px 15px;
}

nav li     {
    display: inline;
}

nav a     {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    color: #6b7b87;
    text-decoration: none;
    font-weight: normal;
  
}

nav a:hover     {
    color: #fff;
}

.active    {
    color: #fff;
}

.linie {
    color: #990000;
    font-weight: bold;
}


/*Navi oben*/

nav2 {
    position: absolute;
    width: 1050px;
}


nav2 ul     {
    list-style: none;
    border: 0;
    /*background-color: aqua;*/
    float: right;
    margin: 70px 0px 0px 0px;
}

nav2 li     {
    display: inline;
}

nav2 a     {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 100%;
    color: #6b7b87;
    text-decoration: none;
    font-weight: normal;
  
}

nav2 a:hover     {
    color: #fff;
}

nav2:active     {
    color: #fff;
}

.linie {
    color: #990000;
    font-weight: bold;
}



/*Navi Impressum*/

nav_klein {
    height: 50px;
    position: absolute;
    z-index: 100;
}


nav_klein ul     {
    list-style: none;
    border: 0;
    /*background-color: aqua;*/
    float: left;
    margin: 70px 0px 0px 15px;
    padding: 0;
}

nav_klein li     {
    display: inline;
}

nav_klein a     {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 70%;
    color: #6b7b87;
    text-decoration: none;
    font-weight: normal;
  
}

nav_klein a:hover     {
    color: #fff;
}

nav_klein a:active     {
    color: #fff;
}

.linie {
    color: #990000;
    font-weight: bold;
}




              
/*Mobile Version - Tablet*/

@media only screen and (max-width: 1024px)    {
  

  
#wrapper    {
    max-width: 1366px; /*hier bleibt Angabe in px >> alle anderen Werte dann in %*/
    height: 830px;
    /*background-color: blue;*/
    margin: 0;
    padding: 0;
}

#header    {
    width: 100%;
    height: 10%;
}

.logo    {
    float: right;
    margin: 1.8% 0px 0px 0px;
    height: 70%;
}

#content    {
    /*background-color: chartreuse;*/
    /*background-image: url(images/background.jpg);
    background-repeat: no-repeat;*/
    max-width:100%;
    height: 79.518072%;
    background-color:blueviolet;
}

#galerie    {
    /*background-color: chartreuse;*/
    /*background-image: url(images/wrapper.jpg);
    background-repeat: no-repeat;*/
    max-width: 920px;
    width: 100%;
    height: 500px;
    margin-top: 100px;
    position: relative;
}
  
}






/**
* Slideshow style rules.
*/
#slideshow {
    width: 1050px;
    margin: 0;
    padding: 0;
    height:500px;
    z-index:10;
    position: absolute;
    /*background-color:#fff;*/
}


#slideContainer {
    overflow: hidden;
    width: 930px;
    height: 500px;
    position: absolute;
    margin: 30px 0px 0px 50px;
    /*background-color: antiquewhite;*/
}


.slide {
      margin:0 auto;
    width:93px;
    height:450px;
    display: flex;  /*für vertikale Zentrerung*/
      align-items: center; /*für vertikale Zentrerung*/
    /*justify-content: center; /*für zusätzlich horizontale Zentrerung*/
    /*background-color: aquamarine;*/
}



figcaption {
    position: relative;
    width: 350px;
    height:400px;
    /*background-color: aquamarine;*/
    color: #666;
}

.slide:nth-child(1) figcaption {
    margin: 80px 0px 0px 300px;
    position: absolute;
}

.slide:nth-child(2) figcaption {
    margin: 110px 0px 0px 100px;
    position: absolute;
  
}

.slide:nth-child(3) figcaption {
    margin: 50px 0px 0px 200px;
    position: absolute;
}

.slide:nth-child(4) figcaption {
    margin: 150px 0px 0px 400px;
    position: absolute;
}



/**
* Slideshow controls style rules.
*/
.control {
  display:block;
  width:40px;
  height:500px;
  text-indent:-2000px;
  position:absolute;
  cursor: pointer;
    /* Transparenter Hintergrund:
  filter:alpha(opacity=8); /* IE
  opacity:0.8; /* allgemein
  -moz-opacity:0.8; /* Mozilla
  -khtml-opacity:0.8; /* KTHML
  -opera-opacity:0.8; /* Opera
    */
  z-index: 99;
  
}


#leftControl {
  top:224px;
  left:10px;
  background:url(images/pfeil_links.gif) no-repeat 0 0;
}

#rightControl {
  top:224px;
  right:0;
  background:url(images/pfeil_rechts.gif) no-repeat 0 0;
}



/* CSS Document */

Der Anker sitzt in nav2 (#broschueren) und springt zum 4. slide
 
Ja, ich dachte mir schon was in der Richtung :)

Kann ich denn dem Anker sozusagen auch sagen, dass mit ihm ein Menüpunkt active wird?
Also sobald ich in der Galerie bei einem bestimmten Anker (hier z.B. broschueren) bin, wird Menüpunkt Broschüren active?
Wahrscheinlich nur mit JS, oder?
 
Ja, ich dachte mir schon was in der Richtung :)

Kann ich denn dem Anker sozusagen auch sagen, dass mit ihm ein Menüpunkt active wird?
Also sobald ich in der Galerie bei einem bestimmten Anker (hier z.B. broschueren) bin, wird Menüpunkt Broschüren active?
Wahrscheinlich nur mit JS, oder?
Sicher.

Aber meinst du nicht auch, dass
  1. Deine neuen Fragen mit dem ursprünglichen Thema nichts mehr zu tun haben?
  2. Als Designerin/Entwicklerin solche Fragen eigentlich zu den Grundkenntnissen zählen?
  3. Du eigenständig zu den Fragen im Netz recherchieren kannst? (Der Lerneffekt ist damit weitaus größer!)
 
Zurück