Zum Inhalt springen

Frage zu horizontaler Navigation

Erstellt am 13. Oktober 2008 · 13 Antworten · letzte Antwort am 14. Oktober 2008

Tags: Frage

Bubumann38 ·

Hallo,

ich habe schon ausführlich die Suche bemüht, komme aber im Ergebnis nicht weiter.
Ich wollte ein Beispiel mit einer horizontalen Navigation nachbauen, bekomme aber leider nur eine weisse Seite. Wo liegt mein Fehler?

Nachstehend die Quellcodes:

HTML Template "tmpl1.html"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Seitentitel</title>
<link href="fileadmin/ogb-relaunch/css/body.css" type="text/css" rel="stylesheet" />
<script language="JavaScript" type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</head>
<body>
###MENU###
</center></body></html>

CSS-Datei "body.css"

body {
	font: 78%/1.5 arial, helvetica, serif;	
	padding: 0;
	margin: 2em;
}
 
#nav, #nav ul {
	float: left;
	width: 86em;
	list-style: none;
	line-height: 1em;
	background-image: url(l1_bg.gif);
	color: #FFF;
	padding: 0;
}
 
#nav li li {
	background:red;
	border-bottom:1px solid #fff;
}
 
#nav a {
	display: block;
	xwidth: 7em;
	color: #FFF;
	text-decoration: none;
	padding: 0.2em 0em;
}
 
#nav a.menuparent  {
	background: url(pfeil.gif) no-repeat 90% 40%;
}
 
#nav li {
	float: left;
	padding: 0;
}
 
#nav ul li a {
	color: #FFF;
	font-size:11px;
	font-weight:bold;
}
 
#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14em;
	font-weight: normal;
	margin: 0;
}
 
#nav li li {
	width: 15em;
}
 
#nav li ul a {
}
 
#nav li ul ul {
	margin: -1.45em 0 0 14em !important;
	margin: -1.45em 0 0 14.45em ;
}
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}
 
#nav li li:hover, #nav li li.sfhover {
	background: #ff4d00;
}
 
#nav li li {
x	background: red;
}
 
#nav li li a {
	padding-left:5px;
}
 
#nav li ul  {
	background-image: none;
}

TS-Code

# Default PAGE object:
page = PAGE
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/ogb-relaunch/templates/tmpl1.htm
page.includeCSS.file1 = fileadmin/ogb-relaunch/css/body.css
page.10.workOnSubpart = DOKUMENT 
page.10.marks.CONTENT < styles.content.get

marks.MENU  = HMENU
marks.MENU  {
	1=GMENU
	1 {
		wrap = <ul id="nav">|</ul>
		expAll = 1
		noBlur = 1

		NO = 1    
		NO {
			allWrap = <li>|</li>
			transparentBackground = 1

			XY = [10.w]+20, 22

			5 = IMAGE
			5.file = fileadmin/ringergeorg/div/horizontal_GMENU/no.gif
		
			10=TEXT
			10 {
				text.field=title
				offset=10,15
				fontColor = #FFFFFF
				fontFile=fileadmin/fonts/arialbd.ttf
				fontSize=10      
			}
		}
		RO <.NO
		RO.5.file = fileadmin/ringergeorg/div/horizontal_GMENU/hover.gif

		ACT <.RO

		IFSUB <.NO
		IFSUB.allWrap =  <li class="menuparent">|

		ACTIFSUB <.RO
		ACTIFSUB.allWrap =  <li class="menuparent">|

		ACTRO <.RO
		ACTIFSUBRO <.RO
		
		IFSUBRO <.ACTIFSUBRO
	}
	2 = TMENU
	2 {
		wrap  = <ul>|</ul></li>
		expAll = 1
		noBlur = 1

		NO = 1  
		NO.allWrap = <li>|</li>

		ACT <.NO
		ACT.allWrap = <li class="nav2act"> |</li>

		IFSUB = 1
		IFSUB.allWrap =  <li class="menuparent">|

		ACTIFSUB = 1
		ACTIFSUB.allWrap =  <li class="menuparent">|
	}
	3 <.2
}
Yigor ·

sieht so überflogen ja ok aus, aber stimmen denn diese pfade?!?

fileadmin/ringergeorg/div/horizontal_GMENU/hover.gif

hast du zu ehren von georg ringer diese angelegt? oder liegen die bilder doch woanders...

gruß

ps: ist denn auch der font da? fileadmin/fonts/arialbd.ttf ?

Bubumann38 ·
Yigor schrieb

sieht so überflogen ja ok aus, aber stimmen denn diese pfade?!?

fileadmin/ringergeorg/div/horizontal_GMENU/hover.gif

hast du zu ehren von georg ringer diese angelegt? oder liegen die bilder doch woanders...

gruß

ps: ist denn auch der font da? fileadmin/fonts/arialbd.ttf ?

Die Pfade muss ich in der Tat noch korrigieren. Die Fonts-Datei muss ich auch noch hochladen. Und dies hatt alles Auswirkungen, dass gar kein Content geladen wird? Wenn ich mir nämlich den Quelltext meiner Seite anschaue, dann steht im Bodybereich nichts drin.

Yigor ·

naja, sogenau kann ich das per ferndiagnose auch nicht sagen.
ich sehe in deinem template allerdings nur einen marker (###menu###), der ersetzt werden soll...

Bubumann38 ·
Yigor schrieb

naja, sogenau kann ich das per ferndiagnose auch nicht sagen.
ich sehe in deinem template allerdings nur einen marker (###menu###), der ersetzt werden soll...

Ich wollte mir eigentlich auch nur das Menü, also den Marker ###menu###, ausgeben lassen. Den Rest wollte ich dann später integrieren, wenn alles funzt. Also Content und so habe ich nicht in das HTML-Template intergriert. Auf der Seite sollte eigentlich nur das Menü angezeigt werden. Mehr nicht. Die Navigation im Typo3 ist aber angelegt.

r.​p.​ ·

Hi, keine Ahnung ob das wichtig ist... aber in deinem Html-Template kann ich den "Subpart" DOKUMENT (lt. TS) nicht finden.

<!-- ###DOKUMENT### begin --> nach <body> und <!-- ###DOKUMENT### end --> vor </body> -so ist es zumindest bei mir...

LG, Rene

Bubumann38 ·

Ich habe jetzt einmal das HTML-Template so angepasst, wie die Seite letztendlich ausgegeben werden soll (incl. der Platzhalter).
Ebenso habe ich auch die Pfade im TS-Template angepasst.
Der Content wird jetzt auch korrekt angezeigt. Nur das Menü wird nicht dargestellt. Stattdessen ist nur der Platzhalter zu sehen. Worin liegt mein Fehler?
Ich poste mal nachstehend beide Quelltexte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Keywords" content="" />
<meta http-equiv="Language" content="de, German, deutsch" />
<meta name="robots" content="index, follow" />
<meta name="date" content="2008-02-09" />
<meta name="content-language" content="de" />
<link href="fileadmin/ogb-relaunch/css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="fileadmin/ogb-relaunch/css/style_print.css" type="text/css" media="print" />
<!--[if lte IE 7]>
<link href="fileadmin/ogb-relaunch/css/style_ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 6]>
<link href="fileadmin/ogb-relaunch/css/style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script language="JavaScript">
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);<body>
<!-- ###DOKUMENT### beginn -->
<div id="container">
  <div id="header">
    <ul id="service">
      <span>|</span>
      <li><a href="index.html">home</a></li>
      <span>|</span>
      <li><a href="index.html">kontakt</a></li>
      <span>|</span>
      <li><a href="index.html">impressum</a></li>
      <span>|</span>
    </ul>
    <div id="logo"><img src="fileadmin/ogb-relaunch/img/logo.png" alt="Organisationbureau" width="263" height="48" /></div>
    <ul id="navigation">
      <span>|</span>
      ###MENU###
    </ul>
  </div>
  <div id="page">
    <div id="content">
      ###CONTENT###
    </div>
   
  </div>
  <div id="footer">organisationsbureau berlin . im energieforum berlin . stralauer platz 34 . 10243 berlin</div>
</div>
<!-- ###DOKUMENT### end -->

</body>
</html>

# Default PAGE object:
page = PAGE
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/ogb-relaunch/templates/referenzen.html
page.includeCSS.file1 = fileadmin/ogb-relaunch/css/style.css
page.includeCSS.file2 = fileadmin/ogb-relaunch/css/body.css
page.10.workOnSubpart = DOKUMENT 
page.10.marks.CONTENT < styles.content.get

marks.MENU  = HMENU
marks.MENU  {
	1=GMENU
	1 {
		wrap = <ul id="nav">|</ul>
		expAll = 1
		noBlur = 1

		NO = 1    
		NO {
			allWrap = <li>|</li>
			transparentBackground = 1

			XY = [10.w]+20, 22

			5 = IMAGE
			5.file = fileadmin/ogb-relaunch/img/no.gif
		
			10=TEXT
			10 {
				text.field=title
				offset=10,15
				fontColor = #FFFFFF
				fontFile=fileadmin/ogb-relaunch/img/fonts/arialbd.ttf
				fontSize=10      
			}
		}
		RO <.NO
		RO.5.file = fileadmin/ogb-relaunch/img/hover.gif

		ACT <.RO

		IFSUB <.NO
		IFSUB.allWrap =  <li class="menuparent">|

		ACTIFSUB <.RO
		ACTIFSUB.allWrap =  <li class="menuparent">|

		ACTRO <.RO
		ACTIFSUBRO <.RO
		
		IFSUBRO <.ACTIFSUBRO
	}
	2 = TMENU
	2 {
		wrap  = <ul>|</ul></li>
		expAll = 1
		noBlur = 1

		NO = 1  
		NO.allWrap = <li>|</li>

		ACT <.NO
		ACT.allWrap = <li class="nav2act"> |</li>

		IFSUB = 1
		IFSUB.allWrap =  <li class="menuparent">|

		ACTIFSUB = 1
		ACTIFSUB.allWrap =  <li class="menuparent">|
	}
	3 <.2
}
Bubumann38 ·
Yigor schrieb

in zeile 11 & 12 des TS muss das so aussehen...

page.10.marks.MENU = HMENU

page.10.marks.MENU {

Hallo Yigor,
grundsätzlich hatte das dank Deiner Hilfe geklappt, nur wurden keine Untermenüs angezeigt.
Daraufhin habe ich mir die von Dir empohlenen Seite zu den Menüs angesehen und mir dazu das Beispiel Nr. 2 von der Seite #39055 runtergeladen.
Leider funktioniert das Ganze jetzt wieder nicht mehr. Wieder wird der Platzhalter nicht ausgetauscht und die benötigte JS-Datei wird auch nicht geladen. Ich habe diese aber in das TS-Template eingebunden. Was mache ich denn bloß falsch?
Folgendermaßen sieht mein TS-Template aus:

# Default PAGE object:
page = PAGE
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/ogb-relaunch/templates/referenzen.html
page.includeCSS.file1 = fileadmin/ogb-relaunch/css/style.css

page.10.headerData = CDA
page.10.headerData.11 = TEXT
page.10.headerData.11.value = <script type="text/javascript" src="fileadmin/ogb-relaunch/js/horizontal.js"></script>

page.10.workOnSubpart = DOKUMENT 
page.10.marks.CONTENT < styles.content.get

page.10.marks.MENU = HMENU
page.10.marks.MENU {
	special = directory
	special.value = 850

	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB
	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}
Yigor ·

hallo,
den artikel habe ich nicht empfohlen, das war jemand anders...

aber zur sache, evtl. liegt es an zeile 8...
es muss wohl COA heissen nicht CDA, also:
page.10.headerData = COA

dann sollte das script auch im header auftauchen...

Bubumann38 ·
Yigor schrieb

hallo,
den artikel habe ich nicht empfohlen, das war jemand anders...

aber zur sache, evtl. liegt es an zeile 8...
es muss wohl COA heissen nicht CDA, also:
page.10.headerData = COA

dann sollte das script auch im header auftauchen...

Hallo Yigor,
ich dachte Du hättest mir das empfohlen. Aber egal. Ich habe jedenfalls das soeben in COA abgeändert. Das Ergebnis ist leider das Gleiche geblieben. Da wo das Menü stehen sollte ist alles leer und im Quelltext der generierten Seite wird keine zusätzliche JS-Datei aufgeführt. Die JS-Datei liegt aber in dem Verzeichnis fileadmin/ogb-relaunch/js/horizontal.js

Bubumann38 ·

[​quote="Bubumann38"]

Yigor schrieb

hallo,
den artikel habe ich nicht empfohlen, das war jemand anders...

aber zur sache, evtl. liegt es an zeile 8...
es muss wohl COA heissen nicht CDA, also:
page.10.headerData = COA

dann sollte das script auch im header auftauchen...

Ich habe den Fehler jetzt selber gefunden und den Fehler somit behoben.

Yigor ·

fein 🙂, freut mich zu hören,

evtl. wäre es schön, wenn Du Deine Lösung kurz postet, dann haben andere eventuell auch etwas davon 🙂

Bubumann38 ·
Yigor schrieb

fein 🙂, freut mich zu hören,

evtl. wäre es schön, wenn Du Deine Lösung kurz postet, dann haben andere eventuell auch etwas davon 🙂

Das werde ich gerne noch tun.