| Autor |
Nachricht |
lgorse
Threadersteller
Dabei seit: 24.06.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 30.06.2011 21:08
Titel textarea mit padding auf 100% |
  |
|
Hallo,
ich würde gerne eine textarea mit padding: 10px; auf die gesamte Breite strecken (übergeordnetes Element ist body). Mit width: 100%; stehen jedoch 20px rechts über. Gibt es eine elegantere Möglichkeit als bei jedem Seitenaufruf die Breite mit JS zu berechnen?
Auf den ersten 10 Links, die man mit Google findet, gibt es leider keine Lösung für das Problem.
Lg,
Lorenz
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Do 30.06.2011 22:08
Titel
|
|
|
|
In modernen Browsern kannst du es über die CSS Eigenschaft box-sizing regeln.
|
|
| |
 |
|
|
Anzeige
|
|
|
CanTK
Dabei seit: 23.02.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 30.06.2011 22:48
Titel
|
|
|
Spontan gesagt würde ich es mal mit 2 DIV's versuchen.
Schwupps:
| Code: | <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style>
* {
padding:0;
margin:0;}
#wrap {
width:100%;
background:#0F0;
}
#text {
padding:10px;}
</style>
</head>
<div id="wrap">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div>
</div>
<body>
</body>
</html>
|
Zuletzt bearbeitet von CanTK am Do 30.06.2011 22:52, insgesamt 1-mal bearbeitet
|
|
| |
|
|
snuwie
Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 01.07.2011 08:11
Titel
|
|
|
|
verwende ein <p>-tag (block element) oder verstehe ich das problem nicht richtig?!
|
|
| |
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Fr 01.07.2011 08:23
Titel
|
|
|
| snuwie hat geschrieben: | | verwende ein <p>-tag (block element) oder verstehe ich das problem nicht richtig?! |
Es geht hier um eine <textarea>, wenn ich das richtig verstehe. Daher ist <p> etwas ab vom Schuss.
Bei meinen Versuchen mit "display: block" für eine <textarea> änderte sich auch nicht die Darstellung.
Die vorgestellte Verschachtelung in ein <div> ändert nichts daran, dass die <textarea> immer noch 100%+padding groß ist.
Abhilfe schafft hier eine relative Positionierung des <div> und eine absolute Positionierung der <texarea> mit Angabe aller vier Positionsangaben.
| Code: |
<div>
<textarea></textarea>
</div>
|
| Code: |
div {position: relative;}
textarea {position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 10px;}
|
Funktionierte in meinen Versuchen einwandfrei.
Gruß
Karl
Zuletzt bearbeitet von Karlarsch am Fr 01.07.2011 08:24, insgesamt 1-mal bearbeitet
|
|
| |
|
|
snuwie
Dabei seit: 06.07.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 01.07.2011 08:34
Titel
|
|
|
| Karlarsch hat geschrieben: | | Es geht hier um eine <textarea>, wenn ich das richtig verstehe. Daher ist <p> etwas ab vom Schuss. |
Oh ... freitag morgen^^ 
|
|
| |
|
|
emorikaner
Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 01.07.2011 08:36
Titel
|
|
|
| Karlarsch hat geschrieben: | | Funktionierte in meinen Versuchen einwandfrei. |
Aber nur, wenn der IE6 nicht eingeplant ist (wobei ich es auch so machen würde)
Spontan, denke ich, könnte man es auch so machen.
Die absolute:position Lösung gefällt mir allerdings auch besser.
|
|
| |
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Fr 01.07.2011 09:22
Titel
|
|
|
| emorikaner hat geschrieben: | | Spontan, denke ich, könnte man es auch so machen |
Sieht zwar genauso aus wie gewünscht, ist aber schon ein wenig getrickst
Aber durchaus eine Lösung, wenn es nur um eine 1:1 Optik geht.
Gruß
Karl
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Padding von Listenpunkten setzt sich über allg. Padding
padding?
[CSS] padding-right?
[solved] DIV und padding
CSS padding verbreitert DIV
Padding im NS4 - wie bzw. Alternativen?
|
|
Willkommen auf dem Portal für Mediengestalter
