Warum wird der code nicht übernommen?

retnüg

Hallo, ich will bei einer Website die Formatierung der Schrift per CSS-Script festlegen. Die Schrift soll weiss sein, die Größe 16pt.
Dazu verwende ich folgendes css-script:

HTML

<style type="text/css">
    h5 {
      color:#5858FA;   
      font-size:16pt; 
      font-family:arial, "lucida console", sans-serif; /* Schriftart */
    }



    body {
        background-color: #63B8FF;
    }
    </style>

Alles anzeigen

Der Code der Website (auszugsweise):

HTML

<head>
    <meta charset="utf-8">
    <title>Verkaufsliste</title>

    <style type="text/css">
    h5 {
      color:#5858FA;   
      font-size:16pt; 
      font-family:arial, "lucida console", sans-serif; /* Schriftart */
    }



    body {
        background-color: #63B8FF;
    }
    </style>
    </head>


    <p align=center>Bild 1:
    <div align=center><img src="http://www.Malerei2000.de/Malerei/Acrylmalerei/album/thumbs/Eis.jpg" width="200" height="150" alt=""/>
         <p align=center>"Eis"
    <p align=center>Acryl auf Leinwand<br>60 x 50cm
    </div>
        <p align=center>Bild 2:
    <div align=center><img src="http://www.Malerei2000.de/Malerei/Acrylmalerei/album/thumbs/Brandung.jpg" width="200" height="150" alt=""/>
        <p align=center>"Brandung"
    <p align=center>Acryl auf Leinwand<br>60 x 50cm
    </div>
        <p align=center>Bild 3:
    <div align=center><img src="http://www.Malerei2000.de/Malerei/Acrylmalerei/album/thumbs/Durch den Wald.jpg" width="200" height="150" alt=""/>
        <p align=center>"Durch den Wald"
    <p align=center>Acryl auf Leinwand<br>60 x 50cm
    </div>

Alles anzeigen

Es wird nur die Hintergrundfarbe übernommen, nicht aber die Formatierung der Schrift.
Wie mache ich es richtig?
So sieht die Website aus:

Sailor

Oh je... bitte lerne mal die Grundlagen - diese Frage könntest du dir mit einem Blick selbst beantworten!
Für welches HTML Element legst du die Formatierungen für die Schrift fest... hmmm... schwierig?
... und ... taucht dieses HTML Element irgendwo im deinem Code auf? .. also ich seh da nichts.

Nebenbei.. bei der Erstellung von style-Anweisungen sollte man, da CSS sich kaskadierend verhält, immer die übergeordneten Elemente (Elternelemente) zuerst und erst dann die nachgeordneten Elemente.
also zuerst 'body' ... dann 'h5'
Warum... h5 ist im body drin und die Eigenschaften body werden an h5 vererbt. .. unter anderem auch Schriftfarbe, -Art und Größe!

retnüg

Vielen Dank für die Unterstützung.
nun lautet mein code so:

HTML

<style type="text/css">
        body {
        background-color: #63B8FF;
    }
    p {
      color:#FFFFFF;   
      font-size:16pt; 
      font-family:arial, "lucida console", sans-serif; /* Schriftart */
    }




    </style>

Alles anzeigen

wenn ich aber nun einige Wörter größer oder kleiner formatieren will?

Sailor

Wie meinst du das? ... einige Wörter?
Etwas genauer solltest du schon beschreiben, was du willst.

retnüg

Die Beschreibung der Größe und des Materials sollen kleiner sein als der Bildtitel.

Sailor

HTML und CSS bietet diverse Möglichkeiten, um das zu realisieren.
Du hast zB die Möglichkeit auch Überschriften zu nutzen.. von groß <h1></h1> ... bis klein <h6></h6> ... oder eben auch <p></p> als Standardtextabsatzschrift.
Wobei... <h1></h1> darf/sollte nur einmal pro Seite verwendet werden!.. eben als Hauptseitenüberschrift.
Aber sowas zB wäre für dich nutzbar

<h1>Meine Bilder</h1>
<h3>Bild 1</h3>
<p>Bildbeschreibung</p>
... usw

oder, da du in deinem Entwurf ja schon mit <p>'s arbeitest, könntest du mehrere p.klassen im CSS definieren...
CSS zusätzlich zu dem p, was bei dir schon drin steht, noch folgendes:

p.mittel {
font-size: 14pt;
}
p.klein {
font-size: 12pt;
}

und im HTML dann...

<p>Meine Bilder</p>
<p class="mittel">Bild 1</p>
<p class="klein">Bildbeschreibung</p>
... usw

retnüg

Danke sieht bei mir nun so aus:

HTML

<style type="text/css">
        body {
        background-color: #63B8FF;
    }
    p {
      color:#FFFFFF;   
      font-size:1,5 em; 
      font-family:arial, "lucida console", sans-serif; /* Schriftart */
    }

      color: #000000;

    }


      p.mittel {
font-size: 14pt;
}
p.klein {
font-size: 12pt;
}


    </style>
    </head>


   <p class="mittel"></p><p align=center>Bild 1:</p>
    <div align=center><img src="http://www.Malerei2000.de/Malerei/Acrylmalerei/album/thumbs/Eis.jpg" width="200" height="150" alt=""/>
         <p class="grosser Text"><p align=center>"Eis"
    <p class="klein"><p align=center>Acryl auf Leinwand<br>60 x 50cm</p>
    </div>

Alles anzeigen

Einen Größenunterschied kann ich nicht feststellen oder ist wieder irgendwo der Wurm drin?

Sailor

Mach erst mal dein CSS richtig, dann sehen wir weiter:
bei dir steht...

HTML

p {
      color:#FFFFFF;   
      font-size:1,5 em; 
      font-family:arial, "lucida console", sans-serif; /* Schriftart */
    }

      color: #000000;

    }

Das ist schon mal falsch... erstens muss es heißen 1.5em - Punkt statt Komma und kein Leerzeichen zwischen 1.5 und em!
... zeitens... warum steht das 'color: #000000;' außerhalb der der geschweiften Klammer? Das gehört da mit rein.. also

HTML

p {
      color:#FFFFFF;   
      font-size: 1.5em; 
      font-family:arial, "lucida console", sans-serif; /* Schriftart */
      color: #000000;
    }

Bitte.. lerne die Grundlagen.. da gibt es reichlich Tutorials im Netz!!!!

retnüg

Auch wenn ich Euch auf die Nerven gehe:
hier nun der Quelltext:

HTML

<style type="text/css">
        body {
        background-color: #63B8FF;
    }

     p {

      font-family:arial, "lucida console", sans-serif; /* Schriftart */
      color: #FFFFFF;
    }
     p.mittel {
font-size: 14pt;
}
     p.klein {
font-size: 12pt;
}  

    </style>
    </head>


   <p class="klein"></p><p align=center>Bild 1:</p>
    <div align=center><img src="http://www.Malerei2000.de/Malerei/Acrylmalerei/album/thumbs/Eis.jpg" width="200" height="150" alt=""/>
         <p class="mittel"><p align=center>"Eis"
    <p class="klein"><p align=center>Acryl auf Leinwand<br>60 x 50cm</p>
    </div>

Alles anzeigen

Trotzdem erkenne ich keinen Unterschied in der Größe

Sailor

Hmmm... ich kann mich nur wiederholen! Lerne bitte die Grundlagen!
Was soll das zB?

HTML

<p class="klein"></p><p align=center>Bild 1:</p>

Du hast ein <p class="klein"></p> mit nix drin... ok, das was da nicht drin ist, würde jetzt in der richtigen Größe dargestellt.. na ja... man sieht es nur nicht.
Und dann...

HTML

<p class="mittel"><p align=center>"Eis"

was soll das? Du öffnest auch ein <p class="mittel"> und dann kommt da wieder nix, außer einem 'normal' mit 1.5em neuen <p>
und dann das Gleich nochmal...

HTML

<p class="klein"><p align=center>Acryl auf Leinwand<br>60 x 50cm</p>

.. und da wunderst du dich, dass es nicht funktioniert?

Beachte bitte folgendes (auch wenn es in der neuen Spezifikation nicht mehr vorgeschrieben ist)...
wenn du ein <p>Element öffnest, dann schließt du es wieder, wenn du die Texteingabe eingefügt hast durch </p>!
In einem <p></p> dürfen keine anderen Blockelemente drin sein.

Ganz ehrlich.. du betreibst eine Website und das offensichtlich auch noch kommerziell, da bist du es deinen Kunden schuldig, dass sie eine vernünftige Webseite besuchen können - so wie es jetzt aussieht, vergraulst du sie nur.

aber ich will dir natürlich helfen, deswegen hier jetzt mal dein korrigierter Code...

HTML

<style type="text/css">
body {
  background-color: #63B8FF;
}
p {
 font-family: arial, "lucida console", sans-serif; /* Schriftart */
 color: #FFFFFF;
}
p.mittel {
  font-size: 14pt;
}
p.klein {
  font-size: 12pt;
}
</style>
</head>
<body>     
   <p style="text-align: center;">Bild 1:</p>
   <div style="text-align: center;">
       <img src="http://www.Malerei2000.de/Malerei/Acrylmalerei/album/thumbs/Eis.jpg" width="200" height="150" alt="">
       <p class="mittel">"Eis"</p>
       <p class="klein">Acryl auf Leinwand<br>60 x 50cm</p>
    </div>

Alles anzeigen

retnüg

Sorry wenn ich Dir auf den S.. gehe,
mein code sieht nun so aus:

HTML

<style type="text/css">
        body {
        background-color: #63B8FF;
    }

     p {

      font-family:arial, "lucida console", sans-serif; /* Schriftart */
      color: #FFFFFF;
    }
     p.mittel {
font-size: 14pt;
}
     p.klein {
font-size: 12pt;
}  

    </style>
    </head>


   <p class="klein"></p><p align=center>Bild 1:</p>
    <div align=center><img src="http://www.Malerei2000.de/Malerei/Acrylmalerei/album/thumbs/Eis.jpg" width="200" height="150" alt=""/>
         <p class="mittel"><p align=center>"Eis"
    <p class="klein"><p align=center>Acryl auf Leinwand<br>60 x 50cm</p>

Alles anzeigen

Leider kein Unterschied in der Größe zu erkennen.
Tutorials gibt es sicher viele, aber nirgends habe ich gefunden, wo verschiedene Schriftgrößen in einem Formular vorkommen.

Sailor

also ich finde in 0,4 Sekunden ca 61.000 davon
https://www.google.de/search?newwind…1.0.K7FObp3fCmI

basti1012

*** Link entfernt, weil nicht mehr erreichbar ***

So sieht es doch gut aus

Warum wird der code nicht übernommen?

Tags

Benutzer online in diesem Thema