CSS Class definieren und anwenden auf Formulare

S

sevY

Hi zusammen,

eine äußerst rudimentäre Frage… aber ich bin halt Flashworker und bastel selten mal in HTML/CSS.


Also:

Ein Formular:

PHP: 
        <table cellspacing=\"0\" cellpadding=\"0\">
            <tr>
                <td>           
                    <form action=".$_SERVER['PHP_SELF']." method=\"post\" class=\"impressum\">
                        <input type=\"hidden\" name=\"action\" value=\"".$a['id']."\">
                        <input type=\"text\" name=\"element\" value=\"".$a['element']."\"><p>
                        <input type=\"submit\" value=\"Change\">
                    </form>
                </td>
            </tr>
        </table>


Das CSS dazu…

PHP: 
select,input
    {
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    color:#252525;
    font-weight:normal;
    text-decoration:none;
    background:#ffffff;
    }
input
    {
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    color:#252525;
    font-weight:normal;
    text-decoration:none;
    background:#ffffff;
    width:100px;
    }
textarea
    {
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    color:#252525;
    font-weight:normal;
    text-decoration:none;
    background:#ffffff;
    width:400px;
    height:400px;
    }
.impressum
    {
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    color:#252525;
    font-weight:normal;
    text-decoration:none;
    background:#ffffff;
    width:400px;
    }

Ich habe standardmäßig die Inputfields in Formularen auf 100 Pixel Breite festgelegt, da nirgends mehr Breite benötigt wird, außer beim Impressum. Und da wollte ich dan eine Class definieren, die die Inputfelder auf 400px ausbreitet. So wie ich jetzt die Class definiert und eingebunden haben, wird das ganze Form oder die Tabellenzelle 400px Breit, die Inputfields jedoch 100px.

Wie geht es richtig? :D


Yves
 
Jedem Element, dass diese abweichende Formatierung haben soll die Klasse zuweisen ist da eine Möglichkeit:
PHP: 
<table cellspacing=\"0\" cellpadding=\"0\">
        <tr>
            <td>           
                <form action=".$_SERVER['PHP_SELF']." method=\"post\">
                    <input type=\"hidden\" name=\"action\" value=\"".$a['id']."\">
                    <input type=\"text\" name=\"element\" value=\"".$a['element']."\" class=\"impressum\"><p>
                    <input type=\"submit\" value=\"Change\">
                </form>
            </td>
        </tr>
    </table>
 
In deinem Beispiel hast du dem gesamten Formular die class "impressum" zugewiesen. Wenn aber nur ein einziges Eingabefeld diese class haben soll und nicht das gesamte Formular, dann muss die class Definition auch an anderer Stelle stehen.

also nicht

<form class="impressum">
<input>
<input>
</form>

sondern

<form>
<input>
<input class="impressum">
</form>
 
oder machs so, dann brauchst du dein HTML nicht umändern:

PHP: 
.impressum input
    {
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    color:#252525;
    font-weight:normal;
    text-decoration:none;
    background:#ffffff;
    width:400px;
    }

Obwohl, das würde wohl auch den Abschick-Button treffen, da könnte man zwar was mit CSS2-Selektoren gegen machen, bloß die kann der IE nicht.
 
Noch was anderes:

Du kannst den gesamten Code sehr viel schlanker machen, wenn du alle sich wiederholenden CSS Definitionen auslagerst (font-family, font-size, color...).

Bei den Schriftarten ist es üblich, die Schriftfamilie am Ende noch anzugeben. Für deinen Fall: font-family:Verdana,Arial,Helvetica,sans-serif;
 
Original geschrieben von etienne
Du kannst den gesamten Code sehr viel schlanker machen, wenn du alle sich wiederholenden CSS Definitionen auslagerst (font-family, font-size, color...).

Auslagern?
Zum Vergrößern anklicken....
 
Original geschrieben von Darii
oder machs so, dann brauchst du dein HTML nicht umändern:

PHP: 
.impressum input
Zum Vergrößern anklicken....
&nbsp;

Ich hab mir deinen Vorschlag ausgewählt. Finde ich am besten :). Das es den Button trifft ist vollkommen ok, es geht um ein Adminsystem und ich finde die Buttons entsprechend der Größe des Inputfields vollkommen ok. Macht das ganze sogar etwas übersichtlicher finde ich.

Was sind Css2 Selektoren?

Yves, der nur PHP, MySQL, Actionscript & Lingo gut kann…
 
Original geschrieben von Yves
Auslagern?
Zum Vergrößern anklicken....
&nbsp;

Das Grundgerüst einer HTML-Datei sieht u.a. mindestens so aus:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>

In die style.css kannst du nun Folgendes schreiben :

body{
font-family:Verdana,Arial,Helvetica;
font-size:9px;
color:#252525;
font-weight:normal;
text-decoration:none;
background:#ffffff;
}

Damit ist die Schriftdefinition global für jede HTML-Seite definiert. Das alles dann noch in jede class reinzuschreiben oder für jedes HTML-Element neu zu definieren ist überflüssig. Neu definiert werden muss es nur dann, wenn sich Änderungen ergeben sollen.

Die einmalige Definition für den body sorgt dafür, dass allen Unterelementen (und das ist alles, was innerhalb von body steht) diese Eigenschaften vererbt werden. Vererbung ist eines der Grundprinzipien von CSS.
 
Zuletzt bearbeitet von einem Moderator:
Achsoooo, ja das mache ich ja auch so.

So sieht meine CSS aus:

PHP: 
body 
    {
    color:#000000;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    margin-top:5pt;
    margin-left:5pt;
    margin-right:5pt;
    background:#ffffff;
    }
A:link 
    { 
    color:#333333;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    }
A:visited
    { 
    color:#666666;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    }
A:active 
    { 
    color:#555555;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    }
A:hover 
    { 
    color:#B7B7B7;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    }
img
    {
    border:0px;
    }
table
    {
    border:0px;
    }
td
    {
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    color:#252525;
    font-weight:normal;
    text-decoration:none;
    border:0px;
    width:140px;
    height:140px;
    }
select
    {
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    color:#252525;
    font-weight:normal;
    text-decoration:none;
    background:#ffffff;
    }
input
    {
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    color:#252525;
    font-weight:normal;
    text-decoration:none;
    background:#ffffff;
    width:200px;
    }
textarea
    {
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    color:#252525;
    font-weight:normal;
    text-decoration:none;
    background:#ffffff;
    width:400px;
    height:400px;
    }
.colour input
    {
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    color:#252525;
    font-weight:normal;
    text-decoration:none;
    background:#ffffff;
    width:100px;
    }

Da wir gerade beim Thema sind… wie werden die horizontal und vertical aligns in CSS korrekt definiert… irgendwie geht das ja nicht so einfach… und wie Cellpadding und Cellspacing? In SelfHTML hab ich nichts wirklich funktionierendes gefunden… padding:0px; spacing:0px; ? Und mit den Aligns fand ich nur zb. text-align:center;

Gibt es kein (v)align in CSS?

By the way… Ich suche ein vollständige CSS Referenz… anybody a link?

Yves
 
Die Schrift ist ja trotzdem immer wieder neu eingestellt. Bis auf die Veränderung bei color kannst du z.B. bei den Link-Klassen (a) alles komplett löschen (font-family;font-size;font-weight;text-decoration), weil es schon für den body definiert ist.

Horizontale Ausrichtung über CSS funktioniert mit text-align (center, left, right, justify).
Vertikale Ausrichtung geht mit CSS über vertical-align (top, middle, bottom...).

Vertikale Ausrichtung per HTML in Tabellenzellen geht z.B. auch über valign (top, middle, bottom).

Die Ausrichtung kannst du auch über das Boxmodel von CSS steuern. Dafür gibt es margin, border und padding (Außenrand, Rahmen und Innenabstand). Mit margin-left und margin-right auf auto wird z.B. der Text horizontal zentriert.

Cellpadding und cellspacing benutze ich gar nicht, deshalb weiß ich auch nicht, wie sich das genau auswirkt. Jedenfalls kannst du diese Abstandssachen auch bei Tabellen über die eben genannten margin, border und padding per CSS steuern.

Eine gute Seite mit Informationen zu CSS ist auch
http://www.jendryschik.de/wsdev/einfuehrung/css/index.html
 
Original geschrieben von etienne
Bis auf die Veränderung bei color kannst du z.B. bei den Link-Klassen (a) alles komplett löschen (font-family;font-size;font-weight;text-decoration), weil es schon für den body definiert ist.
Zum Vergrößern anklicken....
&nbsp;

Habe ich probiert… geht nicht. Einiges kann man auslagern, einiges nicht. Sobald ich dann aber eine Klasse nutze ist die Formatierung für dort enthaltene „links“ weg.

Mal nebenbei… kann man classes auch wieder neutralisieren? Also irgendein Terminierungsattribut? Hab dazu auch den Seiten noch nichts gefunden. Danke übrigens für die tollen Seiten, ich lese die durch und drucke mir die dann als PDF :D

Hier meine aktuelle CSS, bitte kritisieren :)

PHP: 
body 
    {
    background:#ffffff;
    border:0px;
    color:#000000;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    margin-top:5px;
    margin-bottom:0px;
    margin-left:5px;
    margin-right:0px;
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    }
a:link 
    { 
    color:#333333;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    }
a:visited
    { 
    color:#666666;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    }
a:active 
    { 
    color:#555555;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    }
a:hover 
    { 
    color:#B7B7B7;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    }
table
    {
    border:0px;
    border-collapse:collapse;
    border-spacing:0px;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    }
td
    {
    border:0px;
    color:#252525; 
    font-size:9px;
    font-weight:normal;
    text-decoration:none;   
    height:120px;
    width:100%;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    }
select
    {
    color:#252525;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    }
input
    {
    color:#252525;
    width:200px;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    }
textarea
    {
    color:#252525;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    height:200px;
    width:200px;
    }
.colour input
    {
    color:#252525;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;    
    width:100px;
    }
.colour table
    {
    border-collapse:separate;
    border-spacing:2px;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    }
.colour td
    {
    border:0px;
    color:#252525; 
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;   
    height:140px;
    width:140px;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    text-align:center;
    vertical-align:middle;
    }
.textarea-format textarea
    {
    color:#252525;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    height:200px;
    width:200px;
    }
.textarea-format input
    {
    color:#252525;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;    
    width:200px;
    }
.textarea-format table
    {
    border-collapse:separate;
    border-spacing:2px;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    }
.textarea-format td
    {
    border:0px;
    color:#252525; 
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;   
    height:300px;
    width:100%;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    }

Liebe Grüße

Yves
 
Das Auslagern müsste eigentlich funktionieren. Es könnte natürlich sein, dass dein Browser damit Probleme hat. Du könntest das mehrfach gleich Definierte auch so zusammenfassen:

PHP: 
body,select,input,textarea {font-family:Verdana;font-size:9px;}

Also alle HTML Elemente, die auf die gleiche Art gestylt werden sollen, per Komma vor der eigentlichen CSS Definition aufzählen

Classes direkt mit einem Befehl neutralisieren kann man meines Wissens nach nicht. Man weist von Anfang an eine class nur dem Element zu, für das man sie braucht. Ansonsten werden CSS Formatierungen dadurch "neutralisiert", dass sie einfach an der gewünschten Stelle neu definiert werden (z.B. Schrift bei body auf schwarz, bei einem Absatz davon aber rot, davon wieder ein Wort blau und davon einen Buchstaben grün).

Ein paar von den CSS Sachen kannst du komplett weglassen. Die sind nämlich standardmäßig so definiert und müssen nicht noch extra aufgezählt werden (border:0px; text-size:medium;font-weight:normal;text-decoration:none). Die müssen nur dann genannt werden, wenn sie vorher ausdrücklich anders waren (also z.B. vorher eine text-decoration:underline). Bei selfhtml steht in der Regel dabei, welche Sachen Standard sind und nicht extra genannt werden müssen.

Die margins, paddings und borders kannst du auch zusammenfassen.
(Beispiel: margin:0 1px 2em 3px). die erste Zahl ist margin-top, die zweite margin-right, die dritte margin-bottom und die vierte margin-left (Uhrzeigersinn). Für 0 braucht es keine Angabe der Einheit (px, em...).

Farben kannst du auch abkürzen, wenn du die "Standardfarben" verwendest. #0033CC wird #03C. Je zwei Ziffern stehen für eine Farbe: also #xxyyzz. Wenn xx, yy und zz jeweils übereinstimmen kannst du wie bei dem Beispiel oben zusammenfassen.



Ich drucke mir Seiten auch als PDF - lässt sich dann sehr gut lesen und man muss nicht alles neuladen, wenn sich das Programm mal verabschiedet...
 
Danke für deine vielen Tipps.

Browser war Safari 1.2 .

Ich notiere immer gerne alle Dinge aus, auch wenn sie standard sind. Ist halt ne gute Übung die Tags zu notieren, schadet nicht und wenn man diese dann mal braucht, hat man sie direkt schon in der CSS und kann dort nur die Values ändern.


Liebe Grüße

Yves

(CSS Positioning ist sehr interessant!)
 
Ich notiere immer gerne alle Dinge aus, auch wenn sie standard sind. Ist halt ne gute Übung die Tags zu notieren, schadet nicht und wenn man diese dann mal braucht, hat man sie direkt schon in der CSS und kann dort nur die Values ändern.
Zum Vergrößern anklicken....

Stimmt natürlich, es wirkt übersichtlicher und vollständiger. Dafür hat man dann aber auch mehr Traffic und eine weniger schnell ladende Seite...


(CSS Positioning ist sehr interessant!)
Zum Vergrößern anklicken....
&nbsp;

Auf jeden Fall! Schöner wäre es aber, wenn das auch bei allen Browsern gleich gut funktionieren würde...
 
Da ich nach Perfektion strebe, höre ich auf deinen Rat.

Neue CSS, die auch funktioniert.

Kritik erwünscht!

PHP: 
body,table,td,input,select,textarea,a,.colour,.textarea-format
    {
    margin:5px 0 0 5px;
    padding:0 0 0 0;
    color:#252525;
    font-family:Verdana,Arial,Helvetica;
    font-size:9px;
    font-weight:normal;
    text-decoration:none;
    }
table
    {
    border-collapse:collapse;
    border-spacing:0px;
    }
td
    {
    height:120px;
    width:100%;
    }
input, select
    {
    width:200px;
    }
textarea
    {
    height:200px;
    width:200px;
    }
a:link 
    { 
    color:#333333;
    }
a:visited
    { 
    color:#666666;
    }
a:active 
    { 
    color:#555555;
    }
a:hover 
    { 
    color:#B7B7B7;
    }
.colour table
    {
    border-collapse:separate;
    border-spacing:2px;
    }
.colour td
    { 
    height:140px;
    width:140px;
    text-align:center;
    vertical-align:middle;    
    }
.colour input
    {
    width:100px;  
    }
.textarea-format table
    {
    border-collapse:separate;
    border-spacing:2px;
    }
.textarea-format td
    {  
    height:300px;
    width:100%;
    text-align:left;
    vertical-align:middle; 
    }
.textarea-format input,select
    {
    width:200px;   
    }
.textarea-format textarea
    {
    height:200px;
    width:200px;
    }


Liebe Grüße

Yves
 
Zuletzt bearbeitet von einem Moderator:
Rein theoretisch müsste das mit dem Auslagern funktionieren. Praktisch solltest du aber (auch sonst immer) lieber mit verschiedenen Browsern testen, ob es auch so wie gewollt aussieht. Bei so vielen zusammengefassten Definitionen kann schonmal was durcheinander kommen (leider).

padding:0 0 0 0; kann auch durch padding:0; ersetzt bzw. ganz weggelassen werden.

Ansonsten kannst du den Code auch mal durch den CSS Validator schicken:

http://jigsaw.w3.org/css-validator/

Der wird dir z.B. sagen, dass du zu jeder color auch eine background-color definieren sollst (wobei ich nicht weiß, ob das wirklich nötig ist, da ja eine einmalige background-color eigentlich auf alle Unterelemente vererbt werden sollte).
 
Ok, Padding entfernt. Das mit dem Auslagern klappt leider mit Safari nicht… dont ask me why. Das CSS ist valide und sieht mit anderen Browsern auch toll aus :)

Zum Thema Browser… als Flashworker ist man ja gewohnt, das ALLES gleich aussieht, egal welcher Browser. Übrigens ein Killerargument gegenüber Kunden ;)
Aber mal zum Kern… welche Browser sollte man zum testen und Mac OS nehmen? Und wie sieht es dann mit den Windows Browsertests aus? No D0s3 here… ;)


Danke und liebe Grüße, find ich klasse das ihr mich so unterstützt :)

Yves
 
Leider ist es ein richtiges Problem, dass sich die wenigsten Webdesigner mit den HTML und CSS Regeln beschäftigen und lieber irgendwelchen Code mit Frontpage und ähnlichen Programmen zusammenklicken.
Nicht mal die Browserhersteller halten sich an die Regeln und zusätzlich versuchen sie noch, die Fehler der Webdesigner auszubügeln.
Dadurch kommen die wildesten Ergebnisse zustande, selbst wenn man validen Code schreibt.

Zu testen ist deshalb mit allen Browsern, die in Verwendung sind - also vor allem der Internet Explorer. :(
 
Original geschrieben von etienne
…Code mit Frontpage und ähnlichen Programmen zusammenklicken.

Zu testen ist deshalb mit allen Browsern, die in Verwendung sind - also vor allem der Internet Explorer. :(
Zum Vergrößern anklicken....
&nbsp;

Arghs… ich kann mit Wysiwyg Editoren nicht arbeiten… die schreiben so ein blödes Zeugs zusammen :(

Und welchen Browsern ist der Vorzug zu geben?

… ich weiss schon warum ich Flashworker bin :D

Yves
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten