Beiträge von Lupus_III

Lupus_III

Sorry, bei mir war der h3-Tag an der falschen Stelle!

Lupus_III

Hallo zusammen,

ich möchte die Beschriftung eines <a>-Tag mit einem h3 gestalten und habe das so gemacht =>

Wir sind Sponsor der XYZ<br> und demTeam-Physio </h3></a>

Der Validator meckert das als Error an. Wie geht es richtig?

Lupus_III

Ich frage mich, was so ein Formular soll? Als User würde ich so eine Prozedur ablehnen. Da erwarte ich, dass alle zu befüllenden Felder schon am Anfang erkennbar sind und ich mit der Tab-Taste von Feld zu Feld springen kann und nicht jedes mal auf weiter klicken muss.

Lupus_III

Sh.......t!!!!! Asche auf mein Haupt. Oft sind es die kleinen Dinge, die dazu führen ob etwas tut oder nicht. Danke Euch allen.

Lupus_III

Nein, das ist sicherlich nicht das Problem. Das Video wird mit der classe

.trailer{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1000;
background-color: rgba(0,0,0,0.95);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
}

ausgeblendet und mit der durch das Script eingesetzte Classe bei Click eingeblendet

.trailer.active{
visibility: visible;
opacity: 1;
}

und weil der Trailer einen z-index von 1000 hat, müßte er zu sehen sein. Ist er aber nicht. Warum?

Lupus_III

Hallo zusammen, ich wiß nicht, warum das Script nicht funktioniert. Bei click auf "Watch Trailer" soll das verborgene Video erscheinen und bei click auf das Kreuz wieder verschwinden. Im Inspector wird die Class active gesetzt.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="banner">
        <div class="content">
            <img src="assets/bg.png" alt="">
            <h2>Video Popup</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ullam illum itaque sapiente est corrupti voluptas. Consequuntur saepe ex quaerat possimus eligendi voluptates quod tenetur beatae. Aliquid tenetur ipsum fuga!
            </p>
            <a href="#" onclick="toggle();">Watch Trailer</a>        
        </div>
    </div>
    <div class="trailer">
        <video src="assets/trainingskurse.mp4" controls="true"></video>
        <img src="assets/close.png" class="close" onclick="toggle();" >
    </div>
    <script>

function toggle(){
    var trailer= document.querySelector(".trailer")
    
    var video= document.querySelector("video")
    trailer.classList.toggle("aktive");
    video.pause();
    video.currentTime = 0;
}
    </script>
</body>
</html>

Alles anzeigen

Code

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
.banner{
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner .content{
    max-width: 550px;
}
.banner .content img{
    max-width: 100%;
    margin-bottom: 15px;
}
.banner .content h2{
    color: #fff;
    font-weight: 500;
    font-size: 2em;
}
.banner .content p{
    font-size: 1.2em;
    color: #fff;
    font-weight: 300;
    margin: 15px 0 25px;
}
.banner .content a{
    position: relative;
  text-transform: uppercase;
  background-color: #fff;
  color: #111;
  font-weight: 500;
  letter-spacing: 2px;
  text-decoration: none;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 10px;
}
.trailer{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1000;
    background-color: rgba(0,0,0,0.95);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 1;
}
.trailer.active{
    visibility: visible;
    opacity: 0;
}
.trailer video{
    position: relative;
    max-width: 900px;
    outline: none;
}
.close{
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
    filter: invert(1);
    max-width: 32px;
    color: #fff;
}
@media (max-width: 991px){
    .trailer video{
        max-width: 90%;
    }    
}

Alles anzeigen

Lupus_III

Das war es! Vielen Dank!.

Lupus_III

Hallo zusammen, was mache ich falsch? Es werden immer nur die 2. Boxen angezeigt. Ich bin ratlos.

HTML

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Animate on Scroll</title>
    </head>
    <body>
        <h1>Animate on Scroll</h1>
        <br><br>
        <div class="box box-show"><h2>HTML</h2></div>
        <div class="box box-show"><h2>CSS</h2></div>
        <div class="box box-show"><h2>Java</h2></div>
        <div class="box box-show"><h2>JQery</h2></div>
        <div class="box"><h2>Responsive</h2></div>
        <div class="box"><h2>SEO</h2></div>
        <div class="box"><h2>Wordpress</h2></div>
        <div class="box"><h2>Support</h2></div>
        <div class="box"><h2>Res. Support</h2></div>
        <div class="box"><h2>About</h2></div>
        <div class="box"><h2>Mobile</h2></div>
        <div class="box"><h2>Content</h2></div>

       <script>
            const boxes  = document.querySelectorAll('.box')
            window.addEventListener('scroll', checkBoxes)
            checkBoxes()

            function checkBoxes(){
                const triggerBottom = window.innerHeight / 6 * 4
                boxes.forEach(box => {
                    const boxTop = box.getBoundingClientRect().top
                    if(boxTop < triggerBottom){
                        box.classList.add('box-show')
                    } else{
                        box.classList.remove('box-show')
                    }

                })
            }
        </script> 
    </body>
</html>

Alles anzeigen

Code

*{
   box-sizing: border-box; 
}
body{
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    font-weight: 300;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow-x: hidden;
}
h1{
    margin: 10px;
}
.box{
    background-color: #fff;
    border: 2px solid #3b3b3b;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 200px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: rgba(0,0,00.2) 0px 60px 40px -7px;
    transform: translateX(400%);
    transition: transform 0.4s ease;
}
.box:nth-of-type(even){
    transform: translateX(-400%);
}
.box-show{
    transform: translateX(0);
}
.box h2{
    font-size: 22px;
    font-weight: 400;
}

Alles anzeigen

Lupus_III

Zitat von Sempervivum
Für dich selber kannst Du problemlos ein Neuladen der Seite am Cache vorbei durch Strg+F5 erzwingen. Bei der Entwicklung reicht das normaler Weise aus.
Wenn Du auch für die Besucher sicher stellen willst, dass sie die neueste Version laden, kannst Du z. B. eine Versionsnummer an die URL hängen, so:
Code
<link rel="stylesheet" href="css/select2.css?version=3">
<script src="js/select2.js?version=4"></script>
Und wenn Du dich in Javascript bewegst und z. B. fetch benutzt, geht das automatisch wenn Du einen Zeitstempel benutzt:
Code
fetch('die-url.php?time=' + Date.now(), {
    // hier ggf. die Optionen
}).then
Gerade hier hat mich der Cache, ebenso wie bei dir, früher zur Verzweiflung gebracht, weil ich über Stunden Fehler im Skript gesucht habe und es lag nur am Cache.

Danke, das werde ich mal ausprobieren. Ich suche manchmal lange nach einem Fehler und stelle dann fest, es liegt am Browsercache!!!!

Lupus_III

Hallo zusammen,

ich nutze Google Chrome. Wenn ich geänderte Webseiten auf den Webspace hochlade, sehe ich lange Zeit keine Veränderungen. Selbst dann nicht, wenn ich den Refreshbutton mehrfach drücke. Aus verschiedenen Gründen, z. Bsp. weil ich mich nicht ständig in Foren neu anmelden möchte, kommt ein Löschen des Cache nur als Notlösung in Frage.

Hat jemand eine Idee, wie man das hinkriegen kann?

Lupus_III

Hallo zusammen,

für einen Betrieb mit etwa 20 Mitarbeitern, die teilweise stationär und teilweise ambulant arbeiten suche ich eine Software zur felxiblen Zeiterfassung per Smartphone, Tablet oder PC.

Das Tool sollte ermöglichen, dass die Mitarbeiter Ihre Arbeitszeit, Pausen und Urlaubszeiten per App erfassen können und alle Meldungen für den Personalsachbearbeiter (Lohnbuchhaltung) in einem Dashboard zusammengefasst werden.

Bei meine Recherchen im www bin ich auf die folgenden Produkte gestossen. Crewmeister, Craftnote, Clocking, Clickup, Hubstaff, Jibble, My Hours, Toggl Track.

Die Lizenz sollte für das kleine Unternehmen monatlich nicht mehr als 50€ kosten.

Kann jemand aus seiner Arbeitspraxis mir ein Tool vorschlagen, das diese Punkte im Wesentlichen erfüllt.

Lupus_III

Ich würde die Frage mal in diesem Forum absetzen => WP Forum Ich glaube da hast du mehr Glück.

Und auf die Schnelle habe ich noch das gefunden => Translate für WP

Lies dich mal ein, ob das eine Option für dich ist

Lupus_III

Vielen Dank, Leute, das war die Lösung. Manchmal sieht man den Wald vor Bäumen nicht!

Lupus_III

Hallo zusammen,

ich nutze in einer Webseite dieses Formular - https://www.reha-sportstudio.de/202301_aktion.php . Bei meinen Tests mit verschiedenen Browsern wird rechts neben den Inputfeldern ein ordentlicher Abstand angezeigt. Leider funktioniert das nicht auf meinen Smartphones Samsung Galaxy S 21 und S7, wie der beigefügt Screenshot zeigt.

Hat jemand eine Ahnung an was das liegen kann?

Lupus_III

@nextuser-. Nur zu meinem Verständnis.

section>p:not(:last-of-type) {margin-bottom: 2rem;} - Soll das letzte p-Tag keinen 2rem Abstand nach unten haben, die anderen aber schon?

Lupus_III

Mir gefällt die Seite!

Lupus_III

Zitat von Emess

[…]

Lieber Emess, ich weiß zwar nicht wie alt du bist, aber ich gehe auf die 75 zu und habe mich die letzten Jahre in die Materie eingearbeitet. Alter ist doch kein Hinderungsgrund sich neuem zuzuwenden, zumal man keine körperliche Fitness dafür braucht, sondern ein funktionsfähiges Gehirn. Ich habe zum Beispiel mit der Einarbeitung in das HTML-Seminar - https://www.html-seminar.de/ - begonnen und dann kontinuierlich weiter, auch mit Fachliteratur, gelernt. Jeden Tag ein paar Stunden. Das hält geistig frisch, auch im hohen Alter, und macht Spass. Und wenn man an einer Stelle hängt und nicht weiter weiß, hilft Dir das Forum. Also, ran an den Speck!

Lupus_III

Ich beschäftige mich gerade mit Bootstrap. Wie ist das wenn Bootstrap auf eine neue Version upgedatet wird? Muss man dann seinen HTML-Code anpassen. Hat da jemand Erfahrung?

Lupus_III

Zitat von nextuser

Hi Lupus,
wie hast du es jetzt gemacht?

Da ich nur drei Icons brauchte, habe ich die Ordner css mit der Datei all.css und den Ordner webfonts auf den Webserver geladen. Das hat für meine Bedürfnisse gereicht und Speicherplatz gespart. Der Link in den HTML-Dateien sieht dann so aus => <link rel="stylesheet" href="fontawesome-free-6.2.1-web/css/all.css">

Dazu gibt es in youtube auch einen Beitrag =>

Externer Inhalt youtu.be

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Lupus_III

Bei Deiner Antwort viel mit der Witz ein, als sich zwei in einem Fesselballon verflogen haben und aus zehn Meter Höhe einem Bauer zuriefen "Wo sind wir?! und zur Antwort bekamen " in einem Fesselballon"!

Beiträge von Lupus_III

Wie gestalte ich einen <a>-Tag richtig

Wie gestalte ich einen <a>-Tag richtig

Formular/Texteingabe lediglich eine zur Zeit - HTML, PHP, MySQL

Klasse setzen und entfernen per click

Klasse setzen und entfernen per click

Klasse setzen und entfernen per click

Bewegtes scrollen

Bewegtes scrollen

Browsercache bringt mich zur Verzweiflung

Browsercache bringt mich zur Verzweiflung

Software für Zeiterfassung von Mitarbeitern

Ich brauchte eine Lösung, um meine WordPress-Anwendung mehrsprachig zu machen

Formularfelder sind auf kleinen Displays zu breit

Formularfelder sind auf kleinen Displays zu breit

[gelöst] Tabelle mittig ausrichten. Nicht si trivial wie gedacht

Feedback zu meiner Seite

Versuch Bootsrap zu verstehen, um nach und nach ein eigens Template zu bauen.

Bootstrap Update

fontawesome local speichern

fontawesome local speichern