Navigationsleiste
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
-
Guten Abend,
ich bin gerade dabei eine Navigationsleiste mit HTML und CSS zu erstellen, bei einer der Links soll folgendes passieren.
Bei einem der Links soll eine Art Text mit erscheinen, wenn man mit drüber fährt, der auch eine andere Farbe hat als die Navigationsleiste selbst.
Ich würde mich sehr auf helfende Antworten freuen!
Der folgende Text sieht im Moment so aus
<header>
<nav>
<ul>
<li><a href="index.html" class="aktuell">Home</a></li>
<b><p>28. April 2021</p></b><br>
<p>Diese Seite ist im Aufbau!</p>
<li><a href="infos.html">Infos</a></li>
</ul>
</nav>
<h1>Herzlich Willkommwn!</h1>
</header> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Es kommt auf die semantische Bedeutung deines zusätzlichen Textes an, wie dies am besten gemacht wird.
Ist der Text ohne inhaltliche Relevanz, also rein dekorativ, kann man ihn per CSS hinzufügen.
Hat er eine inhaltliche Bedeutung, gehört er gleich ins (X)HTML.
Dort kommt es wiederum darauf an, wozu der Text dienen soll.
Als Hilfe zum Verweis kannst du den Satz einfach in das Attribut title des Elementes a setzen.
Hat der Text semantisch eine andere Funktion, wird er eher in ein anderes Element innerhalb des entsprechenden Elementes li gehören.
Dort könntest du alsdann bei dem li-Element das Attribut id oder wenn es mehrere mit ähnlichem Inhalt gibt eher class setzen.
Alsdann kanns du das Kindelement per CSS zunächst statisch ausblenden, per :hover wieder einblenden, gegebenenfalls mit Positionierung. Relativ zum Elternelement funktioniert ganz gut, wenn dieses irgendwie positioniert ist, alsdann kann man das Kindelement absolut dazu positionieren.
Bei der rein dekorativen CSS-Variante hingegen würde der Satz gar nicht im (X)HTML stehen, vielmehr als 'content' in der CSS-Datei, dort könnte man solchen Inhalt vor oder hinter einem eindeutig identifizierten Element einblenden, also :hover zusammen mit ::before oder ::after.
Viel Spaß beim Basteln
-
könnten Sie mir einen Beispiel-Code nennen! Wie genau ich den HTML und CSS Code schreiben müsst? Herzlichen Dank im vorraus.
-
Du hast nicht erwähnt, welchen Zweck dein Zusatztext hat.
Hier stecken jedenfalls die erwähnten Möglichkeiten alle drin, kannst ja die CSS-Eigenschaften nachschlagen, herumprobieren.
<?xml version="1.0" encoding="UTF-8" ?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Text einblenden</title> <style type="text/css"> nav ul li {position: relative} #Home .aktuell {display: none} #Home:hover .aktuell {display: block; position: absolute; top: 2em; outline: thin solid; background: #ff8; color: red; padding: 1ex; z-index:1} #Infos:hover a::before {content: 'Irgendwas'; display: block; white-space: pre; padding: 1ex; position: absolute; top: 2em; border: thin solid; background: #fcf; color: #005; z-index:5} #Infos a:hover::after {content: 'Irgendwas\A anderes'; display: block; white-space: pre; padding: 1ex; position: absolute; top: 2em; right: 2em; border: thin solid; background: #cff; color: #030; z-index:5} </style> </head> <body> <h1>Text einblenden</h1> <nav id="Verzeichnis"> <ul> <li id="Home"><div><a href="index.html">Home</a></div> <div class="aktuell"> <p>28. April 2021</p> <p>Diese Seite ist im Aufbau!</p> </div> </li> <li id="Infos"><a href="infos.html">Infos</a></li> <li id="Hilfe"><a href="hilfe.html" title="Hilfe zum Verweis">Hilfe</a></li> </ul> </nav> </body> </html>
Ansonsten solltest du auf korrektes (X)HTML achten, b, br, p können keine Kindelemente von ul sein, lediglich li. -
ich habe jetzt hin und her probiert es will nicht sowie ich will
-
So ist das Leben ;o)
Eventuell nicht genau nachgelesen, was welche Eigenschaften für eine Bedeutung haben?
Erklärt sich lediglich teilweise anhand der Namen.
Was funktioniert denn nicht, wenn du mein Beispiel übernimmst?
Beziehungsweise, was hast du demgegenüber geändert, um es an deinen Bedarf anzupassen? -
ich habe eine Grafik online gestellt wie es am Ende aussehen soll
https://pierre-verley.lima-city.de/grundgeruest.html -
Dazu müßtest du die li-Elemente per CSS als inline-Elemente, block-inline festlegen oder aber float verwenden.
Dazu müßtest du die ul-Liste von li-Elementen vermutlich per position:fixed oben positionieren, von der Höhe her beschränken.
Entsprechend kannst du einen Seitenfuß bekannten Umfanges (Höhe und Breite in em) auch unten per position: fixed anklemmen.
Der eingeblendete Text könnte dann wiederum per position:fixed unter der Menüleiste angeordnet werden.
Wenn der sonstige fließende Inhalt oben ein entsprechendes margin bekommt, wird er von permanenten fixed-Inhalt nicht verdeckt.
Haken daran: Du kennst die Breite des Anzeigebereiches beim Publikum nicht.
Insofern ist unbestimmt, ob es bei deiner Navigation ein Einzeiler ist oder ein Mehrzeiler.
Kennst du den Platzbedarf allerdings in em (grob der Platz in Einheiten des großen Ms),
so kannst du per media-query das Design anpassen, also für jeden plausiblen Fall etwas vorhalten.
Für kleine Darstellungsbereiche wird die Idee ungeeignet sein, dafür wäre entsprechend per media-query ein weitere Varianten vorzuhalten.
-
Ich bin keiner der so schnell an etwas einen Haken dran macht, sondern jemand der alles versucht und niemals auf gibt.
Was muss ich jetzt eingeben damit ich das entsprechende Ergebnis bekommen? -
Hört sich für mich schon so an, als wäre es für dich zunächst nützlich, etwas tiefer in CSS einzusteigen, damit du verstehst, was du tust, also zum Beispiel:
https://de.wikibooks.org/wiki/Websiteentwicklung:_CSS
oder
https://wiki.selfhtml.org/wiki/CSS
Meine Seite verfolgt einen etwas anderen, langsameren Ansatz, ist auch schon einige Jahre alt:
http://hoffmann.bplaced.net/hilfe.php
Wie wäre also mit erst Lektüre, dabei üben?
Damit sollte sich allerhand klären, alsdann könntest du bei kniffligeren Problemen auch genauere Fragen stellen.
Fertige Lösung bekäme ich wohl hin, aber eigentlich wolltest du das doch selber machen? ;o)
-
Ein wenig Hilfestellung können Sie mir doch geben oder?
-
Bei dem Beispiel sind einige Elemente fixiert:
http://hoffmann.bplaced.net/labor/projekt.php?style=8
Die anderen Varianten enthalten teils auch mit verschiedenen Methoden fixierte Bereiche:
http://hoffmann.bplaced.net/hilfe.php?me=mehrcss&in=cssbeispiele
Da gibt es Aufklapplisten:
http://hoffmann.bplaced.net/hilfe.php?me=mehrcss2&in=cssaufklappliste
Übungen zur Anordnung von Elementen:
http://hoffmann.bplaced.net/hilfe.php?me=css&in=cssuebung
Das verwendet alles XHTML1.1, HTML5 hat demgegenüber einige bessere Elemente statt div mit Klassennamen, diese solltest du dann einfach statt der div-Elemente verwenden, wenn du HTML5 verwendest (auch in der XML-Variante). -
Ich hatte das Problem kurzzeitig mithilfe des Internets gelöst, war aber nicht so wie ich es mir vorgestellt hatte. Inzwischen habe ich aber im Großen und Ganzen meine Startseite sowie ich es mir vorgestellt habe, nur die Anordnung der Bilder ist noch nicht ganz zu meiner Zufriedenheit.
Daher meine Frage:
Was musst ich tun damit die Bilder mittig angeordnet werden?
Es sollen jeweils drei Bilder oben und drei Bilder unten sein
Damit Sie sich eine Vorstellung bekommen, was ich meine, habe ich hier den Link zu der gewünschten Seite
https://pierre-verley.lima-city.de/startseite.html -
Also erstmal weiß ich nicht wie lange du schon HTML und CSS verwendest.
Die bilder mittig anordnen könntest du beispielsweise so:
HTML:
<div class="container items-centered"> <img> <img> </div> <!--Inhalt dazwischen--> <div class="container items-centered"> <img> <img> </div>
und CSS
.container{ width: 960px; display: flex; } .items-centered{ flex-direction: row; justify-content: space-around; align-items: center; }
Du kannst für die Breite auch 100vw (viewport width) angeben, musst dann im
-Tag<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
angeben.
Ich hoffe ich konnte dir helfen.
LG Tobi
P.S. Grundsätzlich würde es sich lohnen CSS und Javascript zu lernen, um deine Websites optisch auf ein ganz anderes Level zu bringen.
Am anfang sahen meine websites ziemlich genau so aus wie deine, mittlerweile so: https://www.itobilp.de
Beitrag zuletzt geändert: 22.11.2021 17:34:55 von itobilp-dererste -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage