HTML Text nach Hintergrundbild?
Hallo,
ich muss gerade eine einfache Website als Hausaufgabe programmieren und stoße auf einige Schwierigkeiten.
Aktuell hab ich 4 Hauprprobleme:
- Meine Navigationslieste im header ist trotz text-align: center, nicht mittig
- Ich habe im footer "2023", "Impressum" und "Alex" stehen. Impressum ist dabei ein relativer Link zu einer extra Seite und die 2 anderen Wörter sind einfach nur Wörter. Ich habe es geschafft "2023" links und "Alex" rechts zu positionieren, aber ich kriege das Wort "Impressum" mit dem Link nicht verschoben. Es ist zwar einigermaßen mittig, aber ist im footer selbst zu weit oben und ich krieg es nicht nach unten verschoben
- Ich habe in css ein Hintergrundbild eingestellt (damit der ganze Bildschirm abgedeckt ist). Nun möchte ich es aber so gestalten, dass anfangs das Hintergrundbild zu sehen ist und erst wenn man runter scrollt, soll der Text nach dem Bild kommen, anstatt auf dem Bild selbst
- Mein footer bleibt fest in einer Position, nämlich kurz vor Ennde des Hintergrundbildes, heißt sobald ich scrollen würde, wäre mein footer mitten drin, anstatt ganz am Ende der Seite. Ich habe alle möglichen position tags versucht, aber irgendwie scheint es nicht zu funktionieren
Kennt sich hier jemand gut damit aus und kann mir dabei weiterhelfen?
Ich bedanke mich schonmal sehr im vorraus.
Grüße Alex
Du wirst den HTML Code posten müssen. ggf anonymisiert und mit Dummy Bild
Ganz vergessen, danke fürs erinnern. Sollte demnächst dabei sein
2 Antworten
Für die Menüleiste kannst du sowas hier machen:
width: 100% und text-align: center für den Wrapper. Und dann max-width: 75rem und text-align: center für das eigentliche Menü.
Im footer-div machst du einen wrapper-div und schreibst:
max-width: 65rem
display: flex;display: -webkit-flex
display: -moz-box
display: -ms-flexbox
flex-wrap: nowrap
flex-direction: row
justify-content: center
align-items: stretch
Die drei Texte machst du dann jeweils in ein div und schreibst dann in css für diese divs:
text-align: center
Das mit dem Hintergrundbild habe ich nicht ganz verstanden. Wenn du nicht willst, dass das Bild sich über die ganze Seite streckt, dann musst du das Bild in html einfügen und nicht CSS. Dann kannst du es einfacher bearbeiten und verschieben.
Entferne einfach mal das Hintergrundbild und mach es erstmal so, dass die Seite funktioniert.
Ein Wrapper ist nur ein div, der erstmal dafür sorgt, dass deine Menüleiste (oder was auch immer) richtig positioniert ist und sich richtig verhält und nicht irgendwo rumspringt. Das eigentliche Menü kommt dann in einen eigenen div, der dann alle anderen Dinge übernimmt. Der Rest ist jetzt erstmal egal.
Ich schau mir nochmal die Bilder an, die du gerade reingestellt hast.
Alles klar. Also das Bild hab ich in html eingebaut und dann funktioniert auch alles mit dem footer (das er ganz unten ist). Jedoch sind links und rechts dann kleine weiße Balken und das Bild geht nicht über den ganzen Bildschirm
Kopier mir mal den html und css code hier rein, dann kann ich alles direkt umsetzen.
Bis wann soll die Hausaufgabe fertig sein?
<!DOCTYPE html>
<html>
<img src="bilder/hintergrund.jpg" alt="Hintergrund">
<head>
<meta charset="UTF-8">
<title>Umweltschutz</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="shortcut icon" type="image/png" href="bilder/icon.png">
</head>
<body id="landingpage">
<header>
<nav>
<ul>
<li><a href="landingpage.html">Home</a></li>
<li><a href="organisationen.html">Weitere Organisationen</a></li>
</ul>
</nav>
</header>
<footer>
<ul id="ul-landingpage">
<li id="jahr">©2023</li>
<li id="impressum"><a href="impressum.html">Impressum</a></li>
<li id="namen">Alex</li>
</ul>
</footer>
</body>
</html>
html {
height: 100%;
font-family: arial, sans-serif;
}
/*
body {
background: url(bilder/hintergrund.jpg);
background-repeat: no-repeat;
width: 100%;
}*/
img {
width: 100%;
}
header {
width: 100%;
height: 4rem;
text-align: center;
background-color: #c5c5c5;
position: fixed;
top: 0;
left: 0;
box-shadow: 0px 2px 5px grey;
}
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: blue;
}
nav ul {
list-style-type: none;
margin-top: 1.5em;
}
nav li {
display: inline;
text-align: center;
margin-left: 25px;
}
footer {
width: 100%;
height: 4rem;
text-align: center;
background-color: #c5c5c5;
}
#ul-landingpage {
list-style-type: none;
}
#ul-landingpage li {
display: inline;
text-align: center;
margin-top: 10px;
}
#jahr {
float: left;
margin-left: -30px;
color: #000000;
}
#impressum {
color: #000000;
}
#namen {
float: right;
margin-right: 10px;
color: #000000;
}
#urheberrecht {
width: 29%;
}
Okay, ich versuche dann mal entweder heute oder morgen etwas am Code zu schreiben. Falls hier sonst niemand mehr antwortet.
Das Hintergrundbild habe ich in html verschoben. Es war in dem <hea> tag, jetzt ist es zwischen <header> und <footer>. Die Elemente sollten in html dort stehen, wie sie auch auf der Webseite später sein werden. Also die richtige Reihenfolge.
Wie habe ich den weißen Rahmen um das Hintergrundbild entfernt? Ein <img> hat immer automatisch einen Leerraum um sich herum. Um den wegzukriegen, muss man das <img> in eine Art div-Element umwandeln. Das geht mit "display:block". Dann verhält sich das img wie ein div. Jetzt kann man in CSS einen neuen Code schreiben:
* {
margin:0;
border: 1px solid blue;
}
Dieser Code bedeutet, dass ALLE Elemente in dem Dokument, also jedes img, jedes div, alles ... keinen Margin mehr hat. Also einen Margin von 0. Damit entfernt man alle Leerräume und Lücken.
Und noch ein kleiner Tipp, wenn du mal Probleme hast. Schreib in CSS bei dem "*" einfach "border: 1px solid blue;" dann wird JEDES Element blau markiert und du kannst besser sehen, woher welche Lücken kommen, dann muss man nicht mehr lange suchen.
Die "id" von dem <body> (landingpage) kannst du eigentlich entfernen, weil body nur einmal vorkommt; das braucht keine ID. In CSS kannst du einfach "body" schreiben. Wie "html"
Deine Menüleiste ist eigentlich schon zentriert; da hab ich jetzt erstmal nix gemacht.
Den Text im footer habe ich mit "margin-left:20rem;" auseinandergeschoben. Aber die 20 rem vom ersten Text (2023) wieder entfernt mit "#ul-landingpage li:first-child: margin-left:0rem;". Das ist keine schöne Lösung, aber normalerweise würde auch nicht unbedingt mit ul und li arbeiten. Da gibt es bessere Alternativen.
Schau dir mal flexbox an https://css-tricks.com/snippets/css/a-guide-to-flexbox/). Damit kannst du ganz einfach Elemente anordnen. Natürlich muss man das erstmal verstehen, aber wenn man es kann, dann macht es alles soo viel einfacher.
Hier ist die html und css Datei: https://we.tl/t-X2i57fwbah
Vielen Dank für die Hilfe und Zeit. Das hört sich auf jeden Fall plausibel an. Danke auch für den Tipp mit der blauen border. Die flexboxen und die Datei werde ich mir mal anschauen sobald ich am PC bin. Danke dir vielmals
Hallo, ich melde mich nochmal bezüglich der Website. Dein Code hat auf jeden Fall funktioniert und alles passt super.
Ich habe nun aber erneut ein kleines Problem. Ich habe in CSS die ul-landingpage li mit einem margin-top: 1.5rem ausgestatte, damit der Text mittig im Footer steht. Dabei ist nun der Fehler aufgetreten, dass der normale Text mittig angezeigt wird, aber der Text von dem Link für das Impressum nicht. Wie kann ich das fixen?
Außerdem ist mir aufgefallen, dass der Text im Footer einen unterschiedlichen Abstand zum Rand hat. Das 2023 hat links mehr Abstand als der Name rechts. Woran liegt das? Lässt sich das mit den Flexboxen lösen?
Und gibt es eventuell noch einen Trick um das Bild mittig angezeigt zu bekommen? Der Text in der Navigationbar ist ja mittig und im footer dasselbe, aber es sieht trotzdem so aus, als wäre es nicht mittig. Einerseits sieht man, dass der Tetx im header nicht auf der selben Linie sind wir der Impressums Link im footer und andererseits ist der Impressums Link nicht direkt unterm Sockel der Glühbirne, sondern links davon.
Ich hoffe du kannst mir nochmal weiterhelfen. Ich wüsste es sehr zu schätzen.
Schick mir mal deinen Code. Lad die html und css irgendwo hoch und kopier hier alles rein.
Hier habe ich die Dateien hochgeladen https://we.tl/t-HWvxUY882r
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Umweltschutz</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="shortcut icon" type="image/png" href="bilder/icon.png">
</head>
<body id="landingpage">
<header>
<nav>
<ul>
<li><a href="landingpage.html">Home</a></li>
<li><a href="organisationen.html">Weitere Organisationen</a></li>
</ul>
</nav>
</header>
<img id="hintergrund" src="bilder/hintergrund.jpg" alt="Hintergrund">
<footer>
<ul id="ul-landingpage">
<li id="jahr">©2023</li>
<li id="impressum"><a href="impressum.html">Impressum</a></li>
<li id="namen">Alex</li>
</ul>
</footer>
</body>
</html>
html {
height: 100%;
font-family: arial, sans-serif;
}
* {
margin:0;
/* border: 1px solid blue; */
}
img {
display: block;
margin: 0;
width: 100%;
}
header {
width: 100%;
height: 4rem;
text-align: center;
background-color: #c5c5c5;
position: fixed;
top: 0;
left: 0;
box-shadow: 0px 2px 5px grey;
}
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: blue;
}
nav ul {
list-style-type: none;
margin-top: 1.5rem;
}
nav li {
display: inline;
text-align: center;
margin-left: 25px;
}
footer {
width: 100%;
height: 4rem;
text-align: center;
background-color: #c5c5c5;
}
#ul-landingpage {
list-style-type: none;
}
#ul-landingpage li {
display: inline;
text-align: center;
margin-left: 20rem;
margin-top: 1.5rem;
}
#ul-landingpage li:first-child {
margin-left:0rem;
}
#jahr {
float: left;
margin-left: 1rem;
color: #000000;
}
#impressum {
color: #000000;
}
#namen {
float: right;
margin-right: 10px;
color: #000000;
}
#urheberrecht {
width: 29%;
}
Mir ist gerade auch noch aufgefallen, dass auf den 2 Weiteren verlinkten Seiten (Weitere Organisationen und Impressum) nun das Bild fehlt. Wenn ich es auch in html hinzufüge, steht der Text jedoch erst nach dem Bild. Auf diesen zweiten Seiten will ich den Text aber auf dem Bild. Sollte ich hierfür das Bild in CSS als Hintergrund für die 2 Websites bestimmen?
(In CSS steht paar mal der Code "outline: solid 1px blue;" damit du siehst, wie die Elemente zueinander stehen und was sich genau verändert, wenn du was am Code umschreibst. Wenn du es nicht mehr brauchst, kannst du es löschen.)
In html hab ich für den Footer die ULs und ILs entfernt und daraus DIVs gemacht. In CSS wurde dann eine flexbox erstellt. Das löst ganz viele Probleme auf einmal.
Mit "display:flex" wird es zur flexbox. Mit "flex-flow:nowrap" wird verhindert, dass die Elemente in eine zweite Zeile springen. Mit "justify-content: space-between" wird gesagt, dass sich die Elemente auf die ganze Breite der Seite verteilen sollen. Und der Abstand links und rechts kommt von "width: 95%".
Dann wurde noch "padding-top" und "padding-bottom" hinzugefügt, damit oben und unten bisschen Platz ist.
Die Menüleiste habe ich nicht verändert. Die kannst du jetzt selber machen mit der flexbox. Das wird eine kleine Übung für dich. HTML hab ich schon verändert, du musst nur CSS machen und dich dabei am Code vom footer orientieren. Bei "justfy-content" kannst du dann entweder "space-between", "space-around" oder "space-evenly" wählen. Einfach mal probieren.
Und von nav kannst du auch die width ändern, wenn du willst. Momentan steht sie bei 50%.
Die Seiten "Weitere Organisation" und "Impressum" habe ich mir erstmal nicht angeguckt. Schau erstmal, dass bei der Landingpage alles wichtige steht, dann kannst du den Code einfach rüberkopieren. Wenn die Codes exakt gleich sind, dann wird auch alles funktionieren dort.
Alles kalr, vielen Dank. Ich schaue es mir gleich mal an.
Ich habe gerade noch einen Back to Top Button mit Font Awesome hinzugefügt. Dieser funktioniert auch einwandfrei, jedoch ist er durchgehend zu sehen. Gibt es hierfür eine Art visibility tag o.ä. damit der Button erst erscheint, wenn auf der Seite gescrollt wurde?
Also ich habe jetzt mal übernommen und auch den header hinbekommen. Vielen Dank erstmal.
Jedoch habe ich immer noch das Problem, dass der Impressums Link nicht mittig unter dem Sockel der Glühbirne ist. Gibt es irgendwie die Möglichkeit innerhalb der Flexbox den Impressumslink zu verschieben, so dass dieser mittig ist?
Ah und ich habe hier noch den Code für den Back to Top Button:
.totopbtn {
position: fixed;
width: 50px;
height: 50px;
background-color: #585858;
bottom: 40px;
right: 50px;
text-decoration: none;
text-align: center;
line-height: 50px;
color: #000000;
font-size: 20px;
}
.totopbtn:hover {
background-color: #2E9AFE;
}
In HTML habe ich diesen über den Font Awesome Link eingefügt
"Impressum" ist bei mir exakt mittig unter dem Sockel. Ich hab mit Photoshop nochmal nachgemessen und es passt perfekt.
Ich habe rausgefunden, was der Fehler ist. Wenn ich nämlich meinen Namen im Footer ändere (ich habe extra nur meinen Vornamen benutzt anstatt den ganzen Namen) dann verrutscht das ganze nach links. Wie kann ich hier meinen Vor- und Nachnamen reinschreiben, ohne, dass das passiert?
Nachdem ich nun alles übernommen und leicht angepasst habe (farben etc), stellen sich mir wieder ein paar Fragen, weil ich an einigen Stellen nicht weiterkomme.
Das erste Problem ist, dass vorher beschriebene, dass der Impressumslink nicht mehr mittig ist, sobald ich meinen vollständigen Namen eingebe, anstatt nur Alex.
Das zweite Problem ist der Back to Top Button, den ich vorher erwähnt hatte. Ich will dass dieser erst angezeigt wird, wenn man auch gescrollt hat und nicht wenn man eh schon am Seitenafang ist (den Code hierzu habe ich auch schon geschickt)
Das dritte Problem: Ich möchte auf der Landing Page einen Scroll Down Button, also einen Button, welcher etwa am Sockel der Glühbirne platziert ist und mich beim anklicken dann zum Inhalt bringt (diesen muss ich noch hinzufügen und er würde direkt nach dem Bild anfangen)
Das vierte Problem ist, dass ich auf den 2 weiteren Seiten den Text auf dem Hintergrundbild haben möchte und nicht erst danach, wenn man scrollt.
Ich kriege die Probleme alle nur teilweise gelöst, weil bis zu einem bestimmten Punkt komme, dann aber trotzdem etwas noch nicht passt oder funktioniert.
Kennst du hierfür simple Lösungen und könntest mir eventuell nochmal weiterhelfen.
Ich würde mich sehr freuen und Bedanke mich schonmal im Vorraus bei dir.
Grüße Alex
#impressum ist jetzt mittig. Dafür habe ich den drei Elementen einfach eine Breite gegeben (width: 10rem), damit sie alle ihre eigene Box haben und dann mit "text-align:center" sie in ihrer Box zentriert.
Für die width "rem" zu benutzen ist hier ganz wichtig, weil sich mit px oder % die Boxen am gesamten Dokument orientieren und mit rem sind sie abhängig vom Text - also wenn die Seite dann kleiner wird (responsive), dann geht der Text nicht über die Box hinaus, weil die Box immer größer bleibt als der Text. Mit width: 10% würde die Box immer kleiner werden und "Impressum" würde ab einem bestimmten Punkt nicht mehr mittig sein und aus der Box rausfließen.
Hier ist der Code:
#jahr, #impressum, #namen {
outline: solid 2px red;
width: 10rem;
text-align: center;
}
Für den back-to-top-Button fehlt mir der HTML-Code, aber eigentlich muss man es auch gar nicht so machen, dass er erst nach dem Scrollen erscheint, weil ein Scroll-Button sowieso nicht sichtbar ist, wenn man nicht unten angekommen ist. Und wenn man den von Anfang an schon sieht, dann ist er ja eh unnötig, weil man nicht so viel zu scrollen braucht.
Ansonsten kannst du dir sowas heir anschauen: "https://stackoverflow.com/questions/61246614/make-element-visible-only-if-scrolled-down-or-page-higher-than-video-css-only" oder mit javascript: "https://css-tricks.com/how-to-make-an-unobtrusive-scroll-to-top-button/"
Für den Scroll-Button, mit dem man nach unten scrollt, habe ich ein paar Code zeilen geschrieben. Das ist etwas schwieriger. Die Idee ist, dass der Scroll-Button einfach nur ein Link ist (<a>), aber bei "href" steht keine Webseite, sondern eine ID oder Klasse, die unten im Dokument auftaucht. Also mit dem Link "<a class="scroll-down" href="#zielobjekt">Springe nach unten </a>" springt man auf den Code ganz unten "<div id="zielobjekt">Hier ist das Zielobjekt</div>". Also bei href steht "#zielobjekt", und das die genau die ID von dem DIV ganz unten, zu dem man springen soll.
In CSS muss man "html {scroll-behavior: smooth;}" schreiben, damit das Springen flüssig ist -> also ein normales Scrollen.
Damit der Link aber auf dem Bild drauf ist, muss man ein wenig was in CSS schreiben. Das siehst du bei "#hintergrund" und ".scroll-down". Und der nav ganz oben hat noch ein "z-index: 999;" bekommen, sonst würde er verschwinden durch den neuen Code vom Hintergrundbild.
Den Text beim Sockel "Springe nach unten" kannst du dann verschieben und formatieren wie du willst. Und das ganze <br><br><br><br>-Zeug kannst du natürlich auch alles löschen und den div auch.
Bei den anderen Seiten, wo der Text auf dem Bild sein soll, funktioniert genauso wie bei "Springe nach unten". <nav> muss erst z-index:999 haben (hat es ja bereits), und das Bild kriegt dann den Code, den ich bereits geschrieben habe, und die Texte bekommen dann ein "position: absolute; und mit top und left kannst du sie verschieben wie du es bei ".scroll-down" schon gesehen hast.
Ah verstehe, so ergibt das natürlich Sinn, dafür bin ich wohl noch nicht genug im Thema drin, um das schon zu kennen.
Vielen Dank für deine erneute Hilfe. Ich werde es gleich mal ausprobieren.
Hallo, ich hatte leider erst jetzt Zeit das ganze auszuprobieren. Ich habe das ganze jetzt so übernommen und auch selber noch etwas erweitert und es passt auch alles so weit.
Ich habe jetzt auch nur noch 2 kleinere Probleme:
1.) Dadurch, dass das Jahr, Namen und Impressum nun eine Box um sich haben und der Name in 2 Zeilen geschrieben wurde (ist zu lang gewesen), waren dann das Jahr und der Impressum Link nicht mehr mittig (nach oben und unten). Ich habe hierfür die Box einfach größer gemacht, wodurch das auch nur teilweise gelöst wurde.
Nämlich ist es dann so, dass das Jahr leinen viel größeren Abstand zum linken Rand hat, als der Name zum rechten Rand. Außerdem wird der Name beim zusammenziehen/kleiner mache der Seite wieder in 2 Zeilen geschrieben, wodurch erneut der Rest nicht mehr nach oben und unten mittig ausgerichtet ist. (Das gleiche Problem tritt auch im Header auf).
Wie kann ich das fixen?
2.) Auf der weitere Organisationen Seite habe ich Bilder eingefügt und diese mit einem Link hinterlegt. Ich habe für diese das Prinzip von der Box übernommen, aber leider klappt das nicht so ganz.
Das Bild ganz rechts ist zu weit rechts, so dass man nach rechts scrollen muss, um es ganz zu sehen. Das sollte im besten Fall nicht so sein.
Hinzu kommt, dass die Bilder beim zusammenziehen/kleiner machen der Seite, irgendwann überlappen (ich glaube das liegt daran, dass ich ihnen einen Größe von 17rem gegeben habe, welche zwar auf Full Screen gut ist, aber bei kleinerem Screen nicht mehr. Die Bilder haben auch leider alle eine andere Ausgangsgröße, weswegen ich hier nicht ganz weiß, was die beste Option ist).
Ist es hier möglich, dass die Bilder mit Verkleinern des Screens prozentual an Größe abnehmen? Und kann ich das irgendwie an die dazugehörigen Überschriften (Klimaschutz, Wasserschutz, Naturschutz) koppeln? Also dass einerseits die Überschriften mittig über den Bildern platziert sind (nicht wie bei mir mit einer Flexbox gleichmäßig über den Screen verteilt) und auch mit en Bildern zusammen schrumpfen, wenn der Screen verkleinert wird (aber trotzdem mittig darüber bleiben)?
Laut meinem Lehrer muss hier auch nichts full responsive gemacht werden, sondern es reicht ihm, wenn Bidler etc. in prozentualen Werten usw angeben sind und es quasi proportional zur Screengörße verkleinert/vergörßert wird.
Ich habe dir hier auch nochmal den neuen Code hochgeladen, da er mittlerweile viele neue Namen etc. hat.
Und nicht wundern, dass Hintergrundbild wurde geändert und wird auch nochmal in der Höhe angepasst. Das sollte aber glaube ich kein Problem für den Rest vom Code darstellen.
Den Back to Top Button, siehst du hier dann auch (diesen werde ich aber wahrscheinlich noch nach dem selben Prinzip, wie den Scroll Down Button machen). Beide Buttons muss ich dann noch stylen.
Vielen Dank und liebe Grüße
Alex
Hallo, ich habe jetzt gerade den back to top button nach dem Prinzip von deinem Scroll down Button erstellt und dafür ein Screenshot von dem alten Button (der, der in dem Code ist, den ich dir geschickt habe) eingefügt.
Gibt es eine Möglichkeit, dass ich diesem Bild eine andere Farbe geben kann wenn ich mit der Maus drüberfahre? Mit :hover funktioniert das bei mir irgendwie nicht.
Und gibt es hier dann die Möglichkeit, dass ich das Bild von dem Button erst anzeigen lassen kann, wenn man minbdestens 1 mal gescrollt hat und sobald man wieder am Anfang der Seite ist, soll der Button wieder nicht angezeigt werden?
Den Code dafür habe ich aktuell so gestaltet:
<a id="backtotop" href="#top"><img id="btt-button" src="bilder/backtotop.png" alt="Zurück nach oben"></a>
#backtotop {
position: fixed;
top: 90%;
left: 95%;
}
#btt-button {
width: 4rem;
height: 4rem;
}
Grüße Alex
Beim Footer habe ich nun bei dem Jahr das "text-align: center;" entfernt. Jetzt ist der Abstand links und rechts gleich. "Impressum" bleibt weiterhin in der Mitte, aber wenn die Seite kleiner wird, dann kommt das Jahr und der Name näher in die Mitte und dann merkt man, dass der Abstand von Jahr zu Impressum größer ist als von Name zu Impressum.
Das kann man aber auch nicht verhindern, sonst müsste man den Abstand links und rechts wieder verändern.
Die Flexbox auf der "Organisation"-Seite funktioniert jetzt. Schau dir in html ganz genau an, wie die divs erstellt sind und welche du dort brauchst. Das ist oft immer das gleiche Schema: erst ganz generell ein div mit ".org" wo alles rein kommt und dann darin ein "wrapper", der die Funktionen setzt, z.B. "margin: 0 auto;", damit es zentriert ist (blaue box), und so weiter ...
Die Bilder, die du verwendet hast, sollten im besten Fall alle dieselbe Größe haben, entweder alle quadratisch oder zumindest dieselbe Breite.
Dass die Bilder kleiner werden sollen, wenn der Bildschirm schrumpft, funktioniert schon automatisch. Aber vorher werden die Elemente erstmal zusammengezogen, also sie kommen näher zusammen, was auch richtig ist. Also es funktioniert schon alle so, wie es sollte.
Um die Seite auch für mobile Geräte zu optimieren, muss man später natürlich noch ein @media querry hinzufügen. Da wird dann ein neuer CSS Code geschrieben, wenn die Seite z.B. kleiner als 750px wird. Dann werden z.B. Elemente, die nebeneinander angezeigt werden, untereinander angezeigt, weil auf mobilen Geräten oft kein Platz ist, um Dinge nebeneinander zu positionieren. Aber das brauchst du erstmal alles nicht.
Das backtotop-Bild kannst du ganz einfach in CSS mit diesen Befehlen ändern (einfach das aussuchen, was du brauchst)
.backtotop:hover {
filter: saturate(3);
filter: grayscale(100%);
filter: contrast(160%);
filter: brightness(0.25);
filter: blur(3px);
filter: invert(100%);
filter: sepia(100%);
filter: hue-rotate(180deg);
filter: opacity(50%);
}
Das mit dem Scrollen und dass der Button erst danach angezeigt werden soll und wieder verschwinden geht mit javascript. Ich weiß nicht, ob das mit CSS möglich wäre. Wenn, dann ist es bestimmt sehr kompliziert. Ich bezweifle aber auch, dass ihr das für die Aufgabe braucht. Das sind aber auch eher Dinge, die man braucht, wenn die Seite wirklich extrem lang ist. Ich würde erstmal dafür sorgen, dass die Seite von Grund auf gut funktioniert und keine Fehler hat, bevor ich dann solche "Spielereien" und Animationen mache. Denn wie du siehst, ist man ja mit den einfachen Dingen schon gut beschäftigt.
Alles klar, vielen Dank. Das ergibt Sinn, war wohl einfach zu durch um das alles genau zu verstehen.
Ich werde mal alles übernehmen sobald ich zu Hause bin.
Eine Sache ist mir aber vorher noch aufgefallen:
Nämlich habe ich den Text auf der Impressumsseite ja auf das Hintergrundbild gepackt und dieser wird auch kleiner, wenn ich die Seite kleiner mache. Jedoch ist hier das Problem, dass zwar alles schrumpft, aber unabhängig voneinander. Heißt der Text hat seine feste fontsize, wodurch er nicht auf dem Hintergrundbild bleibt, wenn die Seite kleiner wird, sondern das Bild wird kleiner, aber der Text steht dann auf die ganze Höhe der Seite, anstatt auf dem Hintergrundbild zu bleiben.
Kann man das mit position: fixed erreichen oder gibt es eine Art Code, welche die Fontsize auch in einen prozentualen Wert umwandelt?
Vielen Dank dir für die Hilfe und Grüße
Alex
Hallo, ich nochmal.
Ich habe alles übernommen, wieder ein paar Kleinigkeiten erweitert/geändert und Stoße erneut auf kleine Fehler.
Vielleicht habe ich irgendwie in meinem Tatendrang selber etwas an Code zu schreiben, wichtige/notwendige Zeilen Code gelöscht oder geändert, wodruch un diese Fehler entstanden sind, aber ich kann diese nicht ausfindig machen.
Die Probleme sind Folgende:
1.) Die Wörter im Footer sind nun alle wieder in einer Zeile und mittig platziert, nur ist wieder der Impressum-Link zu weit links. Ich kann mir nicht erklären warum.
2.) Im Header sind die 2 Seitene Links aktuell nicht in einer Zeile, was den Header etwas groß wirken lässt. Verkleinere ich in CSS die Boxen, welche ich um die Wörter gelegt habe, dann sind die Links zwar in einer Zeile, aber scheinen auch nicht mittig zu sein oder der Abstand zwischen diesen ist zu groß.
Hinzu kommt, dass wenn man die Website kleiner macht, zwischen den beiden Links der Abstand komplett fehlt.
3.) Den Scroll Down Button habe ich nun auch mit einem Bild eingefügt und an die gewünschte Position verschoben. Das funktioniert auch alles super.
Jedoch ist hier das Problem, dass das Bild nicht an den Hintergrund gekoppelt ist. Das heißt wenn die Seite kleiner wird, wird das Bild nicht kleiner und bleibt durch die vorgegebene Position am unteren Ende der Seite und nicht am unteren Ende des Hintergrundbildes.
Gleiches Problem gilt für die Bidler auf der Organisationen Seite und den Text auf der Impressumsseite.
Hinzu kommt bei den beiden Seiten, dass der Text beim scrollen fest bleibt, was dazu führt, dass dieser beim Scrollen üebr den Header rutscht bzw. über alles rutschen würde, was auf der Seite an Inhalt noch angezeigt wird.
4.) Der Back to Top Button hat nun auch die gewünschte Position bekommen und bei diesem tritt auch das Problem der festgelegten Position auf. Das Bild sollte nämlich über dem Footer bleiben und nach dem Inhalt kommen.
Beim kleiner machen der Seite bleibt dieser aber ganz unten rechts anstatt über dem Footer zu bleiben.
Der Footer soll also das Ende der Website sein, aber auch nicht wie der header eine fixed position haben.
Das heißt das Bild des Buttons, sollte auch mit der Seite schrumpfen und quasi am Ende der Seite, über dem Footer, rechts im Eck bleiben, wenn die Seite kleiner wird.
Aktuell tritt auch das Problem auf, dass das Bild vom Button beim kleiner machen der Website nurnoch zur Hälfte zu sehen ist, anstatt ganz.
Ich glaube ich stehe hier vor eher kleineren Problemen, aber mache noch zu viele Leichtsinnsfehler/habe noch nicht genug Kenntniss, um auf den richtigen Lösungsweg zu kommen.
Ich habe schon versucht, mit dem was ich bis gelernt hab, die Probleme zu lösen und kriege das dann teilweise hin, aber dann treten durch meinen Lösungsweg neue Probleme auf, welche ich wieder nicht gelöst bekomme.
Deswegen hoffe ich, dass du mir nochmal helfen kannst und bedanke mich schonmal sehr im vorraus bei dir.
Du hast mir bis jetzt immer sehr gut geholfen und ich konnte durch dich auch viel neues lernen, was mein Lehrer mir nicht beibringen konnte.
Grüße Alex
Dein Vorhaben mit dem Impressumstext, der mit dem Bild schrumpft, wird nicht funktionieren. Hier siehst du mal, wie es aussieht, wenn das Fenster auf 480 Pixel schrumpft (also ein Viertel von einem 1.920 Pixel Monitor): https://i.ibb.co/FmbbGTW/Unbenannt.png. Man kann nichts mehr lesen. Es ist einfach zu viel vertikaler Text. Besser wäre, wenn der Text horizontal wäre.
1. Den Code vom Impressum hättest einfach nochmal runterladen können und dann austauschen. Ich hab das mal schnell gemacht. Aber "Impress" ist trotzdem genau in der Mitte. Dein Kreis zum nach unten Scrollen ist nur zu weit rechts.
2. Die Menüleiste müsste nun perfekt funktionieren. Schau dir dazu den CSS Code von .header-wrapper, .header, .header nav und .header nav a an. Vielleicht versteht man es nicht auf Anhieb, aber auf alle Fälle funktioniert er und du kannst ihn auch für spätere Projekte benutzen.
3. Der Scroll Down Button ist jetzt gekoppelt mit dem Bild. Den Code kannst du dann auch für Impressum-Seite kopieren.
4. Button zum hoch Scrollen funktioniert jetzt auch. Er muss natürlich viel kleiner werden, weil er sonst stört und über dem Namen steht.
Ich würde von nun an, nicht mehr solche kleinen Dingen programmieren und mich auf das Große und Ganze konzentrieren. Solche Buttons zum hoch und runterscrollen braucht man eigentlich nur bei ganz großen Webseiten.
Vielen Dank, ich werde das mal die Tage ausprobieren.
Den Impressumstext werde ich mal anpassen, dass er horizontal ist.
Ich bin aktuell an diesen ganzen kleinen Spielerein, weil die Seite quasi fertig ist, bis auf den Inhalt auf der Home Seite. Da ich noch ein paar Wochen Zeit habe für die Abgabe, füge ich grade nur noch solche Kleinigkeiten dazu, die zwar nicht gefordert waren, aber das Gesamtbild doch nochmal abrunden.
Okay, ich habe jetzt alles übernommen und selber wieder etwas geändert.
Ich habe wieder ein paar kleine Probleme.
1.) Dadurch dass der Back to Top Button nun im Footer ist, ist dieser für meinen Geschmack zu dick. Gibt es eine Möglichkeit diesen außerhalb vom Footer zu platzieren, so dass er unten im rechts im Eck ist, aber nicht im Footer und dort auch bleibt? Ich schaffe es nur den Button dort zu platzieren, aber sobald der Screen kleiner wird, rutscht er über den Footer drüber, was nicht passieren soll.
Außerdem wird beim Verkleinern des Screens der Button nurnoch zur Hälfte abgebildet bzw ist nur noch zur Hälfte sichtbar (in die Breite)
2.) Der Header funktioniert so weit, ist aber nicht so richtig zentriert bzw. habe ich hier eine Vorstellung, bei der ich nicht weiß, wie und ob man diese umsetzen kann.
Dadurch, dass die 2 Seiten unterschiedlich lange Wörter haben, kann man sie zwar zentrieren, es sieht aber nicht zentriert aus. Deswegen dachte ich, man könnte die Lücke, welche zwischen den 2 Seiten-Links ist, nehmen und quasi die Mitte dieser Lücke zentrieren. So wäre zwar der Abstand nach links und rechts nicht gleich, aber eventuell sieht es besser aus?
Geht das? Oder gibt es eine andere Lösung damit das Ganze nicht nur zentriert ist (wie jetzt), sondern auch noch so aussieht?
3.) Den Text beim Impressum habe ich jetzt schonmal ein wenig geändert, um damit weiter arbeiten zu können.
Was hier mein Plan ist, ist das Worft "Impressum" zwischen Header und dem "AXAN" vom Hintergrundbild zu zentrieren und den Rest dann unter der Schrift vom Hintergrund zu platzieren. Dabei würde ich dann auch die Kontaktdaten in eine Flexbox nebeneinander machen (wie bei den Bildern auf der Organisationen Seite) und darunter dann den Text.
Hier bräuchte ich nur deine Hilfe, wie ich am schlausten das Wort "impressum" so zentriert bekomme, wie ich es will. Oder ist hier die beste Option das Ganze auch einfach mit Prozentwerten zu verschieben bis es nach Augenmaß mittig aussieht?
Außerdem hätte ich noch 2 allgemeine Fragen zum Code:
1.) Beim Header in CSS hast du display: -webkit-flex etc. benutzt. Wofür genau ist das? Ich habe es aus dem Code gelöscht und keinen Unterschied bemerkt.
2.) Bei Header nav in CSS stehen zwei heights. Eine der beiden kann man löschen oder? Bzw. die 2. da immer der erste Wert genommen wird, soweit ich weiß.
Ich hoffe du kannst mir nochmal mit deinem Wissen helfen und mir sagen, ob meine Ansätze möglich sind und wie man diese umsetzen kann.
Danke und Grüße
Alex
1. Der btt-button ist jetzt aus dem Footer raus. Ist zwar noch im <footer> tag drin, aber bewegt sich jetzt frei auf der Seite. Mit dem "top: 85%;" kannst du ihn nach Belieben verschieben und mit "filter: opacity(...);" und dem hover so einstellen, wie du es willst. Zudem erscheint er jetzt auch erst dann, wenn man runterscrollt. Dafür habe ich einen ganz simplen javascript Code gefunden, der in html unter dem <footer> steht.
2. Den Header asymmetrisch zu machen, geht ganz einfach. Jetzt ist er 4rem nach rechts, weil die Lücke auch genau 4rem groß zwar zwischen ihnen, und jetzt ist genau diese Größe nach rechts gerrückt. Der Code dafür ist bei #header mit "padding-left: 5rem; padding-right: 1rem;". Wenn du es wieder zentriert haben willst, dann machst du statt padding-left/right wieder "padding: 0 2.5rem;" wie vorher.
3. Den Code um "Impressum" über dem Bild zu platzieren, siehst du bei ".impressum-header". Hoffe, das wolltest du so ungefähr haben. Wie du den Text platzieren wolltest, weiß ich nicht. Vielleicht auch auf dem Bild wie Impressum, nur weiter unten. Wie das geht, siehst du ja an den anderen Elementen, die über dem Bild sind. Also mit "position: relativ;".
"position: absolute;" solltest du übrigens versuchen zu vermeiden, wenn möglich. Generell würde ich am Anfang immer versuchen, Dinge untereinander anzuordnen, statt übereinander, weil es schnell kompliziert wird und viel dadurch kaputt gehen kann, und sich ganz komisch verschiebt, wenn die Seite responsive werden soll.
Denn das kommt ja am Ende sowieso auf dich zu, weil die meisten Webseiten auf mobilen Geräten aufrufen.
Manchmal siehst du dieses -webkit oder -moz, das ist nur dafür dar, dass der Code auch auf anderen Browsern funktioniert. Mittlerweile ist das nicht unbedingt notwendig, weil fast alles überall funktioniert, aber stört nicht, wenn es da ist.
Du solltest irgendwann auch probieren, ob die Seite auf verschiedenen Browsern läuft, denn es kann sein, dass ein bestimmter CSS code nicht funktioniert, weil er später dazugekommen ist, wie eben flexbox.
Die zwei heights beim Header sind wohl ein Fehler, ich habe den oberen gelöscht. Der CSS Code wird immer von oben nach unten gelesen, deswegen habe ich den oberen entfernt, weil er nicht aktiv war.
Manchmal musst du beim CSS Code wirklich überlegen, was oben steht und was unten, weil manchmal einen Code schreiben musst, der abhängig ist von dem, was davor stand.
Deswegen immer sowas wie Größen und Positionen nach ganz oben.
Alles klar, vielen Dank, ich probier das ganze mal aus.
Ich habe schon bemerkt, dass der Code in verschiedenen Browsern leicht anders aussieht. Ich schaue gleich mal, ob das -webkit etc. das Ganze verbessert.
Das mit dem javascript Code ist natürlich super.
Vielen Dank
Okay, ich habe das Ganze nun übernommen und auch mal header, footer etc in die anderen Codes übertragen, damit man das Gesamtbild besser erkennt.
Das mit dem "Impressum" passt so weit, das habe ich nun schon etwas verschoben und passe es demnächst weiter an. Ich habe heute leider keine Zeit mehr dafür.
Mir sind aber wieder ein paar Kleinigkeiten aufgefallen, die ich schonmal aus dem Weg räumen wollte, bis ich wieder weitermache.
1.) Auf der Impressums Seite ist mir eine Lücke zwischen dem Hintergrundbild und dem header aufgefallen. Man kann also etwas hochscrollen.
Ich konnte leider nicht ausfindig machen, woran das liegt. Das Verschieben von "Impressum" hat daran auch nichts geändert und ich sehe auch im Code keine margin oder padding tags, die das auslösen könnten.
2.) Für den Text auf der Impressum Seite habe ich mir nochmal Gedanken gemacht und bin auf folgende Idee gekommen:
Impressum bleibt oben mittig (so wie aktuell eingestellt), darunter soll mittig das Wort "Kontaktinformationen" und darunter dann die Namen usw. Diese sollen dann nebeneinander sein, wie die Bilder auf der Organisationen Seite (also auch mit einer flexbox oder?). Und der Text zum Urheberrecht soll dann einzeln stehen und zwar nach der Schrift auf dem Hintergrundbild, so dass man nicht scrollen muss. Man soll also den gesamten Text sehen wenn man auf die Seite kommt und den footer erst wenn man runter scrollt.
Mein Plan dafür wäre nun gewesen, "Kontaktinformationen" so zu verschieben, wie es bei "Impressum" gemacht wurde. Die 2 Kontaktdaten würde ich in eine Flexbox machen (wie die Bilder der Orga Seite) und den Urhebertext auch wieder nach dem Prinzip von "Impressum".
Ist das so möglich oder entstehen dadurch Probleme?
3.) Ich habe hier mit #impressum-text den ganzen Text mit position absolute so verschoben, dass er auf dem Hintergrundbild ist (das ist noch von ganz am Anfang). Mit position relative gelangt der Text bei mir unter das Hintergrundbild. Gibt es hier eine Lösung mit position:relative? Da du meintest, man solle position:absolute am besten nicht verwenden.
4.) Das -webkit habe ich wieder in #header nav eingefügt. Meine Frage ist, ob ich das lieber in CSS bei html einfügen sollte, damit es für den ganzen Code wirksam ist. So sollte es gerade ja nur für den header zählen oder?
5.) Auf der Home Seite ist zwischen dem Hintergrund dem "Erneuerbare Energien:" eine Lücke. Ich würde diese gerne kleiner machen, aber finde hier auch keinen margin oder padding tag, der das verursacht. Ich glaube mir geht es hier gerade so ähnlich, wie wenn man irgendwo ein Semikolon vergessen hat und jetzt Jahre sucht, bis man es findet.
6.) Wie bekomme ich den javascript Code in eine externe Datei? Wenn ich eine .js Datei erstelle und in html mit <script src="button.js"></script> in den head einfüge, funktioniert es nicht mehr, dass der Button erst nach dem Scrollen angezeigt wird.
Wie gesagt, ich glaube das meiste hiervon sind wieder Kleinigkeiten und ich bin auf der Suche nach der Nadel im Heuhaufen und übersehe, was direkt vor meinen Augen liegt.
Ich hoffe du kannst mir erneut weiterhelfen und bedanke mich schonmal im vorraus.
Grüße Alex
1. Die Lücke auf der Impressum-Seite ist der Hintergrund (also body). Solche kleinen Fehler kann man immer schnell prüfen, wenn man bei body die Hintergrundfarbe ändert. Ich lasse meine Hintergrundfarbe immer auf Rot, dann sehe ich sofort, wenn irgendwo eine Lücke entsteht.
Da alle Seiten dieselbe CSS haben, muss es irgendwas in html sein. Und in diesem Fall liegt es an dem <h1> "Impressum". Ich habe diesen einfach weiter unten im Code platziert, also nach dem Hintergrundbild. Und dann in css die Höhe noch angepasst.
2. Yepp. Das geht alles mit einer flexbox. Das solltest du eigentlich hinkriegen. Ist für mich grad schwer vorzustellen, wo du welchen Text hinhaben möchtest, aber rein technisch ist es erst einmal möglich.
3. Den Code für den Text habe ich nochmal geändert, html und CSS. Davor ist der Text aus dem Bild rausgelaufen und man konnte nichts mehr sehen, wenn die Seite kleiner gemacht wurde. Jetzt bleibt wenigstens der Text über dem Bild. Natürlich muss aber trotzdem noch mit @media der Text angepasst werden, damit er nicht irgendwann über dem Logo ist und man nichts mehr lesen kann.
4. Das -webkit sollte lieber direkt unter dem flexbox Code stehen. Wie gesagt, kannst du es eigentlich auch weglassen, weil mittlerweile sowieso alles funktioniert. Und irgendwann musst du sowieso die Seite auf mehreren Browsern und Gräten ausprobieren. Dann wirst du mögliche Fehler schon erkennen.
5. Das Problem hat sich jetzt mit dem neuen html Code für das Hintergrundbild gelöst. Ich glaube, das lag an dem <h1>, weil es automatisch mit bestimmten Eigenschaften kommt wie Zeilenhöhe, Schriftgröße, etc.
Der einzige Abstand, der jetzt noch da ist, kommt von padding-top und -bottom.
6. Die Verlinkung in html sieht so aus "<script type="text/javascript" datei.js"></script>"
Der Buttom zun nach unten Scrollen funktioniert übrigens nicht richtig. Mach mal ein "* {outline: solid 1px red;}", dann siehst du, dass über dem Button nochmal eine Box erscheint. In der alten Version war das nicht so.
Je mehr Code wir jetzt schreiben, desto mehr kann auch kaputt gehen und desto schwieriger wird es, eine Lösung zu finden, weil alles aufeinander aufbaut. Aber das lernt man erst mit der Zeit, wie man es so schreibt, dass alles gut zusammenarbeitet.
Okay, vielen Dank.
Ich probier das heute Abend mal alles aus. Hoffentlich klappt das mit der javascript Datei nun.
Woher das mit dem Scroll down Button kommt, kann ich mir nicht wirklich erklären. Aus der alten Version, also die, die du mir davor geschickt hast, habe ich den Button eigentlich nur in der Position verschoben. Ich schau mir das mal an.
So Hallo, ich melde mich nochmal.
So langsam aber sicher sind die stärksten Probleme behoben und mir sind nurnoch ein paar kleinere aufgefallen, welche mir bei der Abgabe nur noch die letzten 1 bis 2 Punkte geben.
1.) Das Problem mit dem Button zum runter Scrollen habe ich gelöst. Ich hatte sowohl im div als auch beim img dieselbe id benutzt. Ich habe nun eine davon entfernt und es gibt die 2te Box nicht mehr.
2.) Es gibt nun aber ein neues Problem mit dem Button. Nämlich verschiebt und verschwindet er, wenn man die Seite verkleinert.
Das ist ein Problem, was bei den meisten anderen Inhalten in unterschiedlichen Formen auftritt. Dazu siehst du ganz am Ende von dieser Nachricht noch einen Absatz, in welchem ich Beschreibe, wie man das Problem für alle diese Inhalte lösen kann (glaube und hoffe ich zumindest).
3.) Die Bilder und Überschriften auf der Organisationen Website werden nicht mehr kleiner, wenn man die Seite verkleinert.
4.) Die 4 <br> bei der Impressumsseite sind, so wie ich es verstanden habe, unerlässlich oder? Ich denke dies wird auch geändert/gelöst, wenn du den letzten Absatz liest.
5.) Auf der Impressum Seite habe ich den Text nun so angeordent wie ich möchte. Hier gibt es nun nurnoch 2 kleine Styling Aspekte.
Nämlich ist meine Frage, ob man den Abstand zwischen den Kontaktdaten im kontakt-wrapper selber verkleinern kann? Ich denke, wenn die 2 Teile enger beieinander sind, sähe es besser aus.
Und 2. möchte ich den Urheber Text in einen Block machen. Heißt ich möchte, dass die Zeilenumbrüche, die ich HTML eingefügt habe, bleiben, aber der ganze Text insgesamt soll quasi ein rechteckiger Block sein (ähnlich wie ein Blocksatz bei Word), damit die eine Zeile nicht über den ganzen Bildschirm geht, sondern das ganze lesbarer ist.
Ich habe das ganze mit width:50% hinbekommen (ist glaube ich nicht die schönste Lösung dafür) und habe diesen mit left:31rem nach Augenmaß verschoben. Gibt es hier eine genauere Alternative?
6.) Wenn du dir die Seite so anguckst (am besten in Edge, dann verstehst du besser, was ich meine), dann siehst du wahrscheinlich auch, dass diese nicht zentriert ist.
Ich habe z.B. den Button zum runter scrollen und den Urheber Text nach Augenmaß zentriert (hab mich am Logo meines Bildschirms orientiert, welches, nachgemessen, mitig ist) und unter diesem Aspekt sieht man dann, dass der Impressum-Link im Footer zu weit links ist, das Hintergrundbild glaube ich auch und wahrscheinlich auch die ganze Seite.
Ich weiß nicht woher das kommt oder ob das an Edge liegt, aber in Firefox ist das Problem zwar auch da, aber nicht so stark wie bei Edge. In Firefox ist der Impressum-Link im footer auch weiter links, als die Mitte, aber bei weitem nicht so weit, wie bei Edge. Bei den Bildern auf der Organisationen Seite auch.
Und nun der angesprochene Absatz:
Ich habe heute erfahren, dass meinem Lehrer weichtig ist, dass die Seite nicht responsive ist, sondern die Inhalte alle einheitlich schrumpfen. Das heißt, was wir am Anfang beachtet haben (z.B. dass der Impressums Text horizontal sein soll, um ihn besser lesen zu können, wenn man die Seite verkleinert usw.) ist eigentlich egal. Es geht nämlich darum, dass der Inhalt auf den Seiten quasi an den Hintergrund gekoppelt ist.
Heißt: Ob man den Text bei verkleinertem Fenster noch lesen kann oder den Button zum Scrollen noch sieht, ist egal. Wichtig ist, dass alles, was es an Inhalt gibt, an den Hintergrund gekoppelt ist und mit diesem Schrumpft. Texte und Bilder sollen also proportional zum Hintergrund sein.
Für mein Verständnis kann das ein paar der oben genannten Probleme lösen. Zumindest hoffe ich es.
Liebe Grüße
Alex
Hallo, ich melde mich nochmal.
Ich habe heute den ganzen Inhalt (Text) auf der Landingpage hinzugefügt und mir sind noch weitere Kleiniugkeiten aufgefallen, als ich im styling etwas ändern wollte.
1.) Auf der Organisationen Seite, habe ich das mittlere Bild farblich invertiert und möchte das Hintergrundbild entfernen, so dass die 3 Bilder auf einer weißen Fläche sind.
Entferne ich aber den Hintergrund div, dann rutscht der footer unter den header. Ich verstehe nicht wirklich, wieso das passiert. Kann man den footer irgendwie so an das untere Ende der Website koppeln, dass man header, die Bilder und den footer alles zusammen sieht auf der Organisationen Seite? Also man soll alles sehen, ohne scrollen zu müssen
2.) Als ich auf der Landingpage den Inhalt eingefügt habe und den Scroll Down Button das erste Mal richtig benutzen konnte, ist mir aufgefallen, dass dieser zwar funktioniert, aber zu weit runterscrollt. Es soll nämlich nur so weit gescrollt werden, dass die Überschrift "Erneuerbare Energien" weiterhin zu sehen ist.
Ich habe versucht, dass ganze mit einem extra div zu machen, anstatt die h1 als zielobjekt zu nehmen, dass hat aber nicht funktioniert.
3.) Den Inhalt habe ich in einen div gepackt und in CSS etwas angepasst. Ich habe diesen nun nur nach Augenmaß mit margin-left verschoben. Gibt es hier eine bessere Option den ganzen Textblock perfekt mittig zu bekommen, anstatt nach Augenmaß zu arbeiten?
Der Text sollte hier am besten auch in einem Blocksatz stehen. Also so wie ich es in der letzte Nachricht bei dem Urheber Text beschrieben habe.
Und ich habe nochmal eine Ergänzung zur letzten Nachricht.
Ich denke so versteht man nochmal besser, was ich damit meinte, dass alles an der Hintergrund gekoppelt sein soll und zusammen schrumpfen soll.
Nämlich kann man sich das so vorstellen:
Man nimmt die Website und hat sich auf dieser alle Inhalte, Bilder und Buttons so verschoben, dass sie optisch gut aussehen und an den richtigen Stellen liegen. Dann macht man ein Screenshot von der ganzen Website und dieses Bild ist dann quasi die Website (also was den Aspekt des gleichmäßigen Schrumpfens angeht).
Die Website soll sich also wie ein Bild verhalten, welches beim kleiner machen der Seite schrumpft und logischerweise alles, was auf dem Bild drauf ist (also die Inhalte, Buttons etc.) auch. Nur eben, dass es kein Bild ist, sondern die richtige Website, auf der die Inhalte dann auch Funktionen haben, wie Links usw.
Ob diese Funktionen nach dem Schrumpfen zu klein sind, um sie gut bedienen zu können, ist egal.
Ich hoffe mit diesem Vergleich konnte man das ganze etwas besser/leichter verstehen.
Die aktuelle Website mit Inhalt etc. sieht nun so aus: https://we.tl/t-4ywzpvs6uP
Nun ist die Website immerhin Inhaltlich und vom Look her fertig. Es fehlen nurnoch diese kleinen Fehlerchen, welche entfernt werden müssen.
Ich bedanke mich nochmals sehr für deine ganze Zeit und Arbeit die du investiert hast.
Liebe Grüße
Alex
Zu deiner alten Nachricht:
2) Der sd-button funktioniert jetzt wieder. Ich habe einfach den Code von früher genommen, denn ich hatte ihn ja bereits so programmiert, dass er richtig funktioniert.
Du solltest übrigens immer Backups erstellen mit Datum, dann kannst du immer zurückgehen und schauen, wie es früher aussah als es noch funktionierte.
3) Hier reicht es aus, wenn man den Bildern einfach eine width mit einer Prozenangabe gibt. h1 und h3 haben als font-size eine "vw"-Angabe. Das ist ähnlich wie Prozent.
Aber das ist nur mit Vorsicht zu genießen - bei einer realen Webseite würde man nicht mit solchen relativen Werten arbeiten. Denn die Bilder werden so oder so kleiner angezeigt auf einem kleineren Bildschirm. Du siehst ja sowieso, dass du unter deiner Webseite eine große weiße Fläche bekommst, wenn du das Fenster kleiner machst. Deswegen sollten die Elemente auch nicht kleiner werden, wenn das Fenster nur horizontal gestaucht wird. Aber für die Aufgabe mach ich das jetzt erstmal so.
4) <br> kannst du ruhig benutzen. Am besten wäre es, wenn man sie versucht zu umgehen, aber das ist erstmal nicht so wichtig.
5) Im #kontakt-wrapper kannst du einfach "justify-content" auf "center" stellen, dann kommen die Kontaktdaten zusammen, und dann kannst du mit "gap: 15rem" die so weit auseinanderziehen wie du möchtest.
Elemente mittig platzieren (wie du es beim Urheber-Text möchtest) kannst du immer mit "margin: 0 auto;". Das "display: flex;" habe ich hier mal weggemacht, weil man es nicht wirklich braucht.
Bedenke aber, dass "margin: 0 auto;" nicht mehr funktioniert, wenn dein Element ein "position: absolute;" hat.
Wenn du einen Blocksatz möchtest, kannst du das mit "text-align: justify;" machen.
6) In Edge ist die Seite so weit links, weil der Browser auf der rechten Seite noch eine Leiste hat. Damit wird jede Seite automatisch etwas nach links gerückt. Es ist also alles richtig.
Zu deiner neuen Nachricht:
1) Wenn das Hintergrundbild entfernt wird, dann bleibt nur noch #orga übrig und dieses hat in css eine Position "absolute" und einen "top"-Wert. Deswegen verschwindet dein ganzer Inhalt. Wie bereits gesagt, ist position: absolute; keine schöne Lösung, weil es später oft zu Problemen kommt. Aber ohne das Hintergrundbild brauchen wir ja sowieso kein position: absolute; mehr.
Den Footer kann man nach unten bringen, wenn man einfach "position: fixed;" macht und dann "top" und "bottom" auf 0.
Wenn du nicht willst, dass der Footer ständig sichtbar ist, dann musst du dem #orga da oben etwas mehr Raum und nach oben und unten geben (padding), damit sich diese Lücke zum Footer schließt. (Hintergrundfarbe ist gerade auf Grün gestellt, damit du das siehst.)
2) Damit man nicht so weit runterscrollt, muss man das "#zielobjekt" einem leeren div geben, den man in CSS etwas weiter oben platziert. Schau dir an, wo ich ihn in html plaziert habe und welchen Code er in CSS bekommen hat. Das ist eigentlich alles selbsterklärend.
Das ganze Responsive-Zeug können später klären, wenn der Rest passt. Denn wie gesagt werden die Elemente IMMER kleiner angezeigt, wenn die Seite auf einem kleineren Gerät aufgerufen wird. Aber nur, wenn sich die x UND y Achse verkleinert. Wenn die Seite nur horizontal gestaucht wird, dann soll natürlich nichts passieren. Ich glaube nicht, dass dein Lehrer es wirklich so von euch verlangt, sondern einfach nur meint, dass die Elemente nicht irgendwo aus der Seite rausgehen sollen, wenn ihr das Fenster kleiner macht.
Alles andere wäre eine völlige Katastrophe und man sollte niemals so lernen oder sich daran gewöhnen.
Falls du das doch möchtest, kann du natürlich immer "position: absolute;" benutzen, dann bleiben die Elemente an ihrer Stelle kleben.
Aber wie gesagt: "position: absolute;" wird man in der Realität fast nie benutzen und man sollte lieber lernen, die Elemente anders zu positionieren.
Hallo, danke erstmal.
Das Ganze hat auf jeden Fall funktioniert und ich habe selber nurnoch Kleinigkeiten am Sytling verbessert. Die Website ist also quasi fertig.
Es gibt aber noch ein paar ganz kleine Dinge, die zwar Meckern auf hohem Niveau sind, aber da die Abgabe erst nächste Woche ist, kann man diese noch verbessern und den letzten Punkt rausholen.
1.) Kann man den Back to Top Button von der Position her so einstellen, dass er weiter unten ist, aber trotzdem vor dem Footer aufhört? Aktuell habe ich diesen so eingestellt, dass er ganz am Ende der Seite in der richtigen Position ist und etwas über dem Footer platziert ist. Problem hierbei ist nur, dass der Button, solange man den Footer noch nicht sieht, zu weit oben ist. Würde ich ihn aber nach unten verschieben, wäre er am Ende über dem Footer.
Der Button soll also weiter unten sein, aber sobald man am Ende der Seite ankommt vor dem Footer stoppen und in der Position sein in der er aktuell ist.
2.) Das runter scrollen mit dem Button funktioniert nun einwandfrei. Danke!
Kann man hier irgendwie einstellen, wie weit gescrollt wird? Aktuell sieht man nach dem Scrollen nämlich noch einen dünnen grauen Streifen vom Hintergrundbild. Es soll also so weit scrollen, dass es an der Grenze vom Hintergrundbild und der weißen Fläche ist.
3.) Den Footer habe ich nun so angepasst, dass er nur bei der Impressum und Organisationenseite fixed ist. Auf der Impressumseite ist es nun aber so, dass man trotzdem noch scrollen kann (da das Hintergrundbild zu groß ist). Gibt es hier einen Code in CSS um das scrollen für die Impressum Seite zu blockieren oder muss ich hier das Hintergrundbild kleiner machen?
4.) Ich habe mit der Konsole im Browser verschiedene Screen Größen von Handys etc. ausprobiert und mir sind 3 Dinge aufgefallen, welche man "responsive" machen müsste. Der Großteil passt aber schon, wie er ist (für meine Aufgabenstellung).
Da die Seite nicht full responsive sein muss, reicht es wenn man diese Kleinigkeiten einzeln ausbessert, anstatt alles responsive zu machen. Das reicht also so völlig aus, damit die Website der Aufgabenstellung gerecht wird. Außerdem ist die Abgabe nächste Woche (20.12), deswegen reicht es, wenn man nur die 3 Kleinigkeiten verbessert.
Ich kenne mich leider mit @media nicht sonderlich gut aus, aber ich habe ein paar Ansätze für diese Probleme und eventuell kannst du mir sagen, ob diese so funktionieren.
4.1.) Auf der Landingpage verschiebt sich bei kleineren Screen Größen der Scroll Down Button. Da man diesen bei Handys etc. nicht mehr benötigt, ist denke ich die beste Option diesen ab einer bestimmten Screen Größe (ich denke Tablet Größe) zu entfernen.
Kann ich das hier einfach mit @media machen und dann den sd button ab dieser bestimmten Screen Größe entfernen?
4.2.) Der Back to Top Button kann bei kleineren Screens bleiben, jedoch ist dieser ab einer bestimmten Screen Größe zu weit rechts und hat keinen Abstand mehr zum Rand. Muss ich diesen dann auch mit @media einfach weiter links verschieben?
4.3.) Auf der Impressum Seite verschiebt sich der ganze Text über das Logo auf dem Hintergrundbild, wenn der Screen zu klein wird. Kann ich hier mit @media den Text irgendwie unter das Hintergrundbild verschieben, wenn eine bestimmte Screengröße erreicht wird (Das müsste doch der z-index sein, welcher den Text auf das Bild gebracht hat, wenn ich das richtig verstanden habe. Dann könnte man diesen einfach entfernen)? Der Text soll dann so wie auf der Landingpage unter dem Hintergrund angezeigt werden. Das ist denke ich die Beste Option.
5.) Der Urhebertext auf der Impressumseite ist bei Edge in einer guten Position zwischen Logo und Footer. Auf Chrome und Firefox sieht dieser jedoch etwas gequetscht aus. Das liegt an dem fixed Footer, welchen ich aber gerne behalten würde.
Kennst du eine Möglichkeit, das zu umgehen?
Mir fällt nur das ein: Footer nicht fixed machen, Schriftgröße des Logos auf dem Hintergrundbild verkleinern oder die width des Urhebertexts anpassen.
Das sind alles wie gesagt nurnoch Kleinigkeiten, die beim ersten Blick gar nicht auffallen und nurnoch das gewisse Extra rausholen. Da die Abgabe aber erst in einer Woche ist, kann man - denke ich - zumindest versuchen, diese Details auszubessern.
Ich hoffe, dass danach keine Fehler mehr auftreten durch das Hinzufügen von neuem Code.
Ich bedanke mich erneut im Vorraus und hoffe, dass auch noch dieser letzte kleine Schritt eine Lösung bekommt und wir (beziehungsweise eher du) die Website fertigstellen können.
Ich habe diese Website nur mit dem absoluten Grundwissen gestartet und durch dich schon einiges sehr hilfreiches dazu gelernt. Also selbst wenn am Ende noch Fehler übrig bleiben, habe ich immerhin mein Wissen um einiges erweirtet.
Danke dir dafür!
Grüße Alex
1. Für den backtotop Button habe ich ein bisschen javascript Code aus dem Internet genommen. Manchmal glitched es leider und der Button springt ans Ende der Seite, aber meistens funktioniert es.
Ich hatte noch einen anderen Code gefunden, womit dieser Fehler nicht auftritt, aber bei dem klebt der Button immer direkt oben am Footer und ich habe auf die Schnell nicht hingekriegt, dass zwischen Footer und Button ein Abstand ist.
2. Es wird immer nur bis zum #zielobjekt gescrollt und diesen kannst du selbst frei verschieben. Vielleicht kannst du mal probieren das #zielobjekt in CSS nach unten oder oben zu verschieben. Kannst dabei auch wieder "outline: solid 1px red;" nutzen oder in html kurz was reinschreiben, damit du siehst, wo sich #zielobjekt befindet.
3. Du kannst beim #impressum-text das "z-index" rausmachen, dann wird der Footer über dem Text und dem Hintergrundbild stehen. Man kann dann trotzdem noch scrollen, weil der Text ja jetzt unter den Footer rutscht. Die andere Möglichkeit wäre nur, dass du das Logo auf dem Hintergrundbild nach oben schiebst und den "Urheberrecht"-Text dann auch.
Mit dem fixed Footer musst du aber generell sehr aufpassen. Auf der Organisationsseite siehst du, dass es einige Probleme gibt, wenn du die Seite mal schmaler machst oder ganz breit. Die Inhalte gehen dann entweder über den Footer drüber oder wenn du sie kleiner machst, dann entsteht ein ganz großer weißer Leerraum zwischen den Bildern und dem Footer (auf der Impressum-Seite genauso).
4.1 Ich habe dir in CSS einen @media Code geschrieben und dort den sd-button entfernt. Wenn du es einmal siehst, dann weißt du sofort, wie das funktioniert. Der Button ist für kleinere Größen einfach auf "display: none;" gestellt. Wird also einfach ausgeblendet.
4.2 Auch den backtotop Button kannst du mit @media verschieben, falls er immer noch nicht richtig sitzt.
4.3. Ja, das kannst du ebenfalls mit @media verschieben. Da gibt es keine Grenzen, was man alles machen kann.
5. Das Problem hier geht noch ein wenig tiefer. Da Edge rechts eine Leiste hat und oben aber etwas schmaler ist als Chrome, wird das Hintergrundbild verschoben.
Das einfachste wäre, wenn du dem Urheberrecht-Text einfach nach unten verschiebst - für alle Browsser. Dann sieht er in Edge wieder normal aus.
Aber du hast jetzt natürlich schon oft gesehen, dass es viele Probleme mit der Ausrichtung von deinem Text (relativ zum Logo) gibt. Fürs nächste Mal könntest du probieren einfach den Hintergrund in CSS grau zu machen und das Logo dann als Bild in die Mitte zu platzieren. Dann müsstest du dich nur noch um den div in der Mitte kümmern anstatt dass der Browser versucht mit dem kompletten Bild zu arbeiten.
Ich hoffe, dass du hier viel Wissen mitnehmen konntest - hast du ganz sicher! Für eine erste Webseite ist das schon sehr gut und du hast viele Dinge mitbekommen, die man erst viel später lernen würde.
Vielen Dank für die Hilfe.
Alles hat funktioniert.
Ich habe ein paar Kleinigkeiten geändert:
1.) Den Back to Top Button habe ich leicht verändert in html, da er einen weißen Rand hatte und bei mir, wieso auch immer, nicht funktioniert hat. Jetzt geht aber alles.
2.) Der footer ist nun nicht mehr fixed wegen des von dir beschriebenen Problems. Stattdessen hat der footer der Organisationen Seite nun einen margin-top, damit man hier ungefähr gleich weit runter scrollen muss, wie auf der Impressum-Seite. Andernfalls war der footer bei mir zu weit oben und unter diesem war noch freie Fläche zum Ende der Seite.
Das ist auf keinen Fall die schönste und beste Option, aber es erledigt seinen Zweck und ein besserer Weg ist mir auf die schnelle nicht eingefallen.
3.) Den div für den Scroll Down Button zu verschieben hat funktioniert. Dies klappt nun auch einwandfrei.
4.) Mit @media habe ich nun ein paar Kleinigkeiten eingestellt und das klappt auch alles.
Nur bei einem Problem komme ich nicht weiter/kriege es zwar irgendwie gelöst, aber das gefällt mir auch als "Notlösung" nicht.
In CSS siehst du ganz unten, dass ich versucht habe den Impressum Text so zu verschieben, wie ich es in der letzten Nachricht geschildert habe.
Das hat auch so einigermaßen geklappt, jedoch ist der Text irgendwann zu weit unten/hat einen zu großen Abstand nach oben, umso kleiner der Screen wird und der Footer ist über dem Text anstatt danach.
Ich habe gerade erfahren, dass die Abgabe am 20.12 um 23 Uhr ist und deswegen wollte ich dich noch um diesen letzten Gefallen beten und fragen, ob du für dieses Problem, auf die schnelle, eine bessere Lösung findest als ich.
Die von mir gewählte Screengröße bei @media kann bleiben und der Plan ist, dass der Impressum Text dann so aussieht wie der Text auf der Landingpage.
Also oben header und Hintergrundbild, dann der Impressumtext kurz darunter und am Ende der Seite der footer.
Ich hoffe, dass ist zeitlich für dich noch irgendwie möglich. Ich kann natürlich nicht verlangen, dass du dir Urlaub nimmst, um diese Website fertigzustellen. Falls du schon bis Mittwochmorgen weißt, dass das zeitlich nichts wird, dann gib einfach bescheid. Dann mache ich das Beste aus diesem Problem und Löse es so gut es geht mit dem Wissen, das ich habe.
Vielleicht reicht es auch nur, wenn du eine Lösung kennst und diese kurz in ein paar Sätzen schilderst, dann kann ich versuchen das umzusetzen.
Wie schon gesagt, ich konnte sehr viel von dir mitnehmen und dafür bin ich dir sehr dankbar. Dieses kleine Problem mit der Impressumseite ist auch nurnoch Meckern auf hohem Niveau.
Ich bedanke mich aber schonmal im Vorraus, falls es irgendwie klappen sollte und bedanke mich auch nochmal für all die Hilfe die du mir bis hier hin geleistet hast!!
Grüße Alex
Ganz simple Lösung. Ich habe in html vor dem Footer nochmal denselben Impressum-Text eingefügt und dann in css @media (MIN-width: 1600px) gemacht und den gesamten Text auf "display: none;" gesetzt. Heißt, wenn die Seite also 1600 px breit ist, dann sieht man den neuen Text unten nicht und wenn die Seite kleiner wird, dann fällt das "display:none;" weg und der Text erscheint. Du musst jetzt nur noch den alten Text ausstellen, wenn der neue erscheint.
Ich würde mir noch überlegen, ob ich nicht vielleicht den alten Impressum-Text weiß machen würde, weil die schwarze Schrift hinter dem grauen Hintergrund schwer zu lesen ist.
Morgen habe ich nicht so viel Zeit, aber heute kann ich bestimmt nochmal reinschauen.
Deine Lösung hat super funktioniert danke dir.
Ich habe noch ein paar Kleinigkeiten angepasst und bin mit dem Ergebnis nun auch zufrieden.
Da aber noch etwas Zeit bis zur Abgabe ist, gäbe es noch einzelne kleine Dinge, die ich ändern würde, wenn du/ich diese zeitlich schaffen.
1.) Zuerst eine Frage: Wieso fehlt bei der landingpage der footer tag und nurnoch der div steht da? Hängt das mit dem JavaScript Code zusammen?
2.) Ich habe erneut versucht den JavaScript Code in einer externen Datei zu speichern und im head zu verlinken, aber sobald ich das mache, funktioniert der Code bei mir nicht mehr. Muss ich diesen eventuell irgendwo anders im html Code verlinken, damit es funktioniert?
3.) Hast du noch die Seite, wo du den JavaScript Code her hast, bzw. wird dort erklärt, wie man diesen von dir beschriebenen Abstand zwischen Button und Footer einfügt, damit dieser nicht manchmal über den footer glitched? Dann würde ich nämlich versuchen das zu fixen, wenn ich das zeitlich schaffe.
4.) Auf der Organisationen Seite rutscht der Button immer über den footer. Ich glaube das liegt daran, dass ich den footer hier mit margin-top verschoben habe, bzw. der footer eine eigne id hat.
Hast du eine einfache Lösung parat, wie ich das reparieren kann? Ansonsten würde ich den Button auf der Seite einfach löschen, da man diesen hier eigentlich eh nicht benötigt. Es sieht nur gut aus, wenn er auf jeder Seite vorhanden ist.
5.) Wenn ich @media benutze muss ich dann immer den gesamten CSS Code übernehmen oder reicht es wenn ich nur die tags übernehmen, die ich auch ändern will? Beziehungsweise können Probleme auftreten, wenn ich nur einzelne tags übernehme? Ich hab das Gefühl, das wären sonst so kleine Fehler, die man Ewigkeiten suchen muss und das nur, weil man paar Zeilen Code sparen will.
6.) Mein Lehrer meinte er achtet darauf, dass der HTML Code überall sauber eingerückt ist, also z.B. div tags, welche bereits in einem übergeordneten div stehen, weiter nach "innen" eingerückt sind und das immer weiter so.
Durch das viele hin und her und immer wieder neue Einfügen von neuen Sachen, sind nämlich ein paar tags nicht mehr sauber eingerückt. Deshalb wäre meine Frage, ob es hierfür eine leichte Methode gibt, um das alles sauber zu machen oder ich hier jede einzelne Zeile von Hand richtig ausrichten muss?
Nochmals vielen Dank für deine Hilfe und vor allem deine Zeit.
Auch danke für deinen Tipp mit der Farbe für den Impressum Text, das ist mir gar nicht so direkt aufgefallen, aber das hat das ganze deutlich besser gemacht!
Wie gesagt bin ich so wie die Website jetzt ist zufrieden und alle Probleme die ich oben gennant habe sind nurnoch Extras, welche auch nur geändert werden, wenn das zeitlich alles passt.
Grüße Alex
1. Der <footer> hat leider nicht funktioniert mit dem javascript Code. Der Button zum Hochscrollen hat sich immer über den Footer gelegt, wie du es jetzt auch z.B. auf der Orga-Seite siehst.
Liegt vielleicht daran, dass der javascript eine id verlangt. Vielleicht könnte man <footer id="footer"> machen. Aber es funktioniert ja sowieso grad.
2. Den js Code musst du in diese Funktion schreiben: "document.addEventListener("DOMContentLoaded", function(event) { DEIN CODE HIER });"
Das siehst du aber in der js Datei, die ich erstellt habe.
3. Den Code habe ich von stackoverflow. Da wurden von zwei Usern Codes gepostet. Den einen hast du gerade und der andere ist der hier: (https://stackoverflow.com/questions/70240526/how-to-prevent-scroll-to-top-button-from-going-over-the-footer)
//Get the button
var mybutton = document.getElementById("backtotop");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
// check that button is not lower than footer.
let footerElement = document.getElementById('footer');
let footerElementRect = footerElement.getBoundingClientRect();
let mybuttonPositionBottom = mybutton.offsetTop + mybutton.offsetHeight;
if (footerElementRect.y < mybuttonPositionBottom) {
// if button is lower than footer.
// modify css bottom.
let diffheight = mybuttonPositionBottom - footerElementRect.y;
let style = window.getComputedStyle(mybutton);
let addBottom = parseInt(style.getPropertyValue('bottom')) + diffheight;
mybutton.style.bottom = addBottom + 'px'; // maybe add more 10 px for bottom space of a button.
} else {
// if button is heigher than footer. this including scroll up.
// remove custom css bottom.
mybutton.style.bottom = '';
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Und bei dem klebt der Button direkt am Footer. Kannst ja ausprobieren und bisschen daran rumspielen.
4. Das liegt wohl daran, dass der Code für den Footer etwas anders aussieht. Mit margin kann man den Button nicht wirklich verschieben. Das hätte ich sonst seeehr gerne gemacht, dann hätte ich den zweiten js Code genommen, ohne dem Glitch, und den Button dann selbst verschoben.
5. In @media schreibst du nur den Code rein, der sich ändert. Alles was gleich bleibt, kommt da nicht rein.
6. Dafür sollte es in jedem guten Code-Editor eine Funktion geben, die den Code automatisch sauber ausrichtet. Google mal nach "align html code in ..." und dann eben mit deinem Editor, z.B. Visual Studio.
Hallo, danke für die Tipps und Hilfe.
Alles hat super funktioniert.
Ich habe mich nun für den anderen js Code entschieden und in diesem den Abstand zum footer etwas erhöht. Dadurch ist der Glitch weg und der Button klebt auch nicht direkt am footer.
Auf der Organisationenseite habe ich außerdem den alten footer wieder eingefügt, aber dem ganzen orga div einen margin-bottom gegeben. Damit hat der footer hier keine weiße Fläche mehr unter sich und der Back to Top Button kann bleiben.
Das ist zwar immer noch nicht die beste Lösung denke ich, aber es ist eine bessere Option als die vorherige.
Es fehlt also nurnoch das Ausrichten des Codes. Ich wollte dir trotzdem einmal die Website zeigen.
https://we.tl/t-hZq1UUYqgu
Eine Frage hätte ich aber noch:
Sind überall im Code id und class richtig verwendet? Also es funktioniert ja alles, deshalb ist das kein großes Problem, aber mein Lehrer meinte immer id ist für einzelne Dinge, die nur einmal vorkommen und class für mehrere.
z.B. habe ich ja dem body in jedem Dokument einzeln die id top gegeben, aber theoretisch würde ja class mehr Sinn machen, weil sich "top" auf 3 Dinge und nicht nur 1 bezieht (zumindest laut meinem Lehrer).
Im Endeffekt ist das nur ein optisches Ding, da die Website mit allen aktuellen id's und classes funktioniert.
Und nochmal ein sehr großes Dankeschön für die ganze Hilfe die du mir jetzt seit fast 2 Monaten gegeben hast. Ich glaube ich hätte diese Website alleine nicht ansatzweise so weit gebracht wie du, sondern hätte nur eine ganz einfache Website mit Bild und Text ohne jegliche Ausrichtung hinbekommen.
Nicht nur werde ich sehr wahrscheinlich eine gute Note hierfür bekommen, sondern ich konnte auch extrem viel dazulernen, was mir für zukünftige Projekte sehr viel helfen wird.
Also vielen Dank für alle deine Tipps und Tricks und all die Zeit die du in dieses Projekt investiert hast!!!
Grüße Alex
Meinst du mit "top bezieht sich auf 3 Dinge", dass es in 3 html-Seiten auftaucht? Falls ja, dann hat das nichts damit zu tun. Denn es wiederholen sich ja ganz viele Elemente in den 3 html-Seiten, das Menü, der Footer, etc.
Es geht viel mehr darum, dass sich die Elemente auf derselben Seite wiederholen - die würde man dann "class" nennen, und Elemente, die nur ein Mal vorkommen auf der jeweiligen Seite, sind "id".
Aber: IDs nutzt man eigentlich eher seltener, heutzutage macht man fast alles nur über Klassen. Und manchmal hat man sogar gar keinen Namen, wie z.B. bei deinem Text auf der landingpage, da heißen die Textabschnitte nur <p>, was auch nicht verkehrt ist, weil man sie in css einfach mit "#inhalt p {}" ansprechen kann - dann sieht man auch direkt, wo sie herkommen (nämlich von #inhalt).
Aber mach es natürlich erstmal so, wie es dein Lehrer möchte.
Ja, ich denke auch, dass du jetzt eine gute Note bekommen wirst. Die anderen sind bestimmt nicht so sehr ins Detail gegangen.
Freut mich, dass ich helfen konnte.
Falls es noch was gibt, melde dich gerne.
Ja ich meinte es so, dass es in 3 html-Seiten auftaucht.
Dein Punkt macht aber mehr Sinn.
Ich habe während diesem Projekt mehrmals gemerkt, dass mein Lehrer das irgendwie falsch beibringt, bzw. ich fände es schlauer, wenn er es gleich richtig beibringt, anstatt erstmal zu sagen, dass man das früher so und so gemacht hat und so sollen wir das erstmal lernen und sobald wir das können, sollen wir es so lernen wie es heutzutage ist.
Naja muss man nicht verstehen, aber danke dir, dass du mir hierbei geholfen hast. Das hat den Lernprozess deutlich erleichtert.
Hallo, ich melde mich nochmal, weil ich gerade eben die Ergebnisse bekommen habe.
Es wurde die volle Punktzahl und ich konnte mir 20% extra Punkte für die Prüfung sichern.
Deshalb nochmal ein dickes Dankeschön für all die Hilfe, weil das ohne dich so nicht möglich gewesen wäre.
Ich konnte viel lernen und freue mich, dass ich das alles an Erfahrung mitnehmen durfte.
Vielen Dank!!
Grüße Alex
Ich hätte es gerne mit dem HTML Text selbst gestestet und die Lösung gesucht.
Von Bildern den Code abtippen ist mir zuviel Arbeit :-(
Aber:
Für die LandingPage hast die die Dinge Center gesetzt
Für die weitere Organisation aber nicht.
Sind denn in den "eingebundenen" HTML Dateien weitere anderes CSS am wirken,
oder gar individuelle Style Definition in der Datei selbst ? Wenn ja könnten sich auch diese Dinge in die quere kommen.
Hallo, danke für die Antwort. Bei einem anderen Kommentar zu dieser Frage steht der Code dabei. In HTML selbst hab ich nicht mit css gearbeitet. Ist alles in dieser extra Datei vom Bild
Alles was in der externen css Datei steht.
Könnte man dort entfernen und direkt in der HTML Datei
Zwischen
<style>
..hier..
</style>
copy paste einfügen und die reference entfernen.
Ob nun in den anderen HTML Dateien solche "style" Blöcke vorhanden sind musst du prüfen.
UND
"style" kann generell an jedem Knoten auftreten und hat dann die höchste Priorität. z.B:
<div style=blabla;>
</div>
Fazit man muss ALLE style Definitionen unter einen Hut bringen.
Ja das kenne ich auch so. Mein Lehrer meinte nur er will es lieber in einer externen Datei um es besser korrigieren zu können. Hab auch nochmal seine Anforderungen nachgefragt und der will auch keine div Container, Pixel Angaben usw. Also alles Sachen die man normalerweise kennt und benutzt aber er will es uns anscheinend unnötig nervig machen
Danke für die Antwort. Was sind wrapper, webkit und die ganzen flex tags? Sowas hatten wir im Unterricht noch gar nicht. Außerdem meinte mein Lehrer, dass wir keine div Container benutzen sollen, weil es sonst zu einer "div-Suppe" führt.
Beim Hintergrundbild soll es so sein, dass man die Website öffnet und erstmal das Bild sieht. Dann soll man runterscrollen müssen und sobald das Bild aufhört soll der Inhalt (Text etc.) angezeigt werden. Das Bild habe ich in CSS bereits auf no-repeat eingestellt. Wenn ich es html einfüge ist das Problem, dass es nicht die ganze Seite abdeckt, sondern links und rechts, kleine weiße Balken überbeliben (auch bei width:100%)