ComputerBase Menü
Aktuelles

Schwarzes Rechteck als Link einsetzen

B

Bennyaa

Lieutenant
Registriert
März 2007
Beiträge
828
Hallo, ich möchte eine schwarze Navigationsleiste am oberen Rand der Webseite einrichten.
Dann dort über schwarze Rechtecke mit einem weißen Text immer einen Link in einem iFrame öffnen (damit ich die Navigation unabhängig von den restlichen Seiten habe).
Ich habe aktuell einfache <a> Elemente eingefügt und mit href versehen.
Schaffe es auch über css die Color und backgroundcolor ein zu stellen.
Aber wenn man darüber fährt, dann sieht man nicht, dass es ein Link ist. (Hebt sich nicht ab. (Gerne auch die Unterstreichung weg)
Kann mir jemand helfen?
 
Bennyaa schrieb:
Aber wenn man darüber fährt, dann sieht man nicht, dass es ein Link ist. (Hebt sich nicht ab. (Gerne auch die Unterstreichung weg)
Zum Vergrößern anklicken....
Am besten teilst du ein Beispiel damit.

Ich vermute, du suchst z.B.
CSS: 
a:hover {
    text-decoration: none;
}
 
Das ist mein html code
Code: 
<!DOCTYPE html>
<html>
    <head>
        <title>Leitungsberechnung</title>
        <link rel="stylesheet" href="css/main.css"/>
    </head>
    <body>
        <div id="Navigation">
            <a id="LinkStromwandler" href="CurrentTransformers/CurrentTransformers.html">Stromwandler</a>       
        </div>
    </body>
</html>

Das hier die css

Code: 
#LinkStromwandler
{
  color: white;
  background-color: black;
}
 
Erst einmal: Bitte keine iFrames. Es ist mit einfachen Mitteln möglich, eine Navigationsleiste an den oberen Bildschirmrand zu tackern, unabhängig davon, ob ich scrolle.

Du hast in der CSS sonst gar nichts stehen?
Ungewöhnlich, dass er dann alles überschreibt...

Ich würde es hiermit versuchen:

Code: 
#Navigation a {
    color: #FFF;
    background: #000;
}

#Navigation a:hover {
    text-decoration: underline;
}

Beispielhaft. Dann brauchst du nicht jedem <a> eine ID geben, sondern alle Links im DIV mit der ID Navigation bekommen diesen Style. Mit a:hover legst du den Style fest, wenn der Link gehovert wird, mit a den normalen Style. Du kannst eben auch noch mit a:focus und a:active spielen.
 
  • Gefällt mir
Reaktionen: Murray B. und dermatu
ok, werde ich mal versuchen.
ich dachte an ein iframe, damit die eine seite nichts von der anderen wissen muss.
verständlich?
Ergänzung ()

Leider ändert sich beim Hover gar nichts.
 
Zuletzt bearbeitet:
Ja, dann z.B. irgendwie so:

CSS: 
#LinkStromwandler {
  color: white;
  background-color: black;
}

#LinkStromwandler:hover {
  text-decoration: none;
  color: silver;
}

Wobei das so aussieht, als ob du das nur für einen einzigen Link definierst. Wahrscheinlich möchtest du das eher auf eine gesamte Klasse der Navigation erweitern.

Siehe auch hier: https://www.w3schools.com/cssref/sel_hover.asp
 
so ist es soweit ganz ok, aber 1. bekomme ich die Schrift vertikal nicht in die mitte. muss ich da hier die a elemente auxh in der height anpassen?
2. wie ändere ich die sxhriftart der links im vergleichu zum rest auf der page?
3. wie bekomme ich es ohne iframe hin, dass ich nicht auf jeder seite (jeder weitere link) wieder die navigation einfügen zu müssen?

edit:

ach ja, so habe ich es jetzt:
Code: 
body
{
  font-family: 'Press Start 2P', cursive;
}

#Navigation
{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 1500px;
  background: #000;
}

#Navigation a
{
  height: 50px;
  color: #FFF;
  background: #000;
  text-decoration: none;
  text-align: center;
}

#Navigation a:hover {
  text-decoration: none;
  color: silver;
}
 
Zuletzt bearbeitet:
Guck dir mal bitte Selfhtml an, und wenn du die Grundlagen verstanden hast, getbootstrap.com
Du musst nicht das Rad neu erfinden. Das ist alles schon da, und du kannst von denen lernen, die es schon seit 20 Jahren machen.

Was ich damit andeuten möchte: einen einzigen Font ohne Fallback zu definieren ist keine gute Idee. Ein Element auf 1500px Breite zu fixieren ebenfalls nicht. Das ist für einen schnellen Prototypen vielleicht okay, für eine richtige Website allerdings nicht.
 
Murray B. schrieb:
Guck dir mal bitte Selfhtml an, und wenn du die Grundlagen verstanden hast, getbootstrap.com
Du musst nicht das Rad neu erfinden. Das ist alles schon da, und du kannst von denen lernen, die es schon seit 20 Jahren machen.

Was ich damit andeuten möchte: einen einzigen Font ohne Fallback zu definieren ist keine gute Idee. Ein Element auf 1500px Breite zu fixieren ebenfalls nicht. Das ist für einen schnellen Prototypen vielleicht okay, für eine richtige Website allerdings nicht.
Zum Vergrößern anklicken....
Ok, mache ich morgen mal.
Würde auch gerne also Startseite mehrere kleine Icons (oder normale png oder so) in einem Kreis darstellen und auf jeden einzelnen Links legen zu den entsprechenden Seiten.

von da dann wieder zurück zu Home.
Dann muss auch keine Seite was von einer anderen wissen, außer von Home und ich muss keine Navigationsleiste erzeugen, da das ja quasi die Home Seite ist.
Wie findest Du das?
 
kachiri schrieb:
Erst einmal: Bitte keine iFrames. Es ist mit einfachen Mitteln möglich, eine Navigationsleiste an den oberen Bildschirmrand zu tackern, unabhängig davon, ob ich scrolle.

Du hast in der CSS sonst gar nichts stehen?
Ungewöhnlich, dass er dann alles überschreibt...

Ich würde es hiermit versuchen:

Code: 
#Navigation a {
    color: #FFF;
    background: #000;
}

#Navigation a:hover {
    text-decoration: underline;
}

Beispielhaft. Dann brauchst du nicht jedem <a> eine ID geben, sondern alle Links im DIV mit der ID Navigation bekommen diesen Style. Mit a:hover legst du den Style fest, wenn der Link gehovert wird, mit a den normalen Style. Du kannst eben auch noch mit a:focus und a:active spielen.
Zum Vergrößern anklicken....
Wie bekomme ich denn eine Naviagtion ohne iframe hin, ohne dass ich diese in jeder html benötige?
 
Das ist meiner Meinung nach nur mit HTML und CSS nicht sauber möglich, wenn sich das Navigationsmenü auf jeder Seite ändern soll (etwa um die aktuelle Seite hervorzuheben). Dafür kann man serverseitige Möglichkeiten wie PHP oder SSI nutzen (einige Anregungen hier) oder auch einfach ein wenig JS, indem man die Navigation in ein Skript auslagert und es auf jeder Seite einbindet:

HTML: 
<nav id="Navigation"></nav>

Javascript: 
var navmenu = '<a id="LinkStromwandler" href="CurrentTransformers/CurrentTransformers.html">Stromwandler</a>';
document.getElementById('Navigation').innerHTML = navmenu;

Es gibt auch ein fertiges Snippet von W3Schools zum Einbinden von HTML-Elementen in andere Seiten:
https://www.w3schools.com/howto/howto_html_include.asp
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz