CSS Class definieren und anwenden auf Formulare

Dieses Thema im Forum "Web Page Design" wurde erstellt von sevY, 23.03.2004.

  1. sevY

    sevY Thread Starter Gast

    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
     
  2. stegoe

    stegoe MacUser Mitglied

    Beiträge:
    24
    Zustimmungen:
    0
    MacUser seit:
    25.01.2004
    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>
     
  3. etienne

    etienne Thread Starter Gast

    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>
     
  4. Darii

    Darii MacUser Mitglied

    Beiträge:
    2.066
    Zustimmungen:
    110
    MacUser seit:
    24.02.2004
    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.
     
  5. etienne

    etienne Thread Starter Gast

    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;
     
  6. sevY

    sevY Thread Starter Gast

     
  7. sevY

    sevY Thread Starter Gast

    &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…
     
  8. etienne

    etienne Thread Starter Gast

    &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 von einem Moderator bearbeitet: 23.03.2004
  9. sevY

    sevY Thread Starter Gast

    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
     
  10. HAL

    HAL Thread Starter Gast

    Try this at home:

    CSS 2 Reference

    ;)
     
    Zuletzt von einem Moderator bearbeitet: 24.10.2015
Die Seite wird geladen...
Ähnliche Themen - CSS Class definieren
  1. hello
    Antworten:
    1
    Aufrufe:
    196
  2. Hoooray
    Antworten:
    2
    Aufrufe:
    266

Diese Seite empfehlen