CSS-(Menu) Problem

Tänzer

Moin.

Irgendwie stehe ich im Moment etwas auf dem Schlauch... Versagt

Problem 2: ist das .submenu; Hier weiß ich nicht, wie ich das Menu im <ul> an der Position aufklappen kann, wo der Link dafür ist.

Wo ist hier mein Denkfehler? verwirrt

CSS-Codes:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:

.navigation {
	font-size: 13px;
	font-family: Tahoma,Helvetica;
	text-align: center;
	color: #336699;
}

.navigation a:link, .navigation a:visited, .navigation a:active {
	color: #336699;
	text-decoration: none;
}

.navigation a:hover {
	color: #336699;
	text-decoration: underline;
}

.subnav{
	display: block;
	color: #FFFFFF;
	background-color:#E6E6E6;
	border: solid 1px #666;
	text-align: lefit;
	position:absolute;
}

ul.subnav, .subnav li {
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.subnav {
	clear: both;
}

.subnav li a {
	color: #501769;
	display: block;
	text-decoration: none;
border-top: solid 1px #DEDEDE;
}

.subnav li a:hover {
	color: #501769;
	display: block;
	text-decoration: underline;
	background-color:#F9F9F9;
}

Header-TPL (mit footer):

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:

<table style="width:{$style['tableoutwidth']}; margin-top:50px;" cellpadding="{$style['tableoutcellpadding']}" cellspacing="{$style['tableoutcellspacing']}" align="center" border="{$style['tableoutborder']}">
	<tr>
	  <td align="center" style="vertical-align: top;">
   <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td style="width: 30px; height: 65px; background: url({$style['imagefolder']}/head_left.png) no-repeat top left; position:absolute;"></td>
      <td style="width: 890px; height: 65px; background: url({$style['imagefolder']}/head_middle.png) repeat-x top left; position: static;"><img style="margin-top:-35px; margin-left:20px;" src="{$style['imagefolder']}/logo.png" alt="" /><div class="logo"></div></td>
	<td style="width: 30px; height: 65px; background: url({$style['imagefolder']}/head_right.png) no-repeat top right; position:absolute;"></td>
    </tr>
   </table>
   <table style="width: {$style['tableoutwidth']}" border="0" cellpadding="0" cellspacing="0">
   	<tr>
         <td style="width:13px; overflow:visible; background: url({$style['imagefolder']}/bg_shadow_l.png) repeat-y top left;"></td>
         <td class="mainpage" valign="top" align="center"><br />
         <div style="width:95%; padding:3px; border: 1px #808080 solid; background:#fff;"><div class="navigation"><a href="index.php{$SID_ARG_1ST}">Startseite</a> | <a href="rules.php{$SID_ARG_1ST}">Knigge</a> | <a href="teamsite.php{$SID_ARG_1ST}">Teamsite</a> | <a href="memberslist.php{$SID_ARG_1ST}">Mitglieder</a> | <a href="search.php{$SID_ARG_1ST}"><b>Suche</b></a><if($wbbuserdata[userid])><then> | <a href="usercp.php{$SID_ARG_1ST}">UserCP</a> <img style="vertical-align: middle" src="{$style['imagefolder']}/toggle_open.png" alt="" /> | <a href="pms.php{$SID_ARG_1ST}"><if($wbbuserdata[pmunreadcount] != 0)><then><span style="color:red;"><b>Private Nachrichten</b></span></then><else>Private Nachrichten</else></if></a><if($wbbuserdata[pmunreadcount] != 0)><then> ($wbbuserdata[pmunreadcount])</then></if> | 

<span class="" onclick="navigation('menue#1')">Zusatz Optionen
<ul id="menue#1" class="subnav" style="display: none;">
<li><a href="">Demolink</a></li>
<li><a href="">Demolink</a></li>
<li><a href="">Demolink</a></li>
<li><a href="">Demolink</a></li>
</ul>
</span>

</then></if></div></div><br /><br />

<!-- beginn footer.tpl -->
<br />
		</td>
		<td style="width:13px; overflow:visible; background: url({$style['imagefolder']}/bg_shadow_r.png) repeat-y top right;"></td>
	</tr>
	<tr>
		<td colspan="3">
		<table width="100%" cellspacing="0" cellpadding="0" border="0">
		    <tr>
		    	<td style="width: 30px; height: 30px; background: url({$style['imagefolder']}/footer_left.png) no-repeat bottom left; position:absolute;"></td>
		    	<td style="width: 890px; height: 30px; background: url({$style['imagefolder']}/footer_middle.png) repeat-x bottom left;"></td>
		    	<td style="width: 30px; height: 30px; background: url({$style['imagefolder']}/footer_right.png) no-repeat bottom right; position:absolute;"></td>
		    </tr>
		</table>
		</td>
	</tr>
</table></td>
</tr>
</table>
<div class="footer_menu"><a href="http://www.woltlab.de" target="_blank">{$lang->items['LANG_GLOBAL_COPYRIGHT']}</a> | <a href="{$imprint_url}">{$lang->items['LANG_GLOBAL_IMPRINT']}</a></div>

mFg

Edit: Problem 1 gelöst und entfernt.

Lordy20

Hallo
Nimm mal testweise das "position: absolute;" bei .logo raus.
Danach sollte sich das Logo wieder mit veschieben, wenn du die Größe des Browserfensters änderst.

Grüße
Lordy20

Tänzer

Moin..

Okay, danke hab das .logo nun mit "margin-top:-80px; margin-left:500px;" ausgerichtet.

Hat noch wer eine Idee für das Menu?

mFg

Edit: Hier mal ein Screen vom Menu wie es ist. Dieses Menu wird unter "Zusatz Optionen" Aufgerufen und soll sich auch dort ausklappen und nicht soweit vorne...

mkkcs

Hallo Tänzer,

ich hatte mal ein ähnliches Problem !
ich habe es dann so gelöst, das ich eine Tabelle mit x-TD-Tags (pro ein Menüpunkt ein TD)
und 2 Reihen gesetzt habe !

sprich

code:
1: 2: 3: 4: 5: 6: 7: 8:	<tr> <td>menu1</td><td>menue2</td> ..... </tr> <tr> <td>hier halt das klapp menü1</td><td>hier halt das klapp menü2</td> ..... </tr>

und dann hat es geklappt !