CSS Eingabefeld mit min- und max-width

M

Mr. Snoot

Gast

• 6. Juli 2011

• #1

Hio,

ich möchte ein Eingabefeld, das maximal 218px breit ist, aber bei kleineren Auflösungen auch auf 150px verkleinert werden kann. Wie erreiche ich das?

Hab schon mit min- und max-width und %-Angaben gespielt, aber keinen Erfolg gehabt

Lässt sich das ohne JS nur mit CSS realisieren? Hauptsächlich für mobile Browser.

 

Cool Master

Fleet Admiral

Registriert

Dez. 2005

Beiträge

40.064

• 6. Juli 2011

• #2

Sollte eigentlich mit % gehen.

 

M

Mr. Snoot

Gast

• 6. Juli 2011

• #3

Etwas genauer bitte

Ich hatte 100 % in Kombination mit min- und max-width probiert.

 

Cool Master

Fleet Admiral

Registriert

Dez. 2005

Beiträge

40.064

• 6. Juli 2011

• #4

einfach nur width:xx%;

Die % beziehen sich ja auf die Auflösung von deinem Monitor.

 

M

Mr. Snoot

Gast

• 6. Juli 2011

• #5

Und was ist xx?

 

Cool Master

Fleet Admiral

Registriert

Dez. 2005

Beiträge

40.064

• 6. Juli 2011

• #6

Die Zahl die du ausrechnest

 

marcOcram

Lieutenant

🎅Rätsel-Elite ’24

Registriert

Mai 2010

Beiträge

641

• 6. Juli 2011

• #7

aber je nach der Auflösung des Nutzers kann dadurch auch das Eingabefeld < 150px bzw. > 218px werden.

Beispiel: width:11%;

1920x1080 => ~211px Breite

1280*1024 => ~140px Breite

Ganz genau wirst du es nicht hinbekommen mit width:xx%, aber annähernd Ganz genau momentan nur mit JavaScript

 

M

Mr. Snoot

Gast

• 6. Juli 2011

• #8

Ausrechnen anhand von?


@ Ocram1992: eben, darum gehts. Also ist es nicht möglich?

 

nkler

Lieutenant Pro

Registriert

Juli 2006

Beiträge

753

• 6. Juli 2011

• #9

#container{
min-width:150px;
max-width:218x}

Das müsste doch klappen wenn ich mich nicht irre, wobei ich da auch nicht mehr up to Date bin.

 

Cool Master

Fleet Admiral

Registriert

Dez. 2005

Beiträge

40.064

• 6. Juli 2011

• #10

Also min-width geht bei mir im FF 5 ohne probs habe es eben bei nem Projekt getest das ich am laufen habe.

@nkler

Jap so gings bei mir

 

.olli

Cadet 4th Year

Registriert

Juli 2011

Beiträge

102

• 6. Juli 2011

• #11

Alternativ könntest du versuchen, dem Eingabefeld eine Klasse zu verpassen und dessen Breite abhängig vom Anzeigegerät (Smartphone, Tablet, PC-Bildschirm etc.) bzw. dessen Eigenschaften (Breite/Höhe des Displays, Auflösung, Seitenverhältnis etc.) zu bestimmen - schau dir dazu mal Media Queries an.

 

Cool Master

Fleet Admiral

Registriert

Dez. 2005

Beiträge

40.064

• 6. Juli 2011

• #12

Mr. Snoot schrieb:

Also ist es nicht möglich?

Zum Vergrößern anklicken....

Mit CSS ist alles möglich. Vorallem kann man ja schon CSS3 nutzen. Klar es gibt ein zwei sachen de gehen in JS schneller/besser aber min-width und max-width geht ohne probleme bei mir im FF, Opera, Chrome und Safari.

 

M

Mr. Snoot

Gast

• 6. Juli 2011

• #13

nkler schrieb:

#container{
min-width:150px;
max-width:218x}

Zum Vergrößern anklicken....

Zeigt mir aber immer nur die kleinere Breite an.

.olli schrieb:

abhängig vom Anzeigegerät .. bzw. dessen Eigenschaften .. zu bestimmen

Zum Vergrößern anklicken....

Wenn das mit CSS möglich ist!? Ich gucke mal.

 

.olli

Cadet 4th Year

Registriert

Juli 2011

Beiträge

102

• 6. Juli 2011

• #14

Wenn du meinem Link folgst, wirst du sehen, dass es in der Tat möglich ist Auf CSS-Tricks ist das Ganze noch etwas ausführlicher und anhand einiger Beispiele erklärt.

 

Cool Master

Fleet Admiral

Registriert

Dez. 2005

Beiträge

40.064

• 6. Juli 2011

• #15

Mr. Snoot schrieb:

Zeigt mir aber immer nur die kleinere Breite an.

Zum Vergrößern anklicken....

nkler schrieb:

#container{
min-width:150px;
max-width:218x}

Zum Vergrößern anklicken....

Sollte:

nkler schrieb:

#container{
min-width:150px;
max-width:218px;
}

Zum Vergrößern anklicken....

sein Ein bissl mit denken

 

M

Mr. Snoot

Gast

• 7. Juli 2011

• #16

Und der Unterschied ist - abgesehen vom Semikolon?

Ansonsten wäre ich dankbar, wenn hier mal jemand ein funktionierendes Beispiel irgendwo hochladen/zeigen könnte. Denn bei mir funktioniert es in keinem Browser. Da hilft's mir auch nicht wenn manch einer sagt es geht.

 

Zuletzt bearbeitet: 7. Juli 2011

.olli

Cadet 4th Year

Registriert

Juli 2011

Beiträge

102

• 7. Juli 2011

• #17

Mr. Snoot schrieb:

Und der Unterschied ist - abgesehen vom Semikolon?

Zum Vergrößern anklicken....

Bei der Eigenschaft max-width hat nkler das P bei der Maßangabe vergessen.

Mr. Snoot schrieb:

Ansonsten wäre ich dankbar, wenn hier mal jemand ein funktionierendes Beispiel irgendwo hochladen/zeigen könnte.

Zum Vergrößern anklicken....

Anderer Vorschlag: Zeig uns doch mal deinen Versuch und wir schauen drüber.

 

M

Mr. Snoot

Gast

• 7. Juli 2011

• #18

HTML:

<input type="input" style="min-width:150px; max-width:218px">

http://m.halbleiter.org/width.html

 

Zuletzt bearbeitet: 7. Juli 2011

Cool Master

Fleet Admiral

Registriert

Dez. 2005

Beiträge

40.064

• 7. Juli 2011

• #19

Mit px Angaben wird das nichts. Du musst mit % arbeiten wie ich schon sagte. Da die % sich ander Auflösung des Users richten.

Wie Ocram1992 schon sagte sind 11% nen gutes ergebnis mit dem man Fahren kann.

 

M

Mr. Snoot

Gast

• 7. Juli 2011

• #20

Wie jetzt; du hast doch selbst gesagt bei dir würde es gehen

Cool Master schrieb:

@nkler

Jap so gings bei mir

Zum Vergrößern anklicken....

 

Zuletzt bearbeitet: 7. Juli 2011