Ergebnis 1 bis 5 von 5

Thema: Bild über ein Slide setzen...

  1. #1
    HTML Newbie
    Registriert seit
    25.02.2014
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Bild über ein Slide setzen...

    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.
    Code:
    <!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>
    Code:
    /*! 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;
        }
    }
    Und ein Bild (PS; Natürlich werden keine Kaninchen dargestellt. Sind nur Beispielfotos!)




    Mit freundlichen Grüssen Romacasa
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Großmeister(in) Avatar von MyXoToD
    Registriert seit
    07.11.2007
    Ort
    Mainz
    Alter
    24
    Beiträge
    507
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Bild über ein Slide setzen...

    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).
    Don't follow me, I run into walls.

  3. Folgende User finden die Antwort von MyXoToD gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    25.02.2014
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bild über ein Slide setzen...

    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.

  5. #4
    Großmeister(in) Avatar von MyXoToD
    Registriert seit
    07.11.2007
    Ort
    Mainz
    Alter
    24
    Beiträge
    507
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Bild über ein Slide setzen...

    Bitte, gern geschehen. Passt es denn so wie du willst? Ja das mag sein, da die Slides ja vermutlich absolut positioniert sind...
    Don't follow me, I run into walls.

  6. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    25.02.2014
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bild über ein Slide setzen...

    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...

Ähnliche Themen

  1. Bild über bild legen
    Von gene im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 27.09.2007, 19:44
  2. Auf Bilder schreiben, Bild in den Hintergrund setzen
    Von operator im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 11.07.2007, 18:38
  3. Formular über Bild setzen?!
    Von Tom_DD im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 17.02.2007, 17:44
  4. Bild oder Text anzeigen wenn mit Maus über Bild
    Von kwg|the-hell im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.06.2005, 13:31
  5. bild in die mitte der seie setzen
    Von im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 17.04.2005, 21:42

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •