Zum Inhalt springen

LayerMenü Breite/Höhe anpassen

Erstellt am 30. Juni 2006 · 11 Antworten · letzte Antwort am 5. Juli 2006

Tags: Frage

achsoistdas ·

Servus,

habe es jetzt endlich hinbekommen das das Layer Menü transparent ist. Nun nächstes Problem: Möchte das der Layer bis zum oberen Bildrand geht und sich in der Breite der Größe des weißen Hauptmenüpunktes anpasst. Zu sehen hier:

http://www.serverarea.de/layer/layer.jpg

Mein Typoscript für das LayerMenü:

MENU_MITTE = HMENU
MENU_MITTE{
  1 = TMENU_LAYERS
    entryLevel = 1
  1 {
    wrap=<table><tr class="menu_level1">|</tr></table>
    layerStyle = position:absolute;left:180px;width:110px;VISIBILITY:hidden;border: 0px solid #669900; background: transparent;
    lockPosition = y
    hideMenuWhenNotOver = 12
    hideMenuTimer = 0
    expAll=1
    directionUp = 1
    leftOffset = 0
    topOffset = -5
    relativeToTriggerItem = 1
     
NO = 1
NO.allWrap = <td class="menu_level1"> | </td>
ACT = 1 
ACT.allWrap = <td class="menu_level1_aktiv"> | </td>
CUR = 1
CUR.allWrap = <td class="menu_level1_aktiv"> | </td>
  }


  2 = TMENU
2.NO = 1
2.NO.allWrap = <div class="menu_level2"> | </div>
2.ACT = 1
2.ACT.allWrap = <div class="menu_level2"> | </div>
2.CUR = 1
2.CUR.allWrap = <div class="menu_level2_aktiv"> | </div>

}

Wenn ich jetz die "height: 100%;" im layer Style setze, geht der Layer zwar bis zum oberen Bildand aber der Text steht leider auch ganz oben und der sollte unten stehen bleiben.

MfG

Honk88 ·

ok was mir auf die schnelle
einfällt:

mach div drauß [+css] tanspartentes menü
als child vom menü unten

dann mit min-height arbeiten
und das textmenü unten
ausrichten

LG
Honk

achsoistdas ·

Hört sich gut an...nur weiß ich nicht genau wie ich das anstellen soll.
Hättest du Code-technisch einen Ansatz für mich!?

Danke!

MfG

achsoistdas ·

HTML-TEMPLATE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>REPETAL.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>
<!-- ###DOKUMENT### begin -->
<table border="0" width="900" height="600" cellpadding="0" cellspacing="0" align="center">
  <tr> 
    <td width="1"><img src="fileadmin/pics/pixel.gif" width="1" height="1" alt="" /></td>
    <td colspan="2"><img src="fileadmin/pics/pixel.gif" width="990" height="1" alt="" /></td>
  </tr>
  <tr> 
    <td><img src="fileadmin/pics/pixel.gif" width="1" height="210" alt="" /></td>
    <td colspan="2">###HEAD###</td>
    <img src="fileadmin/pics/pixel.gif" width="750" height="1" alt="" />
    <a href="http://www.repetal.de/index.php?id=3" target="_self" class="menuoben">HOME</a>  |  
    <a href="http://www.repetal.de/index.php?id=34" target="_self" class="menuoben">SITEMAP</a>  |  
    <a href="http://www.repetal.de/index.php?id=35" target="_self" class="menuoben">KONTAKT</a>  |  
    <a href="http://www.repetal.de/index.php?id=36" target="_self" class="menuoben">IMPRESSUM</a>
  </tr>
  <tr> 
    <td><img src="fileadmin/pics/pixel.gif" width="1" height="1" alt="" /></td>
    <td colspan="2"><img src="fileadmin/pics/pixel.gif" width="990" height="1" alt="" /></td>
  </tr>
  <tr> 
    <td><img src="pics/pixel.gif" width="1" height="1" alt="" /></td>
    <td align="top" width="738" height="1"><img src="pics/pixel_menu.gif" width="738" height="1" alt="" /></td>
    <td width="200" rowspan="4" align="right" valign="top">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="200" height="380" id="de_wolf_v3" align="middle">
			<param name="allowScriptAccess" value="sameDomain" />
			<param name="movie" value="fileadmin/pics/repetal_banner.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#000000" />
			<embed src="fileadmin/pics/repetal_banner.swf" quality="high" bgcolor="#000000" width="200" height="380" name="de_wolf_v3" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</td>
  </tr>
  <tr> 
    <td><img src="fileadmin/pics/pixel.gif" width="1" height="33" alt="" /></td>
    <td width="738" height="33" class="menu_level1">###MENU_MITTE###</td>
  </tr>
  <tr> 
    <td><img src="fileadmin/pics/pixel.gif" width="1" height="1" alt="" /></td>
    <td rowspan="2" class="inhalt" style="text-align: justify;">
<div class="inhalt" style="width:781px; height:330px; overflow:auto; text-align: justify; padding-right:10px;">
###INHALT###</div></td>
  </tr>
  <tr> 
    <td><img src="fileadmin/pics/pixel.gif" width="1" height="1" alt="" /></td>
  </tr>
</table>
<!-- ###DOKUMENT### end -->
</body>
</html>

################################

Generierter HTML-CODE:

<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- 
	This website is brought to you by TYPO3 - get.content.right
	TYPO3 is a free open source Content Management Framework created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2005 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://www.typo3.com
-->

	<link rel="stylesheet" type="text/css" href="fileadmin/style.css" />
	<title>REPETAL.de: Angebote</title>
	<meta name="generator" content="TYPO3 3.8 CMS" />
	<meta name="AUTHOR" content="REPETAL.de" />

	<meta name="DESCRIPTION" content="Hier steht eine Beschreibung" />
	<script type="text/javascript">
		/*<![CDATA[*/
	<!--
		browserName = navigator.appName;
		browserVer = parseInt(navigator.appVersion);
		var msie4 = (browserName == "Microsoft Internet Explorer" && browserVer >= 4);
		if ((browserName == "Netscape" && browserVer >= 3) || msie4 || browserName=="Konqueror") {version = "n3";} else {version = "n2";}
			// Blurring links:
		function blurLink(theObject)	{	//
			if (msie4)	{theObject.blur();}
		}
		
	// -->
		/*]]>*/
	</script>
<script type="text/javascript" src="media/scripts/jsfunc.layermenu.js"></script>

<script type="text/javascript">
	/*<![CDATA[*/
<!--

GLV_curLayerWidth["b936fa"]=0;
GLV_curLayerHeight["b936fa"]=0;
GLV_curLayerX["b936fa"]=0;
GLV_curLayerY["b936fa"]=0;
GLV_menuOn["b936fa"] = null;
GLV_gap["b936fa"]=12;
GLV_currentLayer["b936fa"] = null;
GLV_currentROitem["b936fa"] = null;
GLV_hasBeenOver["b936fa"]=0;
GLV_doReset["b936fa"]=false;
GLV_lastKey["b936fa"] = "Menub936fa5";
GLV_onlyOnLoad["b936fa"] = 0;
GLV_dontHideOnMouseUp["b936fa"] = 0;
GLV_dontFollowMouse["b936fa"] = 0;
GLV_date = new Date();
GLV_timeout["b936fa"] = GLV_date.getTime();
GLV_timeoutRef["b936fa"] = 0;
GLV_menuXY["b936fa"] = new Array();
GLV_menuXY["b936fa"]["Menub936fa0"] = new Array(0,0,"itemIDe97489158d","anchorIDe97489158d");
GLV_menuXY["b936fa"]["Menub936fa1"] = new Array(0,0,"itemID4a043d334e","anchorID4a043d334e");
GLV_menuXY["b936fa"]["Menub936fa2"] = new Array(0,0,"itemID3e8ab50855","anchorID3e8ab50855");
GLV_menuXY["b936fa"]["Menub936fa3"] = new Array(0,0,"itemID61770c689f","anchorID61770c689f");
GLV_menuXY["b936fa"]["Menub936fa4"] = new Array(0,0,"itemIDf38dc22f7e","anchorIDf38dc22f7e");
GLV_menuXY["b936fa"]["Menub936fa5"] = new Array(0,0,"itemID7bc68427f6","anchorID7bc68427f6");

function GLb936fa_getMouse(e) {
	if (GLV_menuOn["b936fa"]!=null && !GLV_dontFollowMouse["b936fa"]){

	}
	GL_mouseMoveEvaluate("b936fa");
}
function GLb936fa_hideCode() {

	GL_getObjCss("Menub936fa0").visibility = "hidden";
	GL_getObjCss("Menub936fa1").visibility = "hidden";
	GL_getObjCss("Menub936fa2").visibility = "hidden";
	GL_getObjCss("Menub936fa3").visibility = "hidden";
	GL_getObjCss("Menub936fa4").visibility = "hidden";
	GL_getObjCss("Menub936fa5").visibility = "hidden";
}
function GLb936fa_doTop(WMid,id) {
var parentObject = GL_getObj(GLV_menuXY[WMid][id][2]);
		var TI_width = parentObject.width;
		var TI_height = parentObject.height;
		var anchorObj = GL_getObj(GLV_menuXY[WMid][id][3]);
		var TI_x = anchorObj.x;
		var TI_y = anchorObj.y;
			
GLV_menuOn["b936fa"].left = (TI_x+0)+"px";
GLV_menuOn["b936fa"].top =  (TI_y+-5-GL_getObj(id).height)+"px";
}
function GLb936fa_restoreMenu() {

}
function GLb936fa_resetSubMenus() {
	var resetSubMenu=1;

	return resetSubMenu;
}

GLV_timeout_pointers[GLV_timeout_count] = "b936fa";
GLV_timeout_count++;
// -->
	/*]]>*/
</script>

<script type="text/javascript">
	/*<![CDATA[*/
	function T3_onmousemoveWrapper(e)	{	GL_getMouse(e);   GLb936fa_getMouse(e);	}
	function T3_onmouseupWrapper(e)	{	GL_mouseUp('b936fa',e);	}
	function T3_onloadWrapper()	{	GL_initLayers();   GL_restoreMenu("b936fa");	}
	document.onmousemove=T3_onmousemoveWrapper;
	document.onmouseup=T3_onmouseupWrapper;
	document.onload=T3_onloadWrapper;
	/*]]>*/
</script>
			
</head>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" style="text-align: justify;" onload="T3_onloadWrapper();">
<div id="Menub936fa0" style="z-index:9999; position:absolute;width:110px;VISIBILITY:hidden;border: 0px solid #669900;background: transparent;"><div class="menu_level2"><a href="index.php?id=6" onfocus="blurLink(this);">Das Repetal</a></div><div class="menu_level2"><a href="index.php?id=5" onfocus="blurLink(this);">Repetal buchen</a></div><div class="menu_level2"><a href="index.php?id=4" onfocus="blurLink(this);">Hotels/Pensionen</a></div></div>

<div id="Menub936fa1" style="z-index:9998; position:absolute;width:110px;VISIBILITY:hidden;border: 0px solid #669900;background: transparent;"><div class="menu_level2"><a href="index.php?id=14" onfocus="blurLink(this);">Wandern</a></div><div class="menu_level2"><a href="index.php?id=13" onfocus="blurLink(this);">Sport</a></div><div class="menu_level2"><a href="index.php?id=12" onfocus="blurLink(this);">Schlemmen</a></div></div>
<div id="Menub936fa2" style="z-index:9997; position:absolute;width:110px;VISIBILITY:hidden;border: 0px solid #669900;background: transparent;"><div class="menu_level2"><a href="index.php?id=17" onfocus="blurLink(this);">Repetal</a></div><div class="menu_level2"><a href="index.php?id=16" onfocus="blurLink(this);">Umgebung</a></div><div class="menu_level2"><a href="index.php?id=15" onfocus="blurLink(this);">Linkliste</a></div></div>
<div id="Menub936fa3" style="z-index:9996; position:absolute;width:110px;VISIBILITY:hidden;border: 0px solid #669900;background: transparent;"><div class="menu_level2"><a href="index.php?id=26" onfocus="blurLink(this);">Borghausen</a></div><div class="menu_level2"><a href="index.php?id=25" onfocus="blurLink(this);">Bremge</a></div><div class="menu_level2"><a href="index.php?id=24" onfocus="blurLink(this);">Bürberg</a></div><div class="menu_level2"><a href="index.php?id=23" onfocus="blurLink(this);">Dünschede</a></div><div class="menu_level2"><a href="index.php?id=22" onfocus="blurLink(this);">Helden</a></div><div class="menu_level2"><a href="index.php?id=21" onfocus="blurLink(this);">Jäckelchen</a></div><div class="menu_level2"><a href="index.php?id=20" onfocus="blurLink(this);">Mecklinghausen</a></div><div class="menu_level2"><a href="index.php?id=19" onfocus="blurLink(this);">Niederhelden</a></div><div class="menu_level2"><a href="index.php?id=18" onfocus="blurLink(this);">Repe</a></div><div class="menu_level2"><a href="index.php?id=30" onfocus="blurLink(this);">Rieflinghausen</a></div><div class="menu_level2"><a href="index.php?id=29" onfocus="blurLink(this);">Rölleken</a></div><div class="menu_level2"><a href="index.php?id=28" onfocus="blurLink(this);">Silbecke</a></div><div class="menu_level2"><a href="index.php?id=27" onfocus="blurLink(this);">St. Claas</a></div></div>

<div id="Menub936fa4" style="z-index:9995; position:absolute;width:110px;VISIBILITY:hidden;border: 0px solid #669900;background: transparent;"><div class="menu_level2"><a href="index.php?id=32" onfocus="blurLink(this);">Läden</a></div><div class="menu_level2_aktiv"><a href="index.php?id=31" onfocus="blurLink(this);">Angebote</a></div></div>
<div id="Menub936fa5" style="z-index:9994; position:absolute;width:110px;VISIBILITY:hidden;border: 0px solid #669900;background: transparent;"><div class="menu_level2"><a href="index.php?id=33" onfocus="blurLink(this);">Wegbeschreibung</a></div></div>


<table border="0" width="900" height="600" cellpadding="0" cellspacing="0" align="center">
  <tr> 
    <td width="1"><img src="fileadmin/pics/pixel.gif" width="1" height="1" alt="" /></td>
    <td colspan="2"><img src="fileadmin/pics/pixel.gif" width="990" height="1" alt="" /></td>
  </tr>
  <tr> 
    <td><img src="fileadmin/pics/pixel.gif" width="1" height="210" alt="" /></td>

    <td colspan="2"><a name="55"></a><div style="text-align:center;"><table width="990" border="0" cellspacing="0" cellpadding="0" class="imgtext-table"><tr><td colspan="1"><img src="clear.gif" width="990" height="1" alt="" /></td></tr><tr><td valign="top"><img src="uploads/pics/head_regionale_produkte_04.jpg" width="990" height="210" border="0" align="top" alt="" title="" /><br /></td></tr></table></div></td>
    <img src="fileadmin/pics/pixel.gif" width="750" height="1" alt="" />
    <a href="http://www.repetal.de/index.php?id=3" target="_self" class="menuoben">HOME</a>  |  
    <a href="http://www.repetal.de/index.php?id=34" target="_self" class="menuoben">SITEMAP</a>  |  
    <a href="http://www.repetal.de/index.php?id=35" target="_self" class="menuoben">KONTAKT</a>  |  
    <a href="http://www.repetal.de/index.php?id=36" target="_self" class="menuoben">IMPRESSUM</a>

  </tr>
  <tr> 
    <td><img src="fileadmin/pics/pixel.gif" width="1" height="1" alt="" /></td>
    <td colspan="2"><img src="fileadmin/pics/pixel.gif" width="990" height="1" alt="" /></td>
  </tr>
  <tr> 
    <td><img src="pics/pixel.gif" width="1" height="1" alt="" /></td>
    <td align="top" width="738" height="1"><img src="pics/pixel_menu.gif" width="738" height="1" alt="" /></td>
    <td width="200" rowspan="4" align="right" valign="top">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="200" height="380" id="de_wolf_v3" align="middle">

			<param name="allowScriptAccess" value="sameDomain" />
			<param name="movie" value="fileadmin/pics/repetal_banner.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#000000" />
			<embed src="fileadmin/pics/repetal_banner.swf" quality="high" bgcolor="#000000" width="200" height="380" name="de_wolf_v3" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</td>
  </tr>
  <tr> 
    <td><img src="fileadmin/pics/pixel.gif" width="1" height="33" alt="" /></td>

    <td width="738" height="33" class="menu_level1"><table><tr class="menu_level1"><td class="menu_level1"><div id="anchorIDe97489158d" style="position:absolute;visibility:hidden;"></div><div id="itemIDe97489158d" style="width:100%; height:100%;"><a href="index.php?id=3" onfocus="blurLink(this);" onmouseover="GL_doTop('b936fa', 'Menub936fa0');" onmouseout="GL_stopMove('b936fa');">Tourismus</a></div></td><td class="menu_level1"><div id="anchorID4a043d334e" style="position:absolute;visibility:hidden;"></div><div id="itemID4a043d334e" style="width:100%; height:100%;"><a href="index.php?id=7" onfocus="blurLink(this);" onmouseover="GL_doTop('b936fa', 'Menub936fa1');" onmouseout="GL_stopMove('b936fa');">Aktivitäten</a></div></td><td class="menu_level1"><div id="anchorID3e8ab50855" style="position:absolute;visibility:hidden;"></div><div id="itemID3e8ab50855" style="width:100%; height:100%;"><a href="index.php?id=8" onfocus="blurLink(this);" onmouseover="GL_doTop('b936fa', 'Menub936fa2');" onmouseout="GL_stopMove('b936fa');">Sehenswertes</a></div></td><td class="menu_level1"><div id="anchorID61770c689f" style="position:absolute;visibility:hidden;"></div><div id="itemID61770c689f" style="width:100%; height:100%;"><a href="index.php?id=9" onfocus="blurLink(this);" onmouseover="GL_doTop('b936fa', 'Menub936fa3');" onmouseout="GL_stopMove('b936fa');">Die Dörfer</a></div></td><td class="menu_level1_aktiv"><div id="anchorIDf38dc22f7e" style="position:absolute;visibility:hidden;"></div><div id="itemIDf38dc22f7e" style="width:100%; height:100%;"><a href="index.php?id=10" onfocus="blurLink(this);" onmouseover="GL_doTop('b936fa', 'Menub936fa4');" onmouseout="GL_stopMove('b936fa');">Regionale Produkte</a></div></td><td class="menu_level1"><div id="anchorID7bc68427f6" style="position:absolute;visibility:hidden;"></div><div id="itemID7bc68427f6" style="width:100%; height:100%;"><a href="index.php?id=11" onfocus="blurLink(this);" onmouseover="GL_doTop('b936fa', 'Menub936fa5');" onmouseout="GL_stopMove('b936fa');">Anfahrt</a></div></td></tr></table></td>
  </tr>
  <tr> 
    <td><img src="fileadmin/pics/pixel.gif" width="1" height="1" alt="" /></td>
    <td rowspan="2" class="inhalt" style="text-align: justify;">
<div class="inhalt" style="width:781px; height:330px; overflow:auto; text-align: justify; padding-right:10px;">
<a name="80"></a><div style="text-align:center;"><table width="25" border="0" cellspacing="0" cellpadding="0" class="imgtext-table"><tr><td colspan="1"><img src="clear.gif" width="25" height="1" alt="" /></td></tr><tr><td valign="top"><table width="25" border="0" cellpadding="0" cellspacing="0"><tr><td valign="top"><img src="typo3temp/pics/992e59cf08.gif" width="25" height="25" border="0" align="top" alt="" title="" /><br /></td></tr></table></td></tr></table></div></div></td>

  </tr>
  <tr> 
    <td><img src="fileadmin/pics/pixel.gif" width="1" height="1" alt="" /></td>
  </tr>
</table>

</body>
</html>

Und noch mein TYposcript-Template:

 page = PAGE
      page {
              includeLibs.tmenu_layers = media/scripts/tmenu_layers.php
              typeNum = 0
              # Allgemeine Seiteneigenschaften setzen
              bodyTag = <body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" style="text-align: justify;">
              meta.AUTHOR = REPETAL.de
              meta.DESCRIPTION = Hier steht eine Beschreibung
              stylesheet = fileadmin/style.css
              10 = TEMPLATE
              10 {
                      template = FILE
                      template.file = fileadmin/vorlage_neu.html
                      workOnSubpart = DOKUMENT
                      marks {



MENU_MITTE = HMENU
MENU_MITTE{
  1 = TMENU_LAYERS
    entryLevel = 1
  1 {
    wrap=<table><tr class="menu_level1">|</tr></table>
    layerStyle = position:absolute;width:110px;VISIBILITY:hidden;border: 0px solid #669900;background: transparent;
    lockPosition = y
    hideMenuWhenNotOver = 12
    hideMenuTimer = 0
    expAll = 1
    directionUp = 1

    leftOffset = 0
    topOffset = -5
    relativeToTriggerItem = 1

NO = 1
NO.allWrap = <td class="menu_level1"> | </td>
ACT = 1 
ACT.allWrap = <td class="menu_level1_aktiv"> | </td>
CUR = 1
CUR.allWrap = <td class="menu_level1_aktiv"> | </td>
  }


  2 = TMENU
2.NO = 1
2.NO.allWrap = <div class="menu_level2"> | </div>
2.ACT = 1
2.ACT.allWrap = <div class="menu_level2"> | </div>
2.CUR = 1
2.CUR.allWrap = <div class="menu_level2_aktiv"> | </div>

}



  
                              INHALT = CONTENT
  
                              INHALT{
  
                                      table = tt_content


  
                                      select {
  
                                              where = colPos = 0
  
                                              orderBy = sorting
  
                                              languageField = sys_language_uid
  
                                      }
  
                              }

                              HEAD = CONTENT
  
                              HEAD  {
  
                                      table = tt_content
  
                                      select {
  
                                              where = colPos = 3
  
                                              orderBy = sorting
  
                                              languageField = sys_language_uid
  
                                      }
  
                              }
  
                              
 
                      }
  
              }
 
      } 


tt_content.image.20.spaceBelowAbove = 0
tt_content.image.20.colSpace = 0
tt_content.image.20.rowSpace = 0
tt_content.image.20.captionSplit.stdWrap.spaceBefore = 0
tt_content.image.20.captionSplit.stdWrap.wrap = |
tt_content.image.20.captionSplit.stdWrap.wrap = | <br />
tt_content.image.20.captionSplit.stdWrap.br = 0
tt_content.image.20.captionSplit.stdWrap.br = 
tt_content.image.20.captionSplit.stdWrap.br = 1
tt_content.mailform.20.target = _self

tt_content.header.stdWrap.space = 0|0
tt_content.stdWrap.space = 0|0
tt_content.stdWrap.spaceBefore = 0
tt_content.stdWrap.spaceAfter = 0
lib.stdheader.stdWrap.space = 0|0




   content.headerSpace = 0|0
   content.space = 0|0

###################################

und noch meine CSS-Datei:

BODY { font-size:12px; font-family:arial, helvetica, sans-serif; font-weight:normal; text-align: justify; }

.bodytext {text-align: justify; }

strong { color: #669900;}

p {text-align: justify; }

.inhalt {
color: #000000;
font-size: 11px; font-family: arial, helvetica, sans-serif; font-weight: normal;
text-align: justify;}

.inhalt a:link { text-decoration:underline; color:#000000; }
.inhalt a:visited { text-decoration:underline; color:#000000}
.inhalt a:hover { text-decoration:none; color:#000000; }
.inhalt a:active { text-decoration:none; color:#000000; }
.inhalt a:focus { text-decoration:none; color:#000000; }

.menuoben {
font-weight: bold;
color: #000000;
font-size: 10px; font-family: arial, helvetica, sans-serif;
text-align: justify;}

.menuoben a:link { text-decoration:underline; color:#000000; font-weight: bold;}
.menuoben a:visited { text-decoration:underline; color:#000000; font-weight: bold;}
.menuoben a:hover { text-decoration:none; color:#000000; font-weight: bold;}
.menuoben a:active { text-decoration:none; color:#000000; font-weight: bold;}
.menuoben a:focus { text-decoration:none; color:#000000; font-weight: bold; }

.menu_level2 a:link {
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
font-weight: bold;
font-size: 10px;
text-decoration:none;
display: block;
background-image:url(pics/weiss.png);
padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;
margin: 0 0 0 0;

}

.menu_level2 a:visited {
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
font-weight: bold;
font-size: 10px;
text-decoration:none;
display: block;
background-image:url(pics/weiss.png);
padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;
margin: 0 0 0 0;
}

.menu_level2 a:hover {
font-family: verdana, arial, helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
font-size: 10px;
text-decoration:none;
display: block;
background-image:url(pics/weiss.png);
padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;
margin: 0 0 0 0;
}

.menu_level2_aktiv a:active {
font-family: verdana, arial, helvetica, sans-serif;
color: #4A592C;
font-weight: bold;
font-size: 10px;
text-decoration:none;
display: block;
background-image:url(pics/weiss.png);
padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;
margin: 0 0 0 0;

}

.menu_level2_aktiv a{
font-family: verdana, arial, helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
font-size: 10px;
text-decoration:none;
display: block;
background-image:url(pics/weiss.png);
padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;
margin: 0 0 0 0;

}

/*------------------------------------*/

.menu_level1 {
background-color:#669900;
}

.menu_level1 a:link {
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
font-weight: bold;
font-size: 11px;
text-decoration:none;
display:block;
padding-top: 10px; padding-bottom: 10px; padding-left: 19px; padding-right: 19px;

}

.menu_level1 a:visited {
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
font-weight: bold;
font-size: 11px;
text-decoration:none;
display:block;
padding-top: 10px; padding-bottom: 10px; padding-left: 19px; padding-right: 19px;
}

.menu_level1 a:hover {
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
font-weight: bold;
font-size: 11px;
text-decoration:none;
background-color:#FFFFFF;
display:block;
padding-top: 10px; padding-bottom: 10px; padding-left: 19px; padding-right: 19px;

}

.menu_level1_aktiv a:active {
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
font-weight: bold;
font-size: 11px;
text-decoration:none;
background-color:#FFFFFF;
display:block;
padding-top: 10px; padding-bottom: 10px; padding-left: 19px; padding-right: 19px;

}

.menu_level1_aktiv a{
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
font-weight: bold;
font-size: 11px;
text-decoration:none;
background-color:#FFFFFF;
display:block;
padding-top: 10px; padding-bottom: 10px; padding-left: 19px; padding-right: 19px;

}

* {text-align: justify; font-size: 11px;}

.........puh, schön viel!!!

Honk88 ·

ok erstmal gratz du hast es
geschaft mir raucht die birne :p

...egal

dann mal frisch ans werk

1.) da müssen wir erstmal ein
bißchen 'aufräumen'

als erstes mal bitte im html-template
die marker in divs packen
Bsp.

<div id="menuunten">
###MENUUNTEN###
</div>

dann diese divs im css 'formatieren'

Bsp.

#menuunten {
position:absolute;
top:80px;
left:0px;
height: 450px;
width:150px;
z-index:2;
/*background: red; kann helfen um zu sehen wie die ausmaße sind*/
}

somit kannst du alle marker per css
positionieren und deren Eigenschaften
verändern

sobald du mit dieser methode dein Design
wieder auf der Kette hast brauchst du noch
folgendes um min-height verwenden zu können :

html>body #menuunten { /*umgehen des IE fehlers, kenn kein min-width*/
height: auto;
min-height: 450px;
}

FF setzt min-height um IE ignoriert es übernimmt also
die height von oben [#menuunten {.....height: 450px....}]

Hoffe so kommst du klar

wenns noch fragen gibt einfach schön weiternerven #giggle#

Liebe Grüße
Honk

Honk88 ·

ups fast vergessen :

<div id="die zwei button unten">

<div id="dein transparent hinterlegtes menü">
</div> /* close "dein tran...

</div> /* close "die zwei button

sorgt dafür, dass "dein transp..." child vom
"die zwei butt..." div ist´.

Wozu ?
ganz einfach position: absolute im css
verhält sich relativ zu Eltern-divs
Will heißen die positionwert in
#dein transp.... werden innerhalb es
durch #die zwei... festgelegten
bereichs umgesetzt

würde die ganze navi übrigens noch mit
einem <div id="navi"> umschließen

achsoistdas ·

Danke schonmal für deine Hilfe!

also habe jetz das LayerMenü zumindest im Firefox immer bis zum oberen Bildrand (dank height/minheight)...bzw nur den Layer und den untersten Submenüpunkt. Bekomme es nicht hin den Text(also Submenü) nach unten auszurichten.

Im IE bekomme ich es nicht hin mit dem Layer...

Was auch noch nicht so toll ist, ist das die Breite des Layers sich nicht dem Hauptmenüpunkt anpasst.

Muss/Kann ich nichts im Typscipt Template verändern wo ich das Submenü ja auch eigentlich erstelle!?

MfG

Honk88 ·
achsoistdas schrieb

Was auch noch nicht so toll ist, ist das die Breite des Layers sich nicht dem Hauptmenüpunkt anpasst.

Muss/Kann ich nichts im Typscipt Template verändern wo ich das Submenü ja auch eigentlich erstelle!?

du sagts ihm doch im TS durch z.B.

NO.allWrap = <td class="menu_level1"> | </td>

, dass er aufs css 'zugreifen' soll, was ja auch Sinn
macht, weil man 'Formatierungen' zentral an einer
Stelle vornehmen will

in gewisser Weise machst dus also im TS 😉

auch für die breitenanpassung kannst du min/bzw. max-height/width
nutzen

anderer lösungssansatz wäre du machst es ganz anders im
TS und verwendest
XY = 'hier kannst du dann rechnen'

 10.marks {

....

    MENU_HEAD.1 = GMENU
    MENU_HEAD.1.NO = 1
    MENU_HEAD.1.NO {

      XY = [10.w] + 20, 28         ###  [die breite vom Textfeld +20]
      backColor = white          

      4 = IMAGE
      4.file = fileadmin/menu.PNG
      4.tile = 10      

      10 = TEXT
      10.text.field = title
      10.fontSize = 10  
      10.offset = 0, 18
      10.align = center
      10.niceText = 1
    }

LG
Honk

achsoistdas ·

Aber ich benutze doch gar kein GMENU sondern ein TMENU...!!!???

Ok das mit "min/bzw. max-height/width" dachte ich mir schon...
Habe es mal in meinen CSS eingebaut...

Nur möchte ich doch das jeder Layer der Größe des darunterliegenden Hauptmenüpunktes enstpricht. Also im Prinzip immer "autobreite" besitzt. Der Layer von z.B "Produktportfolio" muss natürlich größer sein als zb. der von "Home".

Und wie richte ich den Text nach unten aus (align: bottom; im CSS funzt leider nich)

MfG

P.S.:Könnten auch mal privat kontakten, dann könnte ich dir n linke von der seite schicken und du kannst mal gucken, und dann könnte ich hier im forum die lösung präsentieren, wenn wir es schaffen sollten ;-)

Honk88 ·

autobreite schön und gut, aber
wer soll sich denn da an wem orientieren ?

wenn dein Hauptmenüpunkt schmaler ist als
einer deiner untermenüpunkte ? 😃

check mal deine pms

LG
Honk