Brauche Hilfe mit NAV_LIST_UL

Get help with installation and running phpwcms here. Please do not post bug reports or feature requests here.
Post Reply
tinoo
Posts: 311
Joined: Thu 16. Jun 2005, 11:16
Location: Zürich, Switzerland
Contact:
Contact tinoo

Brauche Hilfe mit NAV_LIST_UL

Post by tinoo »

Hallihallo

Hm, habe in einer 1.2.8-er Installation, die bislang NAV_TABLE_COLUMN als Hauptnavigation genutzt hat, auf NAV_LIST_UL umgestellt. Danke den hier im Forum gefundenen Informationen ging das mehr oder weniger flott von der Hand... Im FF und im Opera schaut das Ganze auch ganz gut aus, ABER...

Der IE hat zuletzt auch mit NAV_TABLE_COLUMN ärger gemacht, darum bin ich erst überhaupt auf die Idee gekommen, auf NAV_LIST_UL umzustellen. Obwohl es sich um eine sehr einfache Navigation handelt, stellen sich unter IE (teilweise auch FF und Opera) folgende Probleme:

1) Der rechte Rand (dottet line) der linken Spalte (#navBlockLinks) wird verschoben, resp. unter die Hauptspalte (#mainBlock) geschoben... Am Besten sieht man den Unterschied, wenn man zwischen "Startseite" und "Unternehmen" und "Wegbeschreibgung" hin und her wechselt...

2) Die nachfolgende horizontale Linie mit dem Suchfeld, Print und Sitemap wird bei gewissen aktiven Menüpunkten über die Navigation geschoben.
--> Das Problem hab ich mittlerweile mit einem <div style="clear:all;"> gelöst...

3) Im IE werden aktive Menüelemente um 2 oder 3 Pixel nach rechts verschoben - warum?

Die Seite zum Anschauen ist: http://www.atp-group.ch

Die relevanten Elemente sind:

Code: Select all

#navBlockLinks {
	width: 180px;
	padding: 8px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: top;
	text-align: left;
	border-right: 1px dotted #003F75;
	background: url(/picture/layout/bg_left.jpg) repeat-x top;
}
#mainBlock {
	width: 580px;
	color: #000000;
	padding: 8px 25px 30px 25px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: top;
	background: url(/picture/layout/bg_main.gif) no-repeat bottom;
}
Die Formatierung des Menüs schaut so aus:

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)

   For IE7 we need this at the "header:" section in your template:
   ..................................................
   <!--[if IE]><style>
   .nlu_navi1_docu ul li { float: left; height: 1%; }
   .nlu_navi1_docu ul li a { height: 1%; }
   </style><![endif]-->
   ..................................................
   but using Mac it doesn´t work. At this time the best solution are no
   patch at the header section.!!!! Kh 06/11/14
========================================================================= */

.nlu_navi1 {
   margin: 0;
   padding: 0 0 0 0;
   border: 0;
   text-decoration: none;
}

.nlu_navi1 em { font-style: normal; }

.nlu_navi1 ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style: none;
   /* width: 100%;   ++ 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;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #003F75;
   font-weight: bold;
   background: url(../../img/article/nav_link_0.gif) no-repeat;

   /* ++ Text adjust e.g. upper gap and left gap 25px */
   /* ++ Text justieren 1px oben und 25px von links */
   padding: 0 0 0 15px;
 line-height: 25px;
}

/* ====  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 {
   background: url(../../img/article/nav_link_1.gif) no-repeat;
}

/* ====  hover link <a> // Maus über Link <a> ==== */
.nlu_navi1 ul li a:hover,
.nlu_navi1 ul li.active a:hover {
   text-decoration: underline;
   background: url(../../img/article/nav_link_1.gif) 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;
   background: url(../../img/article/nav_link_0.gif) 10px 0px no-repeat;
   padding: 0 0 0 25px;
}

.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 {
   background: url(../../img/article/nav_link_1.gif) 10px 0px 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 {
   text-decoration: underline;
   background: url(../../img/article/nav_link_1.gif) 10px 0px 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;
   background: url(../../img/article/nav_link_0.gif) 20px 0px no-repeat;
   padding: 0 0 0 35px;
}

.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 {
   text-decoration: underline;
   background: url(../../img/article/nav_link_1.gif) 20px 0px 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 {
   text-decoration: underline;
   background: url(../../img/article/nav_link_1.gif) 20px 0px 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_========================================= */
Thanks to flip-flop, by the way :lol:

Hat jemand eine Idee, wie ich das Menü so hinbekommen, dass es sich auch im IE anständig benimmt?

Danke für die Hilfe...
Greetz, tinoo
Top
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:
Contact flip-flop

Post by flip-flop »

Hi tinoo,

du arbeitest mit einem Gemisch aus Tabellen- und CSS Layout.
Das geht in 99% der Fälle schief.
Entscheide dich für eine Variante.
Das Problem der wechselnden Breiten wird mit Sicherheit von der Tabelle ausgelöst, denn die weiß nicht so richtig wie breit sie sein darf/muss.

Zur Navigation: Diese Listenformatierungen sind recht fragile Elemente.
Halte dich an die Vorgabe, dann funktioniert es auch browserübergreifend.

Gruß Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Top
Post Reply

Return to “phpwcms Support English”