obiwan1973: Hor./vert. Zentrieren u.a. eines Bildes ohne Tabellen

Hallo,

eine Anfängerfrage:

Ich möchte ein paar HTML-Elemente auf einer leeren Webseite zentrieren, horizontal und vertikal, ohne Tabellen!

Wie mache ich das?
Wichtig ist: Es muss mit FF Mobile funktionieren.

  
  
<form id="form_login" name="form_login" onSubmit="return false">  
  
    <div style="min-height: 10em; display: table-cell; vertical-align: middle">  
	  
      <p style="text-align: center">  
	  
	 <a href="javascript: funct_test()">  
								  
	    <img src="images/start.png" width="200px">  
  
	 </a>  
			  
	 <br>  
  
	 <input type="hidden" style="width: 155px" value="">  
			  
     </p>  
		  
   </div>  
  
</form>  
  

  1. Schönen guten Tag obiwan1973,

    Wie mache ich das?

    was Du brauchst, sind http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display:table und display:table-cell.

    Wieso googelst Du nicht? Es gibt tausende von Webseiten, die die Lösung erörtern.

    Mit lieben Grüßen

    H. Wolowitz

    --

    Gut, dann können wir die Zettel von den Laternen nehmen...
    1. @@Wolowitz:

      nuqneH

      was Du brauchst, sind http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display:table und display:table-cell.

      Ach ja, braucht man das? Flexbox macht solche Krücken überflüssig.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. Schönen guten Tag Gunnar,

        Ach ja, braucht man das? Flexbox macht solche Krücken überflüssig.

        " It is provided for discussion only and may change at any moment " [...]

        Das ist also noch nicht mal fertig.

        Aber ich verstehe es eh, dass man keine Gelegenheit auslassen darf hier, zu zeigen, dass man alles besser weiß.

        Mit lieben Grüßen

        H. Wolowitz

        --

        Gut, dann können wir die Zettel von den Laternen nehmen...
        1. Om nah hoo pez nyeetz, Wolowitz!

          Ach ja, braucht man das? Flexbox macht solche Krücken überflüssig.

          Aber ich verstehe es eh, dass man keine Gelegenheit auslassen darf hier, zu zeigen, dass man alles besser weiß.

          Du solltest dies nicht als Angriff auf deine Person auslegen. Gunnar hat eine Möglichkeit genannt, die das Gewünschte auf geradem Weg liefert/liefern wird. Setze "Krücken" mit "CSS-Geschwuchtel", "Trickserei", "Verrenkungen", "Handstände" oder auch "kreativer Verwendung von CSS-Eigenschaften" gleich und schon wird der Satz immer freundlicher klingen.

          Und ganz abgesehen davon: Es gibt hier Leute, die unheimlich uptodate sind. Gunnar zählt dazu. Du solltest seine Beiträge niemals leichtfertig zur Seite tun.

          Matthias

          --
          1/z ist kein Blatt Papier.

          1. Schönen guten Tag Matthias,

            Du solltest dies nicht als Angriff auf deine Person auslegen.

            das fällt mir leider schwer bei dem oberlehrerhaften Tonfall.

            Mit lieben Grüßen

            H. Wolowitz

            --

            Gut, dann können wir die Zettel von den Laternen nehmen...
          2. Hallo Matthias,

            Und ganz abgesehen davon: Es gibt hier Leute, die unheimlich uptodate sind. Gunnar zählt dazu. Du solltest seine Beiträge niemals leichtfertig zur Seite tun.

            leider vergisst er hin und wieder darauf hinzuweisen, dass seine Vorschläge - so gut sie auch sind - erst in der Zukunft anwendbar sein werden. Ein Link auf Can I use ... wäre hier nicht schlecht. Gerade Anfänger bewahrt man so davor, in eine Falle zu tappen.

            Gruß, Jürgen

        2. Tach!

          Ach ja, braucht man das? Flexbox macht solche Krücken überflüssig.
          " It is provided for discussion only and may change at any moment " [...]
          Das ist also noch nicht mal fertig.

          Es tut mir ja leid, schon wieder verbessern zu können. Es kommt bei den heutigen Entwicklungsprozess des Web nicht mehr so sehr darauf an, was fertig ist, sondern was benutzbar ist (hmm, das war eigentlich bisher auch nicht viel anders). HTML5 ist auch noch nicht fertig, aber schon so weit implementiert, dass nicht nur Early Birds es einsetzen.

          Aber ich verstehe es eh, dass man keine Gelegenheit auslassen darf hier, zu zeigen, dass man alles besser weiß.

          Warum betrachtest du es nicht als Chance, etwas hinzuzulernen? Ich beispielswiese bin über jede Gelegenheit froh, einen Verbesserungsvorschlag zu bekommen (was nicht heißt, dass ich alles widerspruchslos schlucke).

          dedlfix.

          1. Schönen guten Tag dedlfix,

            was benutzbar ist

            danke für den Link, ich kannte die Seite nicht und finde sie sehr interessant!

            HTML5 ist auch noch nicht fertig, aber schon so weit implementiert, dass nicht nur Early Birds es einsetzen.

            Also ich persönlich würde es noch nicht einsetzen. Und eine Suche nach der Frage, ob man dies tun soll, führt zu fast 100% zu Webseiten, die auch davon abraten. Aber das ist Ansichtssache und persönliche Vorliebe.

            Warum betrachtest du es nicht als Chance, etwas hinzuzulernen? Ich beispielswiese bin über jede Gelegenheit froh, einen Verbesserungsvorschlag zu bekommen

            ich auch, wenn ich etwas entweder als ergänzend empfinde oder etwas eindeutig Falsches durch etwas Richtiges korrigiert wird. Ich habe beides nicht empfunden bei dem Posting.

            Mit lieben Grüßen

            H. Wolowitz

            --

            Gut, dann können wir die Zettel von den Laternen nehmen...
        3. Hallo,

          Aber ich verstehe es eh, dass man keine Gelegenheit auslassen darf hier, zu zeigen, dass man alles besser weiß.

          Wie der Zufall will, bin ich gerade darüber gestolpert ;-)

          Viele Grüße
          Siri

  2. Om nah hoo pez nyeetz, obiwan1973!

    Wie mache ich das?

    ohne inline-style-Angaben. Schreibe alle CSS-Deklarationen in eine CSS-Ressource.

    <form id="form_login" name="form_login" onSubmit="return false">

    Es ist sicher nur zu Testzwecken so? Oder warum ein Formular, wenn du nichts übermitteln möchtest?

    <div style="min-height: 10em; display: table-cell; vertical-align: middle">

    Dafür müsste das Elternelement display: table haben. Da das div-Element nur den Absatz als Kind hat, ist eins von beiden überflüssig.

    <a href="javascript: funct_test()">

    Bestimmt ist es besser, wenn das img-Element einen onclick-Handler bekommt(, der später auch noch verschwinden kann).

    <img src="images/start.png" width="200px">

    </a>

    <br>

    Abstände mit CSS

    <input type="hidden" style="width: 155px" value="">

    unsichtbare Felder können ganz am Anfang des Formulars stehen.

    </p>

    </div>

    </form>

    <form id="form_login" name="form_login" ...>  
      <input type="hidden" name="..." value="">  
      <img src="..." onclick="funct_test()">  
    </form>
    

    wäre mein HTML für html4.01-transitional. Wenn du die strict-Variante bevorzugst, musst du die inline-Elemente noch in ein Block-Element packen.

    <form id="form_login" name="form_login" ...>  
      <p> <!-- oder fieldset -->  
        <input type="hidden" name="..." value="">  
        <img src="..." onclick="funct_test()">  
      </p>  
    </form>
    

    Zu deiner eigentlichen Frage: http://wiki.selfhtml.org/wiki/FAQ/zentrierte_Inhalte

    Matthias

    --
    1/z ist kein Blatt Papier.