Ankündigung

Einklappen
Keine Ankündigung bisher.

Behauptung: Der HS kann HTML5 und CSS in einer Visu. Aber ich nicht-Hilfe?Bitte?

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
    #1

    HS/FS Behauptung: Der HS kann HTML5 und CSS in einer Visu. Aber ich nicht-Hilfe?Bitte?

    Hallihallo,
    ICH schreibe ja immer so schön.. der HS kann HTML5 und CSS und damit geht aaaaalles.
    Bei der Ajax Visu scheint mir aktuell Niemand helfen zu wollen, also wollte ich mir selbst helfen und habe mir ein HTML5 und CSS Video geschnappt, den Code abgetippt und versucht zu verstehen, wann sich wie was ändert.
    Herausgefallen ist eine on-off.html und eine sylte.css und lokal funktioniert das auch schon im Browser und in Visual Studio Code.
    Also fix in den HS gepackt und dann sieht es so aus:

    hs-on-off.jpg

    D.h. der Kerl beachtet die im gleichen Verzeichniss befindliche style.css nicht. Mach ich die Einbindung falsch?

    Gruß
    Roman
    Angehängte Dateien
    Dieser Beitrag enthält keine Spuren von Sarkasmus... ich bin einfach so?!
    Stichworte: -
    #2
    Drück doch mal F12, und schau, ob er die style.css lädt.

    Ansonsten mal testweise die style in die Seite integrieren;


    PHP-Code:
    !DOCTYPE html>
    <    html lang="de">
    <    head>
        <    meta charset="UTF-8">
        <    meta http="Y-UA-Compatible">
        <    meta name="viewport" content="width=device-width, inital-scale=1.0">
        <    title>Ein Aus Schalter in CSS</title>
        <!--    link rel="stylesheet" href="style.css"-->
        <    style>
        
            *{
                        box-sizing: border-box;
                        margin:0;
                        padding:0;

                }
                    body{
                        background-color: #ecf0f3;
                        font-family: 'poppins';
                        font-size:16px;
                    -    webkit-tap-highlight-color: rgba(0,0,0,0);

                }
                    #container{
                    display:flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    width:100%;
                    height:100vh;

                }
                .switch{
                        position: relative;
                        display: inline-block;
                        width:150px;
                        height:60px;
                        cursor: pointer;


                }
                .switch     input{
                        display: none;

                }
                .    slider{
                        position: absolute;
                        top:0;
                        left:0;
                        right:0;
                        bottom:0;
                        border: 2px solid #ecf0f3;
                        border-radius: 40px;
                        box-shadow: -2px -2px 8px rgba(255,255,255,1),
                                -    2px -2px 12px rgba(255,255,255,0.5),
                                    inset -2px -2px 8px rgba(255,255,255,1),
                                    inset -2px -2px 12px rgba(255,255,255,0.5),
                                    inset 2px 2px 4px rgba(255,255,255,0.1),
                                    inset 2px 2px 8px rgba(0,0,0,0.3),
                                    2px 2px 8px rgba(0,0,0,0.3);
                        background-color: #ecf0f3;
                    }
                .    slider::before{
                        position: absolute;
                        bottom: 3px;
                        left:10px;
                        z-index: 999;
                        width:  48px;
                        height: 48px;
                        border-radius:50%;
                        box-shadow: -2px -2px 8px rgba(255,255,255,1),
                                -    2p -2p 12px rgba(255,255,255,0.5),
                                    inset 2px 2px 4px rgba(255,255,255,0.1),
                                    2px 2px 8px rgba(0,0,0,0.3);
                        background-color: #f252a5;
                        content: "";
                        transition:0.5s;

                }
                .    on{
                        position: absolute;
                        top:25px;
                        left:15px;
                        color:#f252a5;
                        font-size:0.8rem;
                    }
                .    off{
                        position: absolute;
                        top:20px;
                        right:15px;
                        color: #3d3935;

                    }

                    input:checked +.slider::before{
                        transform: translatex(80px);
                        background-color: #27ae60;

                    }
        
        
        </    style>
        
        
        
    </    head>

    <    body>
        <    div id="container">
            <    label class="switch">
                <    input type="Checkbox">
                <    span class="slider"></span>
                <    span class="on">Ein</span>
                <    span class="off">Aus</span>
            </    label>

        </    div>
    </    body>
    </    html> 

    Kommentar

      #3
      Deinen Code im Browser über meinen Test-Webspace getestet und die style.css wird geladen.

      Kommentar

        #4
        Zitat von vento66 Beitrag anzeigen
        Ansonsten mal testweise die style in die Seite integrieren;
        danke Micha, werde ich mal testen und schau mir noch das Projekt von Gira zu den URL Endpoints an, aber da ist so viel Java Gedönse in der Visu, da blicke ich nicht durch.

        Zitat von araeubig Beitrag anzeigen
        Deinen Code im Browser über meinen Test-Webspace getestet und die style.css wird geladen.
        Danke für die Rückmeldung, allerdings hatte ich das oben auch schon geschrieben. Es gibt wie immer die normale Welt bei uns, da kennt man die Grundlagen der Physik usw und da verhält sich der Code von Python usw auch so wie man es in den jeweiligen Foren erfragen kann und das macht die HS Entwicklung etwas schwierig.
        Denn es gibt da noch die Gira Welt, da ist alles anders. Preisgefälle, Marktverhalten, Physik und Verhalten von Code im HS. Was in Pycharm funktioniert, muss nicht unbedingt im HS laufen, auch wenn Pycharm sagt das ist gut und was auf deinem Server läuft, muss nicht unbedingt im HS laufen.. Das macht es echt schwierig, die Leute in den jeweiligen Foren für die Fachgebiete, winken dann ab und sagen das ist ein HS Problem, aber das hilft mir dann in dem Moment auch nichts. Darum frage ich dann immer wieder hier. Da ist man sensibler mit den 2 Welten.
        Dieser Beitrag enthält keine Spuren von Sarkasmus... ich bin einfach so?!

        Kommentar

          #5
          Die Integration des Styles direkt in den HTML Code funktioniert wie zu erwarten. Aber schön ist es nicht, wenn ich die Größe der Seite für einen Taster sehe und jetzt bau ich daraus eine Visu... Schön wäre es gewesen den Style in das CSS auszulagern und dann immer wieder zu verwenden, ich generiere ja daraus ein Objekt und klar, das kann ich beim Sytle im HTML auch machen. Gibt es hier evtl. HTML/CSS Gurus die eine Meinung dazu haben? Auch gerne die jünger von der anderen Seite.
          Dieser Beitrag enthält keine Spuren von Sarkasmus... ich bin einfach so?!

          Kommentar

            #6
            Grundsätzlich SOLLTE es so funktionieren, wie Du es gemacht hast. Genau deshalb habe ich je extra in einer Online-Umgebung getestet. Leider kenne ich aber die vielleicht existenten Vorgaben/Namenskonventionen vom HS nicht und bin somit "raus". Das bestehende HTML/CSS-Wissen ist sicher nicht auf Guru-Niveau aber recht gut, dennoch kann ich Dir da nicht weiterhelfen.

            Mit würde nur einfallen ein entsprechendes vielleicht vorhandenes Template zu verwenden und dies nach erfolgreichem Test anzupassen.
            • Likes 1

            Kommentar

              #7
              Keine Sorge, wenn ich weiß wie man es im HS "wie in der normalen Welt" macht, dann sage ich hier bescheid und du bist wieder drin und kannst mit basteln. Das mach ich nicht in geschlossenen Facebook Gruppen.
              Dieser Beitrag enthält keine Spuren von Sarkasmus... ich bin einfach so?!
              • Likes 1

              Kommentar

                #8
                Zitat von BadSmiley Beitrag anzeigen
                Aber schön ist es nicht, wenn ich die Größe der Seite für einen Taster sehe und jetzt bau ich daraus eine Visu.
                Die style sind ja kombinierbar.
                Position legst Du direkt am Element fest, das Aussehen über den style. Dann wird das Ganze übersichtlicher.
                PHP-Code:
                <!DOCTYPE html>
                <                html lang="de">
                <                head>
                    <                meta charset="UTF-8">
                    <                meta http="Y-UA-Compatible">
                    <                meta name="viewport" content="width=device-width, inital-scale=1.0">
                    <                title>Ein Aus Schalter in CSS</title>
                    <!--                link rel="stylesheet" href="style.css"-->
                    <                style>
                    
                        *{
                                                box-sizing: border-box;
                                                margin:0;
                                                padding:0;

                            }
                                            body{
                                                background-color: #ecf0f3;
                                                font-family: 'poppins';
                                                font-size:16px;
                                -                webkit-tap-highlight-color: rgba(0,0,0,0);

                            }
                                            #container{
                                            display:flex;
                                            align-items: center;
                                            justify-content: center;
                                            position: relative;
                                            width:100%;
                                            height:100vh;

                            }
                            .switch{
                                                position: relative;
                                                display: inline-block;
                                                width:150px;
                                                height:60px;
                                                cursor: pointer;


                            }
                            .switch                 input{
                                                display: none;

                            }
                            .                slider{
                                                position: absolute;
                                                top:0;
                                                left:0;
                                                right:0;
                                                bottom:0;
                                                border: 2px solid #ecf0f3;
                                                border-radius: 40px;
                                                box-shadow: -2px -2px 8px rgba(255,255,255,1),
                                            -                2px -2px 12px rgba(255,255,255,0.5),
                                                            inset -2px -2px 8px rgba(255,255,255,1),
                                                            inset -2px -2px 12px rgba(255,255,255,0.5),
                                                            inset 2px 2px 4px rgba(255,255,255,0.1),
                                                            inset 2px 2px 8px rgba(0,0,0,0.3),
                                                            2px 2px 8px rgba(0,0,0,0.3);
                                                background-color: #ecf0f3;
                                            }
                            .                slider::before{
                                
                                                border-radius:50%;
                                                box-shadow: -2px -2px 8px rgba(255,255,255,1),
                                            -                2p -2p 12px rgba(255,255,255,0.5),
                                                            inset 2px 2px 4px rgba(255,255,255,0.1),
                                                            2px 2px 8px rgba(0,0,0,0.3);
                                                background-color: #f252a5;
                                                content: "";
                                                transition:0.5s;

                            }
                            .                on{
                                
                                                color:#f252a5;
                                                font-size:0.8rem;
                                }
                            .                off{
                                
                                                color: #3d3935;

                                            }

                                            input:checked +.slider::before{
                                                transform: translatex(80px);
                                                background-color: #27ae60;

                                            }
                    
                    
                    </                style>
                    
                    
                    
                </                head>

                <                body>
                    <                div id="container">
                        <                label class="switch">
                            <                input type="Checkbox" >
                            <                span class="slider"style="position: absolute;bottom: 3px;left:10px;z-index: 999;width:  48px;height: 48px;"></span>
                            <                span style="position: absolute;top:25px;left:15px;"class="on">Ein</span>
                            <                span style="position: absolute;top:20px;right:15px;"class="off">Aus</span>
                        </                label>

                    </                div>
                </                body>
                </                html> 
                Zuletzt geändert von vento66; 11.08.2022, 15:27.

                Kommentar

                  #9
                  Kannst Du denn die CSS-Datei unter der erwarteten URL vom HS abrufen?

                  Ansonsten mal mit den Entwickler-Tools schauen ob überhaupt geeignete Requests rausgehen und was als Antwort zurückkommt.
                  • Likes 1

                  Kommentar

                    #10
                    Danke, ich setze mich hier wieder dran. Das Thema ist etwas eingeschlafen, da ich zu hohe Erwartungen an den Experten 4.12 hatte... diese haben sich leider ernüchtert gestern, bzw der Realität gestellt. Also versuche ich mich hier weiter und werde Rückmeldung geben. Gerade macht es echt Spaß der HS Eisenbahn zu basteln.
                    Dieser Beitrag enthält keine Spuren von Sarkasmus... ich bin einfach so?!

                    Kommentar

                    Vorherige template Weiter
                    Lädt...
                    X

                    Wir verarbeiten personenbezogene Daten über die Nutzer unserer Website mithilfe von Cookies und anderen Technologien, um unsere Dienste bereitzustellen. Weitere Informationen findest Du in unserer Datenschutzerklärung.

                    Indem Du unten auf "ICH stimme zu" klickst, stimmst Du unserer Datenschutzerklärung und unseren persönlichen Datenverarbeitungs- und Cookie-Praktiken zu, wie darin beschrieben. Du erkennst außerdem an, dass dieses Forum möglicherweise außerhalb Deines Landes gehostet wird und bist damit einverstanden, dass Deine Daten in dem Land, in dem dieses Forum gehostet wird, gesammelt, gespeichert und verarbeitet werden.

                    Ich stimme zu