Sliedershow mit position: absolute, andere Div rutschen in den Sliedershow Bereich

Meister333

Guten Tag

Ich hab ein kleines Problem beim Programmieren meiner Webseite. Ich will auf der Startseite eine kleine Sliedershow erstellen aus ca. 5 Bilder was auch geklappt hat. Dafür habe ich 5 Bilder mit der Position: absolute definiert. Aber nun sind die DIV's Bereiche welche zuerst schön nach einander gekommen sind in den Bereich der Bilder gerutscht. Weis einer wie ich die Div's nun schön bündig machen kann ohne die Höhe mit einer px Angaben zu vergeben? Weil ich will die Seite für verschiedene Bildschirmgrössen anpassen.

Ich bedanke mich jetzt schon für die Hilfe und die Mühe und hoffentlich könnt ihr mir dabei Helfen.

PHP

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}




*{
    margin: 0;
    padding: 0;
}


a {text-decoration: none;}


html, php, body{
    margin: 0; 
    padding:  0;
    min-height: 1px;
    max-height: 9000px;
    height: 100%;
    background: rgba(244, 216, 5, 0);

}


#container{
    min-height: 100%;
    position: relative;
    background: rgba(118, 116, 116, 0.19);
}


#main-header{
    position: absolute;
    width: 100%;
    height: 5em;
    text-align: center;
    background: rgba(234, 234, 234, 0);
    z-index: 5000;
}



#main-header.fixed{
    background: rgba(11, 10, 10, 0.52);
    color: azure;
    position: fixed;
    top: 0;
    left: 0;
}


#main-header.fixed header nav a{
    color: #c9c9c9;
}


#menu{
    width: 100% ;
    margin-left: auto;
    margin-right: auto;}




.menuul{
    width: 50%;
    list-style: none;
    margin-left: auto;
    margin-right: auto;}




.header{
    width: 100%;
    height: 5em;}










.header-Logo{
    float: right;
    padding:  10px 20px  ;
    font-size: 28px;
    margin-right: 2%;
    font-family: sans-serif, ;
    border: 2.5px solid  rgba(219, 219, 219, 0.99);
    color: rgba(219, 219, 219, 0.99);
    margin-top: 0.4em;}










.header li{
    display: inline-block;}






.header nav a{
    color: rgba(219, 219, 219, 0.99);
    display: block;
    padding:  10px 20px;
    text-transform: uppercase;
    font-size: 24px;
    font-family: sans-serif,;
    border-bottom: 2px solid transparent;
    margin-top: 0.6em;}




.header nav a:hover{
    border-color: #ffffff;}


                     












      

.main-inhalt{
    padding-bottom: 70px; /*-------wegen Footer-----*/
    text-align: center;}




#Inhalt-Seite1-Image{
   height: 900px; 


}




.Inhalt-Seite1{
   position: relative;
    min-height: 1px;
    max-height: 2000px;
    min-height: 100%;
    height: 33px;
    width: 100%;
    background: rgb(134, 64, 64);
    z-index: 900;}








.Inhalt-Seite1-Image1{
    position: absolute;
    width: 100%;
    overflow: hidden;
    display: block;

    z-index: 100;}




.Inhalt-Seite1-Verdunkeln{


    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 4000;}





.Inhalt-Seite1-Titel{
    position: absolute;
    top: 6em;
    width: 100%;
    z-index: 1000;}


.Inhalt-Seite1-Titel h1{

    text-align: center;
    font-size: 12vh;
    text-transform: uppercase;
    font-weight: 300;
    color: aliceblue;
    padding-top: 15%;
    margin-bottom: 10px;}


.Inhalt-Seite1-Titel p{
    text-align: center;
    font-size: 20px;
    letter-spacing: 3px;
    color: aliceblue;}




.Inhalt-Seite1-Titel-Button{

    margin-top: 12%;}




.Inhalt-Seite1-Titel-Button p{
     text-align: center;
    margin-right: auto;
     margin-left: auto;
    padding-top: 4px;
    font-size: 28px;
    letter-spacing: 3px;
    color: aliceblue;
    width: 18%;
    height: 45px;
    border: 2.5px solid #ffffff;
}


.Inhalt-Seite2{
    height: 980px;}




.Inhalt-Seite1-Titel-Button p:hover{

    color: rgb(31, 31, 31);
    border-color: rgb(31, 31, 31);
    background: rgba(255, 255, 255, 0.52);}






.Inhalt-Seite3{}






.Inhalt-Seite1-Image2{
    width: 100%;
    overflow: hidden;
    display: block;

    z-index: 100;

}










/*-------------------------------------------------------------------------Footer--------------------------------------------------*/






.main-footer{
    height: 70px;
    width: 100%;
    background: rgb(13, 13, 13);
    bottom: 0;
    position: absolute;}




.footer{

    width: 100%;
    margin-left: auto;
    margin-right: auto;}


.footer ul{
    list-style: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
text-align: center;}












.footer li{
    display:inline-block ;
   margin-top: 2px;}






.footer  a{
    color: #b6b5bf;
    display: block;
    padding:  10px 20px;
    margin-right: 50px;
    margin-left: 50px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: sans-serif, Georgia;}




.footer  a:hover{
    color: #1a1919;}




.footer-icon{
     width: 29px;
    height: 29px;}

Alles anzeigen

PHP

<!DOCTYPE html>
<php>




    <head>



    <title>Startseite</title>

    <meta property="og:url"           content="http://www.startseitecom" />

    <meta property="og:type"          content="website" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

    <meta charset="UTF-8">

         <script src="http://code.jquery.com/jquery-latest.js"></script>


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


     

    </head>






  <body>





      <div id="container">


          <div id="main-header" >



                <header class="header">

                    <a class="header-Logo" href="#">Logox</a>

                    <nav id=menu>

                        <ul class="menuul">

                            <li><a href="#">Gallery</a></li>    


                            <li><a href="#">Team</a></li>


                            <li><a href="#">News</a></li>



                        </ul>

                    </nav>    



              </header>  

        </div> <!---------main-header--->


           <script>

       $(window).on('scroll', function(evt) {
    if ( $(document).scrollTop() > 120  ) {
        $('#main-header').addClass('fixed');
    } else {
        $('#main-header').removeClass('fixed');  
    }
}); 


    </script>







          <!-----------------------------------------------------------Inhalt------------------------------------------->




                  <div class="main-inhalt">



                    <div class="Inhalt-Seite1">


                   <div class="Inhalt-Seite1-Verdunkeln"></div>

                       <img class="Inhalt-Seite1-Image1" src="Galleryimag/Snowboard/Image-Snowboard1.JPG"> 

                        <img class="Inhalt-Seite1-Image1" src="Galleryimag/People/Image-People4.JPG"> 

                        <img class="Inhalt-Seite1-Image1" src="Galleryimag/People/Image-People5.JPG"> 












    <div class="Inhalt-Seite1-Titel">

    <h1>Startseite</h1>
    <p>Start Summer 2017</p>


    <div class="Inhalt-Seite1-Titel-Button">
       <a href="#Seite3"> <p>More</p> </a>

        </div>


    </div>
                   </div>   










                      <section class="Inhalt-Seite2">




                      
                      </section>        











         <section class="Inhalt-Seite3">


                      <img id="Seite3" class="Inhalt-Seite1-Image2" src="Galleryimag/Snowboard/Image-Snowboard3.jpg"> 


                      </section>             

                    </div>  
















        <!--------------------------------------------Footer----------------------------------------------->      
                <div class="main-footer">



              <footer class="footer">

                  <ul>


                      <li><a href="">Über uns</a></li>

                      <li><a href="">Newsletter</a></li>

                      <li><a href="">Kontakt</a></li>

                      <li><a href=""><img class="footer-icon" src="siteimag/FB-f-Logo__white_50.png"></a></li>

                      <li><a href=""><img class="footer-icon" src="siteimag/Instagramlogo%20weiss%2029x29.png"></a></li>

                  </ul>


              </footer>

          </div>







      </div>

    </body>  


</php>

Alles anzeigen

Sliedershow mit position: absolute, andere Div rutschen in den Sliedershow Bereich

Tags

Benutzer online in diesem Thema