nicht angemeldet
Upps! Habe ich eine falsche Frage gestellt weil keine Reaktion erfolgt?
Habe inzwischen die Lösung nach mehreren Versuchen gefunden. Habe es auch schon in die Hauptseite eingebaut die ich ebenfalls als flexbox umgebaut habe. Schwierigkeiten macht mir wiederum das vertikale Zentrieren des Textes im header.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="author" content="Pree Franz">
<title>Meine Homepage</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: URL(Graphiken/Geripped_fein.PNG);
}
/*******************************Flexbox*******************************/
#gesammt {
width: 70%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
header {
background: black;
margin-top: 10px;
height: 5em;
text-align: center;
color: white;
}
header h1 {
}
#zentrum {
display: flex;
justify-content: space-between;
}
main {
background-color: white;
width: 86.6%;
padding-top: 10px;
padding-left: 20px;
}
#navi h1 {
padding-top: 5px;
padding-bottom: 10px;
}
#zentrum, #footer {
margin-top: 10px;
}
/*******************************Navigator*******************************/
#navi {
background-color: black;
min-width: 5%;
color: yellow;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
border-right: 2px solid red;
}
#navi a {
color: yellow;
display: block;
padding: 2px 0px;
text-decoration: none;
}
#navi ul ul li {
margin-left: 1.5em;
padding: 0;
}
#navi ul {
list-style-type: none;
margin: 2px 0px;
padding: 0;
text-align: left;
}
#navi a:link, a:visited {
color: yellow;
}
#navi a:hover, nav a:focus, nav a:active {
color: lightblue;
margin-left: -5px;
letter-spacing: 1px;
text-decoration: underline;
}
/********************************Footer********************************/
#footer {
background-color: black;
color: yellow;
}
#footer ul {
list-style-type: none;
display:flex;
height: 5em;
padding: 0 15px 0 15px;
justify-content: space-between;
align-items: center;
}
.adresse {
height: 20px;
cursor: pointer;
transition: ease-in-out;
transition-property: width, background-color, border-color;
transition-duration: 0.5s, 0.5s, 0.5s;
transition-delay: 0s, 0.5s, 0.5s;
}
.adresse a {
font: 0/0 serif;
z-index: -1;
}
.adresse a {
color: lightblue;
}
.adresse:hover a {
text-decoration: none;
border-radius: 10px;
border: 2px solid yellow;
background-color: brown;
padding: 5px;
font: inherit;
z-index: auto;
}
/********************************************************************/
</style>
</head>
<body>
<div id="gesammt">
<header>
<h1>Meine Internetseite</h1>
</header>
<div id="zentrum">
<nav id="navi">
<h1>Inhalt</h1>
<hr>
<ul>
<li><a href="#In eigener Sache">In eigener Sache</a></li>
<li><a href="#Ahnenforschung">Ahnenforschung</a></li>
<li><a href="#Rezepte">Rezepte</a>
<ul>
<li><a href="#Abkuerzungen">Abkürzungen</a></li>
<li><a href="#Beilagen">Beilagen</a></li>
<li><a href="#Gebaeck">Gebäck</a></li>
<li><a href="#Getraenke">Getränke</a></li>
<li><a href="#Fleischspeisen">Fleischspeisen</a></li>
<li><a href="#Mehlspeisen">Mehlspeisen</a></li>
<li><a href="#Suesspeisen">Süßspeisen</a></li>
<li><a href="#Eisrezepte">Eisrezepte</a></li>
<li><a href="#Kuchen">Kuchen</a></li>
<li><a href="#Torten">Torten</a></li>
<li><a href="#Puddings">Puddings</a></li>
<li><a href="#Marmeladen">Marmeladen</a></li>
<li><a href="#Weihnachtsbaeckereien">Weihnachtsbäckereien</a></li>
</ul>
</li>
<li><a href="#Garten">Garten</a>
<ul>
<li><a href="#Allgemein">Allgemein</a></li>
<li><a href="#Carnivoren">Carnivoren</a></li>
<li><a href="#Orchideen">Orchideen</a></li>
<li><a href="#Kakteen">Kakteen</a></li>
<li><a href="#Teich">Teich</a></li>
<li><a href="#Steingarten">Steingarten</a></li>
<li><a href="#Gemuesegarten">Gemüsegarten</a></li>
</ul>
</li>
<li><a href="#Sprueche">Sprüche</a></li>
<li><a href="#Witze">Witze</a></li>
<li><a href="#Links">Links</a></li>
<li><a href="#Urheberrecht">Urheberrecht</a></li>
<li><a href="#Suchmaschinen">Suchmaschinen</a></li>
<li><a href="#Foren">Foren</a></li>
<li><a href="#Gaestebuch">Gästebuch</a></li>
<li><a href="#Zurück zum Hauptmenü">Zurück zum Hauptmenü</a></li>
<li><a href="#Zur Sprachenauswahl">Zur Sprachenauswahl</a></li>
</ul>
</nav>
<main role="main">
<h2>Herzlich Willkommen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Was Sie alles hier finden</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</main>
</div>
<footer>
<nav id="footer">
<ul>
<li class="adresse"> @ e-Post:
<a href="mailto:pree.franz-homepage@aon.at">p.franz-homepage@aon.at</a></li>
<li>Erstellt mit Apple - Optimiert für Safari 9.0.</li>
<li>Aktualisiert am 13.10.2015</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
Vielleicht kann ich hier mit einer Antwort hoffen.
--
LG Franz
LG Franz
Der Martin
Gunnar Bittersmann
Matthias Apsel
Auge