• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Menüpunkte verlinken

J

JuicyFruit

Neues Mitglied
Hallo, ich bin neu im Forum und kenne mich in HTML/CSS nocht nicht sooooo gut aus ;) nur verzweifle ich an einer Aufgabe... Ich schaffs nicht meine Menüpunkte zu verlinken...


Das hier mein HTML Code für's Menü
HTML: 
<div class="Navigation">
     <div class="Navigation_Schrift"> Home </div>
     <div class="Navigation_Schrift"> Menüpunkt 1</div>
     <div class="Navigation_Schrift"> Menüpunkt 2</div>
</div>

Hier mein CSS Code für's Menü
Code: 
.Navigation {
    width: 25%;
    height: 100%;
    border: solid 2px;
    background-color: #FF0000;
    float:left;
    margin-top: 2px;
}

.Navigation_Schrift {
    font-family: Kristen ITC;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.Navigation_Schrift:hover {
    color: #FF0000;
    background-color: #000000;
    letter-spacing: 10px;
    text-decoration: none;
}

Mein hover effekt soll natürlich vorhanden bleiben...

Hoff Ihr habt ein paar tipps für mich was ich machen könnte...

Falls ihr noch fragen habt weil ihr was nicht versteht einfach fragen.

MFG JuicyFruit
 
Zuletzt bearbeitet:
Werbung:
Hallo,
Wilkommen im Forum :D

Ich sehe im Code garnicht, dass du überhaupt einen Link erstellt hast?
Links erstellt man mit
HTML: 
<a href="link.html">LINK</a>
Das fehlt bei dir. Was wiederum bedeutet, dass der Hover garnicht funktionieren kann, wenn du keinen Link hast. Es sei denn, es wäre mit Javascript gemacht.

Edit:
Warum hast du eigentlich so viele <div>-Tags? Ein <div> ist ein Blockelement, welches du eigentlich garnicht brauchst. Statt
HTML: 
<div class="navigation">
Nutze
HTML: 
<li id="navigation">
Denn <li> ist ja eine Liste und sollte dafür auch verwendet werden. Und wenn du dann mit ID arbeitest muss in deinem CSS statt dem . eine # ! Und wenn du für die Menüpunkte dienen <div> trotzdem brauchst, dann mache einen draus, und keine 3!
 
Hey, erstmal danke für deine antwort.

Ich Poste dir mal den ganzen Code dann erkennst du vielleicht warum ich verschiedene Blockelemente gemacht habe

HTML: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="trashboy.mine.nu" />
    <link href="Style/Style.css" rel="stylesheet" type="text/css" />

	<title>Juicy's Homepage</title>
</head>

<body>

<div class="container">

    <div class="header">
        <img src="Images/header.png" /> 
    </div>
      
    <div class="Navigation">
        <div class="Navigation_Schrift"> Home </div>
        <div class="Navigation_Schrift"> Über Mich</div>
        <div class="Navigation_Schrift"> Gaming</div>   
    </div>
    
    <div class="Write_Box">
        <div class="Write_Box_Schrift">
           <img src="Images/surreal3.jpg" width="600" height="338"/>   
        </div>
    </div>
    
</div>

</body>
</html>

Code: 
body {
    font-family: Times New Roman;
    background-color: #969696;
}

.container {
    width: 900px;
    margin: auto;
}

.header {
    width: 100%;
    float: left;
}

.Navigation {
    width: 25%;
    height: 100%;
    border: solid 2px;
    background-color: #FF0000;
    float:left;
    margin-top: 2px;
}

.Navigation_Schrift {
    font-family: Kristen ITC;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.Navigation_Schrift:hover {
    color: #FF0000;
    background-color: #000000;
    letter-spacing: 10px;
    text-decoration: none;
}

.Write_Box {
    width: 665px;
    height: auto;
    border: solid 2px;
    background-color: #FF0000;
    float: left;
    margin-left: 2px;
    margin-top: 2px;
}

.Write_Box_Schrift {
    font-family: Kristen ITC;
    font-weight: bold;
    text-align: left;
    margin-left: 2px;
    margin-top: 2px;
    margin-right: 2px;
    margin-bottom: 2px;
    text-align: center;
}

Das ist so, ich hab die Blockelemente verwendet um mir Boxen zu machen. Für das header oben, die menüleiste links und dem Schriftbereich rechts neben dem Menü.
Ich weis hab alles bisschen komisch gelöst nur bin ich noch nicht so geübt in CSS...
 
Werbung:
Hab nun mal aus
HTML: 
 <div class="Navigation_Schrift"> Home </div>
dass hier
HTML: 
 <a href="#"><div class="Navigation_Schrift"> Home </div></a>
gemacht. Nun klappts zwar das ich verlinken kann, nur ist Das Home im Menü nicht schwarz sondern Blau, wie kann man den effekt schon wieder entfernen?
 
JuicyFruit schrieb:
Hab nun mal aus
HTML: 
 <div class="Navigation_Schrift"> Home </div>
dass hier
HTML: 
 <a href="#"><div class="Navigation_Schrift"> Home </div></a>
gemacht. Nun klappts zwar das ich verlinken kann, nur ist Das Home im Menü nicht schwarz sondern Blau, wie kann man den effekt schon wieder entfernen?
Zum Vergrößern anklicken....
Nein, doch keine Divs für Links verwenden.
Hier habe ich einen Navigations generator programmiert: Nicolas Pecher | Generatoren | CSS Navigation
Kannst ihn ja mal testen, dir Ne Navi zusammenbasteln.Sind auch kommentare im Quelltext hinterlegt...Wenn du dennoch was nicht verstehst, sag bescheid
 
Werbung:
Innerhalb a kannst du keinen div setzen.
Die divs sind auch alle unnötig. Die Schriftformatierung musst du nicht jedem Link einzeln zuweisen.
Übleicherweise nimmt man für eine Navigation eine ul-Liste mit entsprechenden li-Einträgen.
Dies sollte dir helfen: Vertikale Listennavigation
 
Danke euch,

Sorry, sage ja ich kenn mich noch nicht so gut mit CSS aus, aber durch Leute wie euch die auch mit Link's von externen Page's schicken kommt man langsam immer mehr rein.

Das mit den <div> mit dem Menü hab ich in einem Tutorial bei Youtube gesehen deswegen dacht ich es funktioniert so.

JuicyFruit
 
Werbung:
Bei Youtube?
Also, Grundsätzlich empfehle ich Bücher, denn da, kann man mal schnell nachschlagen wenn was ist.

Ansonsten gibt es zahlreiche Onlinearchive wie aktuelle tutorials. Für einen Anfänger ist es schlecht, sich verschiedene Tutorials zusammenzuheften.
 
Witschi262 schrieb:
Bei Youtube?
Also, Grundsätzlich empfehle ich Bücher, denn da, kann man mal schnell nachschlagen wenn was ist.
Zum Vergrößern anklicken....

Hab mir schon nen Buch für CSS und HTML bestellt nur leider liefert die Post Sonntags nicht :)

Ansonsten gibt es zahlreiche Onlinearchive wie aktuelle tutorials. Für einen Anfänger ist es schlecht, sich verschiedene Tutorials zusammenzuheften.
Zum Vergrößern anklicken....

Dass mit dem aus mehreren zusammenheften hab ich nun auch gemerkt, dafür braucht man mehr erfahrung, aber denke sowas kommt nur wenn man auch mal fehler macht. Trotzdem nochmal danke für eure hilfe!! Sollte nun alles klappen.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben