Bild über ein Slide setzen...

romacasa

Hallo

Bastle gerade auf der Grundlage von Boilerplate eine Webseite für den Betrieb, wo ich arbeite. Dabei möchte ich eine responsive SlideShow einfügen - benutze dazu http://responsiveslides.com.

Von Oben nach unten durchlädt eine rote Linie. Es wäre schön, wenn auch diese über den Slide verlaufen würde. Ich habe die Grafiken bereits erstellt. Es fehlt mir aber an Grundwissen, wie ich es bewerkstelligen könnte.

Hier die Codes:
Blank.gif ist ein 1x1 px transparent, eingefügt, damit DIV nicht leer ist.

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<html class="no-js">




<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hotelgasthof zur Sonne - Bad Gögging</title>




    <!-- Mobile viewport optimisation -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">




    <!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="cache-control" content="no-cache">
    <title>Hotel Zur Sonne</title>
    <meta name="author" content="Romano Casanova">
    <meta name="publisher" content="Pauline Haunschild">
    <meta name="copyright" content="Romano Casanova">
    <meta name="description" content="Gutbürgerliches Gasthof im Herzen Bad Göggings, dem besonderen Kurort in Bayern. ">
    <meta name="keywords" content="Hotelgasthof, Hotel Zur Sonne, Hotelgasthof zur Sonne, Bad Gögging, Übernachtung in Bad Gögging, Kurort, Traiansstrasse 3-5, Sonne Bad Gögging, Wellness Bad Gögging, Thermalbad, Kur, Familienfeier">
    <meta name="page-topic" content="Reise Tourismus">
    <meta name="page-type" content="Produktinfo über Hotelgasthof Zur Sonne in Bad Gögging">
    <meta name="audience" content="Alle">
    <meta http-equiv="content-language" content="de">
    <meta name="robots" content="index, follow"> 

     <!--Styles -->
     <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/normalize.css">

         <link rel="stylesheet" href="css/step4.css">
         <!--[if (lt IE 9) & (!IEMobile)]>
         <link rel="stylesheet" href="css/ie.css">
         <![endif]-->
     <link rel="stylesheet" href="css/grid.css">    
     <link rel="stylesheet" href="css/responsiveslides.css">
      <link rel="stylesheet" href="css/main.css">



     <!-- script -->
     <script src="js/vendor/jquery-1.10.2.min.js"></script>
     <script src="js/vendor/modernizr-2.6.2.min.js"></script>

       <script>
         $(function() {
           $(".rslides").responsiveSlides();
         });
       </script>    
</head>
<body>
<!--[if lt IE 9]>
    <p class="browsehappy">Hoppla... Sie benutzen aber einen alten <strong>Explorer-Browser</strong> . Zu Ihrer eigenen Sicherheit fürs Surfen im Web: <a href="http://browsehappy.com/?locale=de_DE">Aktualisieren oder laden Sie die neuste Version eines Browsers Ihrer Wahl! </a> <strong> -- Dies ist keine Werbung!!!</strong></p>
<![endif]-->




<!-- full skip link functionality in webkit browsers -->




    <div id="outer-wrap">
        <div id="inner-wrap">
                <!--Kopfbereich -->
                <header id="top" role="banner">

                        <div id="titel2">
                            <img src="img/titel2.png" alt="Titel" />
                        </div>
                        <div id="address">
                            <address>
                                Trajanstrasse 3-5<br />93333 Bad Gögging<br /><br />Telefon: 0049-(0)9445/95470<br />Fax 0049-(0)9445/2176
                            </address>
                        </div>

                    <a class="nav-btn" id="nav-open-btn" href="#nav">Navigation</a>

                </header>
                <nav id="nav" role="navigation">
                        <div class="block">
                            <h2 class="block-title">Hotel zur Sonne</h2>
                            <ul>
                                <li class="is-active">
                                    <a href="#">Start</a>
                                </li><!--
                             --><li>
                                    <a href="#">Zimmer</a>
                                </li><!--
                             --><li>
                                    <a href="#">Kulinarisches</a>
                                </li><!--
                             --><li>
                                    <a href="#">Impressionen</a>
                                </li><!--
                             --><li>
                                    <a href="#">Informationen</a>
                                </li><!--
                            --><li>
                                   <a href="#">Kontakt</a>
                               </li>
                            </ul>
                            <a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
                        </div> <!-- Ende  Blockdiv-->
                    </nav>
                <!-- Slide -->

                <div id="slideshow">
                    <div id="slide">
                        <ul class="rslides" id="slider1">
                          <li><img src="img/home/1.png" alt=""></li>
                          <li><img src="img/home/2.png" alt=""></li>

                        </ul>
                    </div>
                    <div id="bild2">
                        <img src="img/blank.gif "alt="Blank">    
                    </div>
                </div>


                <div id="cont">


                       <div id="main" role="main">



                                    <h1>Titel</h1>

                                    <p>Test</p>


                    </div><!-- Ende main -->





            <footer role="contentinfo">

                <div class="block prose">
                    <p class="small"><a href="http://ota.ahds.ac.uk/desc/5730">Text distributed by the University of Oxford under a Creative Commons Attribution-ShareAlike 3.0 Unported License</a></p>
                    <p class="small">Copyright © <a href="http://dbushell.com/">David Bushell</a></p>
                </div>

            </footer>
            <div id="maintitelende">
                <img src="./img/blank.gif" alt="Blank" />
            </div>
        </div><!-- Ende cont-->


        </div><!-- Ende inner warp -->
    </div><!-- Ende outher warp -->
<script src="js/main.js"></script>
<script src="js/plugins.js"></script>
<script src="js/responsiveslides.min.js"></script>
</body>
</html>

Alles anzeigen

CSS

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */


/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */




/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */




html,
button,
input,
select,
textarea {
    color: #222;
}




html {
    font-size: 1em;
    line-height: 1.4;
}




/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */




::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}




::selection {
    background: #b3d4fc;
    text-shadow: none;
}




/*
 * A better looking default horizontal rule
 */




hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}




/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */




audio,
canvas,
img,
video {
    vertical-align: middle;
}




/*
 * Remove default fieldset styles.
 */




fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}




/*
 * Allow only vertical resizing of textareas.
 */




textarea {
    resize: vertical;
}




/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */




.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}




/* ==========================================================================
   Author's custom styles
   ========================================================================== */




body {
    background: url(../img/hintrotlinie.png) repeat;
    font-size: 13px;
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 400;
}




#slideshow{
    position: relative;
    width: 100%;
}
#slide, #bild2 {
    position: absolute;

}
#bild2 {
    background: url(../img/rotelinie.png) repeat-y;




}




h1{
    font-family: "Source Sans Pro";
     font-size: 34px;
     line-height: 73px;
     margin-bottom: 25px;
}




p{
     font-size: 23px;
     line-height: 26px;
     margin-bottom: 35px;
}




#top, #nav .block, #main {
    background-color: transparent;
}




#titel2{
    padding-left: 153px;
    padding-top: 15px;
    padding-bottom: 20px;
    float: left;
}




address {
    color: #4c1010;
    font-size: 20px;
    font-style: italic;
    padding-right: 40px;
    float: right;
    padding-top: 5px;
}
#main{
    padding-left: 153px;
    padding-right: 50px;
    padding-top: 23px;
}




div.block {
    margin-left: 95px;
}




#nav{
    background-color: #641111;
    -moz-box-shadow: inset 1px 1px 19px black;
    box-shadow: inset 1px 1px 19px black;
}
#nav div.block ul li a {
    font-size: 20px;
    font-weight: normal;
    font-style: normal;
}












/* ==========================================================================
   Helper classes
   ========================================================================== */




/*
 * Image replacement
 */




.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}




.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}




/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */




.hidden {
    display: none !important;
    visibility: hidden;
}




/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */




.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}




/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */




.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}




/*
 * Hide visually and from screenreaders, but maintain layout
 */




.invisible {
    visibility: hidden;
}




/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */




.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}




.clearfix:after {
    clear: both;
}




/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */




.clearfix {
    *zoom: 1;
}




/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */




@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}




@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}




/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */




@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }




    a,
    a:visited {
        text-decoration: underline;
    }




    a[href]:after {
        content: " (" attr(href) ")";
    }




    abbr[title]:after {
        content: " (" attr(title) ")";
    }




    /*
     * Don't show links for images, or javascript/internal links
     */




    .ir a:after,
    a[href^='javascript:']:after,
    a[href^='#']:after {
        content: "";
    }




    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }




    thead {
        display: table-header-group; /* h5bp.com/t */
    }




    tr,
    img {
        page-break-inside: avoid;
    }




    img {
        max-width: 100% !important;
    }




    @page {
        margin: 0.5cm;
    }




    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }




    h2,
    h3 {
        page-break-after: avoid;
    }
}

Alles anzeigen

Und ein Bild (PS; Natürlich werden keine Kaninchen dargestellt. Sind nur Beispielfotos!)

Mit freundlichen Grüssen Romacasa

MyXoToD

Ich würde bei dem CSS für das slideshow div eine :before Regel einfügen. Zum Beispiel:

Code

#slideshow:before {
  content: "";
  background-color: red;
  width: 5px; // Breite der Linie
  height: 100%;
  position: absolute;
  top: 0;
  left: Xpx; // Abstand nach Links von der Linie
}

Dem #slideshow container müsstest du dann noch position: relative geben (falls noch nicht vorhanden).

romacasa

Herzlichen Dank,

dass soviele den Beitrag angeklickt haben und nur einer sich meiner erbarmte. An MyXoToD gilt mein Dank.

PS: z-index muss noch auf 1 oder höher gesetzt werden, da sonst der Strich immer hinten ist.

MyXoToD

Bitte, gern geschehen. Passt es denn so wie du willst? Ja das mag sein, da die Slides ja vermutlich absolut positioniert sind...

romacasa

Ja, so habe ich es mir vorgestellt. Und responsiv ist es auch dazu. Jetzt kann ich mal mein Chef konsultieren, ob ihm dies auch passt...

Tags