CSS mit % Angaben - allgemeine Frage

[T-Rex]

Moin,

ich verzweifel gerade an einer simplen CSS Sache.
folgende Struktur:
<label>Label</label><input />

Und genau so soll es auch angezeigt werden. Zu erst das Label, dann der Input. Das ganze soll aber Skalierbar sein, sprich mit Prozentangaben.

Kein Problem denk ich mir.

label  
{  
   width: 30%;  
}  
  
input  
{  
   width: 70%;  
}  

Ergibt zusammen 100% - passt!

Bäm steht das input unter dem Label. Wieso frag ich mich... achja hab das padding übersehen von 3px beim input. Also neue Anweisung:
label
{
   width: 30%;
}
input
{
   width: 69%;
   padding-left: 0.5%;
   padding-right: 0.5%;
}
Ergbibt zusammen 100% - passt!
Bäm steht das input unter dem Label. Wieso frag ich mich... achja hab den Border von 1px übersehen. Und hier hab ich mir doch mal gedacht frag ich die selfhtml Gurus.

Bereits beim Padding hab ich schlucken müssen. Wird das ganze zu klein steht die Schrift im Input doch sehr an den Rand gequetscht. Dass konnte ich aber noch akzeptieren. Der Border verschwindet aber irgendwann.
Lange rede kurzer Sinn, ich bin im Konflikt mit Prozentualen Angaben und festen Pixel angaben. Gibt's dafür irgendeine allgemeine Lösung? Oder wie umgeht man das am geschicktesten?

Gruß
Freilaufender
T-Rex

[dave]

Hi,

dein label braucht noch ein display: inline-block; sonst sollte width eigentlich nicht wirken.

Wenn du dann noch deinem input ein box-sizing: border-box; gibst sollte alles stimmen?

~dave

[T-Rex]

Wenn du dann noch deinem input ein box-sizing: border-box; gibst sollte alles stimmen?

WWWAAAAAHHHH.... so einfach?
Super Mega Danke ! Du weißt gar nicht wie viele Probleme du in meinem Kopf gelöst hast.

Gruß
Erstaunter
T-Rex

[Gunnar Bittersmann]

@@T-Rex:

nuqneH

Lange rede kurzer Sinn, ich bin im Konflikt mit Prozentualen Angaben und festen Pixel angaben. Gibt's dafür irgendeine allgemeine Lösung?

calc()

Oder wie umgeht man das am geschicktesten?

Mit dem dir genehmen Box-Modell.

Qapla'

[T-Rex]

calc()

Nope das geht nicht. Mein Firefox macht aus width: -moz-calc(50% + 20px) -> width: 70%; (dass selbe auch wenn ich nur calc benutze).

Gruß
Gunnar's schlechtere Hälfte
T-Rex

[Matthias Apsel]

Om nah hoo pez nyeetz, T-Rex!

Nope das geht nicht. Mein Firefox macht aus width: -moz-calc(50% + 20px) -> width: 70%;

Aber nur, wenn das Objekt 100 Pixel breit ist. Firefox kann richtig rechnen.

Matthias

[T-Rex]

Aber nur, wenn das Objekt 100 Pixel breit ist. Firefox kann richtig rechnen.

Wahhhhh heute schon zum zweiten mal. Joa der Firefox kann rechnen. Mein Lessoptimierer haut anscheinend die Leerzeichen raus.
Denn wenn -moz-calc(50%+20px) ohne Leerzeichen vor und nach dem Minus kommen, werden die 20px so wie ich es beschrieben habe zu den 50 aufaddiert -> also 70%. Mal gucken was nu...

Gruß
Antioptimierungsprozessbeschleuniger
T-Rex

[T-Rex]

Oder Less versucht selbst zu rechnen.... hmmm....

Gruß
Nachtragender
T-Rex

[dave]

Hi,

LESS rechnet selber. Nur wirft der hier eine Einheit einfach weg.

Richtig wäre:

width: -moz-calc(50% ~"+" 20px);

~dave

[Gunnar Bittersmann]

@@T-Rex:

nuqneH

-moz-calc(50% + 20px)

-moz-calc ist Unsinn.

Gegenwärtig ist die Deklaration mit -webkit-Präfix und präfixfrei (in dieser Reihenfolge)
zu notieren. [caniuse.com]

Qapla'