Form Input mit 3 Hintergrundbildern

hanskanz · #1 (**permalink**) 01.12.2009, 11:49

Ich habe folgendes Hintergrundbild für ein Input type=text Feld. Leider ist das nur für eine bestimmte Größe geeignet.

Ich will aber auch nich für jede Größe das Bild jedesmal anpassen müßen. Daher habe ich mir überlegt: Den rechten und linken Rand jeweils 5px abzuschneiden und und einen Teil der mit Mitte auszuschneiden.

Dies soll dann immer bei dem Textfeld zusammen gefügt werden.
Also erst der Linkerand dann die Mitte mit background-repeat:repeat-x und dann der rechte Rand.

Hier ein mal alle drei Teile (man sieht kaum einen Unterschied!!):

und hier mein HTML-Code der nicht funzt:

Code:

<style type="text/css">
input {
background: url(/images/bg-login-input-left.gif) top left no-repeat,
url(/images/bg-login-input-center.gif)  top 6px repeat-x,
url(/images/bg-login-input-right.gif) top right no-repeat;
}
</style>

Weiß vielleicht jemand wo der Fehler liegt ? 
<body bgcolor="green">
<input type="text" value="asdasd" size=1>
</body>

Thielo · #2 (**permalink**) 01.12.2009, 12:12

Zitat:

Zitat von hanskanz

Ich habe folgendes Hintergrundbild für ein Input type=text Feld. Leider ist das nur für eine bestimmte Größe geeignet.

Ich will aber auch nich für jede Größe das Bild jedesmal anpassen müßen. Daher habe ich mir überlegt: Den rechten und linken Rand jeweils 5px abzuschneiden und und einen Teil der mit Mitte auszuschneiden.

Dies soll dann immer bei dem Textfeld zusammen gefügt werden.
Also erst der Linkerand dann die Mitte mit background-repeat:repeat-x und dann der rechte Rand.

Hier ein mal alle drei Teile (man sieht kaum einen Unterschied!!):

und hier mein HTML-Code der nicht funzt:

Code:

<style type="text/css">
input {
background: url(/images/bg-login-input-left.gif) top left no-repeat,
url(/images/bg-login-input-center.gif)  top 6px repeat-x,
url(/images/bg-login-input-right.gif) top right no-repeat;
}
</style>

Weiß vielleicht jemand wo der Fehler liegt ? 
<body bgcolor="green">
<input type="text" value="asdasd" size=1>
</body>

Ich weiß wo der Fehler liegt: man kann nur ein hintergrundbild nehmen.. zumindest in css2.1 in 3 sind mehrere Möglich aber auch anders.

Lösung für dein Problem:

HTML-Code:

<div id="form">
   <span class="left"></span>
   <input type="text" value="" size="40" />
   <span class="right"></span>
</div>

du musst das ganze jetzt natürlich noch mit dem CSS anpassen, aber ich denke der Code sagt den Grund Gedanken aus oder? ^^

Gruß

hanskanz · #3 (**permalink**) 01.12.2009, 12:22

Danke, ich habs verstanden. Ich hatte das schon so ähnlich mit HTML gemacht, aber ich dachte vielleicht gibt es ja eine bessere Lösung mit CSS, aber trotzdem DANKE.

Praktikant · #4 (**permalink**) 01.12.2009, 12:30

Wenn es dir egal ist, ob die Ecken bei einem Browser, der CSS3 nicht unterstützt (alle IE's, FF bis Version 2.x, Opera bis Version 9.x oder 10.x, Safari bis Version 2, oder 3) nicht sichtbar sind, dann kannst du das nutzen. Sonst gibts keinen bessere Möglichkeit.

hanskanz · #5 (**permalink**) 01.12.2009, 12:38

Schau dir das bitte nochmal an.

Code:

<style type="text/css">
input[type=text] { font-size:11px; height:21px; color:#4d7100; background:url(/images/bg-login-input-center.gif); background-repeat:repeat-x; border:0px solid #282625; padding:3px 0px 0px 0px;}

.left {  width:5px; height;21px; background:url(/images/bg-login-input-left.gif);   background-repeat:no-repeat; margin-left:0px; }
.right { width:5px; height;21px; background:url(/images/bg-login-input-right.gif);  background-repeat:no-repeat; margin-left:0px; }
</style>


<body bgcolor="green">

<div id="form">
   <span class="left">&nbsp;</span>
   <input type="text" value="" size="40">
   <span class="right"></span>
</div>

</body>

Der Abstand ist irgendwie zu Groß und wie kann das Bild right (ohne <img...) ohne Inhalt angezeigt werden ??

Danke für deine/eure Hilfe.

Thielo · #6 (**permalink**) 01.12.2009, 12:45

zum Thema Abstände:

Code:

* {
margin: 0;
padding: 0;
}

http://xhtmlforum.de/40267-faq-h-ufi...ragen-und.html
hilft das?

vielleicht indem du die beiden spans als block-elemente definierst (display: block) und ihnen eine breite und höhe angibst.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem bei Formular layout.	cooky79	CSS	0	30.05.2011 20:54
Linkverhalten im IE6	ChOpSueY!	CSS	19	19.05.2008 22:48
ansprechen von form input - varianten	Holger (HMR)	CSS	5	20.02.2005 12:24
Validator sagt FORM und INPUT Tags nicht erlaubt	Pulli	(X)HTML	2	17.09.2004 11:44
form input submit formatieren	PrinzEisenherz	CSS	4	24.06.2004 12:30