Formularfelder CSS

  • Hallo, mich würde interessieren wie man Formularfelder am besten in CSS macht (Rahmen,Schriftfarbe) hab jetzt überhaupt keinen Plan mehr, ob dass überhaupt noch aktuell ist und wie ich am besten eigentlich vorgehe und ob überhaupt der Aufbau richtig ist.


    Hier mal mein Code:


    simulation.html


    CSS Datei:


    PS: Alle zwei Dateien sind Valide.

  • Zitat

    Natürlich kannst du Formularfelder mit CSS ändern, sonst würde CSS ja keinen Sinn haben.


    Das ist schon mal gut :)


    Zitat

    Spannend zu wissen wäre was genau du vorhast.


    Wie soll ich dass jetzt verstehen?

  • Zitat von "hume"

    Wie soll ich dass jetzt verstehen?


    Naja.. du sagst jetzt hier, dass wir dir dabei helfen sollen.. aber bisher hast du uns kein Problem genannt^^
    Du kannst mit CSS einem Formular alles geben.. Rahmen, Hintergrundfarbe,... Was immer sehr nützlich ist, ist wenn du einem <input /> eine Breite z.B. gibst ;)
    Aber auch Padding kann schön aussehen :)
    Kannst dir ja mal eines meiner Formulare ansehen :)
    Da habe ich ein wenig damit rum gespielt :D

  • Zitat

    Naja.. du sagst jetzt hier, dass wir dir dabei helfen sollen.. aber bisher hast du uns kein Problem genannt^^


    Ja, da hast du auch wieder recht :D
    Also mein Problem ist dass ich die Optionsfelder gerne eine Hintergrundfarbe Orange machen möchte, aber es funktioniert nicht also es wird mir nicht angezeigt obwohl dass ich ein class="" gemacht habe und dass dann in CSS definiert habe. Natürlich würde mich jetzt Interessieren warum dass nicht funktioniert und wie man am besten vorgeht.


    simulation.html (geändert)


  • Code
    <select name="1" class="1" size="5">


    Hier :)


    Code
    <option class="orange">


    Funktioniert aber leider nicht, wird dann als Text dargestellt wenn ich <span </span> dazu nehme bekomme ich wieder eine Invalid Meldung.


    simulation.html


  • Hallo!



    Erst mal ein paar Fragen!


    Warum <br /> stattdessen margin-top


    Warum <p> macht an dieser Stelle keinen Unterschied


    Warum name"1" und Class "1"


    css validator hat .1 { background-color:red; } rausgeschmissen


    keine Background-color falls das header-background-image nicht angezeigt wird


    aus Interesse: für was wird die visibility im header auf visible gestellt?


    <form action xxx.html> ich glaube das html ist nicht dafür geeignet?


    Beim link - impressum fehlt die Dateiendung


    Klasse .orange ist nicht im html dokument


    warum bei #links % und bei linksunten px nimm 100% da #linksunten im div #links ist und es ist perfekt bündig


    so jetzt zu formatierung von form:^^


    erst hab ich die klasse von .1 zu .form geändert
    und wie du siehst ist dein Formular in ein +§$@liges rot getaucht
    und mit margin kannst du dann den aussenabstand verändern - wie gehabt


    ich denk deine Frage bezieht sich darauf das der Identifikator 1 also diese Zahl bad ist und dein CSS nicht valide war


    warum du den link von W3C CSS der dein CSS als valide auszeichnet eingebetet hast musst du mit deinem Gewissen ausmachen


    viel Spass noch beim tüfteln


    mfg


    ^^


    Test mal meinen code - if you like^^



    HTML



    CSS


  • Zitat

    Warum <br /> stattdessen margin-top


    Der Befehl margin-top = absoluter Abstand zum Seitenrand, ich brauche aber nicht den Seitenrand sondern den Abstand zwischen Text und Text also Umbruch <br />


    Zitat

    Warum <p> macht an dieser Stelle keinen Unterschied


    Dachte ich am Anfang auch aber ich hab festgestellt beim Formular also der simulation.html dass wenn ich nur ein <p> verwende dann wird mir der Text <p>*Geb&auml;ude-Typ:</p> unten angezeigt statt oben.


    Zitat

    Warum name"1" und Class "1"


    Meines Wissens darf man einen beliebigen Namen geben daher name"1" und class"1"


    Zitat

    aus Interesse: für was wird die visibility im header auf visible gestellt?


    Weil es sich um eine Grafik in Header handelt und nicht um einen Text. Werde mir dass nochmal anschauen kann sein dass ich hier einen Fehler rein gebaut habe.


    Zitat

    <form action xxx.html> ich glaube das html ist nicht dafür geeignet?


    Bei <!-- m --><a class="postlink" href="http://de.selfhtml.org/html/formulare/eingabe.htm">http://de.selfhtml.org/html/formulare/eingabe.htm</a><!-- m --> wird dass aber anders beschrieben.


    Zitat

    Klasse .orange ist nicht im html dokument


    Das befindet sich in einem anderen, werde mal alle Posten dass keine Unstimmigkeiten entstehen.


    Index.html


    simulation.html


    planung.html


    abrechnung.html


    aktuelles.html


    info.html


    agb.html


    impressum.html


    Css Datei


    PS: Hab deine CSS Datei nicht verwendet da sie Invalide ist, hab aber meine CSS Datei einigermaßen angepasst.
    Die unteren "linksunten" sind für jede Seite angepasst da wenn ich nur ein DIV verwende die Abstände zur Fusszeile zu groß sind. Hab mal ein Screenshot gemacht von der Website, wie sie aussehen soll und wie sie bleiben soll. Die Website ist unter <!-- m --><a class="postlink" href="http://www.bhkwpartner.de/test">http://www.bhkwpartner.de/test</a><!-- m --> erreichbar.

  • Zitat von &quot;hume&quot;

    Der Befehl margin-top = absoluter Abstand zum Seitenrand, ich brauche aber nicht den Seitenrand sondern den Abstand zwischen Text und Text also Umbruch <br />


    Es geht nicht um den Abstand zum Rand, sondern um den Abstand zu jedem Element, also auch von p - p.

  • 1.

    Zitat von &quot;hume&quot;

    Der Befehl margin-top = absoluter Abstand zum Seitenrand, ich brauche aber nicht den Seitenrand sondern den Abstand zwischen Text und Text also Umbruch <br />


    Nicht zum Seitenrand, zu den Elementen daneben, also in deinem Fall auch zum Text darüber.


    Edit: Den Beitrag von Basii hab ich übersehen er hats ja auch schon gesagt.
    Edit ENDE


    Zitat von &quot;hume&quot;


    Weil es sich um eine Grafik in Header handelt und nicht um einen Text. Werde mir dass nochmal anschauen kann sein dass ich hier einen Fehler rein gebaut habe.


    Die visibility ist bei allen Elementen Standardmäßig auf visible, also braucht man es nicht angeben.


    Zitat von &quot;hume&quot;


    Bei <!-- m --><a class="postlink" href="http://de.selfhtml.org/html/formulare/eingabe.htm">http://de.selfhtml.org/html/formulare/eingabe.htm</a><!-- m --> wird dass aber anders beschrieben.


    Wenn du das Formular aber irgendwie mit PHP benutzen willst (E-Mail verschicken, ...), brauchst du eine *.php Datei


    Wieso hast du für linksunten die Breite in Pixel angegeben und für die Navigation in Prozent? Nimm doch bei beiden das gleiche.



    PS: Werd mich für 2 Wochen nicht mehr melden, fahre heute Abend in Urlaub.

  • Zitat

    Es geht nicht um den Abstand zum Rand, sondern um den Abstand zu jedem Element, also auch von p - p.


    OK,Klartext heißt dass also ich muss alle Umbrüche von den HTML Seiten entfernen und stattdessen mit margin-top ersetzen richtig? Oder falsch?


    Zitat

    Die visibility ist bei allen Elementen Standardmäßig auf visible, also braucht man es nicht angeben.


    Ja, du hast recht hab dass noch von Anfang an drin gehabt und vergessen es zu entfernen... Sorry...


    Zitat

    PS: Werd mich für 2 Wochen nicht mehr melden, fahre heute Abend in Urlaub.


    Na dann viel Spaß :)

  • Zitat von &quot;hume&quot;

    OK,Klartext heißt dass also ich muss alle Umbrüche von den HTML Seiten entfernen und stattdessen mit margin-top ersetzen richtig? Oder falsch?


    Genau so musst du arbeiten, <br /> ist dafür, wenn du in einem Text mal einen Zeilenumbruch brauchst und keinen neuen <p> anfangen möchtest.


    Uiiii, 2 Wochen Urlaub, Luxus, na dann viel Vergnügen.

  • Hallo!


    hume


    Bitte informiere mich warum mein css nicht valide ist!
    Danke^^[attachment=1]<!-- ia1 -->Bild 1.png<!-- ia1 -->[/attachment]Mein CSS!



    und hast du das überprüft?

    Zitat

    css validator hat .1 { background-color:red; } rausgeschmissen

    [attachment=0]<!-- ia0 -->Bild 2.png<!-- ia0 -->[/attachment]Dein CSS


    Sören


    Geniese deinen Urlaub^^


    mfg
    ^^

  • Zitat

    PS: Werd mich für 2 Wochen nicht mehr melden, fahre heute Abend in Urlaub.


    Da komme ich gerade her - auch wenn mir die eine Woche wie zwei vorkamen ;)


    Zum Problem: Eine HTML Datei reicht - gehen wir davon aus, dass du in allen das gleiche stehen hast..
    Zu den class-Namen: Es ist immer sinnvoll, die class so zu bezeichnen, dass du wenn du nur die CSS-Datei aufhast, den Sinn erkennst, z.B. .ddmenu oder so in der Art.. hilft mir :)
    Außerdem ist es immer am besten (bei mir zumindest), wenn man nur kleine Buchstaben verwendet, zumindest als ersten buchstaben.
    Wenn du alles korrekt bezeichnet hast, müsste es funktionieren.


    LG

  • Mich machte einfach die Fehlermeldung vom CSS-Validator stutzig.



    Oder verstehe ich das mit dem Einlesefehler einfach falsch und es bedeutet estwas anderes?


    mfG


    ^^

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!