CSS-Kundiger gesucht

Holy-Ant · Beitrag von **Holy-Ant** » 22. Juli 2010, 12:54

Hallo Ameisenfreunde, ich stehe vor einem kleinem Problem. Ich habe meiner Homepage ein neues Design verpasst, mit CSS. Jetzt wollte ich in der Header-Navigation ein Submenü einrichten, allerdings komme ich mit meinen geringen CSS-Kentnissen nicht vorran. Ich wollte folgendes Menü einbinden:

Code: Alles auswählen

<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="http://fireants.npage.de/willkommen_80415624.html">Home</a></dt>
<dd id="smenu1">

</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu2');"><a href="http://fireants.npage.de/Über_mich_85932383.html">Über mich</a></dt>
<dd id="smenu2">

</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu3');"><a href="#">Haltungsbericht</a></dt>
<dd id="smenu3">
<ul>
<li><a href="http://fireants.npage.de/haltungsbericht_myrmica_rubra__94238387.html">Haltungsbericht Teil 1</a></li>
<li><a href="http://fireants.npage.de/haltungsbericht_myrmica_rubra_2_78048490.html">Haltungsbericht Teil 2</a></li>
<li><a href="http://fireants.npage.de/haltungsbericht_myrmica_rubra_3_13767336.html">Haltungsbericht Teil 3</a></li>

</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu3');"><a href="#">Selbstversuche</a></dt>
<dd id="smenu3">
<ul>
<li><a href="http://fireants.npage.de/ameisenstiche_34091807.html">Ameisenstiche</a></li>
<li><a href="http://fireants.npage.de/schmerzskala_12837409.html">Schmerzskala</a></li>

</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu3');"><a href="http://fireants.npage.de/myrmica_rubra__webcam_77349737.html">AntsCam</a></dt>
<dd id="smenu3">

</dd>
</dl>
</div>

Damit diese genauso aussieht wie das jetzige Menü, nur halt bei "Haltungsbericht" und "Selbstversuche" mit Untermenü. Ich denke mir das ich das ganze mit diesem Teil der CSS-Datei ansprechen kann:

Code: Alles auswählen

#header-content ul {
    position: absolute;
    right: -5px; top: 15px;
    font: bolder 1.3em 'Trebuchet MS', sans-serif;
    color: #FFF;
    list-style: none;
    margin: 0; padding: 0;        
}
#header-content li {
    display: inline;
}
#header-content li a {
    float: left;
    display: block;
    padding: 3px 12px;    
    color: #FFF;
    background-color: #333;
    text-decoration: none;
    border-right: 1px solid #272727;
}
#header-content li a:hover {
    background: #65944A;
    color: #FFF;
}
#header-content li a#current  {
    background: #65944A;
    color: #FFF;
}

allerdings weis ich nicht wie:furchtbartraurig:Vielleicht könnte mir ja hier einer Helfen, und mir sagen was ich wo eintragen muss, damit es funktioniert.

Gruß und Dank, Holy

Cayal · Beitrag von **Cayal** » 22. Juli 2010, 13:59

Ich glaube nicht, dass es was mit CSS zu tun hat, sondern eher mit javascript und den IDs.

Bei den Menüs verwendest du "smenu3" Mehrmals. IDs müssen aber eindeutig sein, weil sonst weiß die Funktion montre nicht, was sie einblenden soll, da es ja mehrere Elemente mit der selben ID gibt.

Code: Alles auswählen

<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="http://fireants.npage.de/willkommen_80415624.html">Home</a></dt>
<dd id="smenu1">

</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu2');"><a href="http://fireants.npage.de/Über_mich_85932383.html">Über mich</a></dt>
<dd id="smenu2">

</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu3');"><a href="#">Haltungsbericht</a></dt>
<dd id="smenu3">
<ul>
<li><a href="http://fireants.npage.de/haltungsbericht_myrmica_rubra__94238387.html">Haltungsbericht Teil 1</a></li>
<li><a href="http://fireants.npage.de/haltungsbericht_myrmica_rubra_2_78048490.html">Haltungsbericht Teil 2</a></li>
<li><a href="http://fireants.npage.de/haltungsbericht_myrmica_rubra_3_13767336.html">Haltungsbericht Teil 3</a></li>

</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('[B]smenu4[/B]');"><a href="#">Selbstversuche</a></dt>
<dd id="[B]smenu4[/B]">
<ul>
<li><a href="http://fireants.npage.de/ameisenstiche_34091807.html">Ameisenstiche</a></li>
<li><a href="http://fireants.npage.de/schmerzskala_12837409.html">Schmerzskala</a></li>

</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('[B]smenu5[/B]');"><a href="http://fireants.npage.de/myrmica_rubra__webcam_77349737.html">AntsCam</a></dt>
<dd id="[B]smenu5[/B]">

</dd>
</dl>
</div>

Natürlich kann der Fehler auch wo anders liegen. Passiert denn gar nichts, oder wird nur etwas falsch angezeigt, wenn du mit der Maus darüber fährst? Javascriptfehler sollte der Firefox auch anzeigen.

Holy-Ant · Beitrag von **Holy-Ant** » 22. Juli 2010, 14:23

Ich habe es mal reingepackt. Es passiert schon etwas, allerdings nicht wie gewünscht^^ Du kannst es Dir gerne mal ansehen: http://www.fireants.npage.de

Und ich weiss einfach nicht wo mein Fehler liegt:furchtbartraurig:

Gruß und Dank, Holy

Cayal · Beitrag von **Cayal** » 22. Juli 2010, 14:47

D'u musst ja irgendwo gelesen haben, wie das mit der Funktion montre usw geht? Da ist sicher auch dokumentiert, wie man dort genau ein Untermenü hinzufügt, das ist halt kein Standard, daher müsste man das auch wissen

Holy-Ant · Beitrag von **Holy-Ant** » 22. Juli 2010, 14:54

Ja gelesen habe ich es hier: http://www.drweb.de/magazin/das-perfekte-menu-teil-6-submenu-horizontal/
Dort steht zwar was über montre, aber ich weiss einfach nicht was ich wo ändern soll:( Sorry, aber ich bin nicht so fit in CSS und JS

Gruß Holy

Cayal · Beitrag von **Cayal** » 22. Juli 2010, 15:15

Was noch bei dir fehlt in der CSS Datei ist:

Code: Alles auswählen

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{ position: absolute; left: 0; font-size: 11px; width: 500px;      }

Wobei da noch so einiges fehlen könnte, ist halt schwer das rauszukriegen, ohne dass man es ordentlich testen kann und ziemlich Zeitaufwendig, auf die Schnelle kann ich dir da denke ich nicht helfen.

Das Problem ist halt, dass du so Beispiele an diversen Stellen anpassen musst und wenn du keine Ahnung von javascript oder css und nur rudimentäre HTML Kentnisse hast, dann wird das schwer und evtl. tuts dann auch ein normales Menü

Und natürlich hast du in dem Quelltext nicht das geändert, was ich gesagt habe, du hast immer noch mehrmals smenu3 drin, das muss in smenu4 und smenu5 geändert werden sowohl bei mouseover wie bei id

EDIT:

und das dadrüber fehlt ja auch noch in der css datei:

Code: Alles auswählen

 #menu a { background: #fff; color: #000; text-decoration: none; }
 #menu a:hover { color: #ff0000; }
 #menu dl { float: left; }
 #menu li { display: inline; }
 #menu li a { color: #ff0000; }
 #menu li a:hover { background-color: #f5f5f5; }

Du musst schon erst mal alles übernehmen, was in dem Tutorial drin steht und nicht Dinge weglassen

Holy-Ant · Beitrag von **Holy-Ant** » 22. Juli 2010, 16:09

Sorry, habe vorhin im Unterricht gesessen, und habe wohl nicht ganz alles richtig aufgefasst. Ich habe jetzt die ID´s angepasst und den fehlenden Teil in der CSS-Datei ergänzt (wie peinlich, hatte ich es doch vorher noch gelesen^^)
Jetzt sieht es schon anders aus, aber immer noch nicht so wie ich es mir Vorstelle. Die Farben des Menü´s ändere ich doch hier:

Code: Alles auswählen

#menu a { background: #fff; color: #000; text-decoration: none; }
 #menu a:hover { color: #ff0000; }
 #menu dl { float: left; }
 #menu li { display: inline; }
 #menu li a { color: #ff0000; }
 #menu li a:hover { background-color: #f5f5f5; }

Oder?

Und die Position hier:

Code: Alles auswählen

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{ position: absolute; left: 0; font-size: 11px; width: 500px;      }

? Ich werde jetzt mal sehen, dass ich das ganze etwas ins rechte Licht rücke, und Danke Dir recht Herzlich für deine Geduld mit mir:)

Gruß und Dank, Holy

EDIT: Jetzt fängt es an langsam so auszusehen, wie ich es mir Vorstelle^^ Danke nochmal:)

Cayal · Beitrag von **Cayal** » 22. Juli 2010, 16:13

Du hast das Problem mit den IDs immer noch nicht komplett behoben:

<dl>
<dt onmouseover="montre('smenu4');"><a href="#">Selbstversuche</a></dt>
<dd id="smenu4">
<ul>
<li><a href="http://fireants.npage.de/ameisenstiche_34091807.html">Ameisenstiche</a></li>
<li><a href="http://fireants.npage.de/schmerzskala_12837409.html">Schmerzskala</a></li>

</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu5');"><a href="http://fireants.npage.de/myrmica_rubra__webcam_77349737.html">AntsCam</a></dt>
<dd id="smenu5">
</dd>
</dl>
</div>

Bei dir steht da immer noch smenu3

Ameisenforum.de

Ameisenforum.de

CSS-Kundiger gesucht

#1 CSS-Kundiger gesucht

#2 AW: CSS-Kundiger gesucht

#3 AW: CSS-Kundiger gesucht

#4 AW: CSS-Kundiger gesucht

#5 AW: CSS-Kundiger gesucht

#6 AW: CSS-Kundiger gesucht

#7 AW: CSS-Kundiger gesucht

#8 AW: CSS-Kundiger gesucht