ich experimentiere gerade mit einer bestehenden Seite die auf PHPWCMS umgesetzt werden soll. Das Menü macht mich leider wahnsinnig.
Testseite: http://schei**-lehrer.de/test/
Eingesetzt wurde: <div class="navig">{NAV_LIST_UL:,0,2,,selected}</div>
Ich hätte das Menü, zumindest in der zweiten Zeile gerne zentriert. Dies scheint aber nicht zu gehen. Rechts- oder Linksbündig klappt. Die erste Zeile habe ich mit dem margin Wert von -100 auf die Position "gequält". Die Bachground Bilder wurden noch nicht eingesetzt. Ist ja noch im experimentellen Stadium.
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 -100px; /* -- EDIT -- */
display: block;
position: relative;
width: 800px; /* -- 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;
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: #000000;
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: #000000;
text-decoration: none;
padding: 1em 15px 1.05em; /*THIS DEFINES NAV LI HEIGHT*/
display: block;
text-transform: uppercase;
}
.navig ul li {
margin: 0;
/*border-right: 1px dotted #000000;*/
}
.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: #dbd4a6;
}
/* which is why the link is styled separatelly */
.navig ul li:hover a {
color: #000000;
}
.navig ul li:hover ul {
background-color: #ffffff;
}
/* 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: #000000;
width: 850px;
}
.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: 1.3em;
font-family: sans-serif, 'Arial';
font-size: 12px;
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: #000000;
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;
}
/* */
Besten Dank für eine Hilfe