4. Divs untereinander mit Frontpage

Divs untereinander mit Frontpage

  • D

    Hallo,
    ich hab vor, eine wirklich kleine Webseite in einer Datei zu basteln. Diese soll allerdings so aufgebaut sein, dass zuallererst eine Art Frontpage enthalten ist. Diese besteht aus einem Hintergrundbild, einem kurzen Willkommenstext und ganz unten eine Menüleiste. Direkt unter dieser Leiste (also nicht mehr im Bild) möchte ich dann die Inhalte folgen lassen.
    Man verlinkt also direkt mit Anchors.
    ca so:

    -------------------  < Bildschirmbeginn
|  Welcome        |
|                 |
|                 |
| link link ..    |
------------------ < unteres Bildrschirmende
|                 |
| Inhalt1         |
|                 |
| Inhalt2         |
|                 |

    Ich hab das Ganze mal inklusive CSS zusammen gepappt.. Schlagt mich nicht, ist jahrhunderte her bei mir:

    <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>unbenannt</title>
<!-- <link rel="stylesheet" type="text/css" href="main.css" /> -->
 <style type="text/css">
body {
  background-image: url('grfx/wallpaper.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  height:100%;
}

a {
    font-size:large;
    font-weight:bold;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.wrapper {
    display:table;
    left:0px;
    right:0px;
    margin:0px;
    background: rgba(0,0,0,0);
}


.header {
    display:block;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    width:100%;
    height:900px;
    margin:0;
    background: rgba(0,255,0,0);
}

.topframe {
    position:absolute; 
    display:block;
    margin: 0 auto;
    left:0px;
    right:0px;
    top:0px;
    bottom:90px;
    vertical-align:bottom;
    background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0), azure);
    padding:40px;
} 

.topframe h1 {
    text-align: center;
    font-size: xx-large;
}

.menuframe {
    position:absolute;
    display:block;
    height:90px;
    left:0px;
    right:0px;
    bottom:0px;
    top:auto;
    border:1px solid white;
    margin: 0;
    background-color:white;
}

.menuitem {
    display:table-cell;
    float:left;
    width: 8em;
    border-right:1px solid white;
    background-color:white;
    padding-left: 50px;
    padding-top: 1em;
    padding-bottom: 1em;
    text-align:center;
}

.contentframe {
    display: block;
    left:0px;
    right:0px;
    border-bottom:1px solid black;
    padding: 5em;
    padding-bottom: 5em;
    margin: 0;
    background-color:white;

}

.contentframe h1 {
    font-size:large;
    color:#808080;
    text-decoration: underline;
}

</style>
</head>

<body>
<div class="header">
    <div class="topframe"> <h1>Herzlich Willkommen!</h1><br>
    auf meiner Site [Logo]
    </div>

    <div class="menuframe"> 
         <a class="menuitem" href="#news">Neues</a> 
         <a class="menuitem" href="#about">Über uns</a> 
         <a class="menuitem" href="#service">Leistungen</a> 
         <a class="menuitem" href="#impressum">Impressum</a>  
         <a class="menuitem" href="mailto:Beispiel@test.com">Kontakt</a>  
    </div>
</div>

    <div id="news" class="contentframe">
        <h1>Hier stehen News</h1><br>

        Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.
    </div>
    <div id="about" class="contentframe">
        <h1>Hier steht was über uns</h1><br>

        Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text seit 1500, als ein unbekannter Schriftsteller eine Hand voll Wörter nahm und diese durcheinander warf um ein Musterbuch zu erstellen. Es hat nicht nur 5 Jahrhunderte überlebt, sondern auch in Spruch in die elektronische Schriftbearbeitung geschafft (bemerke, nahezu unverändert). Bekannt wurde es 1960, mit dem erscheinen von "Letraset", welches Passagen von Lorem Ipsum enhielt, so wie Desktop Software wie "Aldus PageMaker" - ebenfalls mit Lorem Ipsum.
    </div>
</body>
</html>

    P.S.: Bitte kein "mit xyz könntest du das toller lösen" ich will lernen und nicht meine Unfähigkeit mit tools kaschieren... 😉

    0

  • Das erste was mir auffiele, ist das <div> Element mit der Klasse "header" auszutauschen mit einem <header> Tag.

    Aus meiner Sicht macht das inhaltlich mehr Sinn:

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

    <header class="header"> .... </header>
    0
Anmelden zum Antworten