Formular ohne Float

[Mike]

Hi,

--------------------------------------------------
  |     100%  von der linken Seite      |     rechts|
  |     oder zumindest linksbündig      |     bündig|
  --------------------------------------------------

bei sowas frage ich mich immer, wie andere hier so schön die grafische Darstellung eines Porblems hinkriegen. Ich frickel mir dabei immer einen ab.

Es geht darum ein inputfeld und einen Submitbutton als Bild darszustellen.

Etwa so: wie dieses Eingabefeld.

Warum MS jetzt so einen MIX aus CSS+Table nutzt, weiss ich nicht, klar ist mit Table alleine bekomme ich das auch selbst hin. Nur ich würde das gerne in CSS lösen allerdings ohne irgendwelche Hacks/Tricks und vor allem ohne Float, geht das überhaupt?

Dachte zuerst an 2 Spans nebeneinander, nur um das anzupassen würde ich span  Blockelementeneigenschaften zuweisen, will ich natürlich auch nicht.

Ach ja erschwerend kommt natürlich hinzu, dass auch IE6-tauglich sein soll.

Mike

[ChrisB]

Hi,

Etwa so: wie dieses Eingabefeld.

Warum MS jetzt so einen MIX aus CSS+Table nutzt, weiss ich nicht, klar ist mit Table alleine bekomme ich das auch selbst hin. Nur ich würde das gerne in CSS lösen allerdings ohne irgendwelche Hacks/Tricks und vor allem ohne Float, geht das überhaupt?

Warum ohne float?

Es sind diverse Moeglichkeiten denkbar, sowohl mit als auch ohne float.

MfG ChrisB

[Mike]

Hi,

Warum ohne float?

persönliche Abneigung;-) Das Verhaltenvon Float bei liquid Design gefällt mir nicht und die Vererbung aufzuheben mit einem zusätzlichen Clear finde ich auch nicht gerade geschickt umgesetzt vom Konsortium.

Es sind diverse Moeglichkeiten denkbar, sowohl mit als auch ohne float.

Bin für alles andere offen.

Mike

[ChrisB]

Hi,

Warum ohne float?

persönliche Abneigung;-) Das Verhaltenvon Float bei liquid Design gefällt mir nicht und die Vererbung aufzuheben mit einem zusätzlichen Clear finde ich auch nicht gerade geschickt umgesetzt vom Konsortium.

Von welchem Verhalten bei einem "liquid Design" sprichst du, und von welcher Vererbung?

Es sind diverse Moeglichkeiten denkbar, sowohl mit als auch ohne float.

Bin für alles andere offen.

Fuer Floating ja offenbar schon mal nicht.
Warum soll ich jetzt andere Dinge vorschlagen, die mir einfallen wuerden - wenn ich nicht wissen kann, ob du dagegen nicht vielleicht auch wieder obskur begruendete "persoenliche Abneigungen" hast.

MfG ChrisB

[Mike]

Hi,

Von welchem Verhalten bei einem "liquid Design" sprichst du, und von welcher Vererbung?

Beispiel:
http://www.drweb.de/magazin/das-css-element-float/
http://de.selfhtml.org/css/eigenschaften/anzeige/float.htm

Wie man beim Verkleinern des Viewports sieht, macht float genau das was sich die Entwickler gedacht haben, es fliesst, es fliesst sogar unter andere Elemente und diesen Effekt kann ich nicht brauchen.

Es sind diverse Moeglichkeiten denkbar, sowohl mit als auch ohne float.

Bin für alles andere offen.

Fuer Floating ja offenbar schon mal nicht.

Was soll das denn jetzt, habe ich doch direkt gesagt.

Warum soll ich jetzt andere Dinge vorschlagen, die mir einfallen wuerden - wenn ich nicht wissen kann, ob du dagegen nicht vielleicht auch wieder obskur begruendete "persoenliche Abneigungen" hast.

Diese, deine Antwort, ist genau das was hier einem das Forum manchmal madig macht.

Meine Eingangsfrage sagt klar was ich nicht möchte, ich beantworte deine Frage und kriege dann vondir sowas zu hören, wie wenn du kein Float magst lohnt sich auch keine andere Antwort.

Vielen Dank für NICHTS.
Mike

[ChrisB]

Hi,

Wie man beim Verkleinern des Viewports sieht, macht float genau das was sich die Entwickler gedacht haben, es fliesst, es fliesst sogar unter andere Elemente und diesen Effekt kann ich nicht brauchen.

Na und? Dann gib halt fuer das umgebende Element eine (Mindest-)Breite an, die immer so viel Platz fuer beide Elemente laesst, dass sie gar nicht dazu kommen, untereinander zu fliessen.

Vielen Dank für NICHTS.

1. Heul doch, und 2. was kann ich dafuer, wenn es dir an Phantasie mangelt, dir andere Wege zur Umsetzung auszudenken (die man dann ggf. diskutieren koennte, wenn du dir bzgl. eventueller Nachteile o.ae. nicht sicher bist)?

MfG ChrisB

[Mike]

Na und? Dann gib halt fuer das umgebende Element eine (Mindest-)Breite an, die immer so viel Platz fuer beide Elemente laesst, dass sie gar nicht dazu kommen, untereinander zu fliessen.

Aha, sag doch gleich das du keine Ahnung hast. Erst behauptest du es gibt auch Möglichkeiten ohne Float, jetzt sagst du ich soll Float benutzen, was in deiner Form so nicht möglich ist, weil das ganze Design keine Pixel(feste grössen)angaben haben soll.

1. Heul doch,

Die Diva bist du doch wohl.

und 2. was kann ich dafuer, wenn es dir an Phantasie mangelt, dir andere Wege zur Umsetzung auszudenken (die man dann ggf. diskutieren koennte, wenn du dir bzgl. eventueller Nachteile o.ae. nicht sicher bist)?

Mir mangelt es vielleicht an Phantasie, woran mangelt es dir?

Mike

[ChrisB]

Hi,

Aha, sag doch gleich das du keine Ahnung hast.

Ich wuerde dich nur ungern beluegen.

Erst behauptest du es gibt auch Möglichkeiten ohne Float, jetzt sagst du ich soll Float benutzen,

(Wenn du dadurch die Existenz von Moeglichkeiten ohne Float gleich ausgeschlossen siehst, solltest du dich mit Aussagenlogik beschaeftigen.)

Float waere erst mal das gaengigste, deshalb wollte ich von dir eine zwingende - und keine wischi-waschi - Begruendung hoeren, warum du das nicht nutzen willst.

was in deiner Form so nicht möglich ist, weil das ganze Design keine Pixel(feste grössen)angaben haben soll.

Damit rueckst du erst jetzt heraus.
Ausserdem sehe ich immer noch nicht, in wie fern das die Angabe einer Mindestbreite verhindern sollte.

(Und selbst ohne eine solche koennte man das ganze so umsetzen, dass die Elemente sich erst dann untereinander platzieren wuerden, wenn die Anzeigebreite *extrem* gering werden wuerde. Auf wirklich "alle" Gegebenheiten Ruecksicht nehmen zu wollen, ist meist auch nicht sinnvoll.)

MfG ChrisB

[Mike]

Erst behauptest du es gibt auch Möglichkeiten ohne Float, jetzt sagst du ich soll Float benutzen,

(Wenn du dadurch die Existenz von Moeglichkeiten ohne Float gleich ausgeschlossen siehst, solltest du dich mit Aussagenlogik beschaeftigen.)

Weiss nicht was daran missverständlich gewesen sein soll.

Float waere erst mal das gaengigste, deshalb wollte ich von dir eine zwingende - und keine wischi-waschi - Begruendung hoeren, warum du das nicht nutzen willst.

Was daran:

persönliche Abneigung;-) Das Verhaltenvon Float bei liquid Design gefällt mir nicht und die Vererbung aufzuheben mit einem zusätzlichen Clear finde ich auch nicht gerade geschickt umgesetzt vom Konsortium.

wischi waschi ist weiss ich nicht. Dachte das typische Float-Verhalten wäre hinreichend bekannt. Aber trotz das du es ganu weisst, wolltest du mich ja herausforden und bekamst umgehend sogar Beispiele.

was in deiner Form so nicht möglich ist, weil das ganze Design keine Pixel(feste grössen)angaben haben soll.

Damit rueckst du erst jetzt heraus.

LiquidDesign bedeutet bei mir auch kompromisslos LiquidDesign, mag bei dir anders sein.

Ausserdem sehe ich immer noch nicht, in wie fern das die Angabe einer Mindestbreite verhindern sollte.

So wie du es schilderst, weise ich dem Browser statisch an, ab wann der seinen horizontalen Scrollbalken zeigt. Und das ist für mich nicht liquid. Aber das es bestimmt darauf basierend eine Lösung gibt, davon gehe ich aus, nur war meine Frage gehts ohne Float, so lautet sogar der Titel des Threads.

Aber um das Ganze mal abzukürzen:

  
<form>  
<table border="0" cellpadding="0" cellspacing="0" width="50%" style="border:2px solid #008000;">  
<tr>  
<td width="98%"><input style="border:0;width:100%;font-size:3em;" type="text" name="x" /></td>  
<td align="right" bgcolor="#008000"><input type="image" src="img/button.gif" /></td>  
</tr>  
</table>  
</form>  
  

So sähe die Tabellenlösung aus, die ich gerne in CSS konvertieren würde.
*Inlinestyles und attributenmix, bevor da wieder jemand meckert, sind natürlich nur testhalber hier drin.

Mike

[suit]

wischi waschi ist weiss ich nicht. Dachte das typische Float-Verhalten wäre hinreichend bekannt. Aber trotz das du es ganu weisst, wolltest du mich ja herausforden und bekamst umgehend sogar Beispiele.

aber schlechte beispiele, beispiele die auf min-width verzichten, obwohl das offensichtlich in diesem fall die lösung sein sollte

LiquidDesign bedeutet bei mir auch kompromisslos LiquidDesign, mag bei dir anders sein.

dh wenn der viewport 5 pixel breit ist, willst du dass eine 40/60% breite spalten auch 2 und 3 pixel breit sind, dass einzelne worte oder auch zeichen durchaus breiter sein können, nimmst du auch hin? alle achtung, das ist echter idealismus :)

was spricht gegen eine minimalbreite von sagen wir 20 em? oeder 10 em?

So wie du es schilderst, weise ich dem Browser statisch an, ab wann der seinen horizontalen Scrollbalken zeigt. Und das ist für mich nicht liquid. Aber das es bestimmt darauf basierend eine Lösung gibt, davon gehe ich aus, nur war meine Frage gehts ohne Float, so lautet sogar der Titel des Threads.

siehe oben, dies nicht zu tun ist eine uncoole lösung - flüssige designs schön und gut, aber irgendwann muss schluss sein - besonders dann, wenn in einem flüssigen design die textspalte schmäler wird, als der inhalt benötigt - min-width wurde nicht umsonst "erfunden"

So sähe die Tabellenlösung aus, die ich gerne in CSS konvertieren würde.

a) warum tust du das nicht und b) welchen vorteil ziehst du daraus? deine tabellenlösung ist mitnichten "liquid", eine tabellenzelle höhrt auf zu schrumpfen wenn ihr inhalt nicht mehr reinpasst - dann bekommst du zwangsläufig einen horizontalen scrollbalken

[Mike]

Hi,

dh wenn der viewport 5 pixel breit ist, willst du dass eine 40/60% breite spalten auch 2 und 3 pixel breit sind, dass einzelne worte oder auch zeichen durchaus breiter sein können, nimmst du auch hin? alle achtung, das ist echter idealismus :)

Dafür auch problemos auf jedem Minibildschirm/Handy anzuschauen.

was spricht gegen eine minimalbreite von sagen wir 20 em? oeder 10 em?

min-width wurde nicht umsonst "erfunden"

IE6 kennt das aber leider nicht.

Mike

[suit]

Dafür auch problemos auf jedem Minibildschirm/Handy anzuschauen.
IE6 kennt das aber leider nicht.

dass jemand einen ie6 auf einem handheld mit einem extrem kleinen viewport nutzt oder sein browserfenster auf eine "winzige größe" minimiert um dann noch damit zu arbeiten halte ich für ausgeschlossen

[Gunnar Bittersmann]

@@Mike:

min-width wurde nicht umsonst "erfunden"
IE6 kennt das aber leider nicht.

Doch, er nennt es nur anders. 'width' kennt er nicht.

Live long and prosper,
Gunnar

[ChrisB]

Hi,

min-width wurde nicht umsonst "erfunden"
IE6 kennt das aber leider nicht.

Doch, er nennt es nur anders. 'width' kennt er nicht.

So gerne, wie du diese Aussage wiederholst, wiederhole ich, dass sie nicht stimmt.

width kann min-width auch im IE 6 nicht ersetzen; mit min-height und height verhaelt sich das anders.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

width kann min-width auch im IE 6 nicht ersetzen; mit min-height und height verhaelt sich das anders.

Grmpf, irgendwas stimmt an meiner Orientierung nicht.

Ich bin noch aufrecht. Sollte mich wohl hinlegen. Es ist schon spät.

Live long and prosper,
Gunnar

[suit]

Grmpf, irgendwas stimmt an meiner Orientierung nicht.

sollten sie diesen smilie nicht lesen können, neigen sie ihren kopf um 90° zur seite :)

Ich bin noch aufrecht. Sollte mich wohl hinlegen. Es ist schon spät.

aufrechter gang hilft nix, wenn das genick um 90° zur seite hängt - da kanns schon passieren, dass dir jemand ein x für ein <del>u</del><ins>y</in> vormacht

[Gunnar Bittersmann]

@@suit:

wenn das genick um 90° zur seite hängt - da kanns schon passieren, dass dir jemand ein x für ein <del>u</del><ins>y</in> vormacht

Nee nee, ein x mit genick um 90° zur Seite sieht immer noch aus wie ein x. ;-b

Live long and prosper,
Gunnar

[suit]

Nee nee, ein x mit genick um 90° zur Seite sieht immer noch aus wie ein x. ;-b

ich fürchte, da hilft nur noch notschlachten - dass sich die beschriftung der abszisse (x) und ordinate (y) nicht ändert ist klar, aber wenn du ein bestehendes kartesisches koordinatensystem um 90° kippst, hast du plötzlich eine abszisse mit y-beschriftung und die ordinate ist mit x beschriftet - wenn man dann noch die unbequemlichkeit des steifen genicks dazurechnet, kanns schon vorkommen dass du mit breite und höhe durcheinanderkommst :D

[Gunnar Bittersmann]

@@suit:

Nee nee, ein x mit genick um 90° zur Seite sieht immer noch aus wie ein x. ;-b

ich fürchte, da hilft nur noch notschlachten - dass sich die beschriftung der abszisse (x) und ordinate (y) nicht ändert ist klar,

Abszisse?? Ordinate??

Obszisse??

Obszön?

Wovon sprichst du?

Dreh doch mal dieses Bild im Bildverarbeitungsprogramm deiner Wahl um 90°! Sieht es danach aus wie ein y? Na bitte!

Live long and prosper,
Gunnar

[suit]

Dreh doch mal dieses Bild im Bildverarbeitungsprogramm deiner Wahl um 90°! Sieht es danach aus wie ein y? Na bitte!

ohne dich wüsste ich jetzt garnicht, dass gimp beim importieren von svgs die formen in pfade speichern kann :)

aber zurück zum thema:
wie erklärst du dir dann dein verwechseln von höhe und breite?

[ChrisB]

Hi,

So wie du es schilderst, weise ich dem Browser statisch an, ab wann der seinen horizontalen Scrollbalken zeigt. Und das ist für mich nicht liquid.

Komisch - und wenn Elemente, die nicht mehr nebeneinander passen, dann untereinander rutschen, dass passt dir dann auch wieder nicht ...

<form>
<table border="0" cellpadding="0" cellspacing="0" width="50%" style="border:2px solid #008000;">
<tr>
<td width="98%"><input style="border:0;width:100%;font-size:3em;" type="text" name="x" /></td>
<td align="right" bgcolor="#008000"><input type="image" src="img/button.gif" /></td>
</tr>
</table>
</form>

>   
> So sähe die Tabellenlösung aus,  
  
Die in Punkto Liquiditaet welche Vorteile haben soll?  
  
Die Tabelle soll 50% breit sein.  
Und wenn diese 50% jetzt so wenig effektiven Platz ergeben, dass darin, wenn das Submit-Image mit seinen festen Maszen den vorgegebenen verbleibenden 2% entspricht, die davor liegende Zelle also gar keine 98% Breite mehr einnehmen kann, was dann?  
Und wenn das Inputfeld so schmal wird, dass man darin gar nicht mehr vernuneftig Eingaben machen kann, selbst das waere dir egal? Hauptsache "liquid" um der Liquiditaet willen, egal ob bloedsinnig oder nicht?  
  

> die ich gerne in CSS konvertieren würde.  
  
Dann gebe dem Inputfeld 98% Breite; als replaced inline Element nimmt es eine width-Angabe an, und laesst neben sich trotzdem auch ohne Floating noch Platz fuer die Submit-Grafik.  
(Natuerlich nur in begrenztem Masze, aber das Problem der Vermischung von Prozent- und Pixelbreiten hat die Tabellenloesung ja genauso.)  
  
MfG ChrisB  
  

-- 
„This is the author's opinion, not necessarily that of Starbucks.“

[Mike]

So wie du es schilderst, weise ich dem Browser statisch an, ab wann der seinen horizontalen Scrollbalken zeigt. Und das ist für mich nicht liquid.

Komisch - und wenn Elemente, die nicht mehr nebeneinander passen, dann untereinander rutschen, dass passt dir dann auch wieder nicht ...

Genau, das würde mir nicht passen, der horizontale Scrollbalken ist aber auch unnötig end ensteht bei der Tabelle auch nicht.

Und wenn .....

Ehrlich gesagt, was du sonst geschrieben hattest, habe ich nicht verstanden, was du meinst. Ich kann zumindest die Tabelle beliebig minimieren und habe doch immer ein zufriedenstellendes Ergebnis.

Mike

[suit]

Genau, das würde mir nicht passen, der horizontale Scrollbalken ist aber auch unnötig end ensteht bei der Tabelle auch nicht.

doch tut er und zwar genau dann, wenn die tabellenzelle nicht mehr weiter schrumpfen kann, wenn der inhalt das nicht zulässt

[ChrisB]

Hi,

Erst behauptest du es gibt auch Möglichkeiten ohne Float

Zum Beispiel den Submit-Button einfach absolute am umgebenden Container zu positionieren, waere doch eine recht simple Moeglichkeit.

MfG ChrisB

[Mike]

Erst behauptest du es gibt auch Möglichkeiten ohne Float

Zum Beispiel den Submit-Button einfach absolute am umgebenden Container zu positionieren, waere doch eine recht simple Moeglichkeit.

Das wäre in der Tat eine Möglichkeit, allerdings muss dann das übergeordnete Element auch positioniert werden und der Button schiebt sich über den Schluss vom Text.

Aber damit könnte ich leben, schau mir aber erst mal Gunnars Lösung genauer an, die sieht vielversprechend aus.

Nun bin ich auch wieder nett und sage danke
Mike

[ChrisB]

Hi,

Zum Beispiel den Submit-Button einfach absolute am umgebenden Container zu positionieren, waere doch eine recht simple Moeglichkeit.

Das wäre in der Tat eine Möglichkeit, allerdings muss dann das übergeordnete Element auch positioniert werden

Keine Arme, keine Kekse.

und der Button schiebt sich über den Schluss vom Text.

Bringe dem Textfeld oder seinem Inhalt bei, einen entsprechenden Abstand zu halten.

MfG ChrisB

[Mike]

Keine Frage nur noch ein paar Abschlussgedanken, falls ich den Threat mal wieder rauskrame oder Hinweis für andere.

Bringe dem Textfeld oder seinem Inhalt bei, einen entsprechenden Abstand zu halten.

Das klappt zwar mit padding-right aber nicht 100% passgenau, kurioser Effekt dabei im IE wenn ich die Breite des Textfeldes auf 100% setze springt submit nach unten, bei <=99% gehts, es bleibt allerdings browserabhängig und nicht so passgenau wie bei der Tabelle.

Ein anderes Manko, der Submitbutton ist ein Bild und muss natürlich parallel zum textfeld vertical mittig sein, das scheint auch nicht so einfach zu klappen: http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte

Zu Gunnars Lösung, ein wenig wie Teufel mit Belzebub austreiben, Hacks für die jeweiligen Browser und somit ziemlich komplex.

@suit
Die Tabelle zeigt nur dann einen Scrollbalken wenn ausreichend Text im Textfeld geschrieben wird, was aber in der Regel leer ist.

Gruss
Mike

Gegenwärtiges Testobjekt:

  
<form style="width:50%;position:relative;border:1px solid red;text-align:left;margin:auto;padding-right:20px;">  
<input style="width:98%;font-size:30px;" type="text" />  
<input style="position:absolute;right:0;" type="image" src="button.gif">  
</form>  
  

[suit]

Aha, sag doch gleich das du keine Ahnung hast.

ich denke der mann hat ahnung, der kann nicht anders - es ist fluch und segen zugleich :)

Erst behauptest du es gibt auch Möglichkeiten ohne Float, jetzt sagst du ich soll Float benutzen, was in deiner Form so nicht möglich ist, weil das ganze Design keine Pixel(feste grössen)angaben haben soll.

wie chris schon sagt: das erwähnst du a) erst jetzt und b) was hat ein design "ohne pixel" mit mindestbreite zu tun?

eine mindestbreite lässt sich in der tat auch in anderen einheiten angeben

eine andere möglichkeit, tabellenlos formulare zu gestalten ist, dies unter der verwendung von table-*-eigenschaften zu tun

du kannst auch alles absolut positionieren - deine entscheidung

es gibt in der tat noch einige andere möglichkeiten ohne float, wobei aber auch ich denke dass die float-variante (ggf. in kombination mit anderen methoden) wohl die geschickteste ist

[Gunnar Bittersmann]

@@Mike:

Ich vermeide Floats auch lieber, wenn es Alternativen dafür gibt.

Live long and prosper,
Gunnar

[suit]

Ich vermeide Floats auch lieber, wenn es Alternativen dafür gibt.

für bildchengalerien ist das eine gute lösung, allerdings ist imho bei einem paar aus label und input float die bessere wahl

wenn die breite der box und die anzahl der elemente innerhalb einer zeile nicht bekannt sind, ist natürlich inline-block die bessere wahl