Hallo zusammen,
ich möchte die Beschriftung eines <a>-Tag mit einem h3 gestalten und habe das so gemacht =>
<a href="https://xyz.de/" target="_blank"><img src="images/logo.jpg" alt="Logo"> <br><h3>
Wir sind Sponsor der XYZ<br> und demTeam-Physio </h3></a>
Der Validator meckert das als Error an. Wie geht es richtig?
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.
Sh.......t!!!!! Asche auf mein Haupt. Oft sind es die kleinen Dinge, die dazu führen ob etwas tut oder nicht. Danke Euch allen.
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?
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.
<!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>*{
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%;
}
} Das war es! Vielen Dank!.
Hallo zusammen, was mache ich falsch? Es werden immer nur die 2. Boxen angezeigt. Ich bin ratlos.
<!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>*{
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;
}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:
Codefetch('die-url.php?time=' + Date.now(), { // hier ggf. die Optionen }).thenGerade 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!!!!
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?
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.
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
Vielen Dank, Leute, das war die Lösung. Manchmal sieht man den Wald vor Bäumen nicht!
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?
@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?
Mir gefällt die Seite!
[…]
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!
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?
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 =>
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"!
Ich hätte lieber gleich bei youtube anfragen sollen. Dann wäre mir dieser Umweg erspart geblieben. Lesson to learn.
