Slider als Background "Image" des Headers

dn3d_fanboy · 27.03.2013

Hallo,
ich denke der Thementitel erklärt nicht wirklich, was ich machen möchte, also hier nochmal detailierter:

Ich möchte im Header einer Internetseite einen Slider ausführen. Dieser Slider sollte wenn möglich das Hintergrund-Image des Header-DIVs ändern.

In diesem Header-DIV sollen sich dann noch andere DIVs befinden (Navigation, Login, etc.) die dann (eventuell mit etwas Transparenz) so gesehen über diesem Hintergrund liegen und dadurch nicht beeinflusst werden.

Ich hoffe, DAS war jetzt einigermaßen verständlich ausgedrückt :rolleyes:

.

Gibt es hierfür ein jQuery Skript oder besser noch ein WordPress-Plugin. Leider habe ich via Google nichts gefunden (ich weiß leider auch nicht wonach ich genau suchen muss).

Falls mir also jemand weiterhelfen kann, wäre es nett wenn er entsprechende Links oder Tipps ier posten könnte.

Besten Dank im Voraus.

patrick_l · 28.03.2013

AW: Slider als Background "Image" des Headers

Eigentlich ganz simple. Header und alle gewünschten Inhalte (Slider, Navigation und Co) erstellen. den Slider / die Slideshow auf in Größe des Headers anpassen. Alle anderen Elemente wie Navigation und Co mit Hilfe von CSS (z-index, position) darüber positionieren.

HTML:

<!-- HTML5 -->
<header id="header">
    <!-- slider = größe des headers -->
    <ul id="slider"> 
      <li><img src="pfad/zum/bild/img01.jpg" alt="cherry" /></li>
      <li><img src="pfad/zum/bild/img02.jpg" alt="apple" /></li>
      <li><img src="pfad/zum/bild/img03.jpg" alt="banana" /></li>
  </ul>
  <!-- navigation = gewünschte größe -->
  <nav id="navigation"> 
      <ul>
        <li><a href="#">page 1</a></li>
        <li><a href="#">page 2</a></li>
        <li><a href="#">page 3</a></li>
     </ul>
  </nav>
</header>

Die Navigation im CSS ansprechen und wie bereits erwähnt, mit z-index aus dem normalen Dokumentenfluss nehmen. Also mit z-index und position an gewünschte Stelle positionieren (darüber legen).

Liebe Grüße, Patrick

randacek_pro · 28.03.2013

AW: Slider als Background "Image" des Headers

Hab das mal als Anlass genommen, bisschen rum zu gucken...
Es gibt auch spezielle Background-Slider (vielleicht jetzt nicht für deinen Zweck), die auf jQuery basieren:
www.freshdesignweb.com/15-fullscreen-background-jquery-image-slider-and-slideshow.html

dn3d_fanboy · 14.07.2013

AW: Slider als Background "Image" des Headers

Auch wenn ich mich etwas spät zurückmelde, vielen Dank für eure Antworten.

Leider habe ich nicht ganz verstanden, wie ich es machen soll, Patrick und habe mal ein Bild hochgeladen, um zu erklären, was ich will:

1.) ist der Hintergrund des Header-DIVS der durch Javascript geändert, also ständig neue Bilder einfaden, werden soll.
2.) ist ein weiteres DIV innerhalb des Headers in dem später das Logo positioniert wird. Dieses DIV soll auch permanent zu sehen sein, auch wenn die Bilder im Hintergrund sich ständig ändern.

Gibt es da irgendwelche Tutorials, mit denen ich das richtig zusammenfügen kann, Patrick und alle anderen?

Für den z-index müsste ich die DIVs doch alle absolut positionieren, oder?

dn3d_fanboy · 14.07.2013

AW: Slider als Background "Image" des Headers

Also ich verstehe es wirklich nicht, bei mir kommt da anur absoluter Müll bei raus, wenn ich mit dem z-index rumhantiere.
Jetzt habe ich es zwar geschafft, mittels des z-index die DIV-Box über den Header zu bekommen, jetzt wird aber alles, was darubter liegt hinter den Header verschoben. Wie kann ich das denn nun beheben?

Hier auch das CSS:

Code:

@charset "utf-8";
/* --| simple CSS Reset |------------------------ */
* {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  list-style: none;
}

html, body {
  min-width: 100px;
  min-height: 100%;
}

body {
  font-size: 100%;
  background: url(../images/body-bg.jpg);
}

/* --| Wrapper |------------------------------- */

#wrapper    {width: 960px;
            height: 100%;
            margin: 0 auto;
            box-shadow: 0px 0px 6px #000000;
            }


/* --| Header |------------------------------- */

#header {
position: absolute;
z-index: 1;
width: 960px;
height: 200px;
background: #ffffff url(../images/header-bg.jpg);
margin: 0 auto;
}

#header-logo-box    {
                    position: absolute;
                    z-index: 2;
                    height: 200px;
                    width: 290px;
                    background:    url(../images/logo-and-box.png);
                    float: left
                    }
                    
/*#header-logo-box-shadow    {
                        height: 200px;
                        width: 20px;
                        background:    url(../images/logo-bg-box-shadow.png);
                        float: left;
                        }
                        
#logo    {width: 200px;
        height: 119px;
        background:    url(../images/logo.png);
        }*/
                
                        
/* --| Main Wrapper |------------------------------- */

#main    {
        width: 960px;
        min-height: 600px;
        background: #f7f7f7;
        }
        
/* --| Sidebar |------------------------------- */
        
#sidebar    {width: 200px;
            min-height: 600px;
            background: #d3d3d3;
            margin-left: 50px;
            float: left;
            }

/* --| Navi |------------------------------- */            
            
#navi {
margin: 20px 5px 0px 5px;
padding: 0;
list-style-type: none;
} 

#navi a    {
        font-family: /*champagne,*/ Arial, sans-serif;
        font-size: 20px;
        text-decoration: none;
        width: 190px;
        height: 40px;
        display: block;
        color: #1273a0;
        text-shadow: 1px 1px 0px #ffffff;
        background: url(../images/navi-normal.png) bottom no-repeat;
        line-height: 45px;
        } 

#navi a.home    {font-size: 24px;}

#navi a:hover, a:visited, a:focus, a:active    {font-style: italic;
                                            color: #06435f;
                                            background: url(../images/navi-hover.png) bottom no-repeat;
                                            text-indent: 10px;}
                                            

/* --| Content |------------------------------- */

#content    {width: 670px;
            min-height: 555px;
            padding: 25px 10px 20px 30px;
            background: #f7f7f7 url(../images/sidebar-shadow.png) no-repeat;
            float: left;
            }
            
#page-text     {width: 640px;
            min-height: 200px;
            background: #ffffff url(../images/post-bg.jpg);
            box-shadow:0px 0px 3px #000000;
            padding: 5px 5px 5px 5px;
            }
            
    #page-text h2    {
                    font-family: /*champagne,*/ Arial, sans-serif;
                    font-size: 20px;
                    font-weight: bold;
                    color: #0e4c8e;
                    text-shadow: 1px 1px 0px #ffffff;
                    }
    
    #page-text p        {
                    font-family: /*champagne,*/ Arial, sans-serif;
                    font-size: 14px;
                    font-weight: normal;
                    color: #0e4c8e;
                    margin: 15px 0 0 5px;}
    
    #page-text strong    {
                        font-family: /*champagne,*/ Arial, sans-serif;
                        font-size: 14px;
                        font-weight: bold;
                        color: #0e4c8e;}
    
    #page-text a    {}
    
    #page-text a:hover, a:visited, a:focus, a:active    {}

und das Markup:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="language" content="de-de" />
  <meta name="Author"  content="Jens Bohlscheid - JB - Design 4 Web" />
  <meta name="Robots" content="index, follow" />
  <meta name="Googlebot" content="index, follow" />
  <meta name="Revisit-after" content="5" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  
  <title></title>
  
    <link rel="stylesheet" type="text/css" href="css/styles.css" media="all" charset="utf-8" />
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
  
    <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="js/unslider.js" type="text/javascript"></script>

</head>


<body>

    <div id="wrapper">
        
        <div id="header">                
        
        </div>    
            
                
        <div id="header-logo-box">
            
        </div>
        
        <div id="main" class="clearfix">
<!-- Ende header.php   --->        

            <div id="sidebar">
            
                <ul id="navi">
                    <li><a class="home" href="index.html" title="Hier finden Sie die Startseite unseres Internetauftritts">Startseite</a></li>
                    <li><a href="#" title="Hier erfahren Sie mehr &uuml;ber Bender Consulting">&Uuml;ber uns</a></li>
                    <li><a href="#" title="">Unternehmensberatung</a></li>
                    <li><a href="#" title="">Personalberatung</a></li>
                    <li><a href="#" title="">Arbeitsvermittlung</a></li>
                    <li><a href="stellenangebote.html" title="">Stellenangebote</a></li>
                    <li><a href="kontakt.html" title="F&uuml;r Fragen, Anregungen und Kritik k&ouml;nnen Sie hier unsere Kontaktdaten finden">Kontakt</a></li>
                </ul> 
            
            </div>
<!-- Ende sidebar.php    --->
        
            <div id="content">
            
                <div id="page-text">
                
                    <h2>Bender Managment Consulting</h2>
                    
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing <strong>elitr</strong>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
                    dolor sit amet.</p>
                    
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing <strong>elitr</strong>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
                    dolor sit amet.</p>
                
                </div>
            
            </div>
                
        </div>
        
        <div id="footer" class="clearfix">
    
<!-- Ende page.php   --->
    
            <ul id="sm-links">
                <li><a class="fb" href="#" title="Hier finden Sie die Startseite unseres Internetauftritts">Facebook</a></li>
                <li><a class="xing" href="#" title="Hier erfahren Sie mehr &uuml;ber Bender Consulting">Xing</a></li>
            </ul> 
        
        </div>
    
    </div>    
    
</body>
</html>
<!-- Ende footer.php   --->