Boxen werden nicht angezeigt

[delbor]

Hi zusammen

Zurzeit bin ich gerade dabei, meine Home-Seite zu überarbeiten; die bisherige Darstellung ist eigentlich nur ein Grundgerüst für alle Seiten. Dieses Grundgerüst besteht aus 4 Boxen:

• Dem Header
• Einer Left-
• einer Content-
• und einer RightBox

In der Contentbox habe ich ein bisher als Grafik angezeigtes Logo durch CSS/HTML ersetzt:

      <p id="Titelbox1"> Willkommen auf den Seiten von</p>   <!-- id=txtEins <div></div>-->
      <p id="Titelbox2"> roase.ch </p > <!--<div></div>  id=txtZwei-->
      <p id="Titelbox3"> Rogers Oase im Internet</p>  <!--id=txtDrei <div</div>-->

Das CSS dazu:

 #Titelbox1{
    position:absolute;
    height: 50px;
    width: 50%;
    font-style:italic;
    font-size:1.5em;
    vertical-align:25px;
    border:none;
    margin-top: 25px;
    margin-left:15%;      
    margin-bottom:20px;
	padding-top: 0;
    pading-left : 0;
    color: yellow;
    text-shadow:
        1px 1px red,
        2px 2px red,
        3px 3px red;
                    top: 0; left: 0;
    transition: all 0.3s ease-out;
}

#Titelbox2{
    position:absolute;
    height: 50px;
    width: 50%;
    font-style:italic;
    font-size:3em;
    text-align:center;
    border: solid 3px yellow;
    border-radius: 50px;
    background-color:blue;
    margin-top: 90px;
    margin-left:25%;
    margin-right:25%;
    padding-top:2px;
    padding-bottom:30px;   
    color: yellow;
    text-shadow:
        1px 1px red,
        2px 2px yellow,
        3px 3px red;
                    top: 0; left: 0;
    transition: all 0.3s ease-out;
}

#Titelbox3{
    position:absolute;
    height: 50px;
    width: 40%;
    font-style:italic;
    font-size:1.5em;
    border: none;
    margin-top: 200px;
    margin-left:50%;
    margin-right:10%;
    color: yellow;
    text-shadow:
        1px 1px red,
        2px 2px red,
        3px 3px red;
                    top: 0; left: 0;
    transition: all 0.3s ease-out;
}

Diese drei Boxen werden soweit innerhalb der contentbox richtig dargestellt. Nun folgt ein Inhaltsverzeichnis, bzw. erstmal dessen Überschrift, welche ich auch in einer Box darstelle, um von "H1" unabhängig zu sein. Und jetzt beginnt mein Problem. Als erstes habe ich in der Contentbox eine Box "Eisenbahn". Die wird korrekt angezeigt und soll noch weitere Boxen enthalten, wie "Normalspurbahn" oder "Schmalspurbahn" etc. Dabei wird mir die Eisenbahnbox korrekt erstellt, von den andern beiden fehlt jede Spur. Ich habe die Eisenbahnbox auch schon mal soweit verkleinert, dass Elemente dahinter sichtbnar werden müssten - nichts. Alles, was mir auf jeden Fall angezeigt wird, sind die Texte, die sich in den Boxen befinden sollten. Das HTML:

      <div id="Eisenbahn">Eisenbahnen

        <div id="Normalspur">Normalspurbahnen
          <ul class="homemenue">
            <li><a href="#">Gotthardgiganten</a></li>
            <li><a href="#">Französischer Dampf am Gotthard</a></li>
            <li><a href="AufromantischerSpur1.html">DVZO - Auf romantischer Spur1</a></li>
            <li><a href="BischofzellerRosenwochen.html">Mit Dampf an die Bischofszeller Rosenwochen</a></li>

            <li><a href="BahnhofsfestWattwil.html">Bahnhofsfest Wattwil</a></li>
          </ul> <!-- -->
        </div>

        <div id="Schmalspurbahn">Schmalspurbahnen
          <ul class="homemenue">
            <li><a href="#">100 Jahre Säntisbahn</a></li>
            <li><a href="DasWaldenburgerJuwel.html">Das Juwel vom Waldenburgertal</a></li>
          </ul> <!-- -->
        </div>

        <div id="Bergbahn">Berg- und Zahnradbahnen
          <ul class="homemenue">
            <li><a href="#">Die Rigibahn</a></li>
            <li><a href="#">Rosa und die RHB</a></li>
          </ul> <!-- -->
        </div>

      </div>  <!-- Abschluss-diy Eisenbahn   -->

Das CSS:

#Eisenbahn {
    position:absolute;
    width : 90%;
    height: 40px;
    font-style:italic;
    font-size:1.5em;
    margin-top: 295px;
    margin-left: 5%;
    margin-right: 5%;
	padding-top: 15px;
    pading-left : 15px;
    background-color: aqua;
    color: yellow;
    border: solid 1px blue;
    border-radius: 20px;
}              <!-- float: left; $00FAA80C;-->

#Normalspur {
    position:absolute;
    display: inline-block;
    float: left;
    width : 65%;
    height: 80px;
    color: yellow;
    font-style:italic;
    font-size:1.5em;
    margin-top:10px;
    margin-left: 30%;
    margin-right: 5%;
    background-color: red;<!--$00FAA80C; -->
    border: solid 1px red;
    border-radius: 20px;
}              <!-- float: left; margin-right: 2%;-->

#Schmalspurbahn {
    position:absolute;
position:absolute;
width : 65%;
height: 80px;
font-style:italic;
font-size:3em;
        display: inline-block;
border: solid 2px yellow;
border-radius: 20px;
background-color: red;<!--$00FAA80C; -->
    color: yellow;
    font-style:italic;
    font-size:1.5em;
    margin-top:300px;
    margin-left: 7%;
    margin-right: 5%;
}              

Ich habe schon versucht, CSS-Anweisungen aus einer meiner Titelbox zu verwenden - mit dem selben Ergebnis.

Das Box-Modell habe ich - hoffentlich genügend - studiert, bin allerdings der Meinung, dass ich da vorerst nichts finde, was mir meinen Fehler klarmacht. Insbesodere desshalb, weil die Anzeige der Titelboxen ja problemlos funktioniert. Ach ja: Ich sollte noch erwähnen, dass der Body mit Position:relative formatiert ist. Alles andere ist absolut positioniert. Wo im gezeigten Quelltext abweichungen vorhanden sind: die stammen aus Versuchen, dem Fehler auf die Spur zu kommen. Was machhe ich falsch?

Gruss Delbor