Menüs basierend auf CSS

uff... also IMO solltest du eine Entscheidung treffen: Entweder Tabellen oder divs, aber nicht mischen.

Hab mir das ganze jetzt nicht im IE angeschaut, konkret den Fehler auch nicht gefunden, aber sowas wär mal quick & dirty

#maintbl {
left:-700px;
position:relative;
}

lg georg

Georg,

danke erstmal für deine Mühen ;-) Ich hab's versucht, der Hack zerlegt aber die Seite (erwartungsgemäß) im IE. In Firefox siehts etwas besser aus - eine Lösung isses wohl nicht. Ich wundere mich, weil ich bis vor kurzem mit einem normalen TMENU gearbeitet habe, und sich jetzt mit dem CSS-Menu sich dieses Problem manifestiert. Ich werd'mal schauen, ob es mit einem <br /> o.ä. besser geht.

Lk

Hallo
Ist ja wirklich toll das mal ein ganzes beispiel hier aufgeführt wird.

Aber ist da nicht auch das Problem zumindest bei Horizontalen Menue,
das abstände zwischen den naveinträgen in der ersten eben nicht passen?

Ich habe das horizontale menue jetzt auch mal ausprobiert, bei mir zeigt er garnix an woran kann das liegen???
Nichtmal die erste ebene

d_designer schrieb

Ich habe das horizontale menue jetzt auch mal ausprobiert, bei mir zeigt er garnix an woran kann das liegen???
Nichtmal die erste ebene

am CSS, am TS, special.value zeigt bei dir auf ne ID die es nicht gibt, du hast keinen Marker dafür.... genug geraten?

Die marker hab ich umgeschrieben.

Ich habe schonmal probiert ein textmenue zu schreiben hat alles gut funktioniert ausser im mozilla da ging garnix. dann habe ich das relativetotrigger rausgenommen dann gings im mozilla aber die zweite ebene hing immer am mauszeiger. nun hoffe ich es mit deinem menue hinzubekommen.

hoffe hoffe

seite = PAGE
seite.bodyTag = <body bgcolor='#EAF5FB' border='0' leftmargin='0' marginheight='0' marginwidth='0' margintop='0' bottommargin='0'>
seite.meta.http-equiv="imagetoolbar" content"no">
seite.stylesheet = fileadmin/styles/horizontal_CSS.css
seite.typeNum = 0
seite.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php
seite.10 = TEMPLATE
seite.10 {
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/styles/horizontal_JS.js"></script>
	template = FILE
	template.file = fileadmin/template3_css.htm
	WorkOnSubpart= DOKUMENT
	marks.INHALT < styles.content.get
	marks.HINTERGRUND < styles.content.getLeft
	marks.INHALTEN < styles.content.getRight
	marks.INHALTE < styles.content.getBorder
	

 #navi#################################################

marks.NAVI = HMENU
marks.NAVI {
	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
}

Es gibt bei dir die Seite 850? Da fängt das Menü an

lg georg

nein bei mir fängt es bei 1 an oder die home halt.
wie meinst 850.

d_designer schrieb

nein bei mir fängt es bei 1 an oder die home halt.
wie meinst 850.

man sollte wissen was man ca kopiert 😉
nimm zeile 25-26 raus
und lies das: https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Hmenu/Index.html

lg georg

Meinst du die beiden special's?
Habe ich draussen zeigt aber garnix.
Ich verzweifle noch an den Menues

cache geleert, es gibt ein ###MENU### im template?

ich habe auch noch das menue aber wie gesagt geht nur sauber unter iE
vieleicht kannst du mir da noch was zu sagen

seite = PAGE
seite.bodyTag = <body bgcolor='#EAF5FB' border='0' leftmargin='0' marginheight='0' marginwidth='0' margintop='0' bottommargin='0'>
seite.meta.http-equiv="imagetoolbar" content"no">
seite.stylesheet = fileadmin/styles/styles_css.css
seite.typeNum = 0
seite.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php
seite.10 = TEMPLATE
seite.10 {
	template = FILE
	template.file = fileadmin/template3_css.htm
	WorkOnSubpart= DOKUMENT
	marks.INHALT < styles.content.get
	marks.HINTERGRUND < styles.content.getLeft
	marks.INHALTEN < styles.content.getRight
	marks.INHALTE < styles.content.getBorder
	

 #navi#################################################
  	  	marks.NAVI = HMENU
  	marks.NAVI.1 = TMENU_LAYERS  
  	marks.NAVI.1 {  	
  			layerStyle = position:absolute;left:0px;top:35;width:10px;VISIBILITY:hidden;
  			xPosOffset = -1
    			lockPosition = 200
  			hideMenuWhenNotOver = 1
			expAll = 1
			leftOffset = 0
   			topOffset = 80
   			relativeToTriggerItem = 1
   			NO { 
			allWrap = <span class="eins">|</span>
  			ATagParams=class="eins" 			   			       			     
  			  }	
  		      }
  	marks.NAVI.2 = TMENU_LAYERS
  	marks.NAVI.2 {
  		     layerStyle = position:absolute;top:35;width:1px;left:0px; VISIBILITY:hidden;
  			xPosOffset = -100
   			lockPosition = 200
  			hideMenuWhenNotOver = 1
			expAll = 1
  			leftOffset = 310
   			topOffset = 90
   			relativeToTriggerItem = 1
  			NO { 
			allWrap = |
  			ATagParams=class="zwei" 
  			}
	
			}  	  		     
  marks.NAVI.3 = TMENU_LAYERS
  	marks.NAVI.3 {
  			layerStyle = position:absolute;left:0px;top:100;width:100px;VISIBILITY:hidden;
  			xPosOffset = -500
    			lockPosition = 100
  			hideMenuWhenNotOver = 1
			expAll = 1
  			leftOffset = 90
   			topOffset = 1
   			relativeToTriggerItem = 1
  			NO { 
			allWrap = |
  			ATagParams=class="drei" 
  			} 

	
			}

Ja das ###Menue### ist ein verticales was auch noch in der designvorlage vorhanden ist

###Menue### <> ###MENU###

meinst du bei der includeLibs??
Also eigentlich gibt es kein ###MENU### nur ein ###MENUE### wie in meinem beispiel. Jetzt bin ich ein wenig verwirrt

sry auch meine Schuld. du schreibst im vorigen Bsp:

marks.NAVI = HMENU
marks.NAVI {

gibt es ein ###NAVI### in deinem Template? wenn nein, dann machen!

Ja das gibt es.
Das soll das horizontale sein.

Nochmal mein Senf:
Klasse Sache!

wunschtacho schrieb

Nochmal mein Senf:
Klasse Sache!

jo danke 😉 leider wenig Zeit mehr dem zu widmen und auszubauen...

Halli Hallo

Ich versuche das horizontale menu auch auf meiner Seite einzubinden und muss Dir an dieser Stelle ein großes Lob und meinen Dank aussprechen.

Nur habe ich ein Problem: Im Firefox funzt alles wunderbar. Aber im Internet Explorer zeigt es mir nur die horizontalen Menüpunkte an, die Untermenüs aber nicht. Ich mache das ganze mit Templavoila, aber das sollte ja nicht das probl. sein.

Java habe ich eingeschaltet, und im HTML Template eingebunden, hier mein Code:

<?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test</title>

<link rel="stylesheet" type="text/css" href="styles/horizontal_CSS.css" media="screen" />

<script type="text/javascript" src="fileadmin/horizontal_JS.js"></script>

</head>
<body>
<div id="container"><div id="nav">menu</div>
<div id="main"></div>
</div>
</body>
</html>

und hier das css:

* {
margin: 0; 
padding: 0;
}
body {
	font: 95% Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-align: center;
	background-color: #97CFE6;
}
#container {
text-align: left;
position: relative;
background: transparent;
margin: 0 auto;
border-left: 1px solid #333;
border-right: 1px solid #333;
}
#nav, #nav ul {
	float: left;
	width: 86em;
	list-style: none;
	line-height: 1em;
	background: white;
	color: #000;
	font-weight: bold;
	padding: 0;
	border: solid #eda;
	border-width: 1px 0;
	margin: 0 0 1em 0;
}
 
#nav a {
	display: block;
	width: 10em;
	color: #7C6240;
 
	text-decoration: none;
	padding: 0.25em 0em;
}
 
#nav a.menuparent  {
	background: url(arrow.gif) no-repeat 90% 40%;
}
 
#nav li {
	float: left;
	padding: 0;
	width: 10em;
}
 
#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14em;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
		
}
 
#nav li li {
 
	width: 14em
}
 
#nav li ul a {
	width: 14em;
	padding-left: 1em;
}
 
#nav li ul ul {
	margin: -1.75em 0 0 14em;
}
 
#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:hover, #nav li.sfhover {
	background: #eda;
	color: white;
}

und hier das menü Template TS:

lib.MENU = HMENU
lib.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
}

und das ist das Haupt TS:

constans


# Limitation of picture widths in main content column:
styles.content.imgtext.maxW = 600

# Setting link targets to nothing (no frames mode)
PAGE_TARGET = 
content.pageFrameObj = 

# Making sure each line in image captions (of Image content elements) are applied to corresponding image number in the element:
styles.content.imgtext.captionSplit = 1

setup:

config.spamProtectEmailAddresses = 1

page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

page {
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/xxxxx.js"></script>
}

kann jemand bitte helfen?