Formularfelder CSS

Basi · 12. Juli 2010

Danke für deine Korrektur laura, wusste ich nicht, aber ich nenne meine Sachen grundsätzlich header, header_in, main_navi, main_navi_item, main_navi_sub_item, content, content_centered, wrapper, footer, footer_navi, footer_navi_item, footer_navi_sub_item usw. (und so weiter).

feinshdens · 12. Juli 2010

Unterstrich wäre demnach ._1 und dann wieder korrekt!?

mfG

Basi · 12. Juli 2010

._1 funktioniert bei mir nicht.

feinshdens · 12. Juli 2010

EDIT: Eintrag wurde gelöscht - Kein Kontext
:oops:

lauras · 12. Juli 2010

Zitat

Nein, eben nicht. eine ID oder class sollte mit einem Buchstaben anfangen (ich persönlich finde Kleinschreibung gehört zum guten Stil), sonst kann es zu Problemen kommen.

*räusper*
Warum schreibe ich hier eigentlich was, wenn mir eh niemand zu hört

LG

feinshdens · 13. Juli 2010

Hm, also doch falsch verstanden. :oops:
Kleinbuchstaben, Kleinbuchstaben, Kleinbuchstaben, Kleinbuchstaben, Kleinbuchstaben,....
Ok ich glaub ich habs

Nein im Ernst.

Zitat von "http://www.css4you.de/wscss/css03.html#name2"

Sonderzeichen in Selektoren

Der Name für alle Selektoren darf nur aus Groß- oder Kleinbuchstaben (a-z, A-Z), Ziffern (0-9) und dem Bindestrich (-) bestehen und müssen mit einem Buchstaben anfangen. Der Unterstrich _ sollte nicht unbedingt verwendet werden, da dieser nicht von Anfang an zur CSS-Spezifikation gehörte und somit von einigen älteren Browsern nicht interpretiert wird

Zitat von "lauras"

Wobei es bei mir mit dem Unterstrich keine Probleme gibt.

*listen*

mfG

lauras · 13. Juli 2010

Deshalb habe ich das da hingeschrieben.. Trotzdem keinen Unterstrich am Anfang einer Deklaration

LG

hume · 16. Juli 2010

Zitat

Bitte informiere mich warum mein css nicht valide ist!
Danke^^

Folgender Fehler wird bei deinem CSS Code angezeigt (Screenshot)

Zitat

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

Also muss ich es so machen (wie im dem Beispiel wie ich es dargestellt habe?
Oder doch wieder nicht richtig?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
          <head>
              <title>
                Test
              </title>
              <link href="./test.css" type="text/css" rel="stylesheet" />
          </head>
          <body>
         <p class="test">Hallo</p> 
         <p class="test2">Hallo2</p>
              </body>




      </html>

Alles anzeigen

test.css:

Code

* {
    margin:0;
    padding:0;
    border:0;
    list-style:none;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    }




    #test {
    margin-top: 1em;

    }

    #test2 {
    margin-top:2em;

Alles anzeigen

[/code]

feinshdens · 16. Juli 2010

Hallo Hume!

Zitat von "hume"

Folgender Fehler wird bei deinem CSS Code angezeigt (Screenshot)

der Sreenshot ist warscheinlich das Bild ganz unten!?

Es liegt einzig und allein daran das ich die Zeichenfolge "Überflüssiges" nicht auskommentiert habe!

Sonst ist alles in bester Ordnung^^

mfG

lauras · 16. Juli 2010

Wenn du im HTML schreibst class="test" und im CSS #test kann das ganze übrigens nicht funktionieren... Nur mal so am Rande..

LG

feinshdens · 17. Juli 2010

Das heisst dann doch .test oder id="test"

hume · 17. Juli 2010

Zitat

der Sreenshot ist warscheinlich das Bild ganz unten!?

Es liegt einzig und allein daran das ich die Zeichenfolge "Überflüssiges" nicht auskommentiert habe!

Sonst ist alles in bester Ordnung^^

Jop, hast recht

Zitat

Wenn du im HTML schreibst class="test" und im CSS #test kann das ganze übrigens nicht funktionieren... Nur mal so am Rande..

Sorry verschrieben korrigiere:

test.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
          <head>
              <title>
                Test
              </title>
              <link href="./test.css" type="text/css" rel="stylesheet" />
          </head>
          <body>
         <p class="test">Hallo</p> 
         <p class="test2">Hallo2</p>
              </body>




      </html>

Alles anzeigen

test.css:

Code

* {
    margin:0;
    padding:0;
    border:0;
    list-style:none;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    }




    .test {
    margin-top: 1em;

    }

    .test2 {
    margin-top:2em;

Alles anzeigen

PS: Da dass mit dem ja falsch ist, müsste diese Test Vorgehensweise ja richtig sein oder?

lauras · 17. Juli 2010

Ja. Wobei es sinnvoll bei längeren Texten mit mehreren Absätzen ist, immer den selben Abstand zu wählen. Du könntest z.B. wenn du einen div#content hast, folgendes definieren:

Code

div#content p {
margin-bottom: 1em;
}




div#content p.bruch {
margin-top: 1em;
}

Erklärung: Alle Absätze im div#content kriegen standard-mäßig einen Abstand von 1em nach unten. Wenn du einen Bruch im Inhalt hast, kriegt der erste Absatz einer neuen Einheit ein class="bruch"
und hat dann zusätzlich noch einen Abstand von 1em nach oben, so dass ein effektiver Abstand von 2em entsteht.

LG

hume · 18. Juli 2010

Poste hier mal meine Index.html und die dazugehörige CSS Datei
Möchte nur Wissen ob meine Vorgehensweise richtig ist oder nicht. Komme nochmal zum Umbruch darf ich den Umbruch verwenden, wenn z.B. der Text jetzt noch in der gleichen Zeile steht und möchte aber dass es gleich unter den Text kommt und kein Abstand sein sollte.

Index.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
          <head>
              <title>
                BHKWPartner - das optimale BHKW von Ihrem Installateur!
              </title>
              <link href="./design.css" type="text/css" rel="stylesheet" />
          </head>
          <body>




              <div id="header">
              </div>
              <div id="left">
              <ul id="navigation">
                <li> <a href="index.html">Startseite</a> </li>
                <li> <a href="simulation.html">Simulationsanfrage </a> </li>
                <li> <a href="planung.html">BHKW-Planung </a> </li>
                <li> <a href="abrechnung.html">BHKW-Abrechnung </a> </li>
                <li> <a href="aktuelles.html">Aktuelles </a> </li>
                <li> <a href="info.html">Info </a> </li>
                <li> <a href="agb.html"> AGB </a> </li>
                <li> <a href="impressum"> Impressum </a> </li>
              </ul>




               <div id="linksunten">


     </div>
    </div>
            <div id="inhalt">
             <h4>
              <strong>
               Jetzt 1.000 € Förderung für Mikro-BHKW (bis 31.12.2010 -
               standortabhängig)
              </strong>
             </h4>
             <p>
              <strong>Senden Sie uns Ihre Simulationsanfrage.</strong>
              Schnell und einfach!
              <strong> Wir erstellen</strong>
              f&uuml;r Sie
              <strong> ein herstellerunabh&auml;ngiges BHKW-Gutachten,
               mit Aggregatsempfehlung,</strong>
              ob und
              <strong>wie es sich rechnet</strong>
              - was es kostet,
              <strong> was es bringt!</strong>
             </p>
             <p class="Rot">
              <strong>
               Unkostenbeitrag f&uuml;r herstellerunabh&auml;ngiges Gutachten
               27.--€ zzgl. Ust.
              </strong>
             </p>
             <p>
              <strong>
               Den bis zu 4,5-fachen Vorteil mit dem richtigen BHKW
               nutzen!
              </strong>
             </p>
             <p>
              <a href="aktuelles.html">Lesen sie auch hier&lt;&lt; </a>
             </p>
             <p>Und so einfach geht's</p>

              <p> <strong>1. </strong>Simulationsanfrage stellen.</p>
             <p class="abstand"> <strong>2. </strong>BHKW-Gutachten abwarten. </p>
             <p class="abstand"> <strong>3. </strong>Unverbindliches Angebot erhalten -
              vom Installateur in Ihrer Nähe. </p>

             <p> <strong>
              <a href="simulation.html">Erstellen Sie Ihre Simulationsanfrage hier&lt;&lt;</a>
             </strong> </p>
             <p> <strong>BHKWPartner - in Deutschland einmalig!</strong> <br />
              Der erste neutrale BHKW - Volldienstleister. Von der Auslegung
              bis zur Planung, Inbetriebnahme und Abrechnung.
              Alle marktg&auml;ngige, zuverl&auml;ssige und
              f&ouml;rderf&auml;hige Aggregate von 1 - 500 kW (el)!
             </p>

               <p> <strong>Spezialist f&uuml;r BHKW-Auslegung aller Gr&ouml;ßenordnung.
               F&uuml;r Sie immer Up to Date! <br />
               Blockheizkraftwerk ? - Ja, aber richtig!
              </strong>
             </p>
            </div>




             <div id="fusszeile">
             <p>&copy; Otto Huml W&auml;rme und Strom</p>
             </div>







          </body>




      </html>

Alles anzeigen

CSS Datei:

Code

* {
    margin:0;
    padding:0;
    border:0;
    list-style:none;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    }
/*Kopf-------------------------------------------------------------------------------*/




    div#header {
    background:url(images/header.gif);
    visibility: visible;
    height:110px;
    padding-left: 100px;
    background-repeat:no-repeat;
    }
/*Navigation------------------------------------------------------------------------*/




#left {
        float: left;
        clear: left;
        width: 18%;
        }
ul#navigation a{
    display: block;
    border: 1px outset #FFA500;
    background: #616161;
    padding: 10px;
    color: #FFFFFF;
    font-weight: bold;
    border-style: outset;
    }
    ul#navigation a:hover {
    display: block;
    border: 1px outset #FFA500;
    background: #FFA500;
    color: #FFFFFF;
    border-style: outset;
    }
/*Inhalt-----------------------------------------------------------------------------*/   

       #inhalt {
        color: black;
        font-size: 11pt;
        float: right;
        width: 80%;
        }
        #inhalt a {
        color: blue;
        margin-left: 2em;
        }
        .abstand {
        margin-top:1em;
        }

/*Absätze-----------------------------------------------------------------------------*/        

    p {
        margin-bottom: 1em;
    }
    h4 {
    line-height:1cm;
    font-size:12pt;
    font-style:italic;
    }

/*Sonstiges------------------------------------------------------------------------*/
    .Rot {
    color:red;
    line-height:1cm;
    }
    #linksunten {
    background:#FFA500;
    visibility:visible;
    height:200px;
    width:181px;
    }
    #linksunten2 {
    background:#FFA500;
    visibility:visible;
    height:1400px;
    width:181px;
    }
    #linksunten3 {
    background:#FFA500;
    visibility:visible;
    height:580px;
    width:181px;
    }
    #linksunten4 {
    background:#FFA500;
    visibility:visible;
    height:1130px;
    width:181px;
    }
    #linksunten5 {
    background:#FFA500;
    visibility:visible;
    height:600px;
    width:181px;
    }
    #linksunten6 {
    background:#FFA500;
    visibility:visible;
    height:100px;
    width:181px;
    }
    .Orange {
    color:#FFA500;

/*Fusszeile---------------------------------------------------------------------------*/    
    }
    div#fusszeile {
    background: #FFA500;
    height: 129px;
    text-align: center;
    line-height:3cm;
    clear:both;
    }
/*Formular---------------------------------------------------------------------------*/
    .form {
        background:#FFA500;
        border-style:dashed;
        }

Alles anzeigen

lauras · 18. Juli 2010

Theoretisch darfst du verwenden, aber in ungefähr 99% der Fälle gibt es ne bessere Lösung
Das entscheidet sich nach der Situation dann.

Nebenbei:
Du verwendest inflationär.

Code

<p>Und so einfach geht's</p>




              <p> <strong>1. </strong>Simulationsanfrage stellen.</p>
             <p class="abstand"> <strong>2. </strong>BHKW-Gutachten abwarten. </p>
             <p class="abstand"> <strong>3. </strong>Unverbindliches Angebot erhalten -
              vom Installateur in Ihrer Nähe. </p>

Das hier z.B. ist eine Liste und nicht vier Absätze..
Desweiteren: ist eine logische Hervorhebung. Ich weiß nicht, ob all das, was du hier mit auszeichnest, auch wirklich logisch wichtiger ist als der Rest.

LG

Elroy · 18. Juli 2010

Hallo.

Ich zähle mal ein paar Sachen auf die mir beim drüberschauen aufgefellen sind.

Im HTML hast du ein <h4>. Was ist mit h1, h2, h3. Du benutzt verdammt viele divs die nicht sein müssten.

Im CSS gibst du die font grösse in pt an, ich frage mich was du gegen die MAC User hast?
Du weisst hoffentlich das eine in Windows gut leserliche Schrift mit pt auf einem Mac klein und mickerig aussieht.

Gruss
Elroy

hume · 19. Juli 2010

Zitat

Theoretisch darfst du verwenden, aber in ungefähr 99% der Fälle gibt es ne bessere Lösung
Das entscheidet sich nach der Situation dann.

Das heißt dann es ist besser <ul> </ul> zu verwenden wenn es sich um eine Liste handelt?

Zitat

Desweiteren: ist eine logische Hervorhebung. Ich weiß nicht, ob all das, was du hier mit auszeichnest, auch wirklich logisch wichtiger ist als der Rest.

Wie soll ich dass jetzt verstehen? Also es handelt sich nicht um meinem Text sondern ich muss die Website für meinen Vater machen und der sagte mir er möchte es so haben

feinshdens · 19. Juli 2010

Zitat

Wie soll ich dass jetzt verstehen? Also es handelt sich nicht um meinem Text sondern ich muss die Website für meinen Vater machen und der sagte mir er möchte es so haben

Wenn der Text nicht logisch wichtiger ist, ist es nach meinem Verständnis korrekt ihn mit auszuzeichnen.

fG
Peter

Elroy · 19. Juli 2010

Zitat von "Peter1978"

Wenn der Text nicht logisch wichtiger ist, ist es nach meinem Verständnis korrekt ihn mit auszuzeichnen.

fG
Peter

Hallo.

Also ganz korrekt ist es ihn mit font-weight zu formatieren.

Gruss
Elroy

hume · 19. Juli 2010

Zitat

Wenn der Text nicht logisch wichtiger ist, ist es nach meinem Verständnis korrekt ihn mit auszuzeichnen.

Was verstehst du unter logisch wichtiger? Das gibt mir jetzt irgendwie keinen Sinn.

Formularfelder CSS

Jetzt mitmachen!

Teilen