The phpwcms support forum will help to find answers to your questions. The small but strong community is here since more than 10 years.
Code: Select all
#bread a:last-child {font-weight: bold;}Code: Select all
<div id="bread">{BREADCRUMB:ID}</div>Code: Select all
<span class="ist">{BREADCRUMB}</span>
Code: Select all
{
padding: 0 0 10px 0;
color: #666;
font-size: 14px;
} also alles bold und die links aber wiederKeineAhnung wrote:.ist {
padding: 0 0 10px 0;
color: #666;
font-size: 14px;
font-weight: bold;
}
und HTML.ist a { font-weight: normal; }
Code: Select all
<div class="ist">{BREADCRUMB:1}</div>
Code: Select all
/* 27.06.07 Horizontales Menü mit einer horiz. Unterebene
Navigation core
http://www.phpwcms.de/forum/viewtopic.php?p=88630#88630
[EDIT 05.05.08 KH: ]
- All ".navig" converted to ".navig ul"
- Call: <div class="navig">{NAV_LIST_UL:,0,2,,selected}</div>
[/EDIT]
*/
.navig {
line-height: 1;
margin: 0 0 1.2em 50px; /* -- EDIT -- */
display: block;
position: relative;
width: 500px; /* -- EDIT -- */
}
/* remove all list stylings */
.navig ul, .navig ul ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
/* move all list items into one row, by floating them */
.navig ul li {
margin: 0;
padding: 0 1px;
border: 0;
display: block;
float: left;
background: url(../../picture/navi/menubg.gif) repeat-x;
}
/* initialy hide all sub menus */
.navig ul ul {
width: 100%;
display: block;
visibility: hidden; /* [EDIT] change to visible; if you want to show the sub menu line always, else hidden; [/EDIT] */
position: absolute;
clear: both;
top: 1.8em;/* watch for this value! you must make sure that this value and value of line-height for the parent items are such that it is possible to move the mouse over to submenu */
left: 0;
}
/* -- float.clear -- force containment of floated LIs inside of main UL */
.navig ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
/* -- float.clear.END -- */
.navig ul li.selected ul, .navig ul li:hover ul {
visibility: visible;
}
.navig ul li.selected ul {
z-index: 10;
}
.navig ul li:hover ul {
z-index: 100;
}
/* Navigation make-up */
.navig ul {
font-size: 12px;
font-weight: bold;
color: #fff;
background: url(../../picture/navi/menubg.gif) repeat-x;
margin: 0em auto 2em;
padding: 0 1em;
width: 550px; /* this value should be close to what is needed for elements to stay on one line */
}
.navig ul a {
color: #fff;
text-decoration: none;
padding: 1em 5px 1.05em; /*THIS DEFINES NAV LI HEIGHT*/
display: block;
text-transform: uppercase;
}
.navig ul li {
margin: 0;
/*border-right: 1px dotted #fff;*/
}
.navig ul li li{
border: 0px;
}
/* if the following selector was ".navig ul li:hover a" IE7 will NOT render nested UL! the reason is the background-color rule. */
.navig ul li:hover {
color: #000;
background-color: #cde;
}
/* which is why the link is styled separatelly */
.navig ul li:hover a {
color: #FFF;
}
.navig ul li:hover ul {
background-color: #cde;
}
/* always pay attention that the value for top is such that it is possible to move the mouse over to submenu */
.navig ul ul {
top: 3em;
padding: 0 1em;/* should be identical to .navig ul, for best results */
color: #FFF;
width: 550px;
}
.navig ul li li {
padding: 0 6px;
background: url(../../picture/navi/sub_bg.gif) repeat-x;
}
.navig ul li ul {
background: url(../../picture/navi/sub_bg.gif) repeat-x;
}
.navig ul li li a {
color: #000;
padding: 0.3em;
font-family: sans-serif, 'Arial';
font-size: 11px;
text-transform: none;
}
/* fix the colors for selected item and submenu, for better usability */
.navig ul li.selected li a, .navig ul li.selected li a:hover {
color: #FFF;
background: url(../../picture/navi/sub_bg.gif) repeat-x;
}
.navig ul li.selected li, .navig ul li.selected:hover li a, .navig ul li.selected ul {
background: url(../../picture/navi/sub_bg.gif) repeat-x;
text-decoration:none;
}
.navig ul li li.selected, .navig ul li.selected:hover li.selected a, .navig ul li li.selected a{
background: url(../../picture/navi/sub_hover_bg.gif);
}
.navig ul li.selected li a:hover, .navig ul li.selected:hover li a:hover{
color: #eee;
}
/* IE5/Mac: \*//*/
.navig ul {
display: inline-block;
}
.navig ul a {
float: left;
}
.navig ul li ul {
top: 1.8em;
height: 2em;
}
.navig ul li li, .navig ul li li a {
display: inline;
float: none;
}
/* */[/EDIT]Ich wollte zudem noch erreichen, daß das Submenü nach dem Anklicken eines Sub-Menüpunktes
stehen bleibt. Verbessert die übersichtlichkeit doch ganz erheblich. Wie ich finde.
Für alle die es interessiert:
Und dann noch den aktiven Sub-Menüpunkt in fett darstellen:
Code: Select all
li.selected a { font-weight: bold; }
Code: Select all
<div class="navig">
{NAV_LIST_UL:,0,2,navig twolevel,selected}
</div>
Code: Select all
{NAV_LIST_UL:,0,2,navig,selected,}Code: Select all
<ul id="active_0" class="navig">
<li id="li_active_1" class="sub_ul navig selected"><a href="index.php?hallihallo-1">HalliHallo-1</a>
<ul id="active_1" class="navig">
<li id="li_active_4" class="sub_no"><a href="index.php?hallihallo-1-1">HalliHallo-1-1</a></li>
<li id="li_active_5" class="sub_no"><a href="index.php?hallihallo-1-2">HalliHallo-1-2</a></li>
<li id="li_active_6" class="sub_no"><a href="index.php?hallihallo-1-3">HalliHallo-1-3</a></li>
</ul>
</li>
<li id="li_active_2" class="sub_ul"><a href="index.php?hallihallo-2">HalliHallo-2</a>
<ul id="active_2">
<li id="li_active_7" class="sub_no"><a href="index.php?hallihallo-2-1">HalliHallo-2-1</a></li>
<li id="li_active_8" class="sub_no"><a href="index.php?hallihallo-2-2">HalliHallo-2-2</a></li>
</ul>
</li>
<li id="li_active_3" class="sub_no"><a href="index.php?hallihallo-3">HalliHallo-3</a></li>
<li id="li_active_16" class="sub_no"><a href="index.php?hallihallo-4">HalliHallo-4</a></li>
</ul>
Code: Select all
.navig {
font-size: 12px;
font-weight: bold;
color: #fff;
background: url(../../../picture/menubg.gif) repeat-x;
margin: 0em auto 2em;
padding: 0 1em;
/*width: 700px;*/ /* this value should be close to what is needed for elements to stay on one line */
}
Hier nochmal die entsprechende css. Ist die gleiche wie von FlipFlop weiter oben.<ul id="uff_0" class="navig">
<li id="li_uff_1" class="sub_ul"><a href="index.php?hallihallo-1">HalliHallo-1</a>
<ul id="uff_1">
<li id="li_uff_4" class="sub_no"><a href="index.php?hallihallo-1-1">HalliHallo-1-1</a></li>
<li id="li_uff_5" class="sub_no"><a href="index.php?hallihallo-1-2">HalliHallo-1-2</a></li>
<li id="li_uff_6" class="sub_no"><a href="index.php?hallihallo-1-3">HalliHallo-1-3</a></li>
</ul>
</li>
<li id="li_uff_2" class="sub_ul"><a href="index.php?hallihallo-2">HalliHallo-2</a>
<ul id="uff_2">
<li id="li_uff_7" class="sub_no"><a href="index.php?hallihallo-2-1">HalliHallo-2-1</a></li>
<li id="li_uff_8" class="sub_no"><a href="index.php?hallihallo-2-2">HalliHallo-2-2</a></li>
</ul>
</li>
<li id="li_uff_3" class="sub_ul"><a href="index.php?hallihallo-3">HalliHallo-3</a>
<ul id="uff_3">
<li id="li_uff_17" class="sub_no"><a href="index.php?HalliHallo-3-1">HalliHallo-3-1</a></li>
<li id="li_uff_18" class="sub_no"><a href="index.php?HalliHallo-3-2">HalliHallo-3-2</a></li>
</ul>
</li>
<!-- Weil hier die Klasse navig zugewiesen wird, bricht die Hauptnavigation um -->
<li id="li_uff_16" class="sub_ul navig selected"><a href="index.php?hallihallo-4">HalliHallo-4</a>
<ul id="uff_16" class="navig">
<li id="li_uff_19" class="sub_no"><a href="index.php?HalliHallo-4-1">HalliHallo-4-1</a></li>
<li id="li_uff_20" class="sub_no"><a href="index.php?HalliHallo-4-2">HalliHallo-4-2</a></li>
<li id="li_uff_21" class="sub_no"><a href="index.php?HalliHallo-4-3">HalliHallo-4-3</a></li>
</ul>
</li>
</ul>
Code: Select all
/* 27.06.07 Horizontales Menü mit einer horiz. Unterebene
Navigation core
http://www.phpwcms.de/forum/viewtopic.php?p=88630#88630
*/
.navig {
line-height: 1;
margin: 0 0 1.2em 0;
display: block;
position: relative;
}
/* remove all list stylings */
.navig, .navig ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
/* move all list items into one row, by floating them */
.navig li {
margin: 0;
padding: 0 1px;
border: 0;
display: block;
float: left;
background: url(../../../picture/menubg.gif) repeat-x;
}
/* initialy hide all sub menus */
.navig ul {
width: 100%;
display: block;
visibility: hidden;
position: absolute;
clear: both;
top: 1.8em;/* watch for this value! you must make sure that this value and value of line-height for the parent items are such that it is possible to move the mouse over to submenu */
left: 0;
}
/* -- float.clear -- force containment of floated LIs inside of main UL */
.navig:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
/* -- float.clear.END -- */
.navig li.selected ul, .navig li:hover ul {
visibility: visible;
}
.navig li.selected ul {
z-index: 10;
}
.navig li:hover ul {
z-index: 100;
}
/* Navigation make-up */
.navig {
font-size: 12px;
font-weight: bold;
color: #fff;
background: url(../../../picture/menubg.gif) repeat-x;
margin: 0em auto 2em;
padding: 0 1em;
width: 550px; /* this value should be close to what is needed for elements to stay on one line */
}
.navig a {
color: #fff;
text-decoration: none;
padding: 1em 5px 1.05em; /*THIS DEFINES NAV LI HEIGHT*/
display: block;
text-transform: uppercase;
}
.navig li {
margin: 0;
/*border-right: 1px dotted #fff;*/
}
.navig li li{
border: 0px;
}
/* if the following selector was ".navig li:hover a" IE7 will NOT render nested UL! the reason is the background-color rule. */
.navig li:hover {
color: #000;
background-color: #cde;
}
/* which is why the link is styled separatelly */
.navig li:hover a {
color: #FFF;
}
.navig li:hover ul {
background-color: #cde;
}
/* always pay attention that the value for top is such that it is possible to move the mouse over to submenu */
.navig ul {
top: 3em;
padding: 0 1em;/* should be identical to .navig, for best results */
color: #FFF;
width: 550px;
}
.navig li li {
padding: 0 6px;
background: url(../../../picture/sub_bg.gif) repeat-x;
}
.navig li ul {
background: url(../../../picture/sub_bg.gif) repeat-x;
}
.navig li li a {
color: #000;
padding: 0.3em;
font-family: sans-serif, 'Arial';
font-size: 11px;
text-transform: none;
}
/* fix the colors for selected item and submenu, for better usability */
.navig li.selected li a, .navig li.selected li a:hover {
color: #FFF;
background: url(../../../picture/sub_bg.gif) repeat-x;
}
.navig li.selected li, .navig li.selected:hover li a, .navig li.selected ul {
background: url(../../../picture/sub_bg.gif) repeat-x;
text-decoration:none;
}
.navig li li.selected, .navig li.selected:hover li.selected a, .navig li li.selected a{
background: url(../../../picture/sub_hover_bg.gif);
}
.navig li.selected li a:hover, .navig li.selected:hover li a:hover{
color: #eee;
}
/* IE5/Mac: \*//*/
.navig {
display: inline-block;
}
.navig a {
float: left;
}
.navig li ul {
top: 1.8em;
height: 2em;
}
.navig li li, .navig li li a {
display: inline;
float: none;
}
/* */
