Input Textfeld per CSS

[Dirk]

Hallo zusammen,

ich baue gerade eine format.css-Datei auf die auch die Input textfelder formatieren soll. Leider weiß ich nicht ganz genau wie der Text in der Datei aussehen  muss. Ich hab zwei Alternativen. Welche ist richtig davon?

input[type='text'] {
border-bottom-color: #990000; border-bottom-style: double; border-bottom-width: 1px;
border-left-color: #efefef; border-left-style: double; border-left-width: 1px;
border-right-color: #efefef; border-right-style: double; border-right-width: 1px;
border-top-color: #990000; border-top-style: double; border-top-width: 1px;
background-color: #e7e3c6;
}

INPUT.TEXT{
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;
}

Freundliche Grüße aus einem Biergarten :-))
-DIRK-

[Ashura]

Hallo Dirk.

ich baue gerade eine format.css-Datei auf die auch die Input textfelder formatieren soll. Leider weiß ich nicht ganz genau wie der Text in der Datei aussehen  muss. Ich hab zwei Alternativen. Welche ist richtig davon?

Das kommt ganz darauf an, wie das zugehörige HTML aussieht.

input[type='text'] {

Hiermit selektierst du sämtliche input-Elemente deren type-Attribut explizit auf den Wert „text“ gestellt wurde.

border-bottom-color: #990000; border-bottom-style: double; border-bottom-width: 1px;

border-left-color: #efefef; border-left-style: double; border-left-width: 1px;
border-right-color: #efefef; border-right-style: double; border-right-width: 1px;
border-top-color: #990000; border-top-style: double; border-top-width: 1px;

  
Dies kann man in massiv zusammenfassen:  
  
~~~css
border:1px double;  
border-color:#900 #efefef;

INPUT.TEXT{

Hier selektierst du in HTML-Dokumenten input-Elemente, die der Klasse „TEXT“ angehören. In XHTML selektierst du dagegen ein ungültiges Element.

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;

  
Siehe oben.  
  

> Freundliche Grüße aus einem Biergarten :-))  
  
Prost!  
  
  
Einen schönen Freitag 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](http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/HTMLConstraints.html)]

[Dirk]

Hallo Dirk.

ich baue gerade eine format.css-Datei auf die auch die Input textfelder formatieren soll. Leider weiß ich nicht ganz genau wie der Text in der Datei aussehen  muss. Ich hab zwei Alternativen. Welche ist richtig davon?

Das kommt ganz darauf an, wie das zugehörige HTML aussieht.

Ich möchte das Input der dann per class= .... aufrufen und somit die 4 vorhandenen InputFelder gleichzeitig formatieren.
Dann wäre also die zweite Methode richtig.
Statt: <input type="text"  style="border-top: 1px solid #efefef; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #efefef; background-color:#efefef;"  size="35" maxlength="256" name="Name">

gebe ich dann <input type="text" class=text size="35" maxlength="256" name="Name"> ein ???

input[type='text'] {

Hiermit selektierst du sämtliche input-Elemente deren type-Attribut explizit auf den Wert „text“ gestellt wurde.

border-bottom-color: #990000; border-bottom-style: double; border-bottom-width: 1px;

border-left-color: #efefef; border-left-style: double; border-left-width: 1px;
border-right-color: #efefef; border-right-style: double; border-right-width: 1px;
border-top-color: #990000; border-top-style: double; border-top-width: 1px;

>   
> Dies kann man in massiv zusammenfassen:  
>   
> ~~~css

border:1px double;  

> border-color:#900 #efefef;

INPUT.TEXT{

Hier selektierst du in HTML-Dokumenten input-Elemente, die der Klasse „TEXT“ angehören. In XHTML selektierst du dagegen ein ungültiges Element.

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;

>   
> Siehe oben.  
>   
> > Freundliche Grüße aus einem Biergarten :-))  
>   
> Prost!  
>   
>   
> Einen schönen Freitag noch.  
>   
> Gruß, Ashura  
> 

[Ashura]

Hallo Dirk.

Statt: <input type="text"  style="border-top: 1px solid #efefef; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #efefef; background-color:#efefef;"  size="35" maxlength="256" name="Name">

Jede Fassung ist besser als diese hier.

gebe ich dann <input type="text" class=text size="35" maxlength="256" name="Name"> ein ???

Ganz genau. Damit hast du das input-Element der Klasse „text“ zugeordnet.
(Und bitte die Anführungszeichen um den Wert des class-Attributes nicht vergessen.)

Und bitte kein TOFU, danke.

Einen schönen Freitag noch.

Gruß, Ashura

[Dirk]

Hallo Dirk.

Statt: <input type="text"  style="border-top: 1px solid #efefef; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #efefef; background-color:#efefef;"  size="35" maxlength="256" name="Name">

Jede Fassung ist besser als diese hier.

gebe ich dann <input type="text" class=text size="35" maxlength="256" name="Name"> ein ???

Ganz genau. Damit hast du das input-Element der Klasse „text“ zugeordnet.

Super.Das hat schon geholfen. Nun möchte ich die Klasse in die schon existieren Datei einbauen. Wenn ich am Ende einfüge werden die Einstellungen nicht übernommen :-( Muss ich einen speziellen Ort in der Datei verwenden? Hier die bisherige Datei ohne die neue Klasse:

/* schriftstil,abstände */

body
{ color:#0C0C0C;  background-color: #E7E3C6; font-family: verdana,arial; font-size: 10pt;}

table,tr,td
{margin-top: 0px; margin-left: 0px; margin-right: 0px; color: #0C0C0C ;font-family: verdana,arial; font-size: 10pt; }

/* scrolleiste internet explorer ab vers.5.5 */

body
{scrollbar-arrow-color: #ffffff; scrollbar-base-color: #ebebeb;
scrollbar-highlight-color : #9F9F9F; scrollbar-shadow-color :#ffffff;
SCROLLBAR-TRACK-COLOR: #DFDFDF;}

body.inhalt {background-color:#f9f9f9;
margin-top: 20px; margin-left: 20px; margin-right: 20px;margin-bottom:20px;background-image:url(images/back.jpg);}

/* menue oben */

#menu  a:link, #menu2  a:visited, #menu  a:visited  {display: inline;
        font-size: 10px;
        line-height: 14px;
        font-weight: bold;
        padding: 0 11px 6px 11px;
        text-decoration: none;
        color: #990000; float: left;
}

#menu a:hover {color: #000000;
        background: url(images/pfeil.gif) no-repeat bottom center;
}

/* allgemeine links im text */

a:link{ color: black; text-decoration:none; ;font-family: verdana; font-size: 10pt; }

a:visited{color: black;text-decoration:none;font-family: verdana; font-size: 10pt; }

a:active{ color:black;text-decoration:none;font-family: verdana; font-size: 10pt; }

a:hover{ color:black;background-color:#EFEFEF;text-decoration:none;font-family: verdana; font-size: 10pt; }

/* uhr - datum */

input.datum {
font-size:9pt;
background-color:#E7E3C6;
color:#990000;
border:solid 0px;
margin-top:0px;

}

form {margin-bottom:0px;}

/* Tabellenfarbe */
p.bordr
{
border-bottom-color: #990000; border-bottom-style: double; border-bottom-width: 1px;
border-left-color: #efefef; border-left-style: double; border-left-width: 1px;
border-right-color: #efefef; border-right-style: double; border-right-width: 1px;
border-top-color: #990000; border-top-style: double; border-top-width: 1px;
background-color: #e7e3c6;
}
/* Tabellenfarbe Ende */

DIRK

(Und bitte die Anführungszeichen um den Wert des class-Attributes nicht vergessen.)

Und bitte kein TOFU, danke.

Einen schönen Freitag noch.

Gruß, Ashura

[Ashura]

Hallo Dirk.

Hallo Dirk.

Gerne noch etwas präziser: bitte zitiere vernünftig, das macht dein Posting weitaus lesbarer.

Super.Das hat schon geholfen. Nun möchte ich die Klasse in die schon existieren Datei einbauen. Wenn ich am Ende einfüge werden die Einstellungen nicht übernommen :-(

Dein folgendes CSS weist dahin gehend keinen anderen Selektor auf, welcher deine Klasse überschreiben könnte.
Hast du die Seite auch nicht nur aus dem Browsercache neu geladen (Strg+F5)? Kannst du ein Beispiel online stellen?

body

{ color:#0C0C0C;  background-color: #E7E3C6; font-family: verdana,arial; font-size: 10pt;}

  
Gut ist, dass du sowohl Hintergrund- als auch Textfarbe angibst, schlecht dagegen die fehlende <http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=generische Schriftfamilie> und die ungeeignete Schriftgrößenangabe in pt. Die Einheiten <http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische@title=em und %> sind hier normalerweise. weitaus besser geeignet.  
  

> `margin-top: 20px; margin-left: 20px; margin-right: 20px;margin-bottom:20px;`{:.language-css}  
  
Auch solche Angaben kannst du zusammenfassen: margin:20px;  
  
  

> ~~~css

a:link{ color: black; text-decoration:none; ;font-family: verdana; font-size: 10pt; }  

>   
> a:visited{color: black;text-decoration:none;font-family: verdana; font-size: 10pt; }  
>   
> a:active{ color:black;text-decoration:none;font-family: verdana; font-size: 10pt; }  
>   
> a:hover{ color:black;background-color:#EFEFEF;text-decoration:none;font-family: verdana; font-size: 10pt; }

Hier ebenfalls:

a {  
  color:black;  
  [ref:self811;css/eigenschaften/schrift.htm#font@title=font]:1em Verdana, sans-serif;  
  text-decoration:none;  
}  
a:hover {  
  background:#efefef;  
}

Einen schönen Freitag noch.

Gruß, Ashura

[Dirk]

Hallo Ashura,

danke für die Tipps.

unter www.media69/media69/test/kontakt2.html findest Du die Seite um die es (unteranderem) geht) Das Inputfeld 'Name" wurde mit der class bearbeitet...

Hoffe es lässt sich klären warum das nicht so funktionier wie bei den anderen 3 Feldern !! :-)

kannst Du mir nen Tipp geben?

DIRK
P.S.: Die Metas fehlen. Das weiß ich :-)

Hallo Dirk.

Hallo Dirk.

Gerne noch etwas präziser: bitte zitiere vernünftig, das macht dein Posting weitaus lesbarer.

Super.Das hat schon geholfen. Nun möchte ich die Klasse in die schon existieren Datei einbauen. Wenn ich am Ende einfüge werden die Einstellungen nicht übernommen :-(

Dein folgendes CSS weist dahin gehend keinen anderen Selektor auf, welcher deine Klasse überschreiben könnte.
Hast du die Seite auch nicht nur aus dem Browsercache neu geladen (Strg+F5)? Kannst du ein Beispiel online stellen?

body

{ color:#0C0C0C;  background-color: #E7E3C6; font-family: verdana,arial; font-size: 10pt;}

>   
> Gut ist, dass du sowohl Hintergrund- als auch Textfarbe angibst, schlecht dagegen die fehlende <http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=generische Schriftfamilie> und die ungeeignete Schriftgrößenangabe in pt. Die Einheiten <http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische@title=em und %> sind hier normalerweise. weitaus besser geeignet.  
>   
> > `margin-top: 20px; margin-left: 20px; margin-right: 20px;margin-bottom:20px;`{:.language-css}  
>   
> Auch solche Angaben kannst du zusammenfassen: margin:20px;  
>   
>   
> > ~~~css

a:link{ color: black; text-decoration:none; ;font-family: verdana; font-size: 10pt; }  

> >   
> > a:visited{color: black;text-decoration:none;font-family: verdana; font-size: 10pt; }  
> >   
> > a:active{ color:black;text-decoration:none;font-family: verdana; font-size: 10pt; }  
> >   
> > a:hover{ color:black;background-color:#EFEFEF;text-decoration:none;font-family: verdana; font-size: 10pt; }

Hier ebenfalls:

a {

color:black;
  [ref:self811;css/eigenschaften/schrift.htm#font@title=font]:1em Verdana, sans-serif;
  text-decoration:none;
}
a:hover {
  background:#efefef;
}

>   
>   
> Einen schönen Freitag noch.  
>   
> Gruß, Ashura  
> 

[Richard]

Hallo,

Willst oder kannst du nicht verstehen, wie du einigermaßen vernünftig zitierst?

Beste Grüße

[Dirk]

Hallo,

Hallo

Willst oder kannst du nicht verstehen, wie du einigermaßen vernünftig zitierst?

Den Papa kanst Du bei Deinen eigenen Kindern spielen. Hier ist das falsche Forum dafür!

Beste Grüße

Schönes WE

[Richard]

Hallo,

Hallo,
Hallo

Willst oder kannst du nicht verstehen, wie du einigermaßen vernünftig zitierst?
Den Papa kanst Du bei Deinen eigenen Kindern spielen. Hier ist das falsche Forum dafür!

Beste Grüße
Schönes WE

Oh, du hast dazugelernt.

Beste Grüße