Rookie: Layout mit CSS, iframe und Ausrichtung

Beitrag lesen

Hier noch die gesamte CSS-Datei für den Aufbau der Seite:

body {
    font: normal 100.01% Arial Narrow;
    color: #FF9900; background-color: black;
 scrollbar-face-color: #000000;
    min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
  }
  p {
    margin: 3em 0 0 3em;
  }

html {
    padding: 0;
  }
  body {
    margin: 0; padding: 0;
  }

#fixiert {
    position: absolute;
    top: 2.8em; left: 0em;
    width: 12em;
    background-color: black;
    border: 0;
  }
  html>body #fixiert {  /* nur fuer moderne Browser! */
    position: fixed;
  }
  #fixiert2 {
    position: absolute;
    top: 25em; left: 8em;
    width: 15em; padding: 0.3em;
    background-color: #660000;
 font-size: 1em;
    border: 2px ridge silver;
  }
  html>body #fixiert2 {  /* nur fuer moderne Browser! */
    position: fixed;
  }
  #fixiert img {
    height: 6.8em; float: right;
  }
 #Inhalt_Gallery {
    margin-left: 20em; margin-top: 0.4em; padding: 0 1em;
    border-left: 2px ridge silver; border-top: 2px ridge silver; border-bottom: 2px ridge silver;
  }
  #Inhalt {
    margin-left: 20em; margin-top: 0.4em; margin-bottom: 1em; padding: 0 1em;
    border-left: 2px ridge silver; border-top: 2px ridge silver; border-bottom: 2px ridge silver;
  }
  * #Inhalt, #Inhalt_Gallery {  /* versteckt vor Netscape 4 */
    background-color: #333333;
  }
  #Inhalt h2, #Inhalt_Gallery h2 {
    font-size: 1.2em;
    margin: 2em 5% 2em;
    color: maroon;
    border-bottom: 2px ridge silver;
  }
  #Inhalt p, #Inhalt_Gallery p {
    font-size: 1em;
    margin: 1em 0;
  }
  #Inhalt a:link, #Inhalt_Gallery a:link {
   color:#FFFFFF;
 }
 #Inhalt a:visited, #Inhalt_Gallery a:visited {
 color:#FFFFFF;
 }
  #Inhalt a:hover, #Inhalt_Gallery a:hover {
 color:#FFFFFF;
 }
 #Inhalt a:active, #Inhalt_Gallery a:active {
 color:#FFFFFF;
 }
  #Inhalt a:focus, #Inhalt_Gallery a:focus { color:#FFFFFF;
  }
  #Inhalt #Fusszeile {
    font-size: 0.9em;
    margin: 200em 0 0; padding: 0.1em;
    text-align: center;
    background-color: #fed; border: 2px ridge silver;
  }

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

#Navigation {
    font-size: 0.83em;
    margin: 0 0 1.2em; padding: 0;
  }
  #Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }

ul#Navigation {
    width: 12em;
    margin: 0; margin-left: 5em; padding: 0.8em;
    border: 2px ridge silver;
    background-color: #660000;
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 13.92em;
 margin-left: 5.8em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0;
  }
  ul#Navigation span {
  display:block;
    padding: 0.2em;
    display: block;
    padding: 0.2em;
 text-decoration: none; font: normal 100.01% Verdana, Arial, Helvetica, sans-serif; font-weight: bold;
    border: 2px ridge silver;
    font-weight: bold;
 font-size: 15px;
    color: white; background-color: black;
 }
  ul#Navigation a {
    display:block;
    padding: 0.2em;
    text-decoration: none; font: normal 100.01% Verdana, Arial, Helvetica, sans-serif; font-weight: bold;
    border: 2px ridge silver;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, ul#Navigation span {  /* Breitenangaben nur fuer IE */
    width: 100%;
    w\idth: 10.56em;
  }

ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
 font-size: 15px;
  }
  ul#Navigation a:link {
    color: white; background-color: #333333;
  }
  ul#Navigation a:visited {
    color: white; background-color: #333333;
  }
  ul#Navigation a:hover {
    color: white; background-color: gray;
  }
  ul#Navigation a:active {
    color: white; background-color: #333333;
  }

Grüße
Christian

Hi,

Als Überschrift/Logo für die HP hab ich einfach ein <h1> Tag genommen. Das hat aber zur Folge, dass sich die Überschrift ein wenig nach links verschiebt, wenn eine Seite der HP einen Scrollbalken hat.
Die h1 hat damit absolut nichts zu tun. Zeige doch mal, wie Du die Seite aufgebaut hast.

Das Gästebuch habe ich mit einem iframe integriert. Gibt es eine Möglichkeit, dass sich das iframe automatisch an die grösse der Seite des Gästebuchs anpasst, ohne dafür JavaScript zu verwenden?
Nein.

freundliche Grüße
Ingo