Warum beeinflusst ein völig unnützes Element in CSS das darauf folgende Element?

    Hallo,


    Ich suche verzweifelt einen Grund dafür, dass ein CSS Style, der eigentlich nicht gebraucht wird, die Position von einem anderen Element beeinflusst


    Ich habe das hier :



    Wenn ich das habe, bekomme ich "wrapper" dort wo ich das will: links auf der Seite ... An der Stelle wo es NAV hat, hat es aber eigentlich etwas anderes und NAV ist überflüssig.


    Wenn ich NAV herausnehme, dann wird "Wrapper" nicht mehr links auf der Seite angezeigt, sondern in der Mitte. Es muss also so sein, dass wrapper relativ zur position von NAV ist.


    NAV habe ich durch eine andere Navigationsleiste ersetzt:



    Kann mir bitte jemand sagen, wie ich NAV rausschmeissen kann und dann trotzdem wrapper an den linken Rand seetzen kann?



    Danke,

    brainstuff

    Einmal editiert, zuletzt von Stef () aus folgendem Grund: Bitte den Code in Codetags einfügen!

    das hier ist das CSS

    body{

    display: flex;

    margin-left: 45px;


    flex-wrap: nowrap;

    justify-content: space-between;;

    align-content: center;

    align-items: center;

    background-image:url('../images/notebookporsche black.jpg'); background-attachment:fixed;

    }


    #logo1 {

    color: white;

    background-color: black;

    position: fixed;

    width: 281px;

    height: 70px;

    top: 10px;

    left: 5px;


    }



    #path {

    position: fixed;

    /* margin-left: 384px; */

    width: 1066px;

    height: 30px;

    top: 33px;

    left: 430px;

    background-color: #ABCDEF;

    transform: scale(1.2,1.2);

    }


    /* Navigation */



    ul#navigat, ul#navigat ul {

    position: fixed;

    margin: 0;

    padding: 0;

    top: 70px;

    left: 322px;

    list-style-type: None;

    height: 32px;

    }


    ul#navigat li {

    float: Left;

    width: 160px;

    position: Relative;

    }


    ul#navigat li a {

    display: Block;

    width: 159px;

    line-height: 30px;

    text-align: Center;

    color: #FFFFFF;

    text-decoration: None;

    background-color: #ABC7E0;

    border: 1px Solid #FFFFFF;

    border-bottom: 0;

    transition: color 0.5s;

    }


    ul#navigat li a:hover,

    ul#navigation li a:active {

    color: #000000;

    cursor: Pointer;

    }


    ul#navigat li ul {

    opacity: 0.0;

    visibility: Hidden;

    position: Absolute;

    left: 0px;

    top: 31px;

    z-index: 100;

    transition: Opacity 1s;

    }


    ul#navigat li:hover > ul,

    ul#navigat li:active > ul {

    opacity: 1.0;

    visibility: Visible;

    }


    ul#navigat li ul a {

    background-color: #ABC7E0;

    }

    h1, p {

    clear: Left;

    }


    nav{

    width:100%;

    height:1px;

    text-align:left;

    margin-left: 315px;

    margin-top: 65px;

    color:white;

    font-size:20px;

    position:fixed;

    top:0;


    background:black;


    }

    #wrapper{

    margin-top:140px;

    margin-left: 25px;

    height:auto;

    width:900px;

    display: flex;

    flex-direction:column;


    }


    .wrapper{

    margin-top:120px;

    margin-left: 25px;

    height:auto;

    width:900px;

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    justify-content: left;

    align-content: left;

    align-items: left;

    background:black;

    }


    #scrollpg1 {

    display: flex;

    flex-direction: column;

    align-content: left;

    align-items: left;

    margin-left: 25px;


    height:438px;

    flex:4;


    background:#ffffff;

    border: 8px solid white;

    }

    /* Flex:8 ... ist die breite der linken Spalte */


    #scrollpg1 #unten{

    overflow:auto;


    }


    #scrollpg2 {

    display: flex;

    justify-content: right;

    align-content: right;

    align-items: right;

    word-break:break-all;

    height:450px;

    flex: 1;

    background:#ffffff;

    border:2px solid white;

    }

    img{

    width:100%;

    }



    p{

    font-size:20px;

    margin:auto 20px auto 5px;

    }


    #copyrightw {

    color: white;

    background-color: transparent;


    position: fixed;

    border-color: transparent;

    border-width: 5px;

    border-style: solid;

    width: 180px;

    height: 20px;

    bottom: 20px;

    right: 40px;

    }



    und das ist die html:



    <!DOCTYPE html>

    <html class="no-js" lang="en"><head>


    <link rel="stylesheet" type="text/css" href="mehrere kästen nacheinander links 2.css">

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

    </head>


    <body>


    <div id="logo01">

    <img style="width: 287px; height: 71px;" alt="logo" src="../images/logo01.jpg"><br>

    </div>


    <div id="path">

    home/aaaa/aaaa/aaa.html

    </div>


    <nav>

    <ul id="navigat">

    <li><a>Item 1</a>

    <ul>

    <li><a href="#">Item 1.1</a></li>

    <li><a href="#">Item 1.2</a></li>

    <li><a href="#">Item 1.3</a></li>

    </ul>

    </li>

    <li><a>Item 2</a>

    <ul>

    <li><a href="#">Item 2.1</a></li>

    <li><a href="#">Item 2.2</a></li>

    <li><a href="#">Item 2.3</a></li>

    </ul>

    </li>

    <li><a>Item 3</a>

    <ul>

    <li><a href="#">Item 3.1</a></li>

    <li><a href="#">Item 3.2</a></li>

    <li><a href="#">Item 3.3</a></li>

    </ul>

    </li>

    <li><a>Item 4</a>

    <ul>

    <li><a href="#">Item 4.1</a></li>

    <li><a href="#">Item 4.2</a></li>

    <li><a href="#">Item 4.3</a></li>

    </ul>

    </li>

    <li><a>Item 5</a>

    <ul>

    <li><a href="#">Item 5.1</a></li>

    <li><a href="#">Item 5.2</a></li>

    <li><a href="#">Item 5.3</a></li>

    </ul>

    </li>

    <li><a>Item 6</a>

    <ul>

    <li><a href="#">Item 6.1</a></li>

    <li><a href="#">Item 6.2</a></li>

    <li><a href="#">Item 6.3</a></li>

    </ul>

    </li>

    <li><a>Item 7</a>

    <ul>

    <li><a href="#">Item 7.1</a></li>

    <li><a href="#">Item 7.2</a></li>

    <li><a href="#">Item 7.3</a></li>

    </ul>

    </li>

    <li><a>Item 8</a>

    <ul>

    <li><a href="#">Item 8.1</a></li>

    <li><a href="#">Item 8.2</a></li>

    <li><a href="#">Item 8.3</a></li>

    </ul>

    </li>

    </ul>

    </nav>




    <div id="wrapper">


    <div class="wrapper">

    <div id="scrollpg1">

    <div id="oben"><h3>CorpCloud</h3></div>

    <div id="unten"><p>W</p></div>

    </div>


    <div id="scrollpg2"><img style="width: 60px; height: 450px;" alt="logo" src="../images/pxoxd com vertical.jpg"><br></div>


    </div>



    <div class="wrapper">

    <div id="scrollpg1">

    <div id="oben"><h3> Coaching</h3></div>

    <div id="unten"><p>U.<br><br> </p></div>

    </div>

    <div id="scrollpg2"><img style="width: 60px; height: 450px;" alt="logo" src="../images/brainstuff com fond white.jpg"><br></div>


    </div>



    <div class="wrapper">

    <div id="scrollpg1">

    <div id="oben"><h3>Bla überschrift</h3></div>

    <div id="unten"><p>Wir helfen Ihnen Ihr Projekt mit einer Firma, in der Firma vorzubereiten.<br><br> Wenn Sie ein seriöses Projekt haben, brauchen Sie am Anfang keine eigene Firma und keine eigene Infrastruktur. <br><br>Wir geben Ihrem Projekt eine Struktur innerhalb von unserer Firma, in der Sie ihr Projekt aufbauen können. Ihr Projekt entwickelt sich dann im Rahmen von unserer Firma zur Marktreife und wird, wenn es auf eigenen Beinen stehen kann, langsam ausgelagert, damit es sich dann als eigenständige Firma entwickeln kann. <br><br>So eine Firma, in einer Firma, ist eine wahre Zeitmaschine: Sie können ihre Zeit, für die Sachen verwenden, die ihr Projekt voranbringen. Es geht keine Zeit mehr mit den administrativen Pflichten verloren.</p></div>

    </div>

    <div id="scrollpg2"><img style="width: 60px; height: 450px;" alt="logo" src="../images/brainstuff com fond white.jpg"><br></div>


    </div>




    <div class="wrapper">

    <div id="scrollpg1">

    <div id="oben"><h3>Bla überschrift</h3></div>

    <div id="unten"><p>W.</p></div>

    </div>

    <div id="scrollpg2"><img style="width: 60px; height: 450px;" alt="logo" src="../images/brainstuff com fond white.jpg"><br></div>


    </div>


    <div class="wrapper">

    <div id="scrollpg1">

    <div id="oben"><h3>Bla überschrift</h3></div>

    <div id="unten"><p>Wir </p></div>

    </div>

    <div id="scrollpg2"><img style="width: 60px; height: 450px;" alt="logo" src="../images/brainstuff com fond white.jpg"><br></div>


    </div>

    <div class="wrapper">

    <div id="scrollpg1">

    <div id="oben"><h3>Schutz von Erfindungen</h3></div>

    <div id="unten"><p>W</p></div>

    </div>

    <div id="scrollpg2"><img style="width: 60px; height: 450px;" alt="logo" src="../images/brainstuff com fond white.jpg"><br></div>


    </div>

    </div>



    <div id="copyrightw">

    (c)2018 by pxoxd,inc.

    </div>


    </body>

    </html>


    ..... ein paar Sachen sind noch in einer anderen CSS aber die haben keinen EInfluss auf das Problem.



    Ich habe einfach noch nicht begriffen, wie man diese Kästen richtig plaziert.


    brainstuff

    MrMurphy auf der Testseite ist das zu sehen was es mir hier ohne das "NAV" anzeigt: die Wrappers sind in der Seitenmitte.


    Ich will die aber am linken Rand haben. Ich glaube das macht mehr Sinn, wie die Mode, das in die Seitenmitte zu stellen.


    Ich ändere jetzt mal das mit dem Justify-content und versuche die Fehler rauszuschmeissen, die die Validierung da zeigt.


    Dann lege ich die Seite auf eine Test-Adresse die ich DIr dann hier gebe ... dann siehst Du das Ergebnis ...


    Danke,

    brainstuff


    PS ich habe jetzt justify content und NAV rausgeschmissen danach war dann der wrapper zu wit oben ich habe desshalb noch margin-top: 100px; dazugefügt, jetzt läuft es gut ich stelle Dir das jetzt auf http://mail2vip.com/vtc/test01…nacheinander_links_2.html

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden