Zur Navigation

Wie kann ich diese Schrift verkleinern?

1 Günter Leipfinger

Auf meiner Website
malerei2000.demöchte ich die Schrift des Textes
Letzte Aktualisierung am...
verkleinern.
welchen code muß ich wo eingeben. Ich habe ein Stylesheet ausgelagert.
der code lautet:


   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

 
   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /*Basisangaben*/
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 1px;
      }
      html {
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Felix titling', serif;
         font-size: 2.3rem;
		 color: #2233dd;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /*darkblue*/
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0,1rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Listen dl*/
   @media all {
      dl {
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      dt,
      dd {
      }
      dt {
         font-weight: bold;
         margin: 0rem 0rem 0rem 0rem;
      }
      dd {
         margin: 0rem 0rem 1rem 0rem;
      }
      dd p {
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*body*/
   @media all {
      body {
      }
   }
   @media only screen and (min-width: 1000px) {
      body {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
   }

   /*.pageheader*/
   @media all {
      .pageheader {
         background-color: #97FFFF;
         border: 1px solid black;
      }
      .pageheader h1 {
         text-align: center;
	   }
   }
   @media only screen and (min-width: 1000px) {
      .pageheader {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 0rem - 2px - 0rem);
      }
   }

   /*.navigation*/
   @media all {
      .navigation ,.sidebar span.Stil1{
         background-color: #63B8FF;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
 .navigation p ,.sidebar span.Stil1{
         text-align: center;
      }
      .navigation a ,.sidebar span.Stil1 {
         color: #B22222;
         font-weight: bold;  
      }
   }
     a:hover{
    
}
   @media only screen and (min-width: 1000px) {
     .navigation a,.sidebar span.Stil1,
      .navigation a:visited {
         display: block;
         color: 	#483d8b;
         font-weight: bold;
         padding: 0.3rem;
         border: 1px solid black;
         border-radius: 0.3rem;
      }
     .sidebar span.Stil1:hover{
        background-color: black;
         color: gold;
       
     }
      .navigation a:hover,
      .navigation a:active,
      .navigation a:focus {
         background-color: black;
         color: gold;
	   }

   /*.content*/
   @media all {
      .content {
         background-color: #63B8FF;
         border: 2px solid black;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .content h2 {
         color: #FFFF33;
         text-align: center;
      }
      .content figure {
         max-width: 600px;
         margin: 0rem auto;
      }
   }
   @media only screen and (min-width: 1000px) {
      .content {
         margin: 0.5rem 1rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 250px - 250px - 1rem - 2px - 2rem);
      }
   }

   /*.sidebar*/
   @media all {
      .sidebar {
         background-color: #63B8FF;
		 color:	#483d8b;
		  font-weight: bold;
         padding: 0.5rem;
         border: 2px solid #63B8FF;
         margin: 0.5rem 0rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      .sidebar {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(250px - 1rem - 4px - 0rem);
      }
   }

   /*.aktuellstesbild*/
   @media all {
      .aktuellstesbild {
         border: 2px solid black;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .aktuellstesbild h2 {
         text-align: center;
		 font-weight: bold;
      }
      .aktuellstesbild figure {
         max-width: 600px;
         margin: 0rem auto;
      }
   }
   @media only screen and (min-width: 1000px) {
      .aktuellstesbild {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 500px - 2rem - 1rem - 4px - 0rem);
      }
   }

   /*.pagefooter*/
   @media all {
      .pagefooter {
         padding: 0.5rem;
         border: 2px solid black;
         margin: 0.5rem 0rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      .pagefooter {
         background-color: #97FFFF;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 1rem - 4px - 0rem);
      }
   }

   /*Vorlagen zum Kopieren*/
   /*CSS*/
   @media all {
   }
   @media only screen and (min-width: 0px) {
   }
   @media only screen and (max-width: 0px) {
   }

   .Stil1 {color: #0000FF}
 

   .Stil1 {color: #0000FF}
   

16.05.2018 21:50

2 Jörg

Als erstes würde ich den Text in ein <p> mit eigener ID einbetten, z.B.:

<p id="last-update">Letzte Aktualisierung am<br><br>
16.05.2016</p>

Über die ID kann der Abschnitt dann im CSS einfach angesprochen werden, z.B.:

p#last-update {
font-size: 0.8em;
}

Zur Schriftformatierung mit font-size siehe auch SELFHTML:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/font-size

16.05.2018 22:53

3 Günter Leipfinger

Danke Jörg für Deine Bemühungen. Leider wirkt sich die Formatierung nicht auf die Schrift aus. Ich habe
p#last-update {
font-size: 0.8em;
}
in das Stylesheet so eingetragen
 }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
	     
	  p#last-update {
     font-size: 0.8em;
      }

17.05.2018 06:49

4 Jörg

In welches Stylesheet hast du das eingetragen? in der style2000.css ist der Abschnitt nicht enthalten und andere CSS-Dateien sind in der Seite, die du oben angegeben hast, nicht eingebunden.

17.05.2018 13:39 | geändert: 17.05.2018 13:40

5 Günter Leipfinger

doch doch ist im Style2000css enthalten.


   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

 
   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /*Basisangaben*/
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 1px;
      }
      html {
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Felix titling', serif;
         font-size: 2.3rem;
		 color: #2233dd;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
		}
      h7 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.3rem;
         margin: 0.5rem 0rem 0.5rem 0rem;  
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
	     
	   p#{last-update 
       font-size: 0.8em;
      }
      a {
         /*darkblue*/
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0,1rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Listen dl*/
   @media all {
      dl {
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      dt,
      dd {
      }
      dt {
         font-weight: bold;
         margin: 0rem 0rem 0rem 0rem;
      }
      dd {
         margin: 0rem 0rem 1rem 0rem;
      }
      dd p {
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*body*/
   @media all {
      body {
      }
   }
   @media only screen and (min-width: 1000px) {
      body {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
   }

   /*.pageheader*/
   @media all {
      .pageheader {
         background-color: #97FFFF;
         border: 1px solid black;
      }
      .pageheader h1 {
         text-align: center;
	   }
   }
   @media only screen and (min-width: 1000px) {
      .pageheader {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 0rem - 2px - 0rem);
      }
   }

   /*.navigation*/
   @media all {
      .navigation ,.sidebar span.Stil1{
         background-color: #63B8FF;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
 .navigation p ,.sidebar span.Stil1{
         text-align: center;
      }
      .navigation a ,.sidebar span.Stil1 {
         color: #B22222;
         font-weight: bold;  
      }
   }
     a:hover{
    
}
   @media only screen and (min-width: 1000px) {
     .navigation a,.sidebar span.Stil1,
      .navigation a:visited {
         display: block;
         color: 	#483d8b;
         font-weight: bold;
         padding: 0.3rem;
         border: 1px solid black;
         border-radius: 0.3rem;
      }
     .sidebar span.Stil1:hover{
        background-color: black;
         color: gold;
       
     }
      .navigation a:hover,
      .navigation a:active,
      .navigation a:focus {
         background-color: black;
         color: gold;
	   }

   /*.content*/
   @media all {
      .content {
         background-color: #63B8FF;
         border: 2px solid black;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .content h2 {
         color: #FFFF33;
         text-align: center;
      }
      .content figure {
         max-width: 600px;
         margin: 0rem auto;
      }
   }
   @media only screen and (min-width: 1000px) {
      .content {
         margin: 0.5rem 1rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 250px - 250px - 1rem - 2px - 2rem);
      }
   }

   /*.sidebar*/
   @media all {
      .sidebar {
         background-color: #63B8FF;
		 color:	#483d8b;
		  font-weight: bold;
         padding: 0.5rem;
         border: 2px solid #63B8FF;
         margin: 0.5rem 0rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      .sidebar {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(250px - 1rem - 4px - 0rem);
      }
   }

   /*.aktuellstesbild*/
   @media all {
      .aktuellstesbild {
         border: 2px solid black;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .aktuellstesbild h2 {
         text-align: center;
		 font-weight: bold;
      }
      .aktuellstesbild figure {
         max-width: 600px;
         margin: 0rem auto;
      }
   }
   @media only screen and (min-width: 1000px) {
      .aktuellstesbild {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 500px - 2rem - 1rem - 4px - 0rem);
      }
   }

   /*.pagefooter*/
   @media all {
      .pagefooter {
         padding: 0.5rem;
         border: 2px solid black;
         margin: 0.5rem 0rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      .pagefooter {
         background-color: #97FFFF;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 1rem - 4px - 0rem);
      }
   }

   /*Vorlagen zum Kopieren*/
   /*CSS*/
   @media all {
   }
   @media only screen and (min-width: 0px) {
   }
   @media only screen and (max-width: 0px) {
   }

   .Stil1 {color: #0000FF}
 

   .Stil1 {color: #0000FF}
   

17.05.2018 14:03

6 Jörg

Ja in Style2000.css, eingebunden ist aber die Datei style2000.css (mit kleinem s):

<link rel="stylesheet" type="text/css" href="http://www.malerei2000.de/style2000.css">

Und in style2000.css ist der Abschnitt nicht enthalten.

Die Dateisysteme auf Linux- und Unix-Servern berücksichtigen im Gegensatz zu denen auf Windows Klein- und Großschreibung der Dateinamen.

17.05.2018 14:26

7 Günter Leipfinger

Nun habe ich die Datei am Server umbenannt in style2000.css der code ist enthalten, es wird aber immer noch nicht entsprechend formatiert.


   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

 
   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /*Basisangaben*/
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 1px;
      }
      html {
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Felix titling', serif;
         font-size: 2.3rem;
		 color: #2233dd;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
		}
      h7 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.3rem;
         margin: 0.5rem 0rem 0.5rem 0rem;  
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
	     
	 [i]  p#{last-update 
       font-size: 0.8em;
      }[/i]
      a {
         /*darkblue*/
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0,1rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Listen dl*/
   @media all {
      dl {
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      dt,
      dd {
      }
      dt {
         font-weight: bold;
         margin: 0rem 0rem 0rem 0rem;
      }
      dd {
         margin: 0rem 0rem 1rem 0rem;
      }
      dd p {
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*body*/
   @media all {
      body {
      }
   }
   @media only screen and (min-width: 1000px) {
      body {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
   }

   /*.pageheader*/
   @media all {
      .pageheader {
         background-color: #97FFFF;
         border: 1px solid black;
      }
      .pageheader h1 {
         text-align: center;
	   }
   }
   @media only screen and (min-width: 1000px) {
      .pageheader {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 0rem - 2px - 0rem);
      }
   }

   /*.navigation*/
   @media all {
      .navigation ,.sidebar span.Stil1{
         background-color: #63B8FF;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
 .navigation p ,.sidebar span.Stil1{
         text-align: center;
      }
      .navigation a ,.sidebar span.Stil1 {
         color: #B22222;
         font-weight: bold;  
      }
   }
     a:hover{
    
}
   @media only screen and (min-width: 1000px) {
     .navigation a,.sidebar span.Stil1,
      .navigation a:visited {
         display: block;
         color: 	#483d8b;
         font-weight: bold;
         padding: 0.3rem;
         border: 1px solid black;
         border-radius: 0.3rem;
      }
     .sidebar span.Stil1:hover{
        background-color: black;
         color: gold;
       
     }
      .navigation a:hover,
      .navigation a:active,
      .navigation a:focus {
         background-color: black;
         color: gold;
	   }

   /*.content*/
   @media all {
      .content {
         background-color: #63B8FF;
         border: 2px solid black;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .content h2 {
         color: #FFFF33;
         text-align: center;
      }
      .content figure {
         max-width: 600px;
         margin: 0rem auto;
      }
   }
   @media only screen and (min-width: 1000px) {
      .content {
         margin: 0.5rem 1rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 250px - 250px - 1rem - 2px - 2rem);
      }
   }

   /*.sidebar*/
   @media all {
      .sidebar {
         background-color: #63B8FF;
		 color:	#483d8b;
		  font-weight: bold;
         padding: 0.5rem;
         border: 2px solid #63B8FF;
         margin: 0.5rem 0rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      .sidebar {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(250px - 1rem - 4px - 0rem);
      }
   }

   /*.aktuellstesbild*/
   @media all {
      .aktuellstesbild {
         border: 2px solid black;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .aktuellstesbild h2 {
         text-align: center;
		 font-weight: bold;
      }
      .aktuellstesbild figure {
         max-width: 600px;
         margin: 0rem auto;
      }
   }
   @media only screen and (min-width: 1000px) {
      .aktuellstesbild {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 500px - 2rem - 1rem - 4px - 0rem);
      }
   }

   /*.pagefooter*/
   @media all {
      .pagefooter {
         padding: 0.5rem;
         border: 2px solid black;
         margin: 0.5rem 0rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      .pagefooter {
         background-color: #97FFFF;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 1rem - 4px - 0rem);
      }
   }

   /*Vorlagen zum Kopieren*/
   /*CSS*/
   @media all {
   }
   @media only screen and (min-width: 0px) {
   }
   @media only screen and (max-width: 0px) {
   }

   .Stil1 {color: #0000FF}
 

   .Stil1 {color: #0000FF}
   

17.05.2018 14:40

8 Jörg

   p#{last-update 
       font-size: 0.8em;
      }

Ja, vergleiche mal mit dem Code-Block, den ich oben gepostet habe - die öffnende Klammer ist dir da verrutscht. "last-update" gehört auch noch zum Selektor "p#last-update". Danach kommt erst die öffnende Klammer.

17.05.2018 15:12 | geändert: 17.05.2018 15:14

9 Günter Leipfinger

ich poste mal die codes von style2000.css und index.html, damit Du überprüfen kannst, ob es nun richtig ist.
style2000.css


   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

 
   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /*Basisangaben*/
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 1px;
      }
      html {
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Felix titling', serif;
         font-size: 2.3rem;
		 color: #2233dd;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
		}
      h7 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.3rem;
         margin: 0.5rem 0rem 0.5rem 0rem;  
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
	     
	   p#last-update {
font-size: 0.8em;
}
      a {
         /*darkblue*/
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0,1rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Listen dl*/
   @media all {
      dl {
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      dt,
      dd {
      }
      dt {
         font-weight: bold;
         margin: 0rem 0rem 0rem 0rem;
      }
      dd {
         margin: 0rem 0rem 1rem 0rem;
      }
      dd p {
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*body*/
   @media all {
      body {
      }
   }
   @media only screen and (min-width: 1000px) {
      body {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
   }

   /*.pageheader*/
   @media all {
      .pageheader {
         background-color: #97FFFF;
         border: 1px solid black;
      }
      .pageheader h1 {
         text-align: center;
	   }
   }
   @media only screen and (min-width: 1000px) {
      .pageheader {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 0rem - 2px - 0rem);
      }
   }

   /*.navigation*/
   @media all {
      .navigation ,.sidebar span.Stil1{
         background-color: #63B8FF;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
 .navigation p ,.sidebar span.Stil1{
         text-align: center;
      }
      .navigation a ,.sidebar span.Stil1 {
         color: #B22222;
         font-weight: bold;  
      }
   }
     a:hover{
    
}
   @media only screen and (min-width: 1000px) {
     .navigation a,.sidebar span.Stil1,
      .navigation a:visited {
         display: block;
         color: 	#483d8b;
         font-weight: bold;
         padding: 0.3rem;
         border: 1px solid black;
         border-radius: 0.3rem;
      }
     .sidebar span.Stil1:hover{
        background-color: black;
         color: gold;
       
     }
      .navigation a:hover,
      .navigation a:active,
      .navigation a:focus {
         background-color: black;
         color: gold;
	   }

   /*.content*/
   @media all {
      .content {
         background-color: #63B8FF;
         border: 2px solid black;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .content h2 {
         color: #FFFF33;
         text-align: center;
      }
      .content figure {
         max-width: 600px;
         margin: 0rem auto;
      }
   }
   @media only screen and (min-width: 1000px) {
      .content {
         margin: 0.5rem 1rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 250px - 250px - 1rem - 2px - 2rem);
      }
   }

   /*.sidebar*/
   @media all {
      .sidebar {
         background-color: #63B8FF;
		 color:	#483d8b;
		  font-weight: bold;
         padding: 0.5rem;
         border: 2px solid #63B8FF;
         margin: 0.5rem 0rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      .sidebar {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(250px - 1rem - 4px - 0rem);
      }
   }

   /*.aktuellstesbild*/
   @media all {
      .aktuellstesbild {
         border: 2px solid black;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .aktuellstesbild h2 {
         text-align: center;
		 font-weight: bold;
      }
      .aktuellstesbild figure {
         max-width: 600px;
         margin: 0rem auto;
      }
   }
   @media only screen and (min-width: 1000px) {
      .aktuellstesbild {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 500px - 2rem - 1rem - 4px - 0rem);
      }
   }

   /*.pagefooter*/
   @media all {
      .pagefooter {
         padding: 0.5rem;
         border: 2px solid black;
         margin: 0.5rem 0rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      .pagefooter {
         background-color: #97FFFF;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 1rem - 4px - 0rem);
      }
   }

   /*Vorlagen zum Kopieren*/
   /*CSS*/
   @media all {
   }
   @media only screen and (min-width: 0px) {
   }
   @media only screen and (max-width: 0px) {
   }

   .Stil1 {color: #0000FF}
 

   .Stil1 {color: #0000FF}
   
index.html:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Malerei2000</title>
   <meta name="description" Der Autor gibt Einblick in sein künstlerisches Schaffen;Malerei, Acrylmalerei Aquarelle Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
	<meta name="Keywords" content=Malerei, Acryl, Aquarelle>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
  <link rel="stylesheet" type="text/css" href="http://www.malerei2000.de/style2000.css">
   
   <link rel="icon" type="image/vnd.microsoft.icon" href="www.malerei2000.de/palette.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
   <header class="pageheader">
      <h1>Herzlich willkommen</h1>
   </header>
   <nav class="navigation">
      <p><a href="http://malerei2000.de/Malerei/Acrylmalerei/album/index.html">Acrylmalerei</a></p>
	     
      <p><a href="http://malerei2000.de/Malerei/Aquarelle/album/index.html">Aquarelle</a></p>
	   <p><a href="bilderliste3d.html">Bildinformationen</a></p>
	   
     <p><a href="http://www.malerei2000.de/Kontakt.html">Kontakt</a></p>
      <p><a href="http://www.malerei2000.de/impressum.html">Impressum</a></p>
      <p><a href="http://gb.webmart.de/gb.cfm?id=1331502l" http:="" gb.webmart.de=>Gästebuch</a></p>
														   
      
	   <p><br><br><br>

        <script "text/javascript" src="https://www.whomania.com/count/lxl"></script><br>
 
        <br>
        

      </p>
																		  
																		 <p id="last-update">Letzte Aktualisierung am<br><br>
16.05.2016</p>  
    
    </nav>

	  
  
   
   <main class="content">
      <h2>Malerei</h2>
      <figure>
        <img src="http://malerei2000.de/illusion.jpg" alt="Malerei">
      </figure>
      
      
      <footer class="contentfooter">      </footer>
   </main>
    <aside class="sidebar">
     Die Bilder können käuflich erworben werden.<span>Bei Interesse mail an den</span>
      <p><span><br>
      </span> <a href="http://www.malerei2000.de/Kontakt.html"><span class="Stil1">Künstler</span>
    
    
  </html>

17.05.2018 15:46

10 Jörg

Das sollte so funktionieren, ja.

Überprüfen kann man das am besten, wenn du das online stellst. Mit den Entwickler-Tools der Browsers (z.B. Firefox Inspector) kann man dann sehen, ob die Formatierung zugewiesen wurde. Wenn nicht, muss man sich auf Fehlersuche machen. Wenn ja, muss man ggf. nur die Schriftgröße noch anpassen.

17.05.2018 17:07

1 Forenmitglied fand diesen Beitrag gut