Beiträge von Groschenheld

Groschenheld

japp, bin am üben^^ Deshalb die Sinnlosen Spielereien auch. danke jedenfalls für die antworten. Anscheinend darf ich bei einem element welches ich mit display:none definiere keinen z-index eintragen. inzwischen funktioniert es jedenfalls wie gewünscht.

Groschenheld

Hier noch mal das html und css dokument. Kann nicht sagen wie gewöhnungsbedürftig es ist was ich da zusammen schreibe deshalb danke schonmal^^ besagte onjekte befinden sich in der html in zeile 21 und 113. in der css bei 12 20 und 32

Code

<head>    <title>Condensed Darkness Player Community</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="apple-mobile-web-app-capable" content="YES" />
    <link href="css/template.css" type="text/css" rel="stylesheet">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
    <script src="js/animationen.js"></script>
</head>




<body>
    <div id="index">
        <div id="wrapper">
            <header id="main-header">
                <nav id="main-navigation">
                    <ul class="menu">
                        <li> <a href="#">Info</a> <a href="#">Donation Packs</a> <a href="#">Impressum</a> </li>
                    </ul>
                </nav>
                <div id="containerBild">
                    <div id="headerBild"> </div>
                </div>
            </header>
            <div id="breadcrumb"> <a href="#">Home</a> </div>
            <div id="section-wrapper">
                <section id="sidebar">
                    <header>
                        <h3>Untermenu h3</h3> </header>
                    <nav>
                        <ul class="menu">
                            <li><a href="#artikel1">Avorion</a>
                            </li>
                            <br>
                            <br>
                            <br>
                            <li><a href="#artikel2">7 Days To Die</a>
                            </li>
                            <br>
                            <br>
                            <br>
                            <li><a href="#artikel3">Elder Scrolls Online</a>
                            </li>
                        </ul>
                    </nav>
                </section>
                <section id="content">
                    <header>
                        <h2>Überschrift H 2</h2> </header>
                    <article id="artikel-text">
                        <div id="artikel0">
                            <p>Stellen Sie sich reichlich text vor obwohl hier nur eine zufällige Buchstaben folge abgebildet ist. hdhaiuuahan, hahhushhta.
                                <br/> jhdhhhennhsgh jjshiolötmji klajsmnujeih</p>
                            <p>Und noch etwas mehr text von dem ich behaupte das er keine Willkürliche Wort reiehenfolge ist. hdkkkvu.</p>
                        </div>
                        <br>
                        <br>
                        <br>
                        <div id="artikel1">
                            <div id="avorion"> </div>
                            <h2> Übewrschrift neu</h2>
                            <p>Stellen Sie sich reichlich text vor obwohl hier nur eine zufällige Buchstaben folge abgebildet ist. hdhaiuuahan, hahhushhta.
                                <br/> jhdhhhennhsgh jjshiolötmji klajsmnujeih</p>
                            <p>Und noch etwas mehr text von dem ich behaupte das er keine Willkürliche Wort reiehenfolge ist. hdkkkvu.</p> <a href="#avorionIndex">ENTER</a> </div>
                        <div id="artikel2">
                            <div id="sdtd"> </div>
                            <h2> Übewrschrift neu</h2>
                            <p>Stellen Sie sich reichlich text vor obwohl hier nur eine zufällige Buchstaben folge abgebildet ist. hdhaiuuahan, hahhushhta.
                                <br/> jhdhhhennhsgh jjshiolötmji klajsmnujeih</p>
                            <p>Und noch etwas mehr text von dem ich behaupte das er keine Willkürliche Wort reiehenfolge ist. hdkkkvu.</p>
                        </div>
                        <div id="artikel3">
                            <div id="elderScrolls"> </div>
                            <h2> Übewrschrift neu</h2>
                            <p>Stellen Sie sich reichlich text vor obwohl hier nur eine zufällige Buchstaben folge abgebildet ist. hdhaiuuahan, hahhushhta.
                                <br/> jhdhhhennhsgh jjshiolötmji klajsmnujeih</p>
                            <p>Und noch etwas mehr text von dem ich behaupte das er keine Willkürliche Wort reiehenfolge ist. hdkkkvu.</p>
                        </div>
                    </article>
                </section>
            </div>
            <footer> Copyright 2017 </footer>
        </div>
    </div>
    <div id="avorionIndex">
        <h1>tfvgbzuhnjmigzbuhnmijo,k.lö</h1>
        <p>gzgfvzbhnju8 binibizbihzbihzb ihihzbhizbhzgrzfrtz7iuzh ouoipmpimomnopmnojnoujn
            <br> ihzbzbiuzbguzvugvugzbuzvbugtvugtvgutvutgvugtvgutvutvutgv</p>
    </div>
</body>

Alles anzeigen

Code

html,body {} #index {
    width: 100%;
    height: 100%;
    background-image: url(images/jpgBody.jpg);
    font-family: 'Exo', sans-serif;
    position: absolute;
    z-index: 2;
}
#avorionIndex {
    display: none;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url(images/pngAvorion5.png);
    background-repeat: no-repeat;
    font-family: 'Exo', sans-serif;
    position: absolute;
    margin-top: -2000px;
}
#avorionIndex:target {
    display: block;
    z-index: 3;
    width: 100%;
    height: 100%;
    background-image: url(images/pngAvorion5.png);
    background-repeat: no-repeat;
    font-family: 'Exo', sans-serif;
    position: absolute;
    margin: auto;
}
p {
    color: azure;
}
#wrapper {
    width: 80%;
    margin: 0px auto;
    /* MITTIG */

    border: 1px solid #000;
}
header {
    height: 100px;
    width: 100%;
    color: azure;
    float: left;
}
#main-header {
    width: 100%;
    height: 287px;
    border: 1px solid #000;
    float: left;
    background-color: rgba(0, 13, 25, 0.4);
}
#headerBild {
    background: center url(images/pngLogo.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 186px;
    margin-top: 1%;
    float: left;
    transition-duration: 5s;
}
#headerBild:hover {
    transform: scale(1.2);
    transition-duration: 5s;
}
#main-navigation {
    width: 100%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,e5e5e5+100 */

    background: #000000;
    /* Old browsers */

    background: -moz-linear-gradient(top, #000000 0%, rgba(0, 13, 25, 0.4) 100%);
    /* FF3.6-15 */

    background: -webkit-linear-gradient(top, #000000 0%, rgba(0, 13, 25, 0.4) 100%);
    /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, #000000 0%, rgba(0, 13, 25, 0.4) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='rgba(0, 13, 25, 0.4)', GradientType=0);
    /* IE6-9 */

    margin-top: 1%;
    float: left;
}
section {
    height: 300px;
    width: 100%;
    background-color: rgba(0, 13, 25, 0.4);
    color: #000000;
    float: left;
}
footer {
    height: 2.5em;
    width: 100%;
    background-color: #000000;
    color: chartreuse;
    float: left;
    border-top: 1em solid transparent;
    margin-top: 1%;
}
#breadcrumb {
    width: 80%;
    height: 43px;
    border: 1px solid #000;
    background-color: rgba(0, 13, 25, 0.4);
    float: left;
    margin-top: 1em;
    margin-bottom: 1em;
}
ul {
    width: 100%;
}
li {
    width: 100%;
}
a {
    width: 25%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding: 1px;
    border-radius: 0.2em;
    font-size: 130%;
    color: red;
    text-decoration: none;
    transition-duration: 1s;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */

    background: rgb(76, 76, 76);
    /* Old browsers */

    background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);
    /* FF3.6-15 */

    background: -webkit-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0);
    /* IE6-9 */
}
a:hover {
    color: aqua;
    font-size: 140%;
    transition-duration: 1s;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#131313+0,1c1c1c+9,2b2b2b+24,111111+40,000000+49,2c2c2c+50,474747+61,666666+75,595959+88,4c4c4c+100 */

    background: rgb(19, 19, 19);
    /* Old browsers */

    background: -moz-linear-gradient(top, rgba(19, 19, 19, 1) 0%, rgba(28, 28, 28, 1) 9%, rgba(43, 43, 43, 1) 24%, rgba(17, 17, 17, 1) 40%, rgba(0, 0, 0, 1) 49%, rgba(44, 44, 44, 1) 50%, rgba(71, 71, 71, 1) 61%, rgba(102, 102, 102, 1) 75%, rgba(89, 89, 89, 1) 88%, rgba(76, 76, 76, 1) 100%);
    /* FF3.6-15 */

    background: -webkit-linear-gradient(top, rgba(19, 19, 19, 1) 0%, rgba(28, 28, 28, 1) 9%, rgba(43, 43, 43, 1) 24%, rgba(17, 17, 17, 1) 40%, rgba(0, 0, 0, 1) 49%, rgba(44, 44, 44, 1) 50%, rgba(71, 71, 71, 1) 61%, rgba(102, 102, 102, 1) 75%, rgba(89, 89, 89, 1) 88%, rgba(76, 76, 76, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, rgba(19, 19, 19, 1) 0%, rgba(28, 28, 28, 1) 9%, rgba(43, 43, 43, 1) 24%, rgba(17, 17, 17, 1) 40%, rgba(0, 0, 0, 1) 49%, rgba(44, 44, 44, 1) 50%, rgba(71, 71, 71, 1) 61%, rgba(102, 102, 102, 1) 75%, rgba(89, 89, 89, 1) 88%, rgba(76, 76, 76, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#4c4c4c', GradientType=0);
    /* IE6-9 */
}
#sidebar {
    width: 15%;
    height: 50em;
    background-color: black;
    float: left;
    border-top: 1em solid transparent;
    color: transparent;
}
#content {
    width: 84%;
    height: 50em;
    float: left;
    padding-left: 1%;
    border-top: 1em solid transparent;
}
#section-wrapper {
    height: 50em;
    width: 100% background-color: rgba(0, 13, 25, 0.4);
}
.menu {
    color: transparent;
}
#artikel1,
#artikel2,
#artikel3 {
    display: none;
    transition: all .3s ease-in-out;
    position: relative;
}
#artikel1:target,
#artikel2:target,
#artikel3:target {
    display: block;
    position: relative;
    float: left;
    color: azure;
    transition: all .3s ease-in-out;
    position: relative;
    animation-duration: 4s;
    animation-name: bewegungTarget;
}
@keyframes bewegungTarget {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
#avorion {
    background-image: url(images/pngAvorion.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    width: 15em;
    height: 15em;
    margin-top: 1%;
    float: left;
    transition-duration: 3s;
}
#avorion:hover {
    background-image: url(images/pngAvorion.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    width: 15em;
    height: 15em;
    margin-top: 1%;
    float: left;
    transform: scale(1.2);
    transition-duration: 3s;
}
#elderScrolls {
    background-image: url(images/pngEso.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    width: 15em;
    height: 15em;
    margin-top: 1%;
    float: left;
    transition-duration: 3s;
}
#elderScrolls:hover {
    background-image: url(images/pngEso.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    width: 15em;
    height: 15em;
    margin-top: 1%;
    float: left;
    transform: scale(1.2);
    transition-duration: 3s;
}
#sdtd {
    background-image: url(images/png7dtd.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    width: 15em;
    height: 15em;
    margin-top: 1%;
    float: left;
    transition-duration: 3s;
}
#sdtd:hover {
    background-image: url(images/png7dtd.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    width: 15em;
    height: 15em;
    margin-top: 1%;
    float: left;
    transform: scale(1.2);
    transition-duration: 3s;
}

Alles anzeigen

Groschenheld

Habe mehr oder weniger eine genze Startseite in einen div Container gespannt und mit einer id mit z-index 1 definiert mit position absolute.
Darunter einen eigenständigen div Container dessen id= display:none und id:target= display block z-index2 und position absolute beinhaltet.
Dazu bei allen drei id´s eine genaue größenangabe. Wollte probierten ob ich über die erste id welche die startseite symbolisiert eine andere seite animiert drüber blenden kann. Aber obwohl die id auf disply none steht ist sie teilweise eingeblendet. Hab herumprobiert und weis nicht was ich falsch mache. Sollte jemand eine idee haben wäre ich dankbar für eine Antwort.

Mit freundlichem Gruss^^

Beiträge von Groschenheld

erbitte hilfe oder ratschläge

erbitte hilfe oder ratschläge

erbitte hilfe oder ratschläge