Bitte um Hilfe: Foldout-Menü + transparente Zeilen - Iceblue

Hallo zusammen,

ich habe unter www.garnelenwelten.com eine Seite über mein Hobby erstellt, die aber inzwischen immer unübersichtlicher geworden ist. Nun möchte ich die Navigation teilen und zusätzlich die Unterpunkte mit einem Foldout-Menü ausklappen lassen. Ich verwende das Design Iceblue.

Der Besucher sollte also in HOME nur folgende Menüpunkte sehen. Manche Dieser Menüpunkte sind Hauptmenüpunkte ohne Untermenü, manche davon haben Unterpunkte:


Home
- Leerzeile transparent -
Garnelen (hat Unterpunkte)
Schnecken (hat Unterpunkte)
Krebse (hat Unterpunkte)
Fische (hat Unterpunkte)
-Leerzeile transparent-
Das hab ich abzugeben (hat Unterpunkte)
Futterliste und Rezepte (hat Unterpunkte)
HMF - Hamburger Mattenfilter
Bio - Co2 Anlagen
Aufzuchtkasten
-Leerzeile transparent-
Impressum
Kontakt


Ich habe nun versucht, den Code aus dem Beitrag 95614 in meinen bestehenden Code einzubauen. Aber leider klapt das nicht, da ich nicht weiß wo genau ich das einbauen soll. Ich habe es also einfach mal versucht, aber dann wird die Seite übereinander aufgebaut: unten mit dem neu eingegebenen Code (bei dem das Menü ganz oben anfängt ohne Header etc. und noch HTML Text nach der Navigation kommt) und darüber wird dann auch noch meine bestehende Seite mit leichten Änderungen der Farbcodes gelegt. Ich habe auch Hover-Effekte... die gehen gar nicht mehr.

Daher habe ich den alten Code wieder eingespielt, ihr könnt den Fehler also leider nicht sehen.

Kann mir jemand helfen, an welcher Stelle ich die Änderungen in den bisherigen Code eintragen muss?

Wäre wirklich super nett wenn da jemand helfen kann. Vielen Dank schon mal im voraus für die Bemühungen.

Im Anschluss habe ich noch meinen bisherigen Code reinkopiert, vielleicht hilft das ja.

LG

Clarissa

<style typ= "text/css">
<!--
/* Hintergrund hinter Design */
body {
background-color:#000000;
background-repeat: repeat;
text-align:center; }
/* Titel im Header entfernen */
td.headline {visibility:hidden;}

/* Container zum positionieren des Designs */
#Design_Iceblue {
position:absolute;
top: 0px;
left: 30px;
width: 980px; }

/* Design kürzen (kein scrollen des Designs bei kurzen Seiten) */
td.edit_main_tr {
height: 50% !important; }

/* Schriftfarbe + Größe auf Seiten */
td {
color:#000000;
font-size:10px;
text-align:left;
font-family: arial,verdana; }

/* Header oben */
td.edit_header_full {
background-color:#FFFFFF;
background-image:url(http://img.webme.com/pic/g/garnelen-schnecken-fische/headertest2.jpg);
background-repeat:no-repeat;
border:1px solid #000000; }

/* Titel über Navigation */
td.nav_heading {
color:#FFFFFF;
font-size:10px;
font-family:arial,verdana;
text-align:left;
height:29px;
background-color:#000000;
background-image:url(http://img.webme.com/pic/i/iceblue-test/balken_schwarz.jpg);
border:1px solid #000000; }

/* Navigation Buttons */
td.nav {
background-color:#E2E2E2;
background-image: url(http://img.webme.com/pic/g/garnelen-schnecken-fische/button3.jpg);
border:1px solid #000000; }

/* rechte Boxen 1 bis 5 */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#000000;
font-size:10px;
font-family.arial,verdana;
text-align:left;
background-color:#F2F2F2;
background-image: url();
border:1px solid #000000; }
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color: #000000;
font-size: 10px;
font-family: arial,verdana;
text-align: center;
background-color: #FFFFB2;
background-image:url(); }

/* Hover-Effekt Navigation Buttons */
td.nav:hover {
background-color:#800000;
background-image:url(http://img.webme.com/pic/g/garnelen-schnecken-fische/button2.jpg);
border:1px solid #000000; }

/* Textlinks in Navigation */
td.nav a {
color:#000000;
font-size:10px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }

/* Hover-Effekt Textlinks Navigation */
td.nav a:hover{
color:#000000;
font-size:10px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }

/* Bild unter Navigation entfernt */
td.edit_below_nav {display:none;}

/* Hintergrund Navigation */
td.edit_navi_headbg {
height: 50%;
background-color: ;
background-image:url();
border:0px solid #000000; }

/* Balken über Textfeld */
td.edit_content_top {
height:29px;
background-color:#000000;
background-image:url(http://img.webme.com/pic/i/iceblue-test/balken_schwarz.jpg);
border:1px solid #000000; }

/* Seitentitel über Textfeld */
td.headline2 {
color:#FFFFFF;
font-size:12px;
font-family:arial,verdana;
text-align:left; }

/* Textfeld */
td.edit_content {
padding-top:15px;
padding-bottom:15px;
background-color:#FFFFFF;
background-image: url();
border:1px solid #000000; }

/* Linke Spalte im Textfeld */
td.edit_content_left_spacer {
background-color:#F2F2F2;
background-image:url(); }

/* Rechte Spalte im Textfeld */
td.edit_content_right_spacer {
background-color:#F2F2F2;
background-image:url(); }

/* Erste Balken unter Textfeld */
td.edit_content_bottom {
height:29px;
background-color:#000000;
background-image: url(http://img.webme.com/pic/i/iceblue-test/balken_schwarz.jpg);
border:1px solid #000000; }

/* Zweiter Balken unter Textfeld (mit Counter) */
td.edit_content_bottom2 {
background-color: ;
background-image: url();
border:0px solid #000000; }


/* große Feld unter Textfeld */
td.edit_rechts_cbg {
height:50px;
background-color: ;
background-image: url();
border:0px solid #000000; }

/* Streifen rechts vom Design entfernt mit */
td.edit_rechts_sbg {display:none;}

/* Titel über rechter Box */
td.sidebar_heading {
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana ;
text-align:center;
height:29px;
background-color:#000000;
background-image: url(http://img.webme.com/pic/i/iceblue-test/balken_schwarz.jpg);
border:1px solid #000000; }

/* rechte Boxen 1 bis 5 */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#000080;
font-size:14px;
font-family.arial,verdana;
text-align:left;
background-color:#F2F2F2;
background-image: url();
border:1px solid #000000; }

/* Abschluß unter Boxen 1 bis 5 entfernt mit */
td.edit_rb_footer {display:none; }

/* Hintergrund unter rechten Boxen */
td.edit_rechts_bottom {
background-color: ;
background-image: url();
border:0px solid #000000; }
-->

<style typ= "text/css"> td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color: #000000;
font-size: 10px;
font-family: arial,verdana;
text-align: justify;
background-color: #FFFFff;
background-image:url(); }
</div>

</style>
<!-- Nach dem </style> keine CSS-Codes mehr -->
<div id="Design_Iceblue">

ist es das, was du brauchst?

Mit diesem Code könnt ihr Leerräume in die Navigation machen.

td#nav_leer{visibility:hidden;height:10px;}
td#nav_leer a{height:10px;display:none;}

td#nav_leer2{visibility:hidden;height:10px;}
td#nav_leer2 a{height:10px;display:none;}

td#nav_leer3{visibility:hidden;height:10px;}
td#nav_leer3 a{height:10px;display:none;}

Erstellt dazu Seiten namens leer, leer2 und leer3. Durch hinschieben der Seiten, an der Stelle wo der Leerraum sein soll, erwirkt ihr einen Leerraum von 10 Pixel Höhe, die in der Navigation zu sehen ist.


Um eine Seite nur zu verstecken geht ihr wie folgt vor:
Nennt eine Seite einfach nur seite (in dem Beispiel) und fügt den nachfolgenden Code zusätzlich zwischen den Styletags ein. Damit ist die Seite zum bearbeiten zwar da, aber in der Navigation nicht sichtbar. Aufgerufen kann sie also nur, wenn es jemand weiß.

td#nav_seite{display:none;}

diese befehle kommen in den styletags:

gruss gringo
______________
Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell

Hallo Gringo,

vielen Dank, das mit den transparenten Zeilen hatte ich gefunden. Mein Problem ist aber, diese Zeilen und den Code für das Foldout-menü in meinen bisherigen Code (über dem Design) einzubinden. Da kommt irgendwie nur dieser komische Mix aus 2 Seiten raus.

Kennst Du Dich da aus, wo (also an welcher Stelle in meinem bisherigen Code) ich welchen Part des Foldout-Menüs bzw. der leer-Seiten einfügen muss?

Ich komm echt nimmer mit...

Vielen Dank.

LG

Clarissa

du meinst, dass die leerräume in der navigation links angezeigt werden?

einfach so, als abschluss deines jetzigen codes, mit ransetzen. die unterseiten müssen von dir aber vorher korrekt ausgegeben werden. scheint ja der fall zu sein.

solltest du aber von einer navigation oben sprechen (horizontal es oder coolmenü), dann kann ich dir nicht helfen.

gruss gringo
______________
Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell

Hallo Gringo,

nein das meinte ich nicht. Aber danke, jetzt weiß ich zumindest schon mal wo ich den Code für die Leerzeilen dann einfügen muss.

Das Foldout Menü wollte ich nicht oben haben, sondern da wo es jetzt ist.

Vielleicht weiß ja jemand wie ich das machen muss...

Aber lieben Dank für Deine Hilfe, einen Teil hab ich ja nun schon

ich wünsche noch einen schönen erholsamen Sonntag abend,

LG

Clarissa