phpwcms Support Forum

Hallo werte Forengemeinschafft=)

Ich brauche eure Hilfe. Bin seit 6 Uhr heute Abend keinen Schritt weiter gekommen=(

Folgendes:
Erstmal der Link, damit ihr euch das ganze besser Vorstellen könnt.
http://jusossg.pytalhost.de/index.php

Ich möchte Links das Menü gerne mit meinen eigenen Grafiken gestalten. Davon bin ich aber shcon wieder ab, da dies so ziehmlich unmöglich scheint (Suchfunktion)

Mittlerweile bin ich so weit, dass ich nur anstadt diesem Grau ein kleines Bild im Hintergrund haben will ( immer das gleiche )
Das müsste doch möglich sein oder?

Bitte bitte sagt mir a) ja und b) wie=)

Ich hoffe auf euch;)

P.s.:
Hab mir gerade überlegt ich zeig euch die Grafik mal:

Das soll anstadt dem grauen Hintergrund der hintergrund bei der navi sein.

Hoffe ich hab mich nicht zuuuuuu kompliziert und undeutlich ausgedrückt^^

Viele Grüße

Hallo der_mp,

ich würde für diese Vorhaben eine andere Navi verwenden. Gehe mit der Zeit und nehme die NAV_LIST_UL.
Hier die Version für die 1.3x: http://www.phpwcms.de/forum/viewtopic.php?p=83839

Damit kannst du deine Idee probelmlos umsetzen.

Knut

Hey. ist das versionsdings auf die verison vom phpwcms bezogen?

Habe phpwcms 1.2.9
Also müsste ich das hier nehmen oder?

(For the version 1.27 - 1.29 please see: http://www.phpwcms.de/forum/viewtopic.php?p=74552#74552)

JA genau.

Hehe noch ein Nachtgeist.. btw kann das sein, dass die Uhr hier nicht richtig geht?

Nagut dann versuch ich das gleich oder mogen mal. Zur not hab ich dich schon bei ICQ geadded

Okidoki, habs drin! *stolzbin*

Und wie mach ich das jetzt mit den Bildern?
Also update: Bild anstadt braun (siehe page)

Viele Grüße

Du musst dich natürlich mit dem Thema CSS auseinandersetzen, sonst kommst du mit CMS-Systemen nicht weit (Außer vielleicht mit Data-Becker.....)

Das ist recht simpel, z.B.:

/* ++ Hintergrundfarbe; URL der Grafik ; Grafik einrücken z.B. 10px */
background: #993400 url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;

#993400 ist hier die Hintergrundfarbe, wenn notwendig.
navi1_norm.gif ist die hinterlegte Grafik, wobei es keine Rolle spielt ob es nur ein kleiner Pfeil ist oder eine Fläche !!!
10px 1px ist die Position X und Y der Hintergrundgrafik für diesen Navi-Punkt. Der Ursprung ist immer oben links.
Dieses Schema ist auf alle Hintergrundgrafiken anwendbar.

Du kannst für jeden Status der Navigation eine eigene Hintergrundfarbe und/oder Grafik einsetzen.
Jedes Level kann noch einmal separat behandelt werden. (http://www.phpwcms.de/forum/viewtopic.php?p=71772#71772)

In deinem Fall käme so etwas zur Ausführung:

/* ++ Hintergrundfarbe; URL der Grafik ; Grafik einrücken z.B. 10px */
background: #CC0000 url(../../img/article/navi_mid.gif) 0px 0px no-repeat;

Du musst natürlich die Breite der Navigation einstellen und entsprechend den Hilfen im jeweiligen Kommentar anpassen.

width: 172px; /* ++ Width of Menu Items // Breite der Navigation */

Gruß Knut

Ahaaaa:)

An die Möglichkeit den Pfeil einfach zu Missbrauchen hatte ich noch nicht gedacht

Habe mich auch schon ein *bisschen* mit CSS auseinander gesetzt aber naja ist alles nicht so einfach, learning by doing bringt einen nicht überall weiter;)

Jetz wo dus sagst hätte ich auch selber drauf kommen können hehe War immer noch auf dem "Holzweg" anstadt einer Farbe ein Bild angeben zu wollen;)

Naja ich muss jetzt weg probiere das heute Abend mal. Danke dir aber schonmal für deine Hilfe und Geduld mit mir

Oki klappt fast alles:)

Zwei Fragen noch, wo kann ich die Höhe naja höher machen;)
Also die einzelnen Navikästchen News usw
Weil die Grafik höher ist und somit nicht ganz dargestellt wird

Und wisst ihr/du warum die Navi so breit ist? sollte eig zusammen mit dem Bild aufhören, da beide 172px breit sind

hier mal meine css:

Code: Select all

/* ======================================================================
   CSS for an vertical menu
   Template call: <div class="nlu_navi1">{NAV_LIST_UL:F,0,,,active}</div>
   Level 0 - 4;
   07.10.06 flip-flop (KH)

========================================================================= */

.nlu_navi1 {
   margin: 0;
   padding: 0 0 0 0;
   border: 0;
   text-decoration: none;
   /* ++ e.g. 11px font and 19px height // z.B. 11px font und 19px hoch */
   font: normal normal 11px/19px Verdana, Geneva, Arial, Helvetica, sans-serif;
   width: 172px;  /* ++ Width of Menu Items // Breite der Navigation*/
/*   float:left; */
}

.nlu_navi1 em { font-style: normal; }

.nlu_navi1 ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style: none;
   width: 172px;  /* ++ Width of Menu Items // Breite der Navigation */
}

.nlu_navi1 ul li { position: relative; }


/* ==== Styles for Menu Items ================================== */

/* ==== LEVEL X ================================================ */

/* ====  simple link <a> // einfacher Link <a> ==== */
.nlu_navi1 ul li a,
.nlu_navi1 ul li a:link,
.nlu_navi1 ul li a:visited,
.nlu_navi1 ul li a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   color: White;           /* ++ Text color // Textfarbe */

   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
/* ++ Hintergrundfarbe; URL der Grafik ; Grafik einrücken z.B. 10px */
background: #CC0000 url(../../img/article/navi_mid.gif) 0px 0px no-repeat;

   /* ++ Text adjust e.g. upper gap and left gap 25px */
   /* ++ Text justieren 1px oben und 25px von links */
   padding: 1px 0 0 30px;
   
   /* ++ Den "white-space" Fehler im IE7 vermeiden */
   /* ++ Killing the "white-space" bug in IE7 */
   \width: 172px;  /* IE5x Opera <= 5 */
   widt\h: 172px;  /* = (Width of Menu Items) - (padding-right + left) */

   /* ++ bottom line if you want */
   /* ++ Untere Linie wenn gewünscht */
   border: 0;
   border-bottom: 1px solid #ccc; /* ++ horiz. line between */
}

/* ====  active link <a> // aktiver Link <a> ==== */
.nlu_navi1 ul li.active a,
.nlu_navi1 ul li.active a:link,
.nlu_navi1 ul li.active a:visited,
.nlu_navi1 ul li.active a:active {
   color: White;           /* ++ Text color // Textfarbe */
   font-weight: bold;       /* ++ Bold if you want // Fett wenn gewünscht */

   /* background for the active state // Hintergrund für den aktiven Status */
background: #CC0000 url(../../img/article/navi_mid_act.gif) 0px 1px no-repeat;
}

/* ====  hover link <a> // Maus über Link <a> ==== */
.nlu_navi1 ul li a:hover,
.nlu_navi1 ul li.active a:hover {
   color: White;
/*   text-decoration: underline; */
background: #CC0000 url(../../img/article/navi_mid_hov.gif) 0px 1px no-repeat;
}


/* ==== LEVEL X+1 ============================================== */

.nlu_navi1 ul ul li.sub_no a,
.nlu_navi1 ul ul li.sub_no a:link,
.nlu_navi1 ul ul li.sub_no a:visited,
.nlu_navi1 ul ul li.sub_no a:active,
.nlu_navi1 ul ul li.sub_ul a,
.nlu_navi1 ul ul li.sub_ul a:link,
.nlu_navi1 ul ul li.sub_ul a:visited,
.nlu_navi1 ul ul li.sub_ul a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
   color: #FFFFFF;
background: #CC0000 url(../../img/article/navi_mid_norm.gif) 0px 1px no-repeat;
   padding: 1px 0 0 0px;
   \width: 172px;  /* IE5x Opera <= 5 */
   widt\h: 172px;  /* = (Width of Menu Items) - (padding-right + left) */
   border: 0;
   border-bottom: 1px solid #ccc; /* IE6 Bug */
}

.nlu_navi1 ul ul li.active a,
.nlu_navi1 ul ul li.active a:link,
.nlu_navi1 ul ul li.active a:visited,
.nlu_navi1 ul ul li.active a:active {
   color: White;
   font-weight: bold;
background: #CC0000 url(../../img/article/navi_mid_act.gif) 0px 1px no-repeat;
}

.nlu_navi1 ul ul li a:hover,
.nlu_navi1 ul ul li.sub_no a:hover,
.nlu_navi1 ul ul li.sub_ul a:hover,
.nlu_navi1 ul ul li.active a:hover {
   color: White;
/*   text-decoration: underline; */
background: #CC0000 url(../../img/article/navi_mid_hov.gif) 0px 1px no-repeat;
}
   
/* ==== LEVEL X+2 ============================================== */

.nlu_navi1 ul ul ul li.sub_no a,
.nlu_navi1 ul ul ul li.sub_no a:link,
.nlu_navi1 ul ul ul li.sub_no a:visited,
.nlu_navi1 ul ul ul li.sub_no a:active,
.nlu_navi1 ul ul ul li.sub_ul a,
.nlu_navi1 ul ul ul li.sub_ul a:link,
.nlu_navi1 ul ul ul li.sub_ul a:visited,
.nlu_navi1 ul ul ul li.sub_ul a:active  {
   display: block;
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
   color: #FFFFFF;
background: #CC0000 url(../../img/article/navi_mid_norm.gif) 0px 1px no-repeat;
   padding: 1px 0 0 0px;
   \width: 172px;  /* IE5x Opera <= 5 */
   widt\h: 172px;  /* = (Width of Menu Items) - (padding-right + left) */
   border: 0;
   border-bottom: 1px solid #ccc; /* IE6 Bug */
}

.nlu_navi1 ul ul ul li.active a,
.nlu_navi1 ul ul ul li.active a:link,
.nlu_navi1 ul ul ul li.active a:visited,
.nlu_navi1 ul ul ul li.active a:active {
   color: White;
   font-weight: bold;
background: #CC0000 url(../../img/article/navi_mid_act.gif) 0px 1px no-repeat;
}

.nlu_navi1 ul ul ul li a:hover,
.nlu_navi1 ul ul ul li.sub_no a:hover,
.nlu_navi1 ul ul ul li.sub_ul a:hover,
.nlu_navi1 ul ul ul li.active a:hover {
   color: White;
/*   text-decoration: underline; */
background: #CC0000 url(../../img/article/navi_mid_hov.gif) 0px 1px no-repeat;
}
/*==== END LEVEL X ============================================= */

/* Holly Hack. IE Requirement \*/
* html .nlu_navi1 ul li { float: left; height: 1%; }
* html .nlu_navi1 ul li a { height: 1%; }
/* End */

/* ==== End  nlu_navi1_========================================= */

der_mp wrote:Zwei Fragen noch, wo kann ich die Höhe naja höher machen;)
Also die einzelnen Navikästchen News usw
Weil die Grafik höher ist und somit nicht ganz dargestellt wird

.nlu_navi1 wrote: /* ++ e.g. 11px font and 19px height // z.B. 11px font und 19px hoch */
font: normal normal 11px/19px Verdana, Geneva, Arial, Helvetica, sans-serif;

der_mp wrote:Und wisst ihr/du warum die Navi so breit ist? sollte eig zusammen mit dem Bild aufhören, da beide 172px breit sind

.nlu_navi1 wrote: padding: 1px 0 0 30px;
/* ++ Den "white-space" Fehler im IE7 vermeiden */
/* ++ Killing the "white-space" bug in IE7 */
\width: 172px; /* IE5x Opera <= 5 */
widt\h: 142px; /* = (Width of Menu Items) - (padding-right + left) (172 - 30 = 142) */

flip-flop wrote:Du musst natürlich die Breite der Navigation einstellen und entsprechend den Hilfen im jeweiligen Kommentar anpassen.

Knut

phpwcms Support Forum

Menü in Bildern oder mit Backgroundbild

Menü in Bildern oder mit Backgroundbild