Homepage selbermachen 7.852 Themen, 35.619 Beiträge

Verfolgung starten Optionen

CSS: So etwas wie width: 100%-1px;

Yves3 / 3 Antworten / Baumansicht Nickles

Hallo,

Bekanntlicherweise wird der Border bei einem Element zu seiner Breite (width) hinzuaddiert. Ich habe jetzt ein Inputfeld in einem div, das inklusive Border genau die Breite dieses divs ausfüllen soll. Ganz der CSS Spezifikation entsprechend wird aber der Border zu den 100% hinzuaddiert und die Inputbox ist schlussendlich breiter als das div, in dem sie drin ist.
Wenn ich die Breite einfach auf 99% setze, dann sieht das bei mir zwar korrekt aus, bei einem grösseren Bildschirm könnte das aber schon nicht mehr stimmen. Eine weitere Möglichkeit wäre ein zusätzliches div ohne vorgegebene Breite, das einzig und allein als Rand dient.

Gibt es da einen sauberen Weg, oder muss ich so einen ähnlichen Hack wie oben beschrieben verwenden?

EDIT: Der Hack mit dem zusätzlichen Div funktioniert scheinbar bei Input-Boxen nicht.
Das muss doch irgendwie machbar sein :(

bei Antwort benachrichtigen
wlaner Yves3 „CSS: So etwas wie width: 100%-1px;“
Optionen

Wie wärs wenn du dem div nen Rahmen gibst und das Inputfeld ohne Rahmen auf 100% setzt?

(Oder versteh ich dich da jetzt nicht richtig...?)
<div style="width:198px; border:1px solid #000;"&gt:
 <input type="text" style="width:100%;" />
</div>


WL

bei Antwort benachrichtigen
Yves3 wlaner „Wie wärs wenn du dem div nen Rahmen gibst und das Inputfeld ohne Rahmen auf 100...“
Optionen

So geht's, Danke :)
Dass ich da noch nicht drauf gekommen bin... hab schon viel abstruseres ausproibert ;)

Übrigens habe ich herausgefunden, dass es auf die andere Art auch geht, wenn ich den Doctype entferne. Ich habe es mit einigen verschiedenen Doctypes probiert, hat aber nirgends funktioniert.

So:


Text...


Code:

<div style="width:32%; background-color: blue; padding:0px;">
Text...<br><input type="text" style="width: 100%; border-style:solid; border-width: 1px; border-color:black;">
</div>
bei Antwort benachrichtigen
Zaphod Yves3 „So geht s, Danke : Dass ich da noch nicht drauf gekommen bin... hab schon viel...“
Optionen

Wenn du den Doctype entfernst, rendert der Browser im Quirks-Mode. Dann ist nicht mehr nachvollziehbar, was dargestellt wird.

HTH, Z.

bei Antwort benachrichtigen