Grösse von Formularelementen

Hallo zusammen,

mittels CSS kann man ja Formularelemente anpassen (Farben, Rahmen usw.).

Ist es auch möglich die Grösse aller Formularelemente in Pixeln zu definieren? Ich hätte gerne dass alle Elemente eines Formulars (vor allem Eingabezeilen und TextArea) die gleiche Breite (ca. 500-600 pixel) aufweisen.
Bei Buttons klappt das, bei allen anderen Elementen nicht :frowning:

Gibts da Möglichkeiten?

Udo

Hallo,

Ist es auch möglich die Grösse aller Formularelemente in
Pixeln
zu definieren? Ich hätte gerne dass alle Elemente
eines Formulars (vor allem Eingabezeilen und TextArea) die
gleiche Breite (ca. 500-600 pixel) aufweisen.
Bei Buttons klappt das, bei allen anderen Elementen nicht :frowning:

doch.
Siehe zB
http://www.robert-neudorf.de/fr_kontakt.html

d.h., Du musst ein bisschen rumprobieren, bis die size - Angabe fuer aeltere Netscape und die CSS-Angabe „style=width:…“ fuer andere die gleiche Breite regeben - dann passt es aber in allen Browsern.

Greetinx
Christian

http://www.html-workshop.de

doch.
Siehe zB
http://www.robert-neudorf.de/fr_kontakt.html

stimmt, da muss bei meinen ersten versuchen irgendwas falsch gelaufen sein aber jetzt klappts…
naja, danke! :smile:

klappt das wirklich bei allen browsern? letztlich muss dann doch wieder rumprobieren? ich löse das mit php, frage ab, welchder browser definiere eine include-datei mit layout-variablen (so wie ich das nenne) und echoe das an den benötigten stellen. so funzt es auch ohne css, ohne javascript.

gruss
meth

klappt das wirklich bei allen browsern?

mit Netscape leider nicht :frowning:

letztlich muss dann
doch wieder rumprobieren? ich löse das mit php, frage ab,
welchder browser definiere eine include-datei mit
layout-variablen (so wie ich das nenne) und echoe das an den
benötigten stellen. so funzt es auch ohne css, ohne
javascript.

tja, das wäre zwar eine lösung, aber wie bringe ich netscape bei eingabefelder so genau wie möglich 600 pixel breit anzizeigen?

Udo

ich unterscheide zwischen n4 und n6 und mozilla 0.9.4+, dass heisst alle brauchen utnerschiedliche size angaben, vor allem bei verwendung von css-angaben für input und sonstige auswahlfelder. die seite hier, ist glaub ich ein gelungenes beispiel für die kleinen möglichkeiten mit php/css/js

http://www.nachtagenten.de/index.php?content=signinform

have fun.
meth

habs grad geteste, läuft auch mit n4.x…und n6. netscape 4.x braucht width= ie und n6 brauchen bzw. nehmen sich den style="width… tag…läuft super…size= kann man vollständig wegglassen…opera weiss ich noch nicht…

also nochmals, ich hab das ganze jetzt intensiver auf folgenden browser beobachtet:

n4.5, n4.07, n.78

n6

mozilla 095

ie5, 5.5, 6

opera 5.12

mein fazit ist. um sowohl input als auch select felder genau zu skalieren gibt es nur einen weg, die verwendung von style=„width:100“ angaben, da man mit der alten methode (size=“10“) die SELECT-felder nicht pixelgenau angeben kann, ie und n6 zwar in der lage pixelgenau zu arbeiten aber n4 natürlich nicht. Der n4 kann aber dafür etwas mit width=„100“ anfangen, allerdings dies gilt NUR für SELECT-Felder, denn Input-Felder macht netscape 4.x unabhängig der angegeben werte IMMER so breit wie die td selbst (FALLS keine size-angaben gemacht wurden) deshalb gilt hier, doppeltes arbeiten mit size=“10“ (bei input-feldern) und mit width=“100“ (bei select-boxen etc.)

ich mache das ganze mit php, damit der clientseitige code „überschaubarer“ bleibt. ich echo’e an den entscheidenden stellen komplette angaben wie style=„width:100“ oder size=„10“ um das ganze wirklich pixelgenau kontrollieren zu können und trotzdem einigermaßen xBrowserfähig zu bleiben, desweitern lege ich ja noch per css style-sheet angaben ÜBER die jeweiligen felder…wie z. b. hintergrundfarbe, schriftgrösse etc. )oder gepunktete ränder).

Zwar könnte man auch in den css angaben breiten-angaben vermerken, aber dann müsste je nach seite und gewünschter breite ein neuer css angelegt werden…zuviel code und pflegeaufwand, deshalb der mischmasch aus css und den unterschiedlichen variablen.

mein fazit ist. um sowohl input als auch select felder genau
zu skalieren gibt es nur einen weg, die verwendung von
style=„width:100“ angaben,

genau, mit dem IE klappt das auch wunderbar…

da man mit der alten methode
(size=“10“) die SELECT-felder nicht pixelgenau angeben kann,
ie und n6 zwar in der lage pixelgenau zu arbeiten aber n4
natürlich nicht. Der n4 kann aber dafür etwas mit width=„100“
anfangen, allerdings dies gilt NUR für SELECT-Felder,

das ist doof, denn ich möchte vor allem TEXTAREA- und INPUT-Felder möglichst bei allen gängigen Browsern einheitlich darstellen.
Es ist bei meinem aktuellen Projekt gar nicht mal sooo wichtig, dass die Felder auf den Pixel genau ausgegeben werden aber ich habe teils grosse Unterschiede zwischen den beiden Browsern bemerkt. Ob die Felder nun 580, 600 oder 620 Pixel breit sind, ist nicht so wichtig. Hauptsache ist, dass die Abweichungen unter 5% bleiben und die Input- wie Textarea-Felder dann auch die selbe Breite verwenden (hauptsache es sieht ordentlich aus).

denn
Input-Felder macht netscape 4.x unabhängig der angegeben werte
IMMER so breit wie die td selbst (FALLS keine size-angaben
gemacht wurden)

Was meinst du mit „td“? Eine Tabellenzelle? Wenn das so ist, dann wäre das überhaupt kein Problem, im Gegenteil: Die Eingabefelder werden sowieso innerhalb einer Tabelle ausgegeben.

deshalb gilt hier, doppeltes arbeiten mit
size=“10“ (bei input-feldern) und mit width=“100“ (bei
select-boxen etc.)

ok, aber bei netscape ist ein size=50 input-feld wesentlich länger als bei IE.
Auch ignoriert Netscape meine Fontangabe und verwendet statt dessen immer Courier New (zumindest eine fixed-width Schrift). IE scheint hingegen die size-Angabe nicht so ernst zu nehmen, wodurch die tatsächlich angezeigte Zeichenanzahl völlig unterschiedlichich ist.

Ich frage mich wirklich, wieso es so schwierig ist, einen Browser ordentlich auszuprogrammieren…

ich mache das ganze mit php, damit der clientseitige code
„überschaubarer“ bleibt. ich echo’e an den entscheidenden
stellen komplette angaben wie style=„width:100“ oder size=„10“
um das ganze wirklich pixelgenau kontrollieren zu können und
trotzdem einigermaßen xBrowserfähig zu bleiben, desweitern
lege ich ja noch per css style-sheet angaben ÜBER die
jeweiligen felder…wie z. b. hintergrundfarbe, schriftgrösse
etc. )oder gepunktete ränder).

Mein Formular wirs sowieso in Echtzeit erstellt, weshalb das kein Problem darstellen dürfte. Doch wie erkennst du die einzelnen Browser? Ich nehme an, mittels der HTTP_AGENT Variable. Hier hab ich aber gehört dass es dabei auch nicht so eindeutig der Browser erkannt werden kann. Opera scheint z.b. auch eine IE-ähnliche Angabe zu machen.
Muss das aber noch überprüfen.

Zwar könnte man auch in den css angaben breiten-angaben
vermerken, aber dann müsste je nach seite und gewünschter
breite ein neuer css angelegt werden…zuviel code und
pflegeaufwand, deshalb der mischmasch aus css und den
unterschiedlichen variablen.

Das style-Attribut ist doch eine CSS Angabe?

Udo

td, tabellenzelle, yes.

zwecks browserabfrage, ich mach das so:

$b = „$HTTP_USER_AGENT“;
$b = strtolower($b);
$loaded = 0;

if (strstr($b, „win“))
{
if (strstr($b, „msie“)) #explorer 5.x
{echo „“; $b=„msie“; $loaded = 1;}

if (strstr($b, „mozilla/5“) and !(strstr($b, „netscape“)) and $loaded != 1) #mozilla ab 0.9.4
{echo „“; $b=„m904“; $loaded = 1;}

if (strstr($b, „mozilla/5“) && $loaded != 1) #n6
{echo „“; $b=„n6“; $loaded = 1;}

if (strstr($b, „mozilla/4“) && $loaded != 1) #n4
{echo „“; $b=„n4“; $loaded = 1;}

if ($loaded != 1) #all others gets ie
{echo „“; $b=„msie“; $loaded = 1;}
}

else

if (strstr($b, „mac“))
{
if (strstr($b, „msie“)) #explorer 5.x
{echo „“; $b=„msie“; $loaded = 1;}

if (strstr($b, „mozilla“) && $loaded != 1) #n4
{echo „“; $b=„n4“; $loaded = 1;}

if ($loaded != 1) #all others gets ie
{echo „“; $b=„msie“; $loaded = 1;}
}
?>

und das klappt wunderbar, der opera gehört nicht zu meinem optimierungs-packet, wenn das ein kunde will muss er extra zahlen, denn opera kann erstens javaScript nur sehr unvollständig, was zu erheblichen problemen führt, zweitens kann, wie du bemerkt hast, der user selbst entscheiden ob sich der opera als ie, n4, n6 oder mozilla ausgeben soll und spätestens hier hast du keinerlei kontrolle mehr und drittens haben den zum glück nicht soviele, viertens, der kostet geld…oder macht werbung, also ich schau das bei opera zumindest die informationen die man den usern unterjubeln will, ankommen…der rest ist eine stylefrage…´jeder der mehr macht ist schön, aber ich hoffe das dessen firma vor lauter kompatibilitätstests nicht den bach runtergeht wie die vielen dotComs…ein ernstzunehmender aspekt…nicht mal in der mathematik gibt es 100%… :smile: ich bin froh wenn das zeugs auf 95% läuft…wobei ich jetzt unix und linux nicht teste…

ok, ich hab eine lösung für die brwoser sachen, wie ich glaub ich erwähnte, ich paste bzw. echoe an den entscheidenen stellen utnerschiedilchen code…für den n4 liefere ich style= angaben erst gar nicht aus! hier meine datei, mit dem namen layoutvars.inc.php, dort die unterschiedlichen werte:

<?php switch ($b)
{ case "n6": $sizeDateInp="style='width:70'"; $sizeConArea="30"; $sizeConInp="style='width:200'"; $sizeAnmFile="style='width:233'"; $sizeAnmArea="35"; $sizeAnmInp="style='width:133'"; $sizeAnmSel="style='width:133'"; $sizeSearchInp="style='width:100'"; $sizeSearchSel="style='width:135'"; $usernameSize="12"; $bannerDivVis="visible"; break; case "n4": $sizeDateInp="size='5'"; $sizeConArea="20"; $sizeConInp="size='21'"; $sizeAnmFile="size='20'"; $sizeAnmArea="28"; $sizeAnmSel="width='195px'"; $sizeSearchInp="size='10'"; $sizeSearchSel="width='30px'"; $usernameSize="10"; $bannerDivVis="hidden"; break; case "m904": $sizeDateInp="style='width:70'"; $sizeConArea="30"; $sizeConInp="style='width:200'"; $sizeAnmFile="style='width:233'"; $sizeAnmArea="35"; $sizeAnmInp="style='width:133'"; $sizeAnmSel="style='width:133'"; $sizeSearchInp="style='width:100'"; $sizeSearchSel="style='width:135'"; $usernameSize="20"; $bannerDivVis="visible"; break; default: //msie $sizeDateInp="style='width:70'"; $sizeConArea="30"; $sizeConInp="style='width:200'"; $sizeAnmFile="style='width:233'"; $sizeAnmArea="35"; $sizeAnmInp="style='width:133'"; $sizeAnmSel="style='width:133'"; $sizeSearchInp="style='width:100'"; $sizeSearchSel="style='width:135'"; $usernameSize="18"; $bannerDivVis="visible"; break; } ?\> so das sind meine trix, wenn jemand bessere hat, ich lerne gern dazu grüsse meth