Hilfe bei meinem Projekt - diverse Fragen

[Chizzo]

Ich kriege es nicht hin. Wenn ich auf Seite X bin und hover oben im Menü auf das Submenü von Seite X, dann hat es andere Farben, als alle anderen Submenüs. Wo kann ich das umstellen? Ich finde es nicht...

nav>ul {

            width: 100%;
            max-width: 1200px;
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;

        }


        nav li {

            width: 100%;
            max-width: 1200px;
            border: 1px solid #79B3E5;
            border-left: none;
            border-right: none;
            font-family: Arial;
            padding: 0;
            font-size: 1.5rem;
            flex: 1 1 0%;

        }



        @media (min-width: 45em) {
            nav>ul {
                flex-direction: row;
            }
            nav li {
                flex: 1;
                font-size: 1em;
            }
        }

        nav a {


            display: block;
            padding: 0.4em;
            text-decoration: none;
            font-weight: bold;
            text-align: center;
            color: #79B3E5;

        }

        nav li[aria-current] a {
            background-color: #79B3E5;
            color: white;
            font-family: Arial;
        }
        

        nav a:focus,
        nav a:hover,
        nav li[aria-current] a:focus {
        nav li[aria-current] a:hover {
            background-color: #79B3E5;
            color: white;
        }

        /*     submenu navigation links      */

        
        nav > ul > li {
            position: relative;
        }
        
        
        nav .submenu {
            position: absolute;
            visibility: hidden;
            width: 100%;
            height: 0;
            z-index: 1000;
        }

        nav .submenu li {
            display: block;
            border-top: none;
            /* width: 15em; */
        }

        /**     Show the submenu on hover, focus     **/

        nav li:hover .submenu,
        nav li:active .submenu,
        nav li:focus .submenu {
            visibility: visible;
            height: auto;
            background-color: white;
            border-right: 1px solid #79B3E5;
            border-left: 1px solid #79B3E5;
            border-top: 1px solid #79B3E5;


        }

 

[Chizzo]

Ich habs hinbekommen! Halleluja! Ging ein ganzer Nachmittag für drauf! :-D Dieser kleine Schnipsel hat das Problem gelöst:

nav li[aria-current] a:focus,
        nav .submenu li a{
            color: #79B3E5;
            background-color: white;
        }

 

[Chizzo]

Und so wird es dann noch ein bisschen besser... mit hover :-D

    nav li[aria-current] a:focus,
        nav .submenu li a{
            color: #79B3E5;
            background-color: white;
        }
        
        nav li a:hover,
        nav li:hover .submenu {
            
            color: white;
            background-color: #79B3E5;
        }

 

[Chizzo]

Was ich allerdings nicht hinbekomme ist, dass der oberste Punkt im Menü "aktiviert" bleibt, wenn ich eine der Unterseiten aufrufe. Auch wenn ich es gut, wenn man beim hovern sehen würde, welche Unterseite gerade aktiviert ist. Kann mir hier jemand helfen?

 

[Chizzo]

Ok, auch wieder zumindest halb hinbekommen. Aber wie mache ich es, dass auch der erste Punkt "angewählt" bleiben soll, wenn ich eine Unterseite aufrufe?

nav .submenu li[aria-current] a {
            color: white;
            background-color: #79B3E5;
        }

 

[Chizzo]

Wobei ich sagen muss, das sich das eigentlich echt hässlich finde :-D Vllt wäre es sinnvoll nur den obersten Reiter zu "markieren"? Die Frage ist nach wie vor allerdings noch: Wie mache ich das? Ich könnte natürlich mit dem aria-current Attribut tricksen und das einfach auf der obersten Seite eintragen, statt auf der tatsächlich aktuellen - aber darf man das auch?

 

[Chizzo]

Niemand? :(

 

[Chizzo]

Es geht gut vorwärts, ich kann auch immer mehr Probleme alleine lösen! Das mit der Markierung der Navigation habe ich jetzt so gelöst, dass einfach immer das Elternelement den aria-current-tag bekommt.

So, aber es haben sich wieder ein paar neue Probleme aufgetan.

1. Bild ist im Anhang. Ich möchte gerne, dass der Text links neben dem Bild anfängt und dann, wenn das Bild zu Ende ist, unter dem Bild weiterläuft. Leider will mir das einfach nicht gelingen.
2. Am Handy öffnet sich sofort die Eltern-Element-Seite, wenn man in der Navi was drückt. Ich möchte, dass das Navi dann ausklappt und ausgeklappt bleibt, bis man etwas ausgewählt hat - wie funktioniert das?
3. Ich möchte für Bilder an mobilen Geräten eine andere Größe festlegen. Wie mache ich das?

Bild und Code kommen... Vielen Dank im Voraus!

<!DOCTYPE html>
<html lang="de">

<head>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-120232472-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-120232472-1');
</script>



    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hypochdrie-Hilfe.de - Hilfe zur Selbsthilfe </title>
    <link rel="stylesheet" href="stylesheet.css">
</head>



<body>
    <header>
        <p>www.hypochondrie-hilfe.de</p>
            <div id="titelbild">
                <img src="../img/arzt1.png" alt="Titelbild">
            </div>
   
<nav>
    <ul>
        <li aria-current="Startseite"><a href="Startseite.html">Startseite</a></li>
            <li tabindex="0"> <a href="Hypochondrie.html">Hypochondrie</a>
                <ul class="submenu">
                    <li tabindex="0"><a href="Hypochondrie.html">Hypochondrie</a></li>
                    <li tabindex="0"><a href="Symptome.html">Symptome</a></li>
                </ul>
            </li>
            <li> <a href="Zwang.html">Zwangsstörungen</a></li>
            <li tabindex="0"> <a href="Selbsthilfe.html">Selbsthilfe</a>
                <ul class="submenu">
                    <li tabindex="0"><a href="Selbsthilfe.html">Selbsthilfe</a></li>
                    <li tabindex="0"><a href="AutogenesTraining.html">Autogenes Training</a></li>
                    <li tabindex="0"><a href="ProgressiveMuskelentspannung.html"> Progressive Muskelentspannung</a></li>
                </ul>
            </li>
            <li> <a href="Impressum.html">Impressum</a></li>
    </ul>
   
</nav>
    </header>
   
   <div id="inhalt">
 
   <div id="boxlinks">
   
       
    <br>  
<h2>Hypochondrie – Die Angst vor Krankheiten</h2>

<aside id="banner-rechts">
     <p>Wir empfehlen:</p><br>
            <a href="https://amzn.to/2J4H52A" target="_blank" rel="noopener"><img src="../img/angst2.jpg"></a>
        </aside>
<br><br>
<p>Wenn Sie bei Kopfschmerzen direkt an einen Hirntumor oder Schlaganfall denken, wenn ihr dunkles Muttermal für Sie eindeutig ein Zeichen für schwarzen Hautkrebs ist oder wenn das kurze Muskelzucken in ihrem kleinen Finger für Sie ein untrügliches Zeichen für Multiple Sklerose ist – dann leiden Sie möglicherweise an Hypochondrie – der Angst vor Krankheiten.Auf den folgenden Seiten möchten wir Ihnen einen kleinen Einblick darüber geben was Hypochondrie überhaupt ist, was und wie sich ein an Hypochondrie erkrankter Mensch fühlt und wie die Hypochondrie das Leben des Betroffenen und seines Umfelds einschränken kann. Und natürlich möchten wir Ihnen Lösungen und Wege aufzeigen, wie sie sich selbst aus dem Teufelskreis Hypochondrie befreien können. Hilfe zur Selbsthilfe!
</p><br><br>
<h2>Symptome ohne Diagnose</h2><br>


   
   
   
 Hier steht jede Menge Text, mehr als 10.000 Zeichen sind aber nicht erlaubt.
   
   

            </div>

   
   
    <div id="footer">
    <footer><p> Hypochdrie-Hilfe.de - Hilfe zur Selbsthilfe</p></footer>
    </div>

</body>

</html>

* {
            margin: 0;
            padding: 0;
        }
       
       
    header {
            width: 100%;
            max-width: 1200px;
            padding: 0px;
            margin: 0 auto;
            height: 100%;
            background-color: white;
            color: #79B3E5;
            text-align: right;
        }


        #titelbild img {
            width: 100%;
            max-width: 1200px;
            vertical-align: bottom;
            border-top: 1px solid #79B3E5;
        }
       

        nav>ul {

            width: 100%;
            max-width: 1200px;
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;

        }


        nav li {

            width: 100%;
            max-width: 1200px;
            border: 1px solid #79B3E5;
            border-left: none;
            border-right: none;
            font-family: Arial;
            padding: 0;
            font-size: 1.5rem;
            flex: 1 1 0%;

        }



        @media (min-width: 45em) {
            nav>ul {
                flex-direction: row;
            }
            nav li {
                flex: 1;
                font-size: 1em;
            }
        }

        nav a {


            display: block;
            padding: 0.4em;
            text-decoration: none;
            font-weight: bold;
            text-align: center;
            color: #79B3E5;

        }

        nav li[aria-current] a {
            background-color: #79B3E5;
            color: white;
            font-family: Arial;
        }
       
           

        nav a:focus,
        nav a:hover,
        nav li[aria-current] a:focus
        nav li[aria-current] a:hover {
            background-color: #79B3E5;
            color: white;
        }
       
        nav li[aria-current] a:focus,
        nav .submenu li a{
            color: #79B3E5;
            background-color: white;
        }
       
        nav li a:hover,
        nav li:hover .submenu {          
            color: white;
            background-color: #79B3E5;
        }
       
       
        nav .submenu li[aria-current] a {
            color: white;
            background-color: #79B3E5;
        }
   
       
       

        /*     submenu navigation links      */

       
        nav > ul > li {
            position: relative;
        }
       
       
        nav .submenu {
            position: absolute;
            visibility: hidden;
            width: 100%;
            height: 0;
            z-index: 1000;
        }

        nav .submenu li {
            display: block;
            border-top: none;
            /* width: 15em; */
        }

        /**     Show the submenu on hover, focus     **/

        nav li:hover .submenu,
        nav li:active .submenu,
        nav li:focus .submenu {
            visibility: visible;
            height: auto;
            background-color: white;
            border-right: 1px solid #79B3E5;
            border-left: 1px solid #79B3E5;
            border-top: 1px solid #79B3E5;


        }
       
       


body * {
            box-sizing: border-box;
        }


       
       
        body {
            width: 100%;
            max-width: 1200px;
            padding: 5px;
            margin: 0 auto;
            height: 100%;
            background-color: white;
        }
       
        body a,
        body a:visited {
            color: #79B3E5;
            text-decoration: none;
        }




        p {
            font-family: Verdana;
            font-size: 16px;
            line-height: 115%;
           
        }
       
        h2 {
            text-decoration: none;
            padding-bottom: 5px;
}

        #inhalt {

            background-color: white;
            padding-top: 15px;
            padding-top: 15px;
        }



        nav {

            background-color: white;
        }


        #inhalt {
            display: flex;
           
        }

        #boxlinks {
            flex: 4;
        }

        aside#banner-rechts {
            color: grey;
            margin-top: 0px;
            margin-left: 0px;
            flex: 1;
            background-color: white;
            padding-left: 2px;
            float:right;
            text-align: right;
           
           
        }
       
        aside#banner-rechts img{
            width: 40%;
            float: right;
           
        }



        figure a {
            text-decoration: none;
            color: blue;

        }

        figure a:visited {
            color: blue;
        }

        figure a:hover {
            text-decoration: underline;
        }

        #Werbung img {

            align: right;

        }
       
         #Baustelle img {

           width: 25%;
        display: block;
        margin: 0 auto;
}
       
        footer {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
        }
       
        footer p {
            text-align: right;
            color: #79B3E5;
            display: none;
        }
       
       

       
   
.Aufzahlung {
    font-family: Arial;
    font-size: 20px;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5%;
    list-style-position: inside;
}

#Kreis1 img{
    width: 50%;
    display: block;
    margin: 0 auto;
}

 

[Chizzo]

Habe ich ja schon so angegeben im CSS. Am Desktop-PC funktioniert es auch wunderbar, aber mobil leider nicht.

 

[Chizzo]

Die Seite ist zwar schon online für erste Tests, aber diese geändete Funktion noch nicht. Habe sie mir auch nur über die Firefox-Entwicklerumgebung mobil anzeigen lassen.

 

[Chizzo]

http://hypochondrie-hilfe.de/NeueSeite

Desktop ist das Bild gerade etwas klein, ansonsten sieht es ganz gut aus. Mobil floatet nicht. Weil das Bild zu groß ist?

 

[Chizzo]

Es scheint jetzt zu funktionieren. Die HTML-Seite, die ich umgestellt habe, funktioniert nach wie vor nicht wie gewünscht, aber durch die Änderungen im CSS habe ich auf den anderen Seiten jetzt erreicht, was ich wollte... die Entdeckung des Penicillins muss so ähnlich abgelaufen sein^^

 

[Chizzo]

Ach, ich bin doof... das funktioniert gar nicht. Das ist nur durch das <aside> auf der Seite, der Text läuft also außen herum, aber floatet nicht :-(

 

[Chizzo]

Hier nochmal die Codes, wie sie aktuell aussehen - leider komplett ohne float. Ich bin mir nicht sicher, ob das Sinn macht, die ganze Seitenstruktur nochmal umzuwerfen. Evtl gibt es ja auch so eine Lösung.

<!DOCTYPE html>
<html lang="de">

<head>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-120232472-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-120232472-1');
</script>



    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hypochdrie-Hilfe.de - Hilfe zur Selbsthilfe </title>
    <link rel="stylesheet" href="stylesheet.css">
 </head>
 
 
 
<body>
    <header>
        <p>www.hypochondrie-hilfe.de</p>
            <div id="titelbild">
                <img src="../img/arzt1.png" alt="Titelbild">
            </div>
    
<nav>
    <ul>
        <li aria-current="Startseite"><a href="Startseite.html">Startseite</a></li>
            <li tabindex="0"> <a href="Hypochondrie.html">Hypochondrie</a>
                <ul class="submenu">
                    <li tabindex="0"><a href="Hypochondrie.html">Hypochondrie</a></li>
                    <li tabindex="0"><a href="Symptome.html">Symptome</a></li>
                </ul>
            </li>
            <li> <a href="Zwang.html">Zwangsstörungen</a></li>
            <li tabindex="0"> <a href="Selbsthilfe.html">Selbsthilfe</a>
                <ul class="submenu">
                    <li tabindex="0"><a href="Selbsthilfe.html">Selbsthilfe</a></li>
                    <li tabindex="0"><a href="AutogenesTraining.html">Autogenes Training</a></li>
                    <li tabindex="0"><a href="ProgressiveMuskelentspannung.html"> Progressive Muskelentspannung</a></li>
                </ul>
            </li>
            <li> <a href="Impressum.html">Impressum</a></li>
    </ul>
    
</nav>
    </header>
    
   <div id="inhalt">
  
   <div id="boxlinks">
    
        
    <br>   
<h2>Hypochondrie – Die Angst vor Krankheiten</h2>
<br>

Inhalt...

    
    
    
    </div>
    
     <aside id="banner-rechts">
     <br>
     <p>Wir empfehlen:</p><br>
            <a href="https://amzn.to/2J4H52A" target="_blank" rel="noopener"><img src="../img/angst2.jpg"></a>
        </aside>

            </div>

    
    
    <div id="footer">
    <footer><p> Hypochdrie-Hilfe.de - Hilfe zur Selbsthilfe</p></footer>
    </div>
 
</body>

</html>

* {
            margin: 0;
            padding: 0;
        }
        
        
    header {
            width: 100%;
            max-width: 1200px;
            padding: 0px;
            margin: 0 auto;
            height: 100%;
            background-color: white;
            color: #79B3E5;
            text-align: right;
        }


        #titelbild img {
            width: 100%;
            max-width: 1200px;
            vertical-align: bottom;
            border-top: 1px solid #79B3E5;
        }
        

        nav>ul {

            width: 100%;
            max-width: 1200px;
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;

        }


        nav li {

            width: 100%;
            max-width: 1200px;
            border: 1px solid #79B3E5;
            border-left: none;
            border-right: none;
            font-family: Arial;
            padding: 0;
            font-size: 1.5rem;
            flex: 1 1 0%;

        }



        @media (min-width: 45em) {
            nav>ul {
                flex-direction: row;
            }
            nav li {
                flex: 1;
                font-size: 1em;
            }
        }

        nav a {


            display: block;
            padding: 0.4em;
            text-decoration: none;
            font-weight: bold;
            text-align: center;
            color: #79B3E5;

        }

        nav li[aria-current] a {
            background-color: #79B3E5;
            color: white;
            font-family: Arial;
        }
        
            

        nav a:focus,
        nav a:hover,
        nav li[aria-current] a:focus
        nav li[aria-current] a:hover {
            background-color: #79B3E5;
            color: white;
        }
        
        nav li[aria-current] a:focus,
        nav .submenu li a{
            color: #79B3E5;
            background-color: white;
        }
        
        nav li a:hover,
        nav li:hover .submenu {           
            color: white;
            background-color: #79B3E5;
        }
        
        
        nav .submenu li[aria-current] a {
            color: white;
            background-color: #79B3E5;
        }
    
        
        

        /*     submenu navigation links      */

        
        nav > ul > li {
            position: relative;
        }
        
        
        nav .submenu {
            position: absolute;
            visibility: hidden;
            width: 100%;
            height: 0;
            z-index: 1000;
        }

        nav .submenu li {
            display: block;
            border-top: none;
            /* width: 15em; */
        }

        /**     Show the submenu on hover, focus     **/

        nav li:hover .submenu,
        nav li:active .submenu,
        nav li:focus .submenu {
            visibility: visible;
            height: auto;
            background-color: white;
            border-right: 1px solid #79B3E5;
            border-left: 1px solid #79B3E5;
            border-top: 1px solid #79B3E5;


        }
        
        


 body * {
            box-sizing: border-box;
        }


        
        
        body {
            width: 100%;
            max-width: 1200px;
            padding: 5px;
            margin: 0 auto;
            height: 100%;
            background-color: white;
        }
        
        body a,
        body a:visited {
            color: #79B3E5;
            text-decoration: none;
        }




        p {
            font-family: Verdana;
            font-size: 16px;
            line-height: 115%;
            
        }
        
        h2 {
            text-decoration: none;
            padding-bottom: 5px;
}

        #inhalt {

            background-color: white;
            padding-top: 15px;
            padding-top: 15px;
        }
        
        nav {

            background-color: white;
        }


        #inhalt {
            display: flex;
            
        }
        

        #boxlinks {
            flex: 4;
        }

        aside#banner-rechts {
            color: grey;
            margin-top: 0px;
            margin-left: 0px;
            flex: 1;
            background-color: white;
            padding-top: 15px;
            padding-left: 2px;
            padding-bottom: 2px;
            float:right;
            text-align: right;
        
            
            
        }
        
        aside#banner-rechts img{
            width: 100%;
            float: right;
            margin-left: 10px;
            
        }



        figure a {
            text-decoration: none;
            color: blue;

        }

        figure a:visited {
            color: blue;
        }

        figure a:hover {
            text-decoration: underline;
        }

        #Werbung img {

            align: right;

        }
        
         #Baustelle img {

           width: 25%;
        display: block;
        margin: 0 auto;
}
        
        footer {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
        }
        
        footer p {
            text-align: right;
            color: #79B3E5;
            display: none;
        }
        
        

        
    
.Aufzahlung {
    font-family: Arial;
    font-size: 20px;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5%;
    list-style-position: inside;
}

#Kreis1 img{
    width: 50%;
    display: block;
    margin: 0 auto;
}

 

[Chizzo]

Vielen Dank! Ich habe noch ein paar Feineinstellungen vorgenommen, aber es sieht jetzt so aus, wie ich es gerne hätte! Jetzt habe ich noch den ein oder anderen Punkt, den ich alleine nicht gelöst bekomme:

1. Wenn ich auf ein Elternelement in der Navigation klicke (Welches auch auf eine eigene Seite verlinkt), möchte ich, dass die Kinderelemente geöffnet bleiben. Wie bekomme ich das hin?
2. Auf meinem Galaxy S8 öffnet er die Seite einen winzigen Tick zu groß. Also rechts und links fehlen wenige Pixel. Wie kriege ich es hin, dass er am Handy nur den vollen Bildschirm ausfüllt, aber nicht darüber hinaus?

Ich habe es schon mit media queries versucht, da mache ich aber wohl irgendwas falsch, denn es passiert überhaupt nichts.

3. HTML ist valide bis auf diesen einen Punkt:

• Error: Bad value Impressum for attribute aria-current on element li.
  From line 50, column 9; to line 50, column 37
  >↩ <li aria-current="Impressum"> <a hr

Was kann ich hier tun?

 

[djheke]

Zu 1. mit Nachfahrselektoren.

 

[Chizzo]

2. könnte vom Padding des Body kommen. Versuche box-sizing für body auf html zu ändern:

 html * {
            box-sizing: border-box;
        }

Danke, das funktioniert! :-)

Mit der Navigation komme ich aber trotz dass ich einige Seiten gelesen habe nicht weiter. Ich möchte, dass das gerade aktive Menü nur auf dem Handy (Mobil) aufgeklappt bleibt. Ich finde hier absolut keinen Lösungsansatz bzw. weiss nicht, wie ich damit beginnen soll...

 

[basti1012]

Vielleicht kannst du dir hier was abgucken. Der letzte Link der angeklickt wurde in der Leiste ist dann aktiv. Der speichert das mit localStorage so wie @Sempervivum es schon sagte .

*** Link entfernt, weil nicht mehr erreichbar ***
An besten kannst du es testen, wenn du ein Link anklickst und die Seite reloadest, dann siehst du das er den Klick auch speichert.
So kann man das auch an einen aufgeklappten Menü anwenden.
Die andere Möglichkeit, mit dem Wert an der anderen Seite übergeben muss dir wer anders zeigen ,da müsste ich erst selber testen, wie man das an besten macht

 

[Chizzo]

Reden wir hier über die gleiche Sache? Es geht mir darum, dass die Untermenüs, wenn man am Handy ist, nur ganz kurz aufploppen und man nicht wirklich Zeit hat, eine Seite auszuwählen. Für diesen Fall möchte ich, dass die Untermenüs der Navigationsleiste offen bleiben, bis man sich für eine Unterseite entschieden hat.

 

[djheke]

Sollen sich denn die Untermenüs der nicht aktiven Links in der mobilen Ansicht öffnen lassen? Oder reichen Hauptmenüpunkte?
Wenn nicht, reicht auch CSS völlig aus.

P.S. Wenn die Navi nur kurz aufploppt, dann ist irgendetwas falsch.