nicht angemeldet
Habe mir auf SELFHTML die Regeln wieder etwas aufgefrischt. Einiges sind mir mehr oder weniger neu. Insbesondere "Grid". Vor allem werde ich die begonnene Webseite umgestalten. Werde unter anderen die Größen und Gliederungen nach den Regeln verwenden und beispielsweise für Navigatoren flexbox verwenden. Fragen haben sich für mich ergeben warum man für Farbpaletten ":root" verwendet? Kürzer geht es ohne die Eingabe von der Variablen. Die einzige Antwort wäre für mich, daß bei einer Änderung der Farbe nur root zu ändern wäre, vorausgesetzt, die gleiche Farbe wird an mehreren Stellen gesetzt. Weiters lese ich einige Male, daß bei Aufklappmenüs screenreaders im Zusammenhang mit "display: none, block" Probleme haben können. Stellt sich da nicht die Frage ob man nicht überhaupt nur einfache Menüs erstellen soll?
Zu meiner begonnen Seite hätte ich noch eine Frage? Ich habe sie untergliedert innerhalb von body
header main footer
Bis dahin stimmt die Darstellung. Nun habe ich vier Sektionen in main eingefügt, aber der footer wird überdeckt anstatt nachzurücken.
<body>
<!--------------------------------------------------------------------------->
<header>
<div id="Kopf">
<span>Familienforschung</span>
<b class="format">Pree - Fugger - Fuger</b>
</div>
<div id="zeile2">
<p>Ich forsche im Raume Österreich, Tschechien und Deutschland</p>
</div>
<nav id="nav1">
<ul id="ul1">
<li><a ID="gruen" href="#">Anmeldung</a></li>
<li><a ID="blau" href="#">Formulare</a></li>
<li><a ID="orange" href="#">Hilfe für Anfänger</a></li>
<li><a ID="black" href="#">Zu den Tafeln</a></li>
<li><a ID="gruen" href="#">Links</a></li>
<li><a ID="grey" href="#">Sprache</a>
<ul class="submenu">
<li class="esp"><a href="#">International</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!--------------------------------------------------------------------------->
<main>
<div class="container">
<nav id="nav2">
<h2>Navigation</h2>
<hr>
<ul>
<li><a href="#">Datenbanken</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Orte</a></li>
<li><a href="#">links zu Seiten</a></li>
</ul>
</nav>
</div>
<div id="mitte">
<iframe name="Inhalt" src="">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen.</p>
</iframe>
</div>
<section class="sectionen">
<h2>Die Diözesen von Österreich und seine Matriken</h2>
<nav>
<ul>
<li><a href="#">Diözese Eisenstadt (Burgenland)</a></li>
<li><a href="#">Diözese Feldkirch (Vorarlberg)</a></li>
<li><a href="#">Diözese Gurk-Klagenfurt (Kärnten)</a></li>
<li><a href="#">Diözese Graz-Seckau (Steiermark)</a></li>
<li><a href="#">Diözese Insbruck (Tirol)</a></li>
<li><a href="#">Diözese Linz (Oberösterreich)</a></li>
<li><a href="#">Diözese St. Pölten (westliches Niederösterreich)</a></li>
<li><a href="#">Erzdiözese Salzburg (Salzburg, östliches Nordtirol)</a></li>
<li><a href="#">Erzdiözese Wien (Wien, östliches Niederösterreich)</a></li>
</ul>
</nav>
</section>
<section class="sectionen">
<h2>Die Diözesen von Tschechien (Böhmen und Mähren) und seine Matriken</h2>
<nav>
<ul>
<li><a href="#">Erzbistum Prag (Praha)</a></li>
<li><a href="#">Bistum Budweis (České Budějovice)</a></li>
<li><a href="#">Bistum Königgrätz (Hradec Králové)</a></li>
<li><a href="#">Bistum Leitmeritz (Litoměřice)</a></li>
<li><a href="#">Bistum Pilsen (Plzeň)</a></li>
<li><a href="#">Erzbistum Olmütz (Olomouc)</a></li>
<li><a href="#">Bistum Brünn (Brno)</a></li>
<li><a href="#">Bistum Ostrau-Troppau (Ostrava-Opava)</a></li>
</ul>
</nav>
</section>
<section class="sectionen">
<h2>Hinweise</h2>
<nav>
<ul>
<li><a href="#">Abkürzungen</a></li>
<li><a href="#">Alte Begriffe</a></li>
<li><a href="#">Berufe</a></li>
<li><a href="#">Krankheiten</a></li>
<li><a href="#">Kurzzeichen(*,+, 00,..)*</a></li>
</ul>
</nav>
</h2>
</section>
<section class="sectionen">
<h2>Forschertipps</h2>
<nav>
<ul>
<li><a href="#">Einsteigerinfos</a></li>
<li><a href="#">Wie forsche ich</a></li>
<li><a href="#">Wo forsche ich</a></li>
</ul>
</nav>
</section>
</main>
<!--------------------------------------------------------------------------->
<footer>
<p>Mail
<p>©Datenschutz 24.11.2022</p>
<p>Impressum, Eigentümer der Webseite</p>
<p>Urheberrecht</p>
</footer>
</body>
Quelltext hier
*{
margin: 0;
padding: 0;
font-family: arial;}
body{
background-image: url("Bilder/Geripped_fein.PNG");}
header {
height: 10rem;
margin: 10px 20px 10px 20px;
padding: 20px 10px 10px 20px;
border-radius: 10px;
background-color: lightgoldenrodyellow;}
#Kopf{
padding: 10px;
background-color: black;}
span{
color: aqua;
font-size: 40px;
font-weight: bold;
vertical-align: baseline;}
b{
color: red;
font-size: 20px;
display: inline-block;
position: relative;
left: 50px;}
#zeile2{
padding-top: 10px;
padding-bottom: 10px;}
/*-------------------Navigator Header-------------------*/
nav#nav1 {
width: 100%;
height: 60px;
display: inline-block;}
nav#nav1 ul{
margin; 0;
padding: 0;
display: inline-block;}
nav#nav1 ul li{
margin-top: 10px;;
padding: 0;
float: left;
list-style: none;
position: relative;}
nav#nav1 ul li a{
display: inline-block;
padding: 0 4rem 0 0;
float: left;
text-decoration: none;
border-top: solid 5px brown;
color: black;
height: 35px;}
nav#nav1 ul li:hover > a{
background-color: lightgray;
border-top: solid 5px blue;}
nav#nav1 ul li ul{
overflow: hidden;
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 0;}
nav#nav1 ul li ul li{
background-color: lightgray;}
nav#nav1 ul li ul li a{
border-style: none;}
nav#nav1 ul li:hover > ul{
max-height: 700px;}
/*--------------------------------------------*/
main{
height: 60rem;
margin: 20px;}
.container{
padding-left: 10px;
height: 100%;
width: 23%;
border-radius: 10px;
background-color: black;
float:left;}
h2{
padding-left: 10px;
font-weight: bold;}
hr{
display: block;
font-weight: bold;
margin-bottom: 10px;}
#nav2{
color: yellow;
border-radius: 10px;}
#nav2 ul{
padding-left: 10px;
list-style: none;}
#nav2 li a{
text-decoration: none;
color: yellow;
padding-left: 10px;}
#nav2 ul li:hover > a{
color: lightblue;
text-decoration: underline red;
padding-left: 5px;}
#mitte{
display: inline-block;
margin-left: 5px;
width: 75%;
height: 100%;
border-radius: 10px;}
iframe{
margin-right: 20px;
border: 1;
width: 100%;
height: 100%;}
/*--------------------------------------------*/
.sectionen{
background-color: white;
margin-top: 10px;}
.sectionen h2{
margin: 0;
padding: 0;}
/*--------------------------------------------*/
footer{
background-color: lightgoldenrodyellow;
margin: 20px;
padding-left: 20px;
height: 7rem;
border-radius: 10px;}
Wie gesagt, die Gestaltung mit CSS muß noch geändert werden, aber das mache ich erst nachdem ich den Inhalt fertig habe. Ich überlege noch, ob ich die Sektionen in die Navigation reingeben soll, oder die Blöcke mit Grid gestalte? Die Diözesen sind fremde Webseiten, während Hinweise und Forschertips pdf's sind. Soll man ein pdf in iframe laden oder in einen eigenen Tab? Im Seiteninspektor dürfte beim Footer etwas nicht korrekt sein aber ich weiß nicht was? Ebenso ist beim body ein Fehler. Es steht "margin-top: 8px;" aber ich finde keine Stelle wo ich das gesetzt hätte. Ich hoffe, ich kann mit eurer Hilfe rechnen.
LG Franz
Gunnar Bittersmann
Rolf B