Gunnar Bittersmann: Eingabe Text-Block mittig in Bild (html/CSS)

Beitrag lesen

SELF-Forum

Eingabe Text-Block mittig in Bild (html/CSS)

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

problematische Seite

@@Funwave

Die Aufgabenstellung ist:

ziemlich unsinnig, denn

  • dieses Popup soll 650x580px groß sein und mittig auf dem Monitor aufploppen.

Mein Viewport ist nur 320 × 372 Pixel groß. Durch Drehen des Gerätes komme ich auf 480 Pixel in der Breite, habe dann aber nur 320 Pixel in der Höhe.

Das Ding sollte besser maximal 650 × 580 Pixel groß sein. (Wobei man die Beschränkung in der Höhe bei schmalen Viewports nochmal überdenken sollte.)

  • beim anklicken eines html-links (http://meinehtml.html) soll direkt ein Popup aufgehen

Ein modales Fenster mit einer anderen Seite als Inhalt? Iframe, der per JavaScript generiert wird.

BTW, für Beispieldomains verwende bitte eine der nach BCP 32 dafür vorgesehenen (wie bspw. example.net).

Oder ist das Formular schon in der Seite und wird beim Click auf den Link Button angezeigt? Dann dialog-Element, dessen display-Eigenschaft geändert wird.

(evtl. mit Verzögerung wg. Blocker)

??

  • Hintergrundbild soll ein Eisbaerbild sein

… am kalten Polar.

  • in dieses Bild widerum soll ein Text-Eingabe-Block h/v-mittig rein

Horizontales und vertikales Zentrieren mit Flexbox.

  • dieser Block muss verbreitert werden vom orginal Block/Maß

Auf welche Breite denn?

block2

Die Schreibfehler müssen auch noch berichtigt werden: Plenk vorm ?, ß statt ss.

Hier mal mein Code: mein code

Oh je.

Zuerst: <!DOCTYPE html> fehlt. (Muss ganz zu Anfang stehen, damit Browser nicht in den Quirksmodus fallen.)

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
 
 
 		<meta charset="utf-8">

Welche Zeichencodierung hätten S’ denn gern?

Du darfst da nicht irgendwas hinschreiben, sondern musst die tatsächliche Zeichencodierung des Dokuments angeben. Und das nur einmal – mit meta charset.

Und die Zeichencodierung sollte UTF-8 sein.

<table class="_">

Das Jahr 1999 ruft an. Es möchte seine Layouttabellen zurückhaben.

Tabellen sind für tabellarische Daten da, nicht zum Layouten der Seite.

<form method="post" action="../ticker/wunsch_gruss_frame.php?a=&amp;box_tabelle=_">

Was soll das ?a=&amp;box_tabelle=_ da hinten dran? Wird das irgendwie ausgewertet?

Deine Eingabefelder haben keine Beschriftung (label). Sollten sie aber unbedingt haben.

Dein Formular könnte in etwa so aussehen: http://codepen.io/gunnarbittersmann/pen/wWZwmB

LLAP 🖖

--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Beitrag melden
–
Informationen zu den Bewertungsregeln