nicht angemeldet
Gunnar Bittersmann
Rolf b
Matthias Apsel
Rolf b
Gunnar Bittersmann
dedlfix
Gunnar Bittersmann
Hey,
kann mir einer von sagen euch warum es bei mir immer noch links und rechts einen weißen Rand gibt obwohl ich padding auf 0px gesetzt habe? Ich komme da irgendwie nicht mehr weiter. Für mich als Anfänger ist der Fehler nicht auffindbar. Wahrscheinlich ist wieder irgendetwas total blödes wo man eigentlich drauf kommen müsste. :D
Hier die Seite: http://traurigerdetlef.lima-city.de/
(Kennt jemand eine Seite wo man die HTML/CSS/Javascript/etc. Datei hochladen kann und dann so eine Art direke Übersicht über alles hat?. So wie bei Selfhtml wenn man auf "ansehen klickt.)
Danke im Voraus, GottHardi
@@Naked
Hier die Seite: http://traurigerdetlef.lima-city.de/
Sieht ziemlich kaputt aus:
(Kennt jemand eine Seite wo man die HTML/CSS/Javascript/etc. Datei hochladen kann und dann so eine Art direke Übersicht über alles hat?
LLAP 🖖
Der Martin
Auge
MudGuard
JürgenBsh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Die Seite ist ja auch noch nicht fertig............
Hallo,
von welchem weißen Rand redest du? Meinst du warum das Formular zentriert in der Mitte sitzt?
Hallo,
dann lade mal bitte deine aktuelle Version hoch :) Auf dem Link den du veröffentlicht hast ist kein Hintergrundbild zu erkennen. Mein Tipp, das Bild ist einfach zu klein. Hast du vielleicht den Wert auf no-repeat gesetzt? Wenn ja, ändere diesen auf repeat. Nachzulesen auch unter: http://www.css4you.de/background-repeat.html
Binde ich über die Google web developer toolbar ein Bild als Hintergrundbild ein direkt im <html>, wird es über die ganze Seite gezeigt. Daher tippe ich wie oben geschrieben darauf, dass dein Bild einfach zu klein ist.
Das ist kein Bild. Es ist ein Video.
Das ist kein Bild. Es ist ein Video.
Dann füge mal dieses ein
video.background {
padding: 0;
margin: 0;
}
vielleicht ist der Rand dann weg.
Und mit repeat funktioniert es auch nicht. Hab es grade probiert. Trotzdem danke
Und mit repeat funktioniert es auch nicht. Hab es grade probiert. Trotzdem danke
Ändere mal folgende Werte
video.background {
width: 100%;
}
.background {
left: 0px;
padding: 0px;
/* min-width: 100%; */
/* height: 100%; */
position: absolute;
z-index: 1;
}
Und nimm das Inline-CSS beim <video> raus. Schau mal ob es dann geht.
Ich sitze hier hinter einem PP (paranoiden proxy) und darum bekomme ich das Hintergrund-MP4 nicht ausgeliefert. Darum hat der body bei mir eine Höhe von 0 und alles ist weiß. Gebe ich ihm per Entwicklertools eine Farbe, ist alles randlos gefüllt (Chrome für Windows). Es scheint also, als wäre dein Problem gelöst.
Aber was Du da treibst, sieht trotzdem merkwürdig aus. Vermutlich weiß Gunnar das besser als ich - aber ich würde erwarten, dass die Zugänglichkeit für absolut positionierte Elemente suboptimal ist. Vermutlich ist es besser, das Form mit margin:auto zu zentrieren und regulär im Body zu halten. Das Video kannst Du dann absolut positionieren und mit z-index:-1 dahinter schieben.
Für Fullscreen-Seiten setze ich üblicherweise noch
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
um das Brauserfenster vollständig auszufüllen. Dem Form solltest Du dann aber keine Höhe von 200% geben, es sei denn, du WILLST unbedingt dass man alles hinausscrollen kann.
ALLERDINGS frage ich mich, was ein automatisch abgespieltes Video als Hintergrund bei einer BMI-Berechnung zu suchen hat. Wer einen schmalbrüstigen Mobiltarif hat, hat dann gleich sein Monatsbudget ausgesaugt. Hintergrundvideos oder hochauflösende Hintergrundbilder, die für eine scheinbar harmlose Seite mal ruckzuck ein paar Megabytes verbraten, empfinde ich persönlich als ein Ärgernis (was daran liegen kann dass ich zu geizig für eine Mobilflatrate bin :) ).
Rolf
ALLERDINGS frage ich mich, was ein automatisch abgespieltes Video als Hintergrund bei einer BMI-Berechnung zu suchen hat. Wer einen schmalbrüstigen Mobiltarif hat, hat dann gleich sein Monatsbudget ausgesaugt. Hintergrundvideos oder hochauflösende Hintergrundbilder, die für eine scheinbar harmlose Seite mal ruckzuck ein paar Megabytes verbraten, empfinde ich persönlich als ein Ärgernis (was daran liegen kann dass ich zu geizig für eine Mobilflatrate bin :) ).
Rolf
Ich probiere das mal aus. Die Seite ist neben bei eigentlich nur für mich zum experimentieren. Die wird nicht richtig online gehen.
Hallo Rolf b,
Wer einen schmalbrüstigen Mobiltarif hat, hat dann gleich sein Monatsbudget ausgesaugt.
Es gibt auch Leute, die einen einigermaßen vernünftigen Internetzugang auch zu Hause nur über LTE bekommen. Welcher dann auch nur ein bestimmtes Highspeed- (lies nicht ganz so langsam) Volumen hat. Bei mehreren Personen im Haushalt ist dann ganz schnell Ende des Inklusivvolumens noch viel Monat übrig.
Bis demnächst
Matthias
[Vollzitat entfernt]
Deine Methode funktioniert bei mir irgendwie nicht :(
Vielleicht hilft Dir davon ja was.
Das overflow:hidden erzeugt einen neuen Layout-Kontext und sorgt dafür, dass der margin vom Form nicht den body nach unten reißt. Ansonsten ist das ein normales Form mit einem absolut positionierten, dahinter geschobenen Background Div.
Ausprobiert mit Chrome für Windows, keine Ahnung was andere draus machen...
Rolf
@@Naked
Für mich als Anfänger ist der Fehler nicht auffindbar.
Gehen wir mal durch:
<html>
Hier solltest du die Sprache des Seiteninhalts angeben, in deinem Fall deutsch.
<html lang="de">
<script src="http://code.jquery.com/jquery-latest.js"></script>
Du verwendest kein jQuery. Brauchst du für deine Zwecke auch überjaupt nicht. Also gar nicht erst einbinden; weg mit der Zeile!
Einfügen solltest du hingegen in den head
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
damit die Seite auch auf Mobilgeräten vernünftig dargestellt werden kann.
<p class="font" id="text_ge">Dein Gewicht: </p><input name="Gewicht" placeholder="in Kilogramm" type="number" required pattern="[0-9] {3}" id="gewicht"><br/>
Das Eingabefeld hat keine Beschriftung (jedenfalls keine, die für alle Nutzer als solche erkennbar wäre). Für Beschriftungen gibt es das label-Element, dessen for-Attribut denselben Wert hat wie die id des dazugehörigen Eingabefelds (wie du das bei den Radiobuttons schon hast).
Die Angabe der Maßeinheit gehört mit zur Beschriftung, also ins label. placeholder kommt weg.
Das p-Element würde ich dazu verwenden, Beschriftung und Eingabefeld zu gruppieren. Dann kann auch <br> weg.
In pattern="[0-9] {3}" ist ein Fehler; du erwartest sicher nicht eine Ziffer gefolgt von 3 Leerzeichen.
Aber type="number" (Zahl) und pattern (String) passt nicht recht zusammen. Zahlen beschränkst du mit min und max:
<p>
<label for="gewicht">Dein Gewicht (in Kilogramm):</label>
<input name="Gewicht" type="number" required min="0" max="999" id="gewicht">
</p>
ID und Klasse des p-Elements hab ich mal entsorgt; ich glaub nicht, dass man die braucht.
<p class="font" id="text_gr">Deine Größe: </p><input name="Groesse" placeholder="in Zentimetern" type="number" required pattern="[0-9] {3}" id="größe"><br/>
Dieselben Änderungen wären auch für dieses Eingabebeld und dessen Beschriftung vorzunehmen.
<p class="font" id="radio_uni">Männlich oder Weiblich?</p>
<br/>
<label for="man">
<input type="radio" name="geschlecht" id="man" value="Männlich"> <p class="font">männlich</p></label>
<label for="woman">
<input type="radio" name="geschlecht" id="woman" value="Weiblich"> <p class="font">weiblich</p></label>
<br/>
Eine Gruppe von Radiobuttons sollte durch ein fieldset gruppiert werden, mit legend als Überschrift. Siehe Marco. Den Rahmen des fieldsets kann man mit CSS entfernen.
Mit p könntest du wieder Radiobuttons und zugehörige Label gruppieren. input hab ich außerhalb von label notiert (aus Gründen).
<fieldset>
<legend>Männlich oder Weiblich?</legend>
<p>
<label for="man">männlich</label>
<input type="radio" name="geschlecht" id="man" value="Männlich">
</p>
<p>
<label for="woman">weiblich</label>
<input type="radio" name="geschlecht" id="woman" value="Weiblich">
</p>
</fieldset>
<input class="button_c" type="button" value="Berechnen!" onClick="berechneBmi()"><br/>
type="button" ist falsch. Zum Absenden eines Formulars dient type="submit". Die Aktion des Submit-Buttons wird auch ausgeführt, wenn das Formular durch Drücken der Enter-Taste abgeschickt wird.
Für Buttons gibt auch es ein entsprechendes Element: button:
<button type="submit" onclick="berechneBmi();">Berechnen!</button>
<p class="font">Dein BMI-Wert: </p><input type="text" name="Ende"><br/>
<p class="font">Ergebnis: </p><input type="text" name="Ergebnis"><br/>
Das sind keine Eingabefelder, sondern Ausgabefelder:
<p>
<label for="Ende">Dein BMI-Wert:</label>
<output id="Ende"></output>
</p>
<p>
<label for="Ergebnis">Ergebnis:</label>
<output id="Ergebnis"></output>
</p>
<input class="button_r" type="reset" value="Nochmal!"/>
Ich glaube nicht, dass ein Reset-Button an der Stelle wirklich sinnvoll ist.
Wenn du das Markup berichtigt hast, dann kannst du dich ans Styling machen.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Das
p-Element würde ich dazu verwenden, Beschriftung und Eingabefeld zu gruppieren. Dann kann auch<br>weg.
Ich frag mich, warum Du immer wieder Artikel von Markup-Experten hier verlinkst die ausdrücklich <fieldset><legend> empfehlen.
MfG
@@pl
Das
p-Element würde ich dazu verwenden, Beschriftung und Eingabefeld zu gruppieren. Dann kann auch<br>weg.Ich frag mich, warum Du immer wieder Artikel von Markup-Experten hier verlinkst die ausdrücklich <fieldset><legend> empfehlen.
“The fieldset element represents a set of form controls optionally grouped under a common name.” [HTML] (Hervorhebung von mir)
fieldset dient dazu, mehrere Eingabefelder zu gruppieren; nicht dazu, ein Eingabefeld und die zugehörige Beschriftung zu gruppieren.
Wie Marco sagt: „fieldset und legend werden auch verwendet, um in einem komplexeren Formular Untergruppen zu bilden. Dies macht das Formular übersichtlicher und gibt ihm eine logische Struktur.“
Solche Untergruppen wären bspw. Name (gruppiert Vorname und Familienname) oder Adresse (gruppiert Straße, PLZ, Ort, Land).
In diesem Formular von Naked gibt es aber nichts weiter zu gruppieren.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
“The
fieldsetelement represents a set of form controls optionally grouped under a common name.” [HTML] (Hervorhebung von mir)
Wer sagt denn, dass ein SET mehrere Elemente haben MUSS?
Es kann KEIN, EIN oder MEHRERE Elemente haben.
@@Google weiß alles
“The
fieldsetelement represents a set of form controls optionally grouped under a common name.” [HTML] (Hervorhebung von mir)Wer sagt denn, dass ein SET mehrere Elemente haben MUSS?
Es kann KEIN, EIN oder MEHRERE Elemente haben.
Nochmal mit anderer Hervorhebung: “The fieldset element represents a set of form controls optionally grouped under a common name.” [HTML]
Bei einem Element[1] gibt es nichts zu gruppieren.
Und vermutlich sind unzählige fieldsets, die nichts gruppieren, für Nutzer assistiver Technologien eher eine Qual denn dass sie nützlich wären.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Mit „Element“ ist hier nicht ein HTML-Element gemeint, sondern ein Molekül[2] im UI: Eingabeld mit zugehöriger Beschriftung. ↩︎
Brad Frost, Atomic Design ↩︎
Hallo,
Nochmal mit anderer Hervorhebung: “The
fieldsetelement represents a set of form controls optionally grouped under a common name.” [HTML]Bei einem Element gibt es nichts zu gruppieren.
schon wahr, aber wenn ich ein Formular habe, das beispielsweise aus zwei echten Gruppen besteht, die mit je einem fieldset zusammengefasst sind (nehmen wir ruhig dein Beispiel mit Vor- und Nachname sowie der Postanschrift), dann würde ich aus Gründen der einheitlichen Struktur auch ein weiteres Element (z.B. die Mailadresse) in ein fieldset stecken, auch wenn es dann das einzige Element dieses Sets ist.
Und vermutlich sind unzählige
fieldsets, die nichts gruppieren, für Nutzer assistiver Technologien eher eine Qual denn dass sie nützlich wären.
Hast du da genauere Einblicke? - Klar, das schafft hier und da Redundanz, weil die Inhalte von legend und label dann ähnlich oder gar identisch sind. Aber das halte ich eher für ein unbedeutendes Übel.
So long,
Martin
Nochmal mit anderer Hervorhebung: “The
fieldsetelement represents a set of form controls optionally grouped under a common name.” [HTML]
bemerkt? optionally
Hallo Google weiß alles,
Nochmal mit anderer Hervorhebung: “The
fieldsetelement represents a set of form controls optionally grouped under a common name.” [HTML]bemerkt? optionally
“optionally grouped under a common name.” bezieht sich imho auf das optionale legend-Element.
Bis demnächst
Matthias
Tach!
Das
p-Element würde ich dazu verwenden, Beschriftung und Eingabefeld zu gruppieren. Dann kann auch<br>weg.
Warum p als primäres Element für Absätze und nicht das für nicht näher spezifizierte Gruppierungen vorgesehene div?
dedlfix.
@@dedlfix
Das
p-Element würde ich dazu verwenden, Beschriftung und Eingabefeld zu gruppieren. Dann kann auch<br>weg.Warum p als primäres Element für Absätze und nicht das für nicht näher spezifizierte Gruppierungen vorgesehene div?
div wäre auch denkbar, aber ich wollte noch was von Nakeds Markup übriglassen. ;-)
Und p passt schon: “A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.” [HTML] (Hervorhebung von mir)
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Danke, für deine Hilfe! Ich habe das Seite jetzt erstmal fertig gemacht und ich habe auf fieldset etc. verzichtet da ich dann dort mit dem Styling Probleme hatte (hatte mit opacity gearbeitet und Inhalt wurde auch transparent, war also doof). Du scheinst viel Ahnung zu haben daher wollte ich dich fragen ob du zufällig weißt wie ich einem einzelnen Button zwei onClick Attribute zuweisen kann. Es handelt sich um den Button mit der class button_r. Ich möchte das man beim klicken wieder zum Top kommt und aber auch die Formulare geleert werden. Das funktioniert beides zusammen irgendwie nicht (einzeln aber schon). PS.: Für das Scrollen hab ich auch das JQ gebraucht. Ich hatte es schon vorher eingebunden weil ich da schon wusste, dass ich das so machen will. Der Link ist immer noch traurigerdetlef.lima-city.de
Ich wollte noch sagen, dass die Seite nur für meinen PC optimiert ist und nicht für andere gedacht ist. Nur um das möglicher Weise verschobene Aussehen zu erklären.
Hallo
Ich habe das Seite jetzt erstmal fertig gemacht und ich habe auf fieldset etc. verzichtet da ich dann dort mit dem Styling Probleme hatte (hatte mit opacity gearbeitet und Inhalt wurde auch transparent, war also doof).
Arbeite stattdessen mit Farbschemata, die den Alphakanal benutzen (Suchbegriffe: RGBA, HSLA). Werden die background-color oder background zugewiesen, wird der Hintergrund opak, der Elementinhalt aber nicht.
Du scheinst viel Ahnung zu haben daher wollte ich dich fragen ob du zufällig weißt wie ich einem einzelnen Button zwei onClick Attribute zuweisen kann.
Ganz einfach: Nicht. Ein Element kann nur ein Attribut onclick haben. Du kannst aber auf „moderne Weise“™ mehrere Eventhandler für ein Element direkt im JS-Code definieren.
Tschö, Auge
Danke, sehr hilfreich! :)
edit Ich bekomme das nicht hin :/ Kannst du mir sagen wo hier der Fehler liegt?
function formLeeren(){
var obj = document.forms[0];
for(i=0;i<obj.elements.length;i++){
if(obj.elements[i].type == 'text' || obj.elements[i].type == 'textarea'){
obj.elements[i].value = '';
}
}
}
var formular = document.getElementById ("#button_reset");
formular.addEventListener ('click', formLeeren);
<a href="#anker2"><input id="button_reset" class="button_r" type="reset" value="Nochmal!"/> </a>
Hi,
var formular = document.getElementById ("#button_reset");<a href="#anker2"><input id="button_reset" class="button_r" type="reset" value="Nochmal!"/> </a>
Die Id ist "button_reset", nicht "#button_reset".
cu,
Andreas a/k/a MudGuard
Moin,
var formular = document.getElementById ("#button_reset");<a href="#anker2"><input id="button_reset" class="button_r" type="reset" value="Nochmal!"/> </a>Die Id ist "button_reset", nicht "#button_reset".
das auf jeden Fall. Aber was ist das für eine originelle Idee? Die reset-Funktion eines Formulars mit Javascript nachbauen, um dieses Javascript dann mit einem Klick auf einen Reset-Button auszulösen? Und dazu noch den Button in einen Link verschachteln, was AFAIK gar nicht zulässig ist?
So long,
Martin
Hallo
nur eine Anmerkung zu deinem Code:
if(bmiErgebnis > 21 || bmiErgebnis === 21 && bmiErgebnis < 26 || bmiErgebnis === 26)
es gibt in Javascript auch >= und <=:
if(bmiErgebnis >= 21 && bmiErgebnis <= 26)
Gruß
Jürgen
Hallo JürgenB,
if(bmiErgebnis > 21 || bmiErgebnis === 21 && bmiErgebnis < 26 || bmiErgebnis === 26)es gibt in Javascript auch
>=und<=:
if(bmiErgebnis >= 21 && bmiErgebnis <= 26)
wobei die beiden Bedingungen nicht äquivalent sind.
x > 21 || x < 26 trifft sowieso auf alle Zahlen zu.
@Naked
| x | 1. Bedingung | 2. Bedingung | oder-Verknüpfung | |<= 21 | false | true | true | | 21 < x < 26 | true | true | true | | >= 26 | true | false | true |
edit Lesen hilft: Man sollte mit Kopfschmerzen keine Beiträge schreiben. Natürlich sind die Bedingungen äquivalent.
Bis demnächst
Matthias