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
css:
und css für die Slideshow:
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?
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"> | </li>
<li><a href="#">Kontakt</a></li>
<li class="linie"> | </li>
<li><a href="#">Intro</a></li>
</ul>
</nav_klein>
<nav2>
<ul>
<li><a href="#">Anzeigen</a></li>
<li class="linie"> | </li>
<li><a href="#">Broschüren</a></li>
<li class="linie"> | </li>
<li><a href="#">Sales Support</a></li>
<li class="linie"> | </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"> | </li>
<li><a href="#">New Media</a></li>
<li class="linie"> | </li>
<li><a href="#">Corporate</a></li>
<li class="linie"> | </li>
<li><a href="#">Packaging</a></li>
<li class="linie"> | </li>
<li><a href="#">Promotions & POS</a></li>
<li class="linie"> | </li>
<li><a href="#">Language transcreations</a></li>
<li class="linie"> | </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