✔ Input Feld Problem (Grösse)

[Adi | tmine]

Hallo Leute, bräuchte mal einen CSS Profi

Ich hab auf einer Homepage ein Input Feld (Form) und müsste dieses der grösse des übergeordneten Divs anpassen.
Ich dachte eigentlich, dass Div inhalte nicht grösser (weiter) werden können, als das Div selbst. Aber leider ist das Feld auf Laptops mit kleinen Bildschirmen viel zu gross (weit).
Habe dann aber feststellen müssen, dass ich kein width Attribut habe, um es % anzugeben.
Gibt es da eine andere Lösung, dass sich das einigermassen anpasst?

 

[Gumbo]

Wie sieht es denn derzeit aus?

 

[Adi | tmine]

hmm sorry bin grad nicht auf Arbeit, d.h. hab die source nicht zu Hand mach mal n Screenshot und leg die Source bei wenn ich wieder auf Arbeit bin. .. Leider wird das warscheindlich Montag sein. Aber schonma Danke

 

[Maik]

Hi,

mach mal n Screenshot und leg die Source bei wenn ich wieder auf Arbeit bin. .. Leider wird das warscheindlich Montag sein.

kein Problem, wir haben es nicht eilig

 

[Adi | tmine]

Oke ich hab nun einen Screenshot gemacht.
Das Problem ist, dass auf manchen Laptops das Inputfeld dort über das blaue drüberkommt, d.h. rechts weiter geht als das Blaue.

Wie kriege ich das dynamisch angepasst?

 

[Maik]

Hi,

Wie kriege ich das dynamisch angepasst?

ohne jetzt den Quellcode der Seite zu kennen:

<div style="width:200px;padding:20px;background:blue;">
    <input type="text" style="display:block;width:100%;background:yellow;">
</div>

<div style="width:30%;padding:20px;background:blue;">
    <input type="text" style="display:block;width:100%;background:yellow;">
</div>

 

[feeela]

Zusätzlich kann man - um sicher zu gehen - auch noch den "overflow" für das DIV festlegen.

(Beispiel von oben erweitert)

<div style="width:200px; padding:20px; background:blue; overflow: hidden;">
    <input type="text" style="display:block; width:100%; background:yellow;">
</div>

 

[Adi | tmine]

hey Vielen Dank euch allen. Das wusst ich nicht, dass ich da die display Eigenschaft auf block stellen muss. Was bedeutet denn display:block; eigentlich für das inputfeld, oder für die anderes Elemente wo man es setzt?

Gruss Adi

 

[Maik]

Inline-Elemente, wie z.B. das input-Element, erhalten durch eine display:block-Deklaration "Block-Level-Charakteristika" und verhalten sich dann wie ein Blockelement. Dazu zählt das Erzeugen eines Absatzes im Textfluss oder eben eine Breite, die sich am übergeordneten Element orientiert.

 

[Adi | tmine]

Ah oke Danke gut zu wissen