HTML5 - die besten Fragen

Verwandte Themen

Babelfish

16.09.2023, 13:22

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

1 Antwort

Marwin388

14.09.2023, 19:28

warum funktionier .css nicht als externe Datei mit html?

html Datei:


<head>
	<script type="text/javascript" src="Quadration.js"></script>
	<link rel="stylesheet" href="Quadration.css">
	
	<title>Quadratzahlen-Rechner</title>
</head>
	<body>
        <h1>Berechnen von Quadratzahlen</h1>
		<p>Eingabe:<input type="text" id="Eingabe" ></p>
		<p>Ergebnis:<input type="text" id="Ergebnis" ></p>
		<input type="button" class="Knopf" value="Klick mich" onclick="quadrieren();">
	</body>
_________________________________________________________________
css Datei

.Knopf {
 width: 150px; /* Ändere die Breite nach deinen Wünschen */
 height: 50px; /* Ändere die Höhe nach deinen Wünschen */
 position: relative;
 border-bottom: 2px solid #0004ff;
 background: #cccaca;
}

3 Antworten

WeissBrot965

07.09.2023, 18:52

Framework in javascript coden wie?

Hi, ich code schon seit einigen Jahren web Games mit vanilla Javascript (canvas und oop). Das man mit vanilla Javascript nicht wenige Zeilen Code braucht ist da denke ich klar. Ich wollte also deswegen ein eigenes Framework coden, da ich nicht so der Fan bin von librarys etc von Fremden zu benutzen. Ich hab aber irgendwie null Ahnung wie ich das ganze machen und strukturieren soll. Wie geht das so? Verwendet man dabei modules? Wie fügt man alle librarys in eine main zusammen? Tutorialseiten oder youtubevideos währen auch hilfreich. Konnte online leider nicht so viel finden

1 Antwort

RANGObro

07.09.2023, 11:25

Document.querySelector() auf?

Ich schreibe ein program, das mit einer url eine html Seite runterlädt. Auf der Seite ist ein img Tag mit einer ID und ich will das Element finden und das src Attribut auslesen. Quasi

let src = document.querySelector(“#myID“).getAttribute(“src“);

wie mache ich das am besten? Ich nutze NodeJS

1 Antwort

DoGame5

07.09.2023, 00:43

Mit Links

Karussell für Kleidungsstücke?

Hey, ich will eine Webseite programmieren und ein Kleidungskarussell erstellen.

Im Grunde so wie in diesem Video

Wie kann ich so etwas programmieren mit php, css, js & html? Brauche ich dafür libs?

Die Bilder hätte ich bereits

2 Antworten

Arifan

31.08.2023, 16:52

Unterschied Junior Frontend Entwickler, Senior Frontend Entwickler?

An die ITler unter euch:

wie wird der junior Frontend Dev vom senior Frontend Dev abgegrenzt?

1 Antwort

s180025

30.08.2023, 16:45

Mit Bildern

Warum funktioniert mein margin-top nicht?

Hallo liebe Leute ich habe jetzt schon vieles probiert habe ChatGPT gefragt habe Freunde gesagt habe selber nochmal alles neu geschrieben und weis nicht was falsch ist könnt ihr mir weiterhelfen?

Hier zum Problem:Also ich schreibe gerade HTML und CSS Code und verstehe nicht warum bei der letzten Zeile

margin-top:200px; nicht funktioniert warum klebt das span Attribut noch immer so eng oben trotz der margin 200

2 Antworten

protel

25.08.2023, 14:42

Website-Änderungen werden nicht angezeigt wegen Browser-Cache?

Hallo zusammen,

ich habe folgendes Problem:

Ich hoste meine Website bei Ionos. Dort habe ich meine Codes (HTML, CSS, JavaScript und PHP) im Webspace abgelegt, der mit der Domain verbunden ist.

Nun habe ich an der Website Änderungen vorgenommen und z.B. eine mobile Ansicht implementiert. Ich habe die alten Code-Dateien überschrieben.

Auf der Website werden diese Änderungen aber nicht angezeigt, wenn man die Website vor kurzem bereits besucht hatte, da der Browser-Cache die alten Daten noch gespeichert hat.

Gibt es hier eine Möglichkeit, das zu verhindern und für die Nutzer direkt die neue Version anzeigen zu lassen?

Ich danke für eure Rückmeldungen :)

3 Antworten

Zweirad2

22.08.2023, 22:03

Mit Bildern

Flexbox - Inspect-Mode was ist das bei Wordpress Theme?

Hallo zusammen,

ich stehe gerade auf dem Schlauch. Ich habe ein Wordpress Theme installiert und möchte das Layout mittels CSS anpassen. Nun wird mir da flexbox angezeigt, welches in zwei Bereiche aufgeteilt ist, wie auf diesem Bild:

und ich möchte die Headline im Container mittig platzieren. Ich bekomme das aber nicht ausgerichtet und weiß nicht, wie dieser Bereich auf der rechten Seite definiert ist (lt. Flexbox)

Bin gespannt und danke schonmal im Voraus!

Gruß

1 Antwort

maetin944

22.08.2023, 13:52

Mit Bildern

Checkboxen die Pflicht sein soll?

man soll umbedigt eines der Checkboxen auswählen, Bei Bedarf oder Regelmäßig oder Nein.

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Bei_Bedarf)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Bei_Bedarf" value="Ja">{/if} {language key="elf_Frage_11_Bei_Bedarf"}{if !$pdf}</label>{/if}</div>       

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Regelmaessig)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Regelmaessig" value="Ja">{/if} {language key="elf_Frage_11_Regelmaeßig"}{if !$pdf}</label>{/if}</div>

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Nein)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Nein" value="Ja">{/if} {language key="elf_Frage_11_Nein"}{if !$pdf}</label>{/if}</div>

2 Antworten

Lisa1Natur0

19.08.2023, 00:43

Bild Datei ins selbe Verzeichnis bringen wie html Datei?

Wie schaffe ich das wenn meine html Datei in VS drin ist? Ich hab keine ahnung wie ich die in einen externen Ordner tun soll.

Wie soll ich den Pfad angeben?

(Bild ist im Ordner namens Pegasus, Bild heißt landschaft.jpg)

Ist kein Problem das Bild woanders hin zu tun damit es einfacher geht, ich weiß nur nicht wie.

So habe ich das gemacht:

body {
        font-family: helvetica, arial;
        font-size: 90%;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        justify-content: center;
        text-align: center;
        background-image: url(Pegasus/landschaft.jpg);
        background-attachment: fixed;
        background-size: cover;
      }

2 Antworten

Gojosatoru383

17.08.2023, 21:53

Mit Bildern

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

6 Antworten

ForumLibhaber

15.08.2023, 17:40

Timer auf Webseite (HTML)?

Wie kann ich in JTML einen Versteckten Tiger stellen, so dass einige Texte erst nach Ablauf des Timers (z.B. 10 sek.) Auftauchen. Der endbenutzer soll davon nichts sehen!

2 Antworten

naitram22

15.08.2023, 14:17

HTML Code direkt in Browser ausführen?

Also ich habe den Code für eine Webseite (HTML) und ich würde diesen Code gerne direkt in einem Browser ausführen, sodass er die Seite anzeigt.

Geht das, ohne dass man den Weg über eine html-Datei geht und die einfach öffnet?

4 Antworten

DrMalteB

13.08.2023, 16:22

Bootstrap erlaubt?

Darf man Bootstrap einfach so benutzen? Oder muss man irgendwas zum Thema Urheberrecht beachten? Muss man Bootstrap/ den Urheber irgendwie angeben? Darf man bootstrap auch einfach so kommerziell nutzen?

2 Antworten

Lisa1Natur0

12.08.2023, 12:12

HTML life ausgabe?

Ich will einen code schreiben und direkt sehen wie die Internetseite aussieht OHNE AKTUALISIEREN ZU MÜSSEN.

Microsoft edge geht nicht udn VS vision oder kp wie das heißt auch nicht.

LG:D

4 Antworten

jumbo125

10.08.2023, 22:39

html, erkennen wenn video uhrzeit hängt?

Hallo zusammen

ich habe ein Video in einem iframe. Im linken, oberen fensterteil läuft die aktuelle uhrzeit dfer kamera. manchmal hängt das video. hier reicht es, wenn ich das video bzw. die iframe src einfach neu lade. Das problem ist, wie erkenne ich automatisch, wenn die uhzeit im iframe sich nicht mehr ändert(digitale uhrzeit)?

wenn dies der fall wäre, müsste das iframe neu geladen werden.

Vielen dank
lg jumbo

1 Antwort