yogi: Style-Teil von HTML nach CSS

Beitrag lesen

Hallo allerseits

Vor Jahren habe ich eine Homepage für die Berichterstattung unserer Reisen gebastelt, die noch Frames verwendet. Nun möchte ich für zukünftige Berichte die Frames eliminieren und gleichzeigig die Formatierung über CSS einbinden. So habe ich als erstes in einer der bestehenden Seiten die Formattierung mit


<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: white;
    min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
     margin: 0; padding: 0;
}
  p {
    margin: 3em 0 0 3em;  /* Positionierung des 'zurueck'-Links */
  }
  p  a { color:black;  /* Farbe des 'zurueck'-Links */ }

  html { padding: 0; }

  #fixiert {
    position: absolute;
    top: 1em; left: 1em;
    width: 10em;
    background-color: white;
    border: 1px solid silver;
  }
  html>body #fixiert {  /* nur fuer moderne Browser! */
    position: fixed;
  }

  #Inhalt {
    margin-left: 12em; padding: 0 1em;
    margin-right: 2em; padding: 0 1em;
   /* border-left: 2px ridge gray; border-right: 2px ridge gray; border-top: 2px ridge gray;  border-bottom: 2px ridge gray; */
  }
  * #Inhalt {  /* versteckt vor Netscape 4 */
    background-color: #ffffe0;
  }

  #Inhalt h2 {
    font-size: 1.2em;
    margin: 2em 5% 2em;
    color: maroon;
    border-bottom: 1px solid silver;
  }
  #Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }
  #Inhalt #Fusszeile {
    font-size: 0.9em;
    margin: 200em 0 0; padding: 0.1em;
    text-align: center;
    background-color: #fed; border: 1px solid silver;
  }

  h1 {
    font-size: 1.5em;
    margin: 0.5em; padding: 0.3em;
    text-align: center;
    background-color: #fed;
    border: 2px ridge gray;
  }

     #float_left_3col {width: 450px;  float: left;  margin-right: 10px; }
     #float_right_3col {width: 450px;  float: right;  margin-left: 10px; }
     #float_left_2col {width: 300px;  float: left;  margin-right: 10px; }
     #float_right_2col {width: 300px;  float: right;  margin-left: 10px; }
     #float_left_1col {width: 150px;  float: left;  margin-right: 10px; }
     #float_right_1col {width: 150px; float: right;  margin-left: 10px; }

</style>

definiert und habe das gewünschte Resultat erhalten. Dann habe ich alles zwischen <style type="text/css"> und </style> in eine .CSS Datei verschoben und die in der HTML-Seite eingebunden.

Das hat dann aber nicht so ausgesehen wie gewünscht.

Was muss bei so einem Auslagern beachtet werden, ändert sich da eventuell die Syntax?

Zu meinen Kenntissen: Ich verstehe zwar etwas von Software, habe aber nie mit CSS gearbeitet.

Gruss yogi