HTML Label verschieben?
Möchte gerne das Label im untenstehenden HTML Code verschieben. Hab es mit margin im Css versucht weis aber nicht ganz genau wie es geht.
<!DOCTYPE html>
<html>
<head
<link href="style.css" type="text/css" rel="stylesheet" />
<title>Probe Seite</title>
</head>
<body>
<h1> Textfelder erstellen </h1>
<!-- zur erstellung von Tetfeldern mit Beschriftung-->
<label for "vname"> Vorname:
<input type="text" id="vname" name="vname" value="Peter">
<input type="text" id="zname" name"zname">
<button type="button" id="button"> auslesen </button>
</label for "vname">
<script type="text/javascript" src="03_Textfelder.js"> </script>
</body>
</html>
2 Antworten
Der label-Tag ist bei dir falsch. Im Endtag dürfen keine Attribute stehen, zwischen Attribut und Wert fehlt ein Gleichheitszeichen und zudem sollte der Tag nicht mehrere Felder und den Button umspannen. Er bezieht sich doch schon auf ein Feld.
Also:
<label for="vname">Vorname:</label>
<input type="text" id="vname" name="vname" value="Peter">
<!-- etc. -->
Wohin du das Element nun konkret visuell verschieben möchtest, müsstest du noch genauer erklären.
Eine Verwendung von CSS (margin) kann jedenfalls so aussehen:
Erst wird im head-Bereich ein style-Element erstellt, welches den CSS-Selektor enthält. Ich verwende an dieser Stelle einen Klassenselektor, der Wert für das Property ist nur exemplarisch.
<style>
.my-label-style { margin: 10px; }
</style>
Das label-Element bekommt nun noch ein class-Attribut, welches auf den Klassenselektor verweist.
<label class="my-label-style" for="vname">Vorname:</label>
Mehr zu CSS-Selektoren kannst du hier nachlesen.
Das geht natürlich auch. Deinen Verweis auf die externe CSS-Datei habe ich bisher übersehen.
Hallo,
ich nehme mal an das es mittig angeordnet werden soll oder?
Du hast ein paar Dinge durcheinander gehauen aber dabei helfe ich dir gerne :P
Kannst du den externen Stylesheet auch mal Posten?
Ich freue mich über deine Antwort.
Chris
ja sich ja ich ahb noch nicht so viel Plan geh in die HTL Informatik und dort habe wir das nicht so gut durchgemacht
stylesheet:
h1{
font-family: Arial;
font-size: 16pt;
text-align: middle;
color: green;
font-style: bolt;
}
input{margin-left: 15px;
}
mehr hab ich nicht
Du solltest bezüglich der CSS-Properties in einer Referenz wie dieser nachschlagen. Weder gibt es einen Wert middle für text-align (du wolltest sicherlich center verwenden) noch bolt (Blitz) für font-style (gemeint war bestimmt bold).
Schau dir das mal an vielleicht ist es das was du willst.
Wenn Interesse besteht kann ich auch nochmal näher auf einzelne Punkte eingeben.
HTML Datei:
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<title>Probe Seite</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="UTF-8">
</head>
<body>
<div>
<h1> Textfelder erstellen </h1>
<form>
<label for="fname">Vorname:</label><br>
<input type="text" id="fname" name="fname" value="Vorname"><br>
<label for="lname">Nachname:</label><br>
<input type="text" id="lname" name="lname" value="Nachname"><br><br>
<input type="submit" value="Auslesen">
</form>
<script type="text/javascript" src="03_Textfelder.js"></script>
</div>
</body>
</html>
und in die CSS-Datei schreibst du folgendes rein:
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-family: Arial;
text-align: center;
color: green;
}
form {
margin: auto;
}
Chris
Jetzt muss ich ja die Formatierung in die HTML Datei hineinschreiben kann man das auch in die externe css Datei hinein schreiben?