Beiträge von ny_unity

    Hallo zusammen,


    ich habe ein Navbar mit mehreren Menüpunkten. Hinter diesen einzelnen Punkten stecken weitere HTML-Seiten, es sind im Prinzip alles Auswertungen.


    Wenn man einen Menüpunkt auswählt, soll die html Datei als Tab unterhalb des Menüs geöffnet werden, quasi als Tab, den man schließen kann und man wieder auf die Startseite gelangt.


    Hier mal ein Beispiel:

    pasted-from-clipboard.png


    geöffneter Tab mit Inhalt des tabs

    pasted-from-clipboard.png


    oder mehrere tabs, zwischen denen man umschalten kann, wenn man alle schließt, gelangt man wieder auf die Startseite...

    pasted-from-clipboard.png


    Nach was muss ich da suchen um das zu realisieren?


    Danke,


    MfG


    Erik


    P.s.: Ich nutze Bootstrap 4

    danke für den Hinweis, das Tool mit der Entwickler im Chrome war mir bekannt, hätte ich drauf kommen sollen.... Ich glaube aber das javascript mit show ist dafür nicht verantwortlich, ich zeige dir gleich mal meine Lösung, eventuell übersteuer ich das ganze damit?!


    WIe es klappt:

    habe einfach die klassen

    Code
    1. collapse navbar-collapse

    in meine navbar eingetragen... schon gehts... wird aber nicht übersteuert oder?


    letzte Frage, dann bin ich mit meiner navbar zufrieden....:


    Wie kann ich subemnü1 und submenü2 noch differenzierter von den Farben einstellen? Damit man weiß, in welchem Untermenü man ist, wenn das Dropdown nach unten statt nach rechts geht...



    ich bin denke ich durch mit allem, danke für die Hilfe, wiedermal!


    den subs habe ich eine neue Klasse zugeordnet...

    Code
    1.             .submenu1 {
    2. background-color: #B0A9A9;
    3. }
    4. .submenu2 {
    5. background-color: #A77E7F
    6. }

    Dann war noch das Problem, das bei dem Hamburger das Menü nicht wieder eingklappt wurde, wenn man auf einen Menüpunkt geklickt hat... das wurde gelöst, in dem ich das javascript angepasst habe... :

    Code
    1. $(".collapse").collapse('hide');

    einfach mitangeführt und die klasse collapse dem menu angehangen... bums aus ende :-D

    korrekt, die #9 ist gelöst. Thread ist fast abgeschlossen :-D


    Wenn ich das Fenster klein ziehe, also responsive ansehen möchte, dann ist der "Hamburger" geöffnet und nicht geschlossen... Außerdem, werden die Submenüs ja jetzt immer untereinander geöffnet. Kann man das noch irgendwie einstellen, dass die Subs eine andere Farbe erhalten, wenn geöffnet?

    Tatsächlich... danke!


    Eine Frage zur navbar habe ich noch... bei einem Menüpunkt mit Untermenü, passiert das:

    pasted-from-clipboard.png


    das wird abgeschnitten, also nicht wirklich responsive... Was gibt es hier für Möglichkeiten? Kann man irgendwie errechnen, dass wenn es nicht auf die Breite passt, nach unten geöffnet wird? Weiß nicht so recht, nach was ich da suchen sollte...


    achja, und gibts es die Möglichkeit bei bestimmter bildschirmgröße das Menü schon auf das symbol zu reduzieren? So dass mein Menü nicht unterbricht und auf Zeile 2 weiter geht?

    Wahrscheinlich geht das auch ohne zusätzliche Klasse, wenn du die Unterpunkte der ersten Stufe gezielt adressierst:

    Code
    1. .nav-menu>ul>li>a {
    2. border: solid;
    3. border-width: 0px 1px 0px 0px;
    4. border-color: #000;
    5. }
    6. .nav-menu>ul>li:last-child>a {
    7. border-right:none;
    8. }

    jap, gerade probiert und geht auch, danke, ist etwas kürzer :-)


    Gibt es noch die Möglichkeit, wenn ich im Dropdown-Untermenü bin, dieses farbig zu hinterlegen? Aktuell habe ich :hover und orange, aber wenn ich im Dropdown dann über ein anderen Punkt gehe, wird dieser orange, der erste Oberpunkt aber nicht mehr... schön wäre es, wenn der oberste Punkt auch immer orange bliebe... könnt ihr euch vorstellen was ich meine?

    Servus again :-D


    Bin gut voran gekommen, Navbar sieht ganz gut aus... Ich habe ein paar Trennstriche gemacht, diese werden aber auch im Dropdown-Untermenü übernommen, siehe hier: pasted-from-clipboard.png


    Ich habe

    Code
    1. .nav-menu li a {
    2. border: solid;
    3. border-width: 0px 1px 0px 0px;
    4. border-color: #000;
    5. }
    6. .nav-menu li:last-child a {
    7. border-right:none;
    8. }

    verwendet, dieser wird aber auch auf das Untermenü angewendet und sieht nicht schön aus. Habe auch eine Klasse erstellt namens:

    Code
    1. .border-out {
    2. border: none;
    3. }

    ... und diese Klasse dann den Untermenüeinträgen zugeordnet, leider klappt das nicht, vielleicht weil das andere CSS Attribut übergeordnet ist?


    Gibt es einen Weg die Unterpunkte ohne Rahmen zu versehen?


    Danke,


    Erik


    *edit*

    mit

    Code
    1. .nav-menu li .nav-link {
    2. border: solid;
    3. border-width: 0px 1px 0px 0px;
    4. border-color: #000;
    5. }
    6. .nav-menu li:last-child .nav-link {
    7. border-right:none;
    8. }

    funktioniert es wie gewollt :-D

    Hallo zusammen,


    ich komme aktuell nicht so richtig voran... In einem neuen Projekt möchte ich eine Startseite für die Mitarbeiter erstellen, die Sie "erblicken" wenn Sie ihren Browser starten.


    In dieser Startseite soll eine Navigationsleiste mit unterschiedlichen Menüpunkten, darunter auch Dropdowns und in den Dropdowns auch noch Dropright.


    Die Nav-Bar an sich ist kein Problem, auch ein Dropdown in der Navbar stellt jetzt nicht die Probleme dar, aber innerhalb einer Dropdown kann ich keinen Eintrag zu einem Dropright machen mit weiteren Menüpunkten.


    Was ich also machen möchte ist, eine Menüleiste mit Dropdown und verschachtelten Dropright Einträgen, welche aber immer auf der Startseite als "Tab" geöffnet wird, so dass die Navigationsleiste immer da bleibt.


    Hier ist mein funktionierende Code mit Dropdown, aber ohne Dropright :-(


    Frage ist, wie kann ich jetzt beispielsweise den Eitnrag Link 1 auch als dropright erstellen, mit weiteren Einträgen??


    Danke,


    MfG


    Erik

    Warum der Aufwand? Lass das action-Attribut doch einfach ganz weg wenn das Formular auf die gleiche URL zeigen soll …

    Das hab ich im Nachhinein auch so gemacht, da es immer wieder Probleme mit dem "required" gab, es wurde immer erst nach zwei klicks reagiert....


    Was ich noch hinzugefügt habe ist, dass wenn die Bewertungsseite nochmal aufgerufen wird, die bereits bewerteten Daten wieder angezeigt werden, vorher kam der Client immer wieder auf ein leeres Formular... jetzt sind die Sterne ggf. schon vorausgefüllt.


    gelöst mit:

    PHP
    1. <input type="radio" id="star1bd" name="ratingbd" value="1" required="" <?php if($disponent == 1): ?> checked <?php endif; ?>/><label for="star1bd" title="Sehr gut!">1</label>

    die $variable habe ich vorher natürlich ausgelesen aus der Datenbank

    danke, damit hat es geklappt, habe aber nicht javascript genommen, sondern die html5 variante... auch ging nicht die Fehlermeldung zu nullen mit oninput sonder ich musste onvalid nehmen... hier der code:


    Vielen Dank für Eure Hilfe, habe sehr viel gelernt.

    Ließ dir mal den Link von tk1234 durch.
    Da wird beschrieben, wie es geht.
    Wenn du es nicht hinbekommen solltest, dann erstelle mal einen aktuellen kompletten Code bei Codepen ( mit HTML und CSS).
    Ganzer Code kann ab und zu wichtig sein, weil wenn das da oben dein aktueller Code ist fehlt schon mal dein <form> Element damit das klappt.

    das <form> Element ist ganz oben im code, ist dabei ;-)


    PHP
    1. <body class="pt-md-5">
    2. <div class="container">
    3. <form class="form" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>">
    4. <header class="py-md-5">

    Also nochmal, vielen Dank an Euch... bis Bald :-D

    den link von tk1234 habe ich überlesen.... es lag an folgendem (im link von stackoverflow) schrieb jemand:

    Zitat

    If your radio buttons have been customised, for example the original icon for the radio button has been hidden via css display:none so that you can create your own radio button then you will might be getting the error.

    The way to fix it is to replace display:none with opacity:0

    Und, ich habe ja im CSS stehen:

    Code
    1. .rating:not(:checked) > input {
    2. position:absolute;
    3. display:none;
    4. clip:rect(0,0,0,0);
    5. }

    Ich habe das in:

    Code
    1. .rating:not(:checked) > input {
    2. position:absolute;
    3. opacity:0;
    4. /*display:none;*/
    5. clip:rect(0,0,0,0);
    6. }

    geändert, jetzt erscheint die Meldung, das ich einen Wert auswählen soll :-)


    Kurze Nachfrage noch: Kann ich die Meldung personalisieren und kann ich für verschiedenste required Felder unterschiedliche Meldungen bringen?


    Bsp.:

    Geschlecht required: Meldung: Bitte wählen Sie ein Geschlecht

    Alter required: Bitte geben Sie ihr Alter an

    Moin,


    es ist richtig, dass mehr Sterne = bessere Bewertung. Ich hatte aber das Bewertungssystem vor ein paar Jahres erstellt, allerdings nur für Desktop, jetzt halt auch mobil. Damals hatte ich mit Dropdown/Select und Schulnoten 1-6 gearbeitet. Diese Werte werden in einer Datenbank gespeichert, auf die dann weitere Auswertungen laufen.


    Ich wollte nicht alles umstellen, daher habe ich es so gelöst, dass 6 Sterne eine Schulnote 1 ist und so weiter...


    Aber das Problem mit dem required ist noch nicht gelöst oder? Ich probiere heute wieder weitere, halte euch auf dem Laufenden.


    Wäre cool, wenn wir das auch noch lösen würden :-)

    Nachtrag...


    Ich komme aktuell nicht weiter bei der required Angabe...


    Die radio buttons sind ja als sterne dargestellt... wenn ich das attribut required hinzufüge und dann am Ende des Formulars auf meinen button drucke, passiert nix, erhalte auch keine Fehlermeldung.


    mein button am Ende des Formulars

    Code
    1. <div class="form-row">
    2. <div class="col-md-3 offset-md-9 text-center">
    3. <button type="submit" name="absenden" value="absenden" id="absenden" class="float-md-right btn btn-primary buttondremo">Bewertung an DREMO senden</button>
    4. </div>
    5. </div>


    und die radio buttons:

    Aber es passiert einfach nix... wenn ich beim button type=button statt submit mache, passiert nix... Bei submit zeit Chrome bei der "Untersuchungsfunktion" folgenden Fehler nach klick auf dem Button an:

    An invalid form control with name='ratingbd' is not focusable.


    hast du eine Idee, basti1012 ?

    moin,

    danke für den link, der hat geholfen... habe es hinbekommen, habe es gelöst mit:

    PHP
    1. <form class="form" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">

    und dann im PHP

    Die daten abgerufen, wobei "absenden" der Button fes Formulars ist.


    Dann einfach das UPDATE SQL über die mysql query ausgeführt... und anschließend auf eine andere Seite weitergeleitet... fertig!!!


    1.000 Dank basti1012


    Jetzt bastel ich noch ein paar Prüfmechanismen ein und dann ist meine erste HTML Seite mit Bootstrap und mobiler Ansicht fertig... den automatischen Dark-Mode habe ich auch schon mit drin :-D

    danke dir, das baue ich noch mit ein.


    Kannst du mir ein kurzes Beispiel geben, wie ich aus meinem HTML Formular jetzt die Werte in die Datenbank (mysql, treiber pdo) einfüge bzw. aktuailisiere? DAs SQL statemant ist kein problem, aber wie ich nach dem speicher button das php ausführe weiß ich nicht... ist das mit javascript zu realisieren oder? Weil php ist ja serverseitig aber der client "drückt" ja auf update...


    Danke,


    Erik

    basti1012 danke dir, das klappt!


    Noch eine Frage, meine Bewertung steht ja in einer spalte... kann ich diese links oben in der Spalte anordnen? Ich habe es jetzt mit margin ausgerichtet, aber eleganter und saubere wäre doch, wenn das objekt sich automatisch links oben anordnet oder? Ich habe aktuell vertig-align: top

    aber es ist trotzdem nicht ganz links oben