Feinjustierung des Pro_Dropdowns_6

[onoffon]

Hallo Community. Wie im Betreff anzunehmen, habe ich das pro_dropdown_6 bei mir eingebaut.
http://startrekguide.com/community/view ... =50&t=4659

Das sieht wie folgt aus: http://www.inside-clan.de/index.php

Jedoch möchte ich das gerne so haben:
http://img3.picload.org/image/rrdwcwd/pro_dropdown.jpg

Ich hab in der css vieles rumprobiert. Doch nichts funktioniert -.-

pro_dropdown_6.css

Code: Alles auswählen

.preload1 {
background: url('./images/six_0a.gif');
}

.preload2 {
background: url('./images/six_1a.gif');
}

#nav {
   padding:0;
   margin: 0;
   list-style:none;
   height:33px;
   background: url('./images/six_0.gif') repeat-x;
   position:relative;
   z-index:200;
   font-family: arial, verdana, sans-serif;
}

#nav li.top {
   display:block;
   float: left;
}

#nav li a.top_link {
   display:block;
   float: left;
   height:33px;
   line-height:31px;
   color:#FFF;
   text-decoration:none;
   font-size:12px;
   font-weight:bold;
   padding:0 0 0 12px;
   cursor:pointer;
   background: url('./images/six_0.gif');
}

#nav li a.top_link span {
   float: left;
   display:block;
   padding:0 24px 0 12px;
   height:33px;
   background: url('./images/six_0.gif') right top no-repeat;
}

#nav li a.top_link span.down {
   float: left;
   display:block;
   padding:0 24px 0 12px;
   height:33px;
   background: url('./images/six_0a.gif') no-repeat right top;
}

#nav li:hover a.top_link,
#nav a.top_link:hover {
   color:#FFF;
   background: url('./images/six_1.gif') no-repeat;
}

#nav li:hover a.top_link span, 
#nav a.top_link:hover span {
   background: url('./images/six_1.gif') no-repeat right top;
}

#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down {
   background: url('./images/six_1a.gif') no-repeat right top;
   padding-bottom:3px;
}

#nav table {
   border-collapse:collapse;
   padding:0;
   margin:0;
   position:absolute;
   left:0;
   top:0;
}

#nav li:hover {
   position:relative;
   z-index:200;
}

#nav a:hover {
   position:relative;
   white-space:normal;
   z-index:200;
}

#nav :hover ul.sub {
   left:1px;
   top:34px;
   background-color: #000;
   padding:3px;
   border: 1px solid #FFF;
   white-space:nowrap;
   width:185px;
   height:auto;
   z-index:300;
   font-weight:bold;
}

#nav :hover ul.sub li {
   display:block;
   height:20px;
   position:relative;
   float:left;
   width:185px;
   font-weight:bold;
}

#nav :hover ul.sub li a {
   display:block;
   font-size:11px;
   height:18px;
   width:183px;
   line-height:18px;
   text-indent:5px;
   color:#3365ac;
   text-decoration:none;
   font-weight:bold;
}

#nav li ul.sub li a.fly {
   background: url('./images/arrow_over.gif') 175px 6px no-repeat;
}

#nav :hover ul.sub li a:hover {
   color:#3365ac;
   background-color: #FFF;
   border-color:#FFF;
   font-weight:bold;
}

#nav :hover ul.sub li a.fly:hover {
   background: #FFF url('./images/arrow.gif') 175px 6px no-repeat;
   color:#3365ac;
}

#nav li b {
   display:block;
   font-size:11px;
   height:18px;
   width:183px;
   line-height:18px;
   margin-bottom:3px;
   text-indent:6px;
   color:#FFF;
   border-bottom:1px solid #FF8A19;
   cursor:default;
}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul {
   left:89px;
   top:-4px;
   padding:3px;
   border:1px solid #000;
   white-space:nowrap;
   width:183px;
   z-index:400;
   height:auto;
}

#nav ul, 
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul {
   position:absolute;
   left:-9999px;
   top:-9999px;
   width:0;
   height:0;
   margin:0;
   padding:0;
   list-style:none;
}

#nav li:hover li:hover > ul {
   left: 183px; /* distance from right margin of main drop */
   top: -4px;
   background-color: #000;
   padding: 3px;
   border: 1px solid #FFF;
   white-space: nowrap;
   width: 185px; /* width of secondary drop */
   z-index: 400;
   height: auto;
}

#nav li:hover > ul ul {
   position:absolute;
   left:-9999px;
   top:-9999px;
   width:0;
   height:0;
   margin:0;
   padding:0;
   list-style:none;
}

#nav li:hover li:hover > a.fly {
   background: #FFF url('./images/arrow.gif') 175px 6px no-repeat; 
   color:#3365ac;
   font-weight: bold;
   text-decoration:none;
} 

#nav li:hover li:hover > li a.fly {
   background: #FFF url('./images/arrow.gif') 175px 6px no-repeat;
   color:#3365ac;
   font-weight: bold;
   text-decoration:none;
}

overall_header.html

Code: Alles auswählen

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div id="customwrap">
        		<div class="headerbar">
        			<div id="site-description">
        				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
        				<h1>{SITENAME}</h1>
        				<p>{SITE_DESCRIPTION}</p>
        				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
        			</div>   
        		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
        			<div id="search-box">
        				<form action="{U_SEARCH}" method="get" id="search">
        				<fieldset>
        					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
        					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
        					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
        				</fieldset>
        				</form>
        			</div>
        		<!-- ENDIF -->
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
	<li class="top"><a href="#" id="community" class="top_link"><span class="down">Community</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><a href="index.php?news" class="fly">News<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?forum" class="fly">Forum<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?user" class="fly">Mitglieder<!--[if gte IE 7]><!--></a><!--<![endif]-->	
			<li><a href="index.php?gbook" class="fly">Gbook<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?links" class="fly">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?downloads" class="fly">Downloads<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?gallery" class="fly">Gallery<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?kalender" class="fly">Kalender<!--[if gte IE 7]><!--></a><!--<![endif]-->
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
</div>	

Am Anfang kam mir die Idee, die searchbox einfach zu kopieren. Aber dies ergab sich als schwierig. Darin muss ja das dropdown installiert werden.

[Michel_61]

Moin,
ich kann dir jetzt nicht sagen wo, aber er findet die eigentlich für den Menütext zuständigen Wörter nicht.

Darum auch die Anzeige in Klammern, vielleicht hilft dir das ja weiter...

EDIT: Mal ne Frage am Rande, was hast du dir da oben eingebaut, von wegen der prozentualen angabe der Online-User?

[onoffon]

prozentualen angabe der Online-User?
Kapier ich nicht ganz. Oder meinst du die 73%?

Zum Thema: Ich habs selbst hinbekommen. Nur weiß ich nicht, wie ich den Platz ziwschen den Grafiken erhöhen kann. Mit padding hab ich es schon versucht. Das sieht nicht toll aus.

Code: Alles auswählen

.preload1 {
background: url('./images/six_0a.gif');
}

.preload2 {
background: url('./images/six_1a.gif');
}

#nav {
   padding:236px;
   margin:0;
   list-style:none;
   height:32px;
   z-index:200;
   font-family: arial, verdana, sans-serif;
}

#nav li.top {
   display:block;
   float: left;
}

#nav li a.top_link {
   display:block;
   float: left;
   height:32px;
   line-height:31px;
   color:#FFF;
   text-decoration:none;
   font-size:12px;
   font-weight:bold;
   padding:0 0 0 32px;
   cursor:pointer;
   background: url('./images/six_0.gif');
}

#nav li a.top_link span {
   float: left;
   display:block;
   padding:7px 24px 0 0px;
   height:32px;
   background: url('./images/six_0.gif') right top no-repeat;
}

#nav li a.top_link span.down {
   float: left;
   display:block;
   padding:7px 24px 0 0px;
   height:32px;
   background: url('./images/six_0a.gif') no-repeat right top;
}

#nav li:hover a.top_link,
#nav a.top_link:hover {
   color:#FFF;
   background: url('./images/six_1.gif') no-repeat;
}

#nav li:hover a.top_link span, 
#nav a.top_link:hover span {
   background: url('./images/six_1.gif') no-repeat right top;
}

#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down {
   background: url('./images/six_1a.gif') no-repeat right top;
   padding-bottom:3px;
}

#nav table {
   border-collapse:collapse;
   padding:0;
   margin:0;
   position:absolute;
   left:0;
   top:0;
}

#nav li:hover {
   position:relative;
   z-index:200;
}

#nav a:hover {
   position:relative;
   white-space:normal;
   z-index:200;
}

#nav :hover ul.sub {
   left:1px;
   top:34px;
   background-color: #a16e36;
   padding:3px;
   border: 1px solid #62492d;
   white-space:nowrap;
   width:185px;
   height:auto;
   z-index:300;
   font-weight:bold;
}

#nav :hover ul.sub li {
   display:block;
   height:20px;
   position:relative;
   float:left;
   width:185px;
   font-weight:bold;
}

#nav :hover ul.sub li a {
   display:block;
   font-size:11px;
   height:18px;
   width:183px;
   line-height:18px;
   text-indent:5px;
   color:#ffffff;
   text-decoration:none;
   font-weight:bold;
}

#nav li ul.sub li a.fly {
   background: url('./images/arrow_over.gif') 175px 6px no-repeat;
}

#nav :hover ul.sub li a:hover {
   color:#ffffff;
   background-color: #62492d;
   border-color:#FFF;
   font-weight:bold;
}

#nav :hover ul.sub li a.fly:hover {
   background: #FFF url('./images/arrow.gif') 175px 6px no-repeat;
   color:#ffffff;
}

#nav li b {
   display:block;
   font-size:11px;
   height:18px;
   width:183px;
   line-height:18px;
   margin-bottom:3px;
   text-indent:6px;
   color:#FFF;
   border-bottom:1px solid #ffffff;
   cursor:default;
}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul {
   left:89px;
   top:-4px;
   padding:3px;
   border:1px solid #a16e36;
   white-space:nowrap;
   width:183px;
   z-index:400;
   height:auto;
}

#nav ul, 
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul {
   position:absolute;
   left:-9999px;
   top:-9999px;
   width:0;
   height:0;
   margin:0;
   padding:0;
   list-style:none;
}

#nav li:hover li:hover > ul {
   left: 183px; /* distance from right margin of main drop */
   top: -4px;
   background-color: #a16e36;
   padding: 3px;
   border: 1px solid #FFF;
   white-space: nowrap;
   width: 185px; /* width of secondary drop */
   z-index: 400;
   height: auto;
}

#nav li:hover > ul ul {
   position:absolute;
   left:-9999px;
   top:-9999px;
   width:0;
   height:0;
   margin:0;
   padding:0;
   list-style:none;
}

#nav li:hover li:hover > a.fly {
   background: #FFF url('./images/arrow.gif') 175px 6px no-repeat; 
   color:#ffffff;
   font-weight: bold;
   text-decoration:none;
} 

#nav li:hover li:hover > li a.fly {
   background: #FFF url('./images/arrow.gif') 175px 6px no-repeat;
   color:#ffffff;
   font-weight: bold;
   text-decoration:none;
}

[Michel_61]

Mit dem code, kann ich dir leider auch nicht helfen, sorry

Ja, ich meinte das Teil im Header mit der Anzeige von 73%, ist das ein MOD? Ich hab nichts gefunden, weder hier noch über Google...

[onoffon]

Das sind 2 Mods. bzw ein mod und ein bbcode^^

http://www.phpbb.com/customise/db/mod/a ... nt_centre/

http://www.phpbb3bbcodes.com/viewtopic.php?t=307

[Michel_61]

Vielen Dank!

[onoffon]

Die Lösung war:

replace

Code: Alles auswählen

#nav li.top {
   display:block;
   float: left;
}

with

Code: Alles auswählen

#nav li.top {
   display:block;
   float: left;
   margin-left:20px;
}

refresh your theme from acp.

yay