erbitte hilfe oder ratschläge

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

Royal

Wenn der Style "display: none" an der Div wirklich funktioniert und aktiv ist, sollte eigentlich nichts zu sehen sein.
Da läuft etwas falsch. Um dir weiterhelfen zu können, brauchen wir den kompletten Quelltext deiner Seite.

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

modem-kind

zu allem Deiner Website möchte ich jetzt nichts sagen..
scheinst noch ziemlich am üben zu sein -

nur ma kurz - <br> ist nicht für Abstände gedacht und auch schlecht
weil auch ungenau
für Abstände zu anderen Elementen benutze margin im css

zu Deiner Frage

Zitat

Aber obwohl die id auf disply none steht ist sie teilweise eingeblendet.

bin mir nicht sicher was genau meinst... aber
es ist nicht so

Es ist entweder Eingeblendet oder Ausgeblendet !
display: block, oder display: none;

ich denke Du Verstehst nicht was es genau bedeutet wenn Du klickst
steht in der URL eben zb. > http://meinedomain.de#artikel2

und einen close Button hast ja nirgends !
also wird es auch immer so angezeigt

Also brauchst Du zb. ein a tag extra in Deiner nav
<li><a href="">close</a></li>

oder
üblicher und besser in Deinen artikel´n 1 , 2 und 3
<a href="">close</a>

Gruß modem-kind

djheke

Code

html,body {
    height: 100%;
    background-image: url(images/jpgBody.jpg);
    font-family: 'Exo', sans-serif;
}


#index {
 position:relative;
}

Aber kümmere Dich lieber um Grundlagen und nicht um sinnlose Spielereien.

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.

Tags