ilch Forum » Ilch Clan 1.1 » Design und Templates » Dropdown menu in ilch

Geschlossen
  1. So. 27.11.2011 12:07 Uhr #1
    User Pic
    Qilin.- Mitglied
    Registriert seit
    27.11.2011
    Beiträge
    8
    Beitragswertungen
    0 Beitragspunkte
    Hallo @Community
    Als erstes: Ich habe ein Dropdown menu und versuche das nun krampfhaft einzubinden. Nun ja, der größte Teil müsste bereits getan sein.

    Doch irgendwie will das nicht so wie ich will.

    CSS Code: 
    /* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_drop6.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.preload1 {
background: url('./images/six_0a.gif');
}

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

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

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

#nav li a.top_link {
   display:block;
   float: left;
   height:30px;
   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_0a.gif') no-repeat;;   
}

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

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

#nav li:hover a.top_link,
#nav a.top_link:hover {
   color:#ff0000;
   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 {
   padding-bottom:3px;
   background: url('./images/six_1a.gif') no-repeat right top;
}

#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: #DCDEE2;
   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('./pro_dropdown_6/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('./pro_dropdown_6/arrow.gif') 175px 6px no-repeat;
   color:#D31141;
}

#nav li b {
   display:block;
   font-size:11px;
   height:18px;
   width:183px;
   line-height:18px;
   margin-bottom:3px;
   text-indent:6px;
   color:#000;
   border-bottom:1px solid #7fffff;
   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: #DCDEE2;
   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('./pro_dropdown_6/arrow.gif') 175px 6px no-repeat;
   color:#DCDEE2;
   font-weight: bold;
   text-decoration:none;
}

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


    HTML Code: 
    <body> 
<div id="wrap">
  <div id="top"></div>
  <div id="header"><h1>{SITENAME}</h1></div>     
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><b>Cameras</b></li>
			<li><a href="#nogo3" class="fly">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
						<li><a href="#nogo4">Nikon</a></li>
						<li><a href="#nogo5">Minolta</a></li>
						<li><a href="#nogo6">Pentax</a></li>
					</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo7" class="fly">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
						<li><a href="#nogo8">Wide Angle</a></li>
						<li><a href="#nogo9">Standard</a></li>
						<li><a href="#nogo15">Mirror</a></li>
						<li><a href="#nogo10">Telephoto</a></li>
						<li><b>Zoom</b></li>
						<li><a href="#nogo12">35mm to 125mm</a></li>
						<li><a href="#nogo13">50mm to 250mm</a></li>
						<li><a href="#nogo14">125mm to 500mm</a></li>
						<li><b>Non standard</b></li>
						<li><a href="#nogo17">Bayonet mount</a></li>
						<li><a href="#nogo18">Screw mount</a></li>
					</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><b>Accessories</b></li>
			<li><a href="#nogo19">Flash Guns</a></li>
			<li><a href="#nogo20">Tripods</a></li>
			<li><a href="#nogo21">Filters</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><a href="#nogo23">Printing</a></li>
			<li><a href="#nogo24">Photo Framing</a></li>
			<li><a href="#nogo25">Retouching</a></li>
			<li><a href="#nogo26">Archiving</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><a href="#nogo28">Support</a></li>
			<li><a href="#nogo29" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
					<li><b>European</b></li>
					<li><a href="#nogo34" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]-->
						<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
							<li><b>City</b></li>
							<li><a href="#nogo35">London</a></li>
							<li><a href="#nogo36">Liverpool</a></li>
							<li><a href="#nogo37">Glasgow</a></li>
							<li><a href="#nogo38" class="fly">Bristol<!--[if gte IE 7]><!--></a><!--<![endif]-->
								<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
									<li><b>District</b></li>
									<li><a href="#nogo39">Redland</a></li>
									<li><a href="#nogo40">Hanham</a></li>
									<li><a href="#nogo41">Eastville</a></li>
								</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
							</li>
							<li><a href="#nogo42">Cardiff</a></li>
							<li><a href="#nogo43">Belfast</a></li>
						</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
					</li>
					<li><a href="#nogo44">French</a></li>
					<li><a href="#nogo45">German</a></li>
					<li><a href="#nogo46">Spanish</a></li>
					<li><b>Worldwide</b></li>
					<li><a href="#nogo30">USA</a></li>
					<li><a href="#nogo31">Canadian</a></li>
					<li><a href="#nogo32">South American</a></li>
					<li><a href="#nogo47">Australian</a></li>
					<li><a href="#nogo48">Asian</a></li>
				</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo49">Buying</a></li>
			<li><a href="#nogo50">Photographers</a></li>
			<li><a href="#nogo51">Stockist</a></li>
			<li><a href="#nogo52">General</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
  <div id="top2"><font><b> &raquo; </b>{HMENU}</font></div>
  <div id="content">
  
  <div id="left_col">


    Am Anfang wollte ich den Hintergrund direkt einbringen. Siehe Ränder. Doch die Buttons hatten diese Ränder auch. Also hab ich beschlossen, die Buttons in die Mitte zu setzen und mit einem normalen schwarzen Hintergrund (ohne Ränder) zu versehen. Dies klappte auch. Dazu wollte ich die RÄnder separat einfügen. Link und Rechts. Dazu bin ich noch nicht gekommen. Eine Idee dazu hätte ich auch nicht. Denn: Ich kenn mich mit Styles in phpBB aus aber hier in Ilch versage ich irgendwie zunge
    Ich wollte mir zum Thema irgendwann ein Buch besorgen. Damit ich nicht immer nachfragen muss. Eigentlich frage ich selten nach. Nur dann, wenn ich komplett verzweifelt bin lachen

    Hoffe auf Antworten d(^.^)b

    betroffene Homepage: throaty.th.funpic.de/
    0 Mitglieder finden den Beitrag gut.
  2. So. 27.11.2011 15:00 Uhr #2
    User Pic
    s4sch4 Mitglied
    Registriert seit
    09.12.2007
    Beiträge
    183
    Beitragswertungen
    5 Beitragspunkte
    hast du auch die css im HEAD-bereich eingebaut?
    Visit me on: externer Link
    Visit my Clan: externer Link
    Mein ilch Modul: Höhrercharts v0.8 für OnlineRadios
    0 Mitglieder finden den Beitrag gut.
  3. So. 27.11.2011 15:18 Uhr #3
    User Pic
    Qilin.- Mitglied
    Registriert seit
    27.11.2011
    Beiträge
    8
    Beitragswertungen
    0 Beitragspunkte
    Ja, natürlich.
    Die obere CSS heißt pro_dropdown_6.css

    die style.css sieht oben so aus: 
    @import url("pro_dropdown_6/pro_dropdown_6.css");


    Das import klappt ja wunderbar. Nur die Einstellungen passen noch nicht. Und ich hab echt alles versucht.
    0 Mitglieder finden den Beitrag gut.
  4. So. 27.11.2011 16:01 Uhr #4
    User Pic
    s4sch4 Mitglied
    Registriert seit
    09.12.2007
    Beiträge
    183
    Beitragswertungen
    5 Beitragspunkte
    und eine .js gehört doch auch dazu oder? Also sieht mir ganz dannach aus auf jeden Fall...
    Visit me on: externer Link
    Visit my Clan: externer Link
    Mein ilch Modul: Höhrercharts v0.8 für OnlineRadios
    0 Mitglieder finden den Beitrag gut.
  5. So. 27.11.2011 16:40 Uhr #5
    User Pic
    Qilin.- Mitglied
    Registriert seit
    27.11.2011
    Beiträge
    8
    Beitragswertungen
    0 Beitragspunkte
    Es gibt Dropdowns mit js und mit css. Diese ist mit css
    0 Mitglieder finden den Beitrag gut.
  6. Di. 29.11.2011 21:08 Uhr #6
    User Pic
    Forcey Mitglied
    Registriert seit
    19.09.2010
    Beiträge
    411
    Beitragswertungen
    66 Beitragspunkte
    Boa deine Index ist gut "strukturiert" :p

    Glaub mit dein <table> und <div> Gespiele läuft einfach was gar nicht rund.
    gametasy.de >>
    youtube.com/gametasyde >>
    0 Mitglieder finden den Beitrag gut.
  7. Sa. 03.12.2011 14:54 Uhr #7
    User Pic
    Qilin.- Mitglied
    Registriert seit
    27.11.2011
    Beiträge
    8
    Beitragswertungen
    0 Beitragspunkte
    Ich hab es mittlerweile geschafft.
    meine htm sieht jetzt so aus: 

    <body> 
<div id="wrap">
<div id="top"></div>
<div style="float:left;position:absolute; top:250px; left:0px;"><img class="img150" src="include/designs/Inside/pro_dropdown_6/images/left.gif" width="1200" height="30" border="0"></div>
<div style="float:right;position:absolute; top:250px; right:404px;">
<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>
	<li class="top"><a href="#" id="clansection" class="top_link"><span class="down">Clan Section</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><a href="index.php?teams" class="fly">Squads<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?fightus" class="fly">Fightus<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?joinus" class="fly">Joinus<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?wars" class="fly">Wars<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?trains" class="fly">Training<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?awaycal" class="fly">Away<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?awards" class="fly">Awards<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?rules" class="fly">Regeln<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?history" class="fly">History<!--[if gte IE 7]><!--></a><!--<![endif]-->
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="#" id="miscellaneous" class="top_link"><span class="down">Miscellaneous</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><a href="index.php?contact" class="fly">Kontakt<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<li><a href="index.php?impressum" class="fly">Impressum<!--[if gte IE 7]><!--></a><!--<![endif]-->
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
</div>
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten