Benötige Hilfe beim HTML Code im Footer
0 0 
Matthias Apsel
0 0 
at
1 Tabellenkalk
Benötige Hilfe beim HTML Code im Footer
Gunnar Bittersmann
Rolf ẞHallo zusammen,
ich habe mit Wordpress und dem Plugin "Elementor Page Builder" eine Internetseite erstellt. Nun habe ich im Footer folgenden Code hinterlegt:
<html>
<head>
<style>
/* Standardwerte */
.footer a { color: #ffffff !important; }
.footer { color: #ffffff; font-size: 0.9rem; }
</style>
</head>
<body>
<div class=”footer”>
<div style="float: left; width: 49%;">
Hier steht das Copyright
</div>
<div style="float: right; text-align: right; width: 49%; ">
<a title="Kontakt" href="http://www.domain.de/kontakt">Kontakt</a> ·
<a title="Impressum" href="http://www.domain.de/impressum">Impressum</a> ·
<a href="http://www.domain.de/affiliate">Datenschutz<br/></a>
<a style="font-size: 0.7rem;" " href="http://www.domain.de/affiliate">Stern-Symbol (*) = Affiliate-Links</a>
</div>
<div style="clear: both;"></div>
</div>
</body>
Die Schriftfarbe soll eigentlich weiß sein, aber irgendwie funktioniert das nicht. So sieht es aktuell aus:
Hat jemand eine Idee?
Danke.
-
Hallo,
hast du ein Link zur Seite?
-
HI,
ich habe die Seite noch nicht online, weil ich das mit dem Footer nicht hinbekomme :/.
lg
-
Hallo
Solange du uns den Teil des Quelltextes vorenthältst, der das Problem verursacht, können wir dir kaum helfen.
Gruss
MrMurphy
-
Was benötigst du?
-
-
-
-
Hallo Neuling,
<a style="font-size: 0.7rem;" " href="http://www.domain.de/affiliate">ist kaputt.
Bis demnächst
Matthias--
Rosen sind rot.-
Hi,
habe ich gelöscht. Funktioniert trotzdem leider nicht.
Gruß
-
-
Hallo Neuling,
mal ein paar zusätzliche Fragen zum Anregen:
- Warum verwendest du nicht das footer-Element von HTML5?
- Anstelle der Floats mit dem Clearfix am Ende kannst du auch eine Flexbox verwenden − oder Inline-Blöcke.
- Warum verwendest du zum Teil Inline-Styles?
- Das links floatende div ist doch eigentlich ein Absatz.
- Das rechts floatende div ist doch ein Absatz oder eine Liste.
Viele Grüße
Robert-
Hi,
ich kenne mich leider gar nicht aus. Der Code hat mir ein bekannter gemacht, allerdings weiß er auch nicht mehr weiter.
Gruß
-
Moin,
in den Entwicklertools des Browsers gibt es auch einen Inspektor, mit dem du dir alle CSS-Regeln für ein Element anzeigen lassen kannst. Dort ist ersichtlich, warum die Farben so sind, wie sie sind.
Meine Tipps dienen dazu, deinen Code einfacher und damit fehlerärmer zu machen.
Viele Grüße
Robert-
Hi,
kann ich dir da etwas schicken, damit du mir sagst was falsch ist? Ich habe echt keine Ahnung davon und verzweifel bald.
Wäre super.
Gruß
-
Moin,
paste hier doch mal bitte den relevanten Code deiner Seite, sprich das HTML-Grundgerüst der Seite mit Footer und die CSS-Regeln zu dem HTML-Code.
Du kannst dich aber auch mal bitte mit Inspektor der Browser-Entwicklertools vertraut machen – die bekommst du mit F12.
Viele Grüße
Robert
-
-
-
-
Hallo Neuling,
offenbar verlieren
.footer a { color: #ffffff !important; }und.footer { color: #ffffff; font-size: 0.9rem; }gegen die/* Standardwerte */. Genaueres lässt sich ohne Kenntnis letzterer nicht sagen. Grundsätzlich solltest du aber die Spezifität der CSS-Selektoren im Auge haben.MfG, at
-
Was kann ich tun?
-
Hallo Neuling,
erst einmal nicht nervös werden. Ich antworte dir gleich ausführlich.
MfG, at
-
Super, vielen Dank :)
-
Noch eine Ergänzung:
Wenn ich die Seite auf dem Handy aufrufe, sieht der Footer auch echt bescheiden aus...gefällt mir gar nicht…
Wie kann ich dass denn einfach lösen?
-
@@Neuling
Wenn ich die Seite auf dem Handy aufrufe, sieht der Footer auch echt bescheiden aus...gefällt mir gar nicht…
Wie kann ich dass denn einfach lösen?
Cheatah hat dazu mal eine Liste erstellt.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Der war ja sowas von lustig, der Cheatah, und soo recht hat er immer gehabt, der Cheatah, und Verweise auf den Klugschi** von Cheatah bringen Leute mit Problemen ja sooo weiter…
-
@@Klawischnigg
Der war ja sowas von lustig, der Cheatah,
Meinen Humor hatte er getroffen. YMMV.
und soo recht hat er immer gehabt, der Cheatah,
Ja, das hatte er.
und Verweise auf den Klugschi** von Cheatah bringen Leute mit Problemen ja sooo weiter…
Man kann niemandem helfen, der sich nicht helfen lassen will.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
-
-
-
-
Hallo Neuling,
der Anspruch von SelfHTML ist, dir Wissen zu vermitteln, keine Code-Schnipsel. Statt dich aber einfach an das SelfHTML-Wiki zu verweisen, bereite ich dir einen eigenen Einstieg. Im Anschluss daran empfehle ich dir aber das Einsteiger-Tutorial.
Und weil du geschrieben hast, du hättest „keine Ahnung“ davon, fangen wir jetzt ziemlich weit vorne an:
HTML besteht aus Elementen, die meist Text oder andere Elemente enthalten. Deshalb bestehen sie häufig aus einem vorderen und einem hinteren Teil, dazwischen steht der Text. Umgekehrt kann man auch sagen: Der Text wird durch die Elemente strukturiert. Das wiederum kann man auch als Auszeichnung bezeichen und sieht schematisch folgendermaßen aus:
<elementname>Elementinhalt</elementname>. Wichtig ist die Anordnung der spitzen Klammern und des Schrägstriches.Diese Elemente erfüllen innerhalb ihres Dokumentes eine Funktion, im Falle des
<a>-Elementes die eines Verweises auf etwas anderes. Das Verweisziel gibt man in einem sogenannten Attribut an, in diesem Fall dem Attributhref, damit beim Betätigen des Verweises tatsächlich eine Verbindung zum im Attributwert angegebenen Ziel aufgebaut wird. Der Attributwert wird meist in Anführungszeichen gesetzt und mittels eines Gleichheitszeichens von der Attributbezeichnung abgetrennt, etwa so:attribut="wert". Notiert wird ein Attribut im öffnenden Teil des Elementes, also nach diesem Schema:<elementname attributbezeichnung="attributwert">Elementinhalt</elementname>. Oder im Falle des<a>-Elementes so:<a href="https://example.org/kontakt">Kontakt</a>. Man darf einem Element auch durch Leerzeichen voneinander getrennt mehrere Attribute zuweisen, nur nicht mehrfach das gleiche.Mit CSS können die HTML-Elemente gestaltet werden, zum Beispiel der Text zwischen einem
<a href="…">und dem dazu gehörigen schließenden</a>eingefärbt werden. Dafür benötigt man eine CSS-Regel.Eine CSS-Regel besteht aus einer oder mehreren Eigenschaften, der jeweils ein einfacher oder mehrteilger Wert zugewiesen werden kann, zum Beispiel die Kombination
color: #ffffff;, wobeicolordie Eigenschaft ist und#ffffffein Farbwert, hier der für weiß. Diese Eigenschaft-Wert-Paare werden mit einem Semikolon abgeschlossen und hinter- oder untereinander geschrieben. Alle Eigenschaft-Wert-Paare, die man einem oder mehreren HTML-Elementen zuweisen möchte, fasst man dann in geschweiften Klammern zusammen, etwa so:{ eigenschaft-1: wert-1; Eigenschaft-2: wert-2; … }. Wenn man nur die Textfarbe als weiß definieren möchte, sieht der CSS-Code folgendermaßen aus:{ color: #ffffff; }Nun muss man noch definieren, welchen Elementen man die Eigenschaften mit ihren Werten zuordnen möchte. Deshalb stehen vor der öffnenden geschweiften ein oder mehrere sogenannte Selektoren, der Laie würde sie als Suchmuster bezeichnen. Anhand dieser Suchmuster durchsucht der Browser das HTML-Dokument und weist den gefundenen Elementen die Eigenschaft-Wert-Paare zu.
Um alle
<a>-Elemente eines HTML-Dokumentes zu selektieren, notiert man als Selektor einfach eina, also die Elementbezeichnung aus dem HTML-Code ohne die spitzen Klammern. Der Fachmann spricht von einem Element-Selektor. Die CSS-Regel sähe damit so aus:a { color: #ffffff; }Weißer Text auf weißem Grund ist aber nicht lesbar. Deshalb sollen die Verweise nur dann weiß eingefärbt werden, wenn sie auf einem hinreichend dunklen Hintergrund stehen. Wenn das HTML-Dokument beispielsweise einen Seitenfuß hat, dann wäre das sinnvollerweise ein
<footer>-Element. Diesen könnte man dunkelblau einfärben, und zwar so:footer { background-color: #333366 }Wenn nun Verweise nur dann eine weiße Textfarbe erhalten sollen, wenn sie sich im Footer befinden, muss der Selektor entsprechend angepasst werden:
footer a { color: #ffffff; }. Die Reihenfolge vonfooterundasowie das Leerzeichen dazwischen sind dabei entscheidend für das Gelingen. Wäre die Reihenfolge umgekehrt, würden alle<footer>-Elemente selektiert, die sich innerhalb von<a>-Elementen befinden.Der neue Selektor hat eine höhere Spezifität, das heißt, er lässt den Browser präziser suchen. Eben nicht nur
<a>-Elemente, sondern solche, die in einem<footer>-Element stecken. Und diese Spezifität kann weiter erhöht werden. Denn<footer>-Elemente können mehrfach in einem HTML-Dokument vorkommen. Wenn man aber nur in bestimmten<footer>-Elemente die Verweise weiß einfärben möchte, muss man einen Selektor wählen, der noch präziser, also noch spezifischer ist. Die Grundregel dabei ist: Der spezifischere Selektor setzt sich gegenüber dem weniger spezifischen durch.Wenn man nun eine neue CSS-Regel schreibt, muss man den Selektor also so wählen, dass er zumindest so spezifisch ist, dass er sich gegenüber allen konkurrierenden Regeln durchsetzt. Und nun wären wir wieder an der Stelle, auf die ich dich bereits verwiesen habe, nämlich der Übersicht über die Spezifität. Und ja, das ist kompliziert, aber so ist das eben, wenn man mal eben in WordPress etwas ändern will.
MfG, at
-
-
-
Hallo,
<div class=”footer”>Warum verwendest du hier typografische Anführungszeichen und was passiert, wenn du normale nimmst?
Gruß
Kalk-
Hallo Tabellenkalk,
also wenn es DAS jetzt war, und nicht einfach nur ein Effekt beim Kopieren ins Forum, dann hast Du den Sherlock-Preis 2017 verdient.
Erklärung für die typographischen Anführungszeichen beim OP könnte sein, dass der Code aus irgendeiner Demo-Seite kopiert wurde. Und dort waren sie entweder, weil ein Deppenautor Design vor Funktion gestellt hat, oder weil es ein Schlauberger war, der sich gedacht hat, dass ein gedankenloser Sample-Monteur es verdient hat, auf die Nase zu fallen...
Dritte Möglichkeit ist, dass "Neuling" eigentlich ein "Altling" ist, der uns hier vorsätzlich auf's Glatteis geführt hat!
Rolf
--
Dosen sind silbern-
Hallo,
also wenn es DAS jetzt war, und nicht einfach nur ein Effekt beim Kopieren ins Forum, dann hast Du den Sherlock-Preis 2017 verdient.
Naja, warten wir mal die Antworten auf meine 2 Fragen ab.
Dritte Möglichkeit ist, dass "Neuling" eigentlich ein "Altling" ist, der uns hier vorsätzlich auf's Glatteis geführt hat!
Warum verwendest du hier normale und nicht die viel schöneren typografischen Anführungszeichen?
Gruß
Kalk-
@@Tabellenkalk
Warum verwendest du hier normale und nicht die viel schöneren typografischen Anführungszeichen?
Warum bezeichnest du die hässlichen als „normal“?
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo,
Warum bezeichnest du die hässlichen als „normal“?
Weil sie normalerweise beim Drücken von <shift>+2 erscheinen.
Gruß
Kalk-
@@Tabellenkalk
Weil sie normalerweise beim Drücken von <shift>+2 erscheinen.
Bei mir erscheint da normalerweise ein @.
Es gibt Systeme, auf denen werden Anführungszeichen automatisch umgewandelt, sodass beim Drücken der ["]-Taste normalerweise „ bzw. “ bzw. ” erscheint.
(Wenn [shift][2] die ["]-Taste ist, dann sollten es die ersten beiden sein, nicht die letzten beiden.)
Das ist bei Code natürlich unerwünscht; man muss diese automatische Ersetzung in dem Fall abschalten oder die Zeichen nachträglich ändern.
Leider wird das desöfteren vergessen, und man findet sowas wie
<foo bar=“baz”>in Artikeln und auf Vortragsfolien.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
-
-
-