nicht angemeldet
Farbe Rand Input(text)feld
Hallo zusammen, ich habe ein input textfeld geschaffen das ich individuell formatieren möchte. Es klappt auch soweit! nur das der (jeweils formatierte, einzelne) Rand dicker erscheint als der Ursprungsrand des natürlichen, unformatierten Textfeldes. An der Farbe liegts (browserunabhängig) nicht! Kann mir jemand sagen was ich verkehrt mache??
-DIRK-
Hier der CSS-Code dafür:
/* Input-Textfeld Formatierung */
input.text{
color: #000000;
margin: 1 px;
background-color: #efefef;
border-left-color: #000000;
border-right-color: #efefef;
border-bottom-color: #000000;
border-top-color: #efefef;
border-style: solid;
border-with: 1px;
}
/* Input-Textfeld Formatierung ENDE */
-
Hallo Dirk.
nur das der (jeweils formatierte, einzelne) Rand dicker erscheint als der Ursprungsrand des natürlichen, unformatierten Textfeldes.
Dann muss der Rand vorher weniger als ein Pixel breit gewesen sein, was rein physikalisch allerhöchstens auf LCDs/TFTs möglich (Subpixel-Rendering) ist.
Gibt es irgendwo ein Beispiel online zu betrachten?
input.text{
color: #000000;
margin: 1 px;Hier weist du margin-top und margin-bottom den ungültigen Wert „1“ und margin-left sowie margin-right den ungültigen Wert „px“ zu. Zwischen Wert und Maßeinheit darf kein Leerzeichen stehen. > ~~~css background-color: #efefef; > border-left-color: #000000; > border-right-color: #efefef; > border-bottom-color: #000000; > border-top-color: #efefef; > border-style: solid; > border-with: 1px; > }All das kannst du etwas noch zusammenfassen:
input.text { background:#efefef; border:1px solid; border-color:#efefef #efefef #000 #000; color:#000; }Einen schönen Samstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Dann muss der Rand vorher weniger als ein Pixel breit gewesen sein, was rein physikalisch allerhöchstens auf LCDs/TFTs möglich (Subpixel-Rendering) ist.
Der Rand ist ja bei einem "original" gar nicht angegeben. Aber das müsste ich dann ja trotzmde bei css machen um die farbe zu ändern, oder ?
Gibt es irgendwo ein Beispiel online zu betrachten?
Hier der Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>abc</title>
<meta name="GOOGLEBOT" CONTENT="NOSNIPPET">
<meta name="robots" content="INDEX,NOFOLLOW">
<meta name="siteinfo" content="www.media69.de/robots.txt"
<script>
<script type="text/javascript">
var oldstring
function CheckNumbers(obj) {
var text = obj.value;
if(isNaN(text)==true){
obj.value=oldstring;
}else {
oldstring=text;
if(text=="" || text=="undefined") {
text="";
}
}
}
</script>
<!--
function BlurLinks(){
lnks=document.getElementsByTagName('a');
for(i=0;i<lnks.length;i++){
lnks[i].onfocus=new Function("if(this.blur)this.blur()");
}
}onload=BlurLinks;
-->
</script>
<style type="text/css">
<!--
textarea {
overflow:auto;
}
-->
</style><link rel="stylesheet" href="format.css" type="text/css">
</head>
<body class="inhalt" bgcolor="#EFEFEF" ><table border="0" cellpadding="0" cellspacing="0" width="739" >
<tr>
<td width="737" >
<p align="center"><b style="letter-spacing: 3px"><font color="#EFEFEF">.</font></b>
</td>
</tr>
</table><table border="0" cellpadding="0" width="100%">
<tr>
<td width="50%" align="center"><strong><font color="#800000">
Geben Sie bitte Ihre Anfrage hier ein: </font></strong><sup><font color="#FF0000">*</font></sup>
</td>
<td width="50%" align="center"><strong><font color="#800000">Wie dürfen wir Kontakt zu Ihnen aufnehmen?</font></strong></td>
</tr>
</table><table border="0" cellpadding="0" width="101%">
<form action="kontaktformular-auswerten.php" method="post">
<tr>
<td width="50%" rowspan="4" valign="top" align="center"><font color="#C0C0C0"><textarea name="Nachricht" style="background-image: url('/media69/images/at-zeichen.jpg'); background-repeat: no-repeat; background-attachment: fixed; border-color: #000000; background-position: center 50%" rows="6" cols="42"></textarea></font>
</td>
<td width="4%" align="center" valign="middle">
<p align="center"><font color="#800000"> </font>
</p>
</td>
<td width="7%" align="left">
<font color="#800000"> Name:</font>
</td>
<td width="38%" align="center">
<p align="left"><input type="text" class="text" size="35" maxlength="256" name="Name">
</font><sup><font color="#FF0000">*</font></sup>
</td>
</tr>
<tr>
<td width="6%" align="right">
<p align="center"><font color="#800000"> </font>
</p>
</td>
<td width="7%" align="left">
<font color="#800000"> Mail:</font>
</td>
<td width="38%" align="center">
<p align="left"><input type="text" class="text" size="35" maxlength="256" name="Email">
</font><sup><font color="#FF0000">*</font></sup>
</td>
</tr>
<tr>
<td width="6%" align="right">
<p align="center"><font color="#800000">
</font>
</p>
</td>
<td width="7%" align="left">
<font color="#800000"> Phone:</font>
</td>
<td width="38%" align="center">
<p align="left"><font color="#C0C0C0"><input type="text" class="text" size="35" maxlength="256" name="Telefon" onKeyDown="javascript:CheckNumbers(this)" onKeyUp="javascript:CheckNumbers(this)" >
</font>
</td>
</tr>
<tr>
<td width="6%" align="right">
<p align="center"><i></i><font color="#800000">
</font>
</p>
</td>
<td width="7%" align="left">
<font color="#800000"> Fax:</font>
</td>
<td width="38%" align="center">
<p align="left"><font color="#C0C0C0"><input type="text" class="text" size="35" maxlength="256" name="Fax" onKeyDown="javascript:CheckNumbers(this)" onKeyUp="javascript:CheckNumbers(this)" >
</font>
</td>
</tr>
</table><table border="0" cellpadding="0" width="739">
<tr>
<td width="733" align="center"><p align="center"><font color="#EFEFEF"> <b style="letter-spacing: 3px">.</b></font>
</p>
</td>
</tr>
</table><table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-top:solid 1px #EFEFEF;">
<tr>
<td valign="bottom" align="right">
<p style="word-spacing: 0; line-height: 100%; text-indent: 0; margin: 0" align="center"><font color="#C0C0C0"><input type="submit" value="Anfrage versenden" name="Send">
<input type="reset" value="Daten zurücksetzen" name="Reset"></font></td>
</tr>
</form>
</table><table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-top:solid 1px #EFEFEF;">
<tr>
<td valign="bottom" align="right">
<p style="word-spacing: 0; line-height: 100%; text-indent: 0; margin: 0" align="center"><b><font color="#EFEFEF">.</font></b></td>
</tr>
</table></body>
</html>-DIRK-
-
Hallo Dirk.
Auch wenn dein eigentliches Anliegen bereits gelöst wurde, möchte ich noch ein paar Anmerkungen zu deinem Quellcode machen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Ohne <http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform@title=URI zur DTD> schickst du den IE6 hiermit in den Quirksmodus.
<meta name="siteinfo" content="www.media69.de/robots.txt"
<script>Das ist ungültig, da du 1. das meta-Element nicht geschlossen und 2. das <http://de.selfhtml.org/html/referenz/attribute.htm#script@title=type-Attribut für das script-Element> nicht gesetzt hast.
<script>
<script type="text/javascript">Hier hast du zwar an das type-Attribut gedacht, dafür verschachtelst du hier aber ein script-Element in einem script-Element was so nicht erlaubt ist.
var oldstring
Der Sauberkeit halber: Semikolon fehlt.
<!--
Auf HTML-Kommentare in Scriptbereichen kannst du heutzutage verzichten, dies war höchstens bei Steinzeitbrowsern erforderlich, damit sie den Scripttext nicht anzeigen.
function BlurLinks(){
lnks=document.getElementsByTagName('a');
for(i=0;i<lnks.length;i++){
lnks[i].onfocus=new Function("if(this.blur)this.blur()");
}
}onload=BlurLinks;
Du möchtest also bei aktiviertem JS die Navigation per Tastatur unmöglich machen? Der Benutzbarkeit deiner Seite zuliebe solltest du diese Funktion ersatzlos streichen.
<style type="text/css">
<!--Hier gilt dasselbe für die HTML-Kommentare wie im Scriptbereich.
<body class="inhalt" bgcolor="#EFEFEF" >
Das bgcolor-Attribut kannst du ersatzlos streichen, dafür gibt es die http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_color@title=background-color-Eigenschaft.
<table border="0" cellpadding="0" cellspacing="0" width="739" >
Wozu die Layouttabelle? Sinnvoll strukturiertes HTML ist weitaus flexibler und erspart dir auch sonst eine Menge Arbeit.
<td width="737" >
<p align="center"><b style="letter-spacing: 3px"><font color="#EFEFEF">.</font></b>
</td>¿Hm?
<td width="50%" align="center"><strong><font color="#800000">
Geben Sie bitte Ihre Anfrage hier ein: </font></strong><sup><font color="#FF0000">*</font></sup>Auch das font-Element ist gänzlich überflüssig.
<td width="50%" rowspan="4" valign="top" align="center"><font color="#C0C0C0"><textarea name="Nachricht" style="background-image: url('/media69/images/at-zeichen.jpg'); background-repeat: no-repeat; background-attachment: fixed; border-color: #000000; background-position: center 50%" rows="6" cols="42"></textarea></font>
Die Styleangaben machen sich am besten im zentralen style-Element oder in einer externen Stylesheet-Datei.
Einen schönen Samstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]
-
-
-
border-with: 1px;
Da hast du dich verschrieben, die Eigenschaft heißt "border-width".
--
Cya, mewX-
Hallo mewX.
border-with: 1px;
Da hast du dich verschrieben, die Eigenschaft heißt "border-width".
Du hast recht, das habe ich übersehen.
Einen schönen Samstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup] -
border-with: 1px;
Da hast du dich verschrieben, die Eigenschaft heißt "border-width".
THANKS !! :-))
-
-
border-with: 1px;
Hier lag der Fehler: DANKE FÜR EURE HILFE !!! :-)))