XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Elternelement uneinbeflusst vom Kindelement bei Liste (http://xhtmlforum.de/showthread.php?t=73884)

crane 20.07.2019 09:48

Elternelement uneinbeflusst vom Kindelement bei Liste
 
Liste der Anhänge anzeigen (Anzahl: 2)
Hallo alle zusammen,
ich bin mit meinem Menü schon etwas weiter gekommen. Nun möchte ich es schaffen, dass bei dem Menü das aus Listen besteht das Elternelement von den Änderungen im Kindelement nicht beeinflusst wird. Das heißt in meinem Fall:
Das Elternelement hat eine bestimmte Größe die kleiner als die Größe des Kindelement ist. Nun möchte ich das sobald das Kindelement dargestellt wird das Elternelement nicht in der Größe und der Position vom Kindelement beinflusst wird. Aktuell ist es so sich die Position vom Elternelement ändert, eine Lücke zum nächsten Elternelement entsteht und das Kindelement somit nicht über in die vertikale Postion vom nächsten Elternelement ragt.

Es soll letztendlich so wie auf dem Bild aussehen. Hier ist zur Verdeutlichung ein Menüpunkt blau markiert.

Mein dazugehöriger Code:
HTML-Code:

<link rel="stylesheet" href="nav2.css">

<style>
li.hm1
{
float: left;
}
<div style="float: right;" ><label for="show-menu" class="show-menu" style="position: absolute; border: 1px solid blue; right:100px; top:0;font-size:25pt;"></label>
        <input type="checkbox" id="show-menu" role="button">
        <ul class="menuc">
                <li class="hm1"><a href="#">Home</a></li>
                <li class="hm1"><a href="#">&Uuml;ber mich</a></li>
                <li class="hm1"><a href="#">Konzept</a>
                        <ul class="hidden"">
                               
                                <li><a href="#">Hakomi</a></li>
                                <li><a href="#">Chen Taiji </a></li>
                                <li ><a href="#">Qi Gong und Meditation</a></li>

                        </ul>
                </li>
                <li class="hm1"><a href="#">Methoden</a>
                        <ul class="hidden">
                               
                                <li><a href="#">Was ist Hakomie</a></li>
                                <li><a href="#">Themen</a></li>
                                <li><a href="#">Termine</a></li>

                        </ul>
                </li>
                <li class="hm1"><a href="#">Medien</a>
                        <ul class="hidden">
                               
                                <li><a href="#">Bilder</a></li>
                                <li><a href="#">Videos</a></li>
                               
                        </ul>
                </li>
                <li class="hm1"><a href="#">Links</a></li>
                <li class="hm1"><a href="#">
Kontakt</a></li>
        </ul>
</div>

CSS:
Code:

ul {
        position: relative;
        z-index: 1;
        list-style-type:none;
        margin:0px 0px;
        padding:0px 0px;
       
       
        text-align: justify;
           
       
       
}

/*Create a horizontal list with spacing im*/
li {
       
}

/*Style for menu links im*/
li a {
        display:block;
        width:100px;
        float:none;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #ffffff;
        background: #000000;
        text-decoration: none;
       
}

/*Hover state for top level links im*/
li:hover a {
       
        background:red;
       
}



/*Style for dropdown links im*/
li:hover ul  a {
        min-width:140px;
        color: #000000;
        background: blue;
       
}

/*Hover state for dropdown links maybe*/
li:hover ul a:hover {
        color: #000000;
        background: #999999;
}


/*Hide dropdown links until they are needed im*/
li ul {
        display: none;
}

/*Make dropdown links vertical im*/
li ul li {
        display: block;
        float: none;
       
       
}



/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
        display: block;
        position:relative;
        top:0;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
        width: 50px;
        height: 50px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-decoration: none;
        color: #000000;
       
        text-align: center;
       
        display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
        display: none;
        -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .menuc{
        display: block;
}


Das mit der Check box und den daraus entstehenden Veränderungen haben mit meiner Frage nichts zu tun. Der Button kommt letztendlich abhängig von der Fenstergröße zum Vorschein.
Das Ergebnis vom Code sieht wie auf dem 2. Bild aus.
Vielleicht hat einer eine Idee was und wo im Code ich was für meine Lösung ändern muss.

Vielen lieben Dank

Sailor56 20.07.2019 14:03

Da stimmt so einiges nicht - hast du den Code selbst geschrieben oder irgendwo kopiert?
Weder deine Fehlerbeschreibung, noch das angehängte Bild, passen zu dem Code, den du gepostet hast.
Bei mir sieht das Ganze so aus...
http://s414653727.online.de/tab_test/menue_1.jpg
Das Menü klebt an der rechten Seite und bei 'hover' überdeckt das Untermenü die Hauptmenüelemente.
Die Checkbox hat keine Funktion... ist auch (ohne tricksen) nicht von der Seite aus zugänglich.
Was ist denn deine Absicht... was soll zu sehen sein, wenn man die Seite aufruft... was soll passieren, wenn man auf das [?] klickt... und wie soll denn das fertige Menü aussehen?

crane 20.07.2019 18:23

Ich habe eine kleine Änderung im von mir geposteten Code vorgenommen. Ich habe ausversehen einen Teil vom Code vergessen.
Und dann habe ich auch noch ein Bild von der richtigen Darstellung angehängt.

Sailor56 20.07.2019 19:01

Und wie sollen wir dir jetzt weiterhelfen... in dem unvollständigen Code nach Fehlern suchen?

crane 20.07.2019 19:48

Bitte ignoriert die Teile mit dem Label und so, die dafür verantwortlich sind das wenn das Fenster eine bestimmte Größe hat ein Button erscheint. Der responsive Teil fehlt im Css Code da er für die Darstellung und die Lösung nicht nötig ist. Mit und ohne diesem Css Teil wird alles wie auf dem 2. Bild dargestellt.
Und ja bitte schaut in meinem Code nach wo etwas geändert werden muss, dass das Menü nach dem Aufklappen so wie auf dem 1. Bild aussieht.
Ich bitte euch sehr darum, da ich selber auf keine Idee komme. Dafür ist dieses und andere Foren auch da.
Vielen lieben Dank

Sailor56 20.07.2019 20:30

Dann poste auch bitte den Code, der das anzeigt, was im Bild 2 zu sehen ist... wie gesagt, das kann nicht der Code aus deinem Anfangspost sein, denn der erzeugt das, was ich in meiner Antwort als Bild angehängt habe.
Habe aber trotz des fehlenden Codes den Verdacht, dass die <ul>'s der Untermenüs mit
Code:

position: relative;
positioniert sind - ändere das mal auf
Code:

position: absolute;
und schau, ob das etwas verbessert?


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:52 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022