Footer nicht an korrekter Stelle
franzsen
Footer nicht an korrekter Stelle
franzsen
Gunnar Bittersmann
Rolf BHabe 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
LG Franz
-
@@franzsen
Im Seiteninspektor […] ist beim body ein Fehler. Es steht "margin-top: 8px;" aber ich finde keine Stelle wo ich das gesetzt hätte.
Sowohl Firefox als auch Chrome (dürfte in Edge genauso aussehen?) sind da doch ziemlich geschwätzig, wo das herkommt:
Du hast das nirgendwo gesetzt, aber es gibt noch andere Stylesheets als deins: eins davon ist das browserinterne user agent stylesheet. Und da steht u.a.
body { margin: 8px }drin.
Zu deinen anderen Problemen siehe letzten Absatz in diesem Posting.
🖖 Живіть довго і процвітайте
--
„Ukončete, prosím, výstup a nástup, dveře se zavírají.“ -
Hallo franzsen,
dein main Element hat eine feste Höhe von 60em. Die ist schon von der Navigation ausgefüllt (das div.container Element, das gerne ein nav sein möchte, wie sein großer Bruder in der Hauptnavigation). Das div#mitte Element ist zu breit, um daneben zu passen, deswegen steht es darunter. Die vier anderen Sections stehen ebenfalls darunter.
Das ist aber alles im Überlaufbereich des main Elements, das main-Element selbst ist, wie vorgeschrieben, 60em hoch. Der Footer steht vorschriftsmäßig unter dem main-Element und wird von dem überlaufenden Inhalt von main überlagert.
An der Stelle musst Du Dir gründlich Gedanken über dein Gesamt-Seitenlayout machen. Da kann ich schlecht raten, weil ich nicht weiß, was Du wann wo anzeigen willst. Wo sollen die Zusatzsections angezeigt werden? Unter dem Footer? Anderswo? Sollen sie je nach Menüauswahl sichtbar werden?
Ein Problem ist auch das Hauptmenü, bei schmalen Bildschirmen bricht es um und überlagert den Rest. Unterhalb von 961px Viewportbreite bricht es bei mir um. Das kannst Du verbessern - bis zu einem gewissen Grad –, indem Du das Padding der Menülinks verkleinerst. Etwas knifflig ist der rote Rand der a Elemente, den Du beim :hover blau machst. Wenn Du den über die ganze Breite des Fensters gehen lassen willst, braucht man ein paar Tricks, glaub ich.
Aber trotzdem, da würde ich zuerst ansetzen:
nav#nav1 { width: 100%; height: 60px; display: inline-block;}ganz weg, unnötig. Ein inline-block Element mit 100% Breite ist im Prinzip ein block-Element, und die Höhe sollte sich automatisch ergeben. Vor allem dann, wenn die li Elemente mangels verfügbarer Breite umbrechen.
nav#nav1 ul: Ertens: #nav1 reicht, denn eine ID darf nur einmal vorkommen. Deswegen ist nav#nav1 unnötig detailliert. Zweitens: inline-block. Ersetze es durch display:flex.
Entscheidungsbedarf: sollen sich die Hauptmenüpunkte – wenn Platz ist – über die ganze Breite verteilen oder linksbündig sein?
nav#nav1 ul li: Mit der Flexbox kann das float:left weg. Wenn die Menüpunkte sich über die Breite verteilen sollen, füge noch
flex: 1 0 auto;hinzu. Heißt: Element verbreitert sich nach Bedarf (die 1), verkleinert sich aber nicht unter seine Basisgröße (die 0) und die Basisgröße ist auto - basierend auf dem Menüinhalt. Die jetzige Darstellung kannst Du eh nur für eine Fensterbreite über 40em verwenden (was Du im CSS mit @media (min-width:40em) abfragen kannst) - schau im Selfwiki mal nach Media-Queries.Die a Elemente in den Menüs können dann auch display:block sein. inline-block verwendet man eigentlich nur, wenn es einen Textfluss gibt, in dem sich ein Blockelement bewegen soll.
Das Designprinzip ist "mobile first", d.h. Du gestaltest dein CSS so, dass es für einen kleinen Viewport passt, und mit @media-Queries aktivierst Du bei genügend breitem Viewport weitere CSS Regeln, die die Seite für "breit" anpassen. Dein Menü könnte dann zu einem Hamburger-Menü werden. Oder Du baust es so, dass es eigentlich in der schwarzen Navi links steht, aber bei breiten Bildschirm per position:absolute da rausgerissen und oben angezeigt wird. Die Kombi von Grid und @media macht interessante Sachen möglich.
Jedenfalls hast Du da einiges vor Dir, viel Glück 😉
Rolf
--
sumpsi - posui - obstruxi