1.6.5 CSS Dropdown Menü

Forum Partner+Friends LinkUs Downloads KNW Suche TS³ Viewer Twitter Facebook

Sie sind nicht angemeldet. Anmelden

Bernardo

ist gerade angekommen

Beiträge: 40

Geschlecht: Männlich

PHPKIT Version: 1.6.5

Samstag, 23. Oktober 2010, 09:14

CSS Dropdown Menü

Ich habe auf der Seite von CSSPlay ein sehr hübsches Dropdown Menü gefunden, welches ich gerne in mein PHPKIT einpflegen möchte:

http://www.cssplay.co.uk/menus/pro_drop

Bisher ist es mir aber leider nur im Internet-Explorer gelungen (mit ein paar Styling-Probleme) das Menü darzustellen. Im Firefox wollen die Grafiken aus dem Stylesheet nicht geladen bzw. gefunden werden. Statt dessen wird wie in der Vorlage nur die Liste mit den Untermenüs aufgezeigt. Hier meine Testseite:

http://www.schwarzerdrache.info/sd5/index.php

Der Vorlagen-Code sieht aktuell so aus:

Hier klicken für weitere Informationen

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Style Copyright
#################################
#                               #
#   Karos Online Style 1.0 by   #
#   www.blutrausch-gilde.com    #
#                               #
#################################
-->

<head>
<meta http-equiv="content-type" content="text/html; charset=$LANG[__CHARSET__]" />
<meta http-equiv="content-language" content="$LANG[__LANGCODE__]" />
<title>$site_title</title>
$site_metatags
$site_design
$site_header_script
$site_refresh
<script type="text/javascript"> 
 function oeffne(welches) { 
   if(document.getElementById(welches).style.display == 'none') { 
     document.getElementById(welches).style.display = ''; 
     document.getElementById('img'+welches).src = 'fx/schwarzerdrache/minus.gif'; 
   }else{ 
     document.getElementById(welches).style.display = 'none'; 
     document.getElementById('img'+welches).src = 'fx/schwarzerdrache/plus.gif'; 
   } 
 } 
</script>
</head>
<body>
<div id="pkbody">
 <a id="head"></a>
 <div id="pkouterpage">
  <div id="pkpageheader"></div>
  <div id="pkpagedecoration">
   <div id="pkpage">
<div id="navigation_sub_top">$navigation_sub_top</div>
     <div id="pkbrandingimage">
      <a href="$site_link_home" title="$site_name - $site_slogan Startseite"><img src="$link_brandinglogo_overlay" alt="$logo_imgalt" /></a>
     </div>
    <div id="pkadview"$displayadview>
     <div id="pkadviewbox">$adview</div>
    </div>
<div id="multi-level">
                <table border="0" cellspacing="0" cellpadding="0" width="100%" >
                         <tr> 
                          <td width="100%">
                           <table border="0" width="980" align="left" cellpadding="0" cellspacing="0" >
                            <tr>
                              <td width="980" height="177" align="center" style="background:url(fx/schwarzerdrache/banner_head.jpg);"><a href="?path=start"><img  border="0" name="startseite" src="fx/schwarzerdrache/banner_head.jpg" onmouseout="startseite.src='fx/schwarzerdrache/banner_head.jpg'" onmouseover="startseite.src='fx/schwarzerdrache/banner_head.jpg';" alt="Startseite" title="Startseite" /></a></td>
                            </tr>
                           </table>
                          </td>
                         </tr>                         
                           <td width="100%">
                            <table border="0" width="980" align="left" cellpadding="0" cellspacing="0">
                             <tr>
                              <td width="240" height="30" align="left" style="background:url(fx/schwarzerdrache/banner_left.jpg);"></td>
<td><img class="pad" src="multi_level-files/pad.gif" title="" alt="" /></td>
<ul class="menu">
<td><li class="top p1"><a href="http://www.cssplay.co.uk" id="home" class="top_link"><span>Home</span></a></li></td>
        <td><li class="top p2"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span>Products</span></a>
                                <ul class="sub">
                        <li><a href="../menu/" class="fly">Cameras</a>
                                        <ul>
                                                <li><a href="../mozilla/">Nikon</a></li>
                                                <li><a href="../ie/">Minolta</a></li>
                                                <li><a href="../opacity/">Pentax</a></li>
                                        </ul>
                              </li>
                        <li class="mid"><a href="../boxes/" class="fly">Lenses</a>
                                        <ul>
                                                <li><a href="../mozilla/">Wide Angle</a></li>
                                                <li><a href="../ie/">Standard</a></li>
                                                <li><a href="../opacity/">Telephoto</a></li>
                                                <li><a href="../menu/" class="fly">Zoom</a>
                                                        <ul>
                                                                <li><a href="../mozilla/">35mm to 125mm</a></li>
                                                                <li><a href="../opacity/">50mm to 250mm</a></li>
                                                                <li><a href="../menu/">125mm to 500mm</a></li>
                                                        </ul>
                                                </li>
                                                <li><a href="../boxes/">Mirror</a></li>
                                                <li><a href="../opacity/" class="fly">Non standard</a>
                                                        <ul>
                                                                <li><a href="../mozilla/">Bayonet mount</a></li>
                                                                <li><a href="../opacity/">Screw mount</a></li>
                                                        </ul>
                                                 </li>
                                        </ul>
                                </li>
                        <li><a href="../mozilla/">Flash Guns</a></li>
                        <li><a href="../ie/">Tripods</a></li>
                        <li><a href="../opacity/">Filters</a></li>
                </ul>
        </li></td>
        <td><li class="top p3"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span>Services</span></a>
                <ul class="sub">
                        <li><a href="../menu/">Printing</a></li>
                        <li><a href="../layouts/">Photo Framing</a></li>
                        <li><a href="../boxes/">Retouching</a></li>
                        <li><a href="../mozilla/">Archiving</a></li>
                </ul>
             </li></td>
        <td><li class="top p4"><a href="http://www.cssplay.co.uk" id="contacts" class="top_link"><span>Contacts</span></a>
                <ul class="sub">
                        <li><a href="../layouts/">Support</a></li>
                        <li><a href="../boxes/" class="fly">Sales</a>
                                  <ul>
                                        <li><a href="../mozilla/">USA</a></li>
                                        <li><a href="../ie/">Canadian</a></li>
                                        <li><a href="../opacity/">South American</a></li>
                                        <li><a href="../menu/" class="fly">European</a>
                                                <ul>
                                                        <li><a href="../mozilla/" class="fly">British</a>
                                                                <ul>
                                                                        <li><a href="../ie/">London</a></li>
                                                                        <li><a href="../menu/">Liverpool</a></li>
                                                                        <li><a href="../boxes/">Glasgow</a></li>
                                                                        <li><a href="../opacity/" class="fly">Bristol</a>
                                                                                <ul>
                                                                                        <li><a href="../ie/">Redland</a></li>
                                                                                        <li><a href="../opacity/">Hanham</a></li>
                                                                                        <li><a href="../menu/">Eastville</a></li>
                                                                                </ul>
                                                                             </li>
                                                                        <li><a href="../layouts/">Cardiff</a></li>
                                                                        <li><a href="../mozilla/">Belfast</a></li>
                                                                </ul>
                                                             </li>
                                                        <li><a href="../opacity/">French</a></li>
                                                        <li><a href="../menu/">German</a></li>
                                                        <li><a href="../boxes/">Spanish</a></li>
                                                </ul>
                                             </li>
                                        <li><a href="../boxes/">Australian</a></li>
                                        <li><a href="../boxes/">Asian</a></li>
                                </ul>
                             </li>
                        <li><a href="../mozilla/">Buying</a></li>
                        <li><a href="../ie/">Photographers</a></li>
                        <li><a href="../opacity/">Stockist</a></li>
                        <li><a href="../menu/">General</a></li>
                </ul>
             </li></td>
        <td><li class="top p5"><a href="http://www.cssplay.co.uk" id="shop" class="top_link"><span>Shop</span></a>
                <ul class="sub">
                        <li><a href="../ie/">Online</a></li>
                        <li><a href="../opacity/">Catalogue</a></li>
                        <li><a href="../menu/">Mail Order</a></li>
                </ul>
             </li></td>
        <td><li class="top p6"><a href="http://www.cssplay.co.uk" id="privacy" class="top_link"><span>Privacy Policy</span></a></li></td>
</ul>
<td><img class="pad" src="multi_level-files/pad.gif" title="" alt="" /></td>
                              <td width="240" height="30" align="left" style="background:url(fx/schwarzerdrache/banner_right.jpg);"></td>
                             </tr>
                            </table>
                           </td>
                          </tr>
                         </table>
</div>
    <a id="navigation"></a>
    
    <div id="pkcontent"><div id="pkcontent_top"$displaycontent_top><div id="navigation_top">$navigation_top</div></div>
     <a id="content"></a>
     <div id="pkbreadcrumbnavigation"$displaycontent_breadcrumb>$navigation_breadcrumb</div>
     <table class="pkcontent" cellspacing="0" cellpadding="0">
      <tr>
       <td class="pkcontent_left"$displaycontent_left>
      <div id="pkcontent_left">$navigation_left
       <div class="pkcontentclear">Â </div>
      </div></td>
       <td class="pkcontent_main">
      <div id="pkcontent_main">$site_body
       <div class="pkcontentclear">Â </div>
      </div></td>
       <td class="pkcontent_right"$displaycontent_right>
      <div id="pkcontent_right">$navigation_right
       <div class="pkcontentclear">Â </div>
      </div></td>
      </tr>
     </table>
    </div>
  
    <div id="pkcontent_bottom"$displaycontent_bottom>$navigation_bottom</div>
    <div id="pkcontent_sub_bottom"$displaycontent_sub_bottom>$navigation_sub_bottom</div>
    
    <div id="pksitecopyright"$displaycontent_site_copyright>$site_copyright</div>
   </div>
  </div>
   <div align="center"><table width="900" cellpadding="0" cellspacing="0"><tr><td align="left" width="50%"><table><tr><td align="left"><a onclick="oeffne('karos');" style="cursor: pointer;"><img src="fx/schwarzerdrache/plus.gif" id="imgkaros" width="11" height="11" alt="Zum Auf- und Zuklappen bitte klicken" title="Zum Auf- und Zuklappen bitte klicken" border="0" />Style&copy;</a></td></tr><tr id="karos" style="display: none;"><td align="center">VORLAGE BEI <a href="http://www.blutrausch-gilde.com" target="_blank">Blutrausch Gilde</a></td><td align="center">DESIGN BEI <a href="http://www.myspace.com/emmamagerita" target="_blank">Emma Magerita</a></td></tr></table></td><td align="right" width="25%"><font class="small">$lang_parsertime_stopped</font></td></tr></table></div>
 </div>
 <a id="foot"></a>
</div>
$site_closure
</body>
</html>

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Style Copyright
#################################
#                               #
#   Karos Online Style 1.0 by   #
#   www.blutrausch-gilde.com    #
#                               #
#################################
-->

<head>
<meta http-equiv="content-type" content="text/html; charset=$LANG[__CHARSET__]" />
<meta http-equiv="content-language" content="$LANG[__LANGCODE__]" />
<title>$site_title</title>
$site_metatags
$site_design
$site_header_script
$site_refresh
<script type="text/javascript"> 
 function oeffne(welches) { 
   if(document.getElementById(welches).style.display == 'none') { 
     document.getElementById(welches).style.display = ''; 
     document.getElementById('img'+welches).src = 'fx/schwarzerdrache/minus.gif'; 
   }else{ 
     document.getElementById(welches).style.display = 'none'; 
     document.getElementById('img'+welches).src = 'fx/schwarzerdrache/plus.gif'; 
   } 
 } 
</script>
</head>
<body>
<div id="pkbody">
 <a id="head"></a>
 <div id="pkouterpage">
  <div id="pkpageheader"></div>
  <div id="pkpagedecoration">
   <div id="pkpage">
<div id="navigation_sub_top">$navigation_sub_top</div>
     <div id="pkbrandingimage">
      <a href="$site_link_home" title="$site_name - $site_slogan Startseite"><img src="$link_brandinglogo_overlay" alt="$logo_imgalt" /></a>
     </div>
    <div id="pkadview"$displayadview>
     <div id="pkadviewbox">$adview</div>
    </div>
<div id="multi-level">
                <table border="0" cellspacing="0" cellpadding="0" width="100%" >
                         <tr> 
                          <td width="100%">
                           <table border="0" width="980" align="left" cellpadding="0" cellspacing="0" >
                            <tr>
                              <td width="980" height="177" align="center" style="background:url(fx/schwarzerdrache/banner_head.jpg);"><a href="?path=start"><img  border="0" name="startseite" src="fx/schwarzerdrache/banner_head.jpg" onmouseout="startseite.src='fx/schwarzerdrache/banner_head.jpg'" onmouseover="startseite.src='fx/schwarzerdrache/banner_head.jpg';" alt="Startseite" title="Startseite" /></a></td>
                            </tr>
                           </table>
                          </td>
                         </tr>                         
                           <td width="100%">
                            <table border="0" width="980" align="left" cellpadding="0" cellspacing="0">
                             <tr>
                              <td width="240" height="30" align="left" style="background:url(fx/schwarzerdrache/banner_left.jpg);"></td>
<td><img class="pad" src="multi_level-files/pad.gif" title="" alt="" /></td>
<ul class="menu">
<td><li class="top p1"><a href="http://www.cssplay.co.uk" id="home" class="top_link"><span>Home</span></a></li></td>
        <td><li class="top p2"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span>Products</span></a>
                                <ul class="sub">
                        <li><a href="../menu/" class="fly">Cameras</a>
                                        <ul>
                                                <li><a href="../mozilla/">Nikon</a></li>
                                                <li><a href="../ie/">Minolta</a></li>
                                                <li><a href="../opacity/">Pentax</a></li>
                                        </ul>
                              </li>
                        <li class="mid"><a href="../boxes/" class="fly">Lenses</a>
                                        <ul>
                                                <li><a href="../mozilla/">Wide Angle</a></li>
                                                <li><a href="../ie/">Standard</a></li>
                                                <li><a href="../opacity/">Telephoto</a></li>
                                                <li><a href="../menu/" class="fly">Zoom</a>
                                                        <ul>
                                                                <li><a href="../mozilla/">35mm to 125mm</a></li>
                                                                <li><a href="../opacity/">50mm to 250mm</a></li>
                                                                <li><a href="../menu/">125mm to 500mm</a></li>
                                                        </ul>
                                                </li>
                                                <li><a href="../boxes/">Mirror</a></li>
                                                <li><a href="../opacity/" class="fly">Non standard</a>
                                                        <ul>
                                                                <li><a href="../mozilla/">Bayonet mount</a></li>
                                                                <li><a href="../opacity/">Screw mount</a></li>
                                                        </ul>
                                                 </li>
                                        </ul>
                                </li>
                        <li><a href="../mozilla/">Flash Guns</a></li>
                        <li><a href="../ie/">Tripods</a></li>
                        <li><a href="../opacity/">Filters</a></li>
                </ul>
        </li></td>
        <td><li class="top p3"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span>Services</span></a>
                <ul class="sub">
                        <li><a href="../menu/">Printing</a></li>
                        <li><a href="../layouts/">Photo Framing</a></li>
                        <li><a href="../boxes/">Retouching</a></li>
                        <li><a href="../mozilla/">Archiving</a></li>
                </ul>
             </li></td>
        <td><li class="top p4"><a href="http://www.cssplay.co.uk" id="contacts" class="top_link"><span>Contacts</span></a>
                <ul class="sub">
                        <li><a href="../layouts/">Support</a></li>
                        <li><a href="../boxes/" class="fly">Sales</a>
                                  <ul>
                                        <li><a href="../mozilla/">USA</a></li>
                                        <li><a href="../ie/">Canadian</a></li>
                                        <li><a href="../opacity/">South American</a></li>
                                        <li><a href="../menu/" class="fly">European</a>
                                                <ul>
                                                        <li><a href="../mozilla/" class="fly">British</a>
                                                                <ul>
                                                                        <li><a href="../ie/">London</a></li>
                                                                        <li><a href="../menu/">Liverpool</a></li>
                                                                        <li><a href="../boxes/">Glasgow</a></li>
                                                                        <li><a href="../opacity/" class="fly">Bristol</a>
                                                                                <ul>
                                                                                        <li><a href="../ie/">Redland</a></li>
                                                                                        <li><a href="../opacity/">Hanham</a></li>
                                                                                        <li><a href="../menu/">Eastville</a></li>
                                                                                </ul>
                                                                             </li>
                                                                        <li><a href="../layouts/">Cardiff</a></li>
                                                                        <li><a href="../mozilla/">Belfast</a></li>
                                                                </ul>
                                                             </li>
                                                        <li><a href="../opacity/">French</a></li>
                                                        <li><a href="../menu/">German</a></li>
                                                        <li><a href="../boxes/">Spanish</a></li>
                                                </ul>
                                             </li>
                                        <li><a href="../boxes/">Australian</a></li>
                                        <li><a href="../boxes/">Asian</a></li>
                                </ul>
                             </li>
                        <li><a href="../mozilla/">Buying</a></li>
                        <li><a href="../ie/">Photographers</a></li>
                        <li><a href="../opacity/">Stockist</a></li>
                        <li><a href="../menu/">General</a></li>
                </ul>
             </li></td>
        <td><li class="top p5"><a href="http://www.cssplay.co.uk" id="shop" class="top_link"><span>Shop</span></a>
                <ul class="sub">
                        <li><a href="../ie/">Online</a></li>
                        <li><a href="../opacity/">Catalogue</a></li>
                        <li><a href="../menu/">Mail Order</a></li>
                </ul>
             </li></td>
        <td><li class="top p6"><a href="http://www.cssplay.co.uk" id="privacy" class="top_link"><span>Privacy Policy</span></a></li></td>
</ul>
<td><img class="pad" src="multi_level-files/pad.gif" title="" alt="" /></td>
                              <td width="240" height="30" align="left" style="background:url(fx/schwarzerdrache/banner_right.jpg);"></td>
                             </tr>
                            </table>
                           </td>
                          </tr>
                         </table>
</div>
    <a id="navigation"></a>
    
    <div id="pkcontent"><div id="pkcontent_top"$displaycontent_top><div id="navigation_top">$navigation_top</div></div>
     <a id="content"></a>
     <div id="pkbreadcrumbnavigation"$displaycontent_breadcrumb>$navigation_breadcrumb</div>
     <table class="pkcontent" cellspacing="0" cellpadding="0">
      <tr>
       <td class="pkcontent_left"$displaycontent_left>
      <div id="pkcontent_left">$navigation_left
       <div class="pkcontentclear">Â </div>
      </div></td>
       <td class="pkcontent_main">
      <div id="pkcontent_main">$site_body
       <div class="pkcontentclear">Â </div>
      </div></td>
       <td class="pkcontent_right"$displaycontent_right>
      <div id="pkcontent_right">$navigation_right
       <div class="pkcontentclear">Â </div>
      </div></td>
      </tr>
     </table>
    </div>
  
    <div id="pkcontent_bottom"$displaycontent_bottom>$navigation_bottom</div>
    <div id="pkcontent_sub_bottom"$displaycontent_sub_bottom>$navigation_sub_bottom</div>
    
    <div id="pksitecopyright"$displaycontent_site_copyright>$site_copyright</div>
   </div>
  </div>
   <div align="center"><table width="900" cellpadding="0" cellspacing="0"><tr><td align="left" width="50%"><table><tr><td align="left"><a onclick="oeffne('karos');" style="cursor: pointer;"><img src="fx/schwarzerdrache/plus.gif" id="imgkaros" width="11" height="11" alt="Zum Auf- und Zuklappen bitte klicken" title="Zum Auf- und Zuklappen bitte klicken" border="0" />Style&copy;</a></td></tr><tr id="karos" style="display: none;"><td align="center">VORLAGE BEI <a href="http://www.blutrausch-gilde.com" target="_blank">Blutrausch Gilde</a></td><td align="center">DESIGN BEI <a href="http://www.myspace.com/emmamagerita" target="_blank">Emma Magerita</a></td></tr></table></td><td align="right" width="25%"><font class="small">$lang_parsertime_stopped</font></td></tr></table></div>
 </div>
 <a id="foot"></a>
</div>
$site_closure
</body>
</html>

Über einen hilfreichen Tip wäre ich sehr dankbar.

Gruss Bernardo

http://www.schwarzerdrache.info
Es ist nicht deine Schuld, das die Welt ist wie sie ist. Es wär nur deine Schuld, wenn sie so bleibt.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Bernardo« (23. Oktober 2010, 12:53)

Bernardo

ist gerade angekommen

Beiträge: 40

Geschlecht: Männlich

PHPKIT Version: 1.6.5

Samstag, 23. Oktober 2010, 12:57

Noch kein Ergebnis

Ich bin schon seit 6 Stunden am experimentieren und habe weiterhin das gleiche Problem. Es ist echt verhext.

Den obigen HTML Code habe ich nun von einigen Zeichenfehler behoben und den überschüssigen IE6 Eintrag entfernt.

Zur Vervollständigung hier nun auch die style.css

Hier klicken für weitere Informationen

HTML

body { 
background-repeat:no-repeat; 
background-position:top center; 
background-attachment:fixed; 
} 
input.knavform{ 
border: none; 
background: none; 
position:relative; 
top:5px; 
} 
.topnavbar{ 
border: none; 
background: none; 
position:relative; 
top:5px; 
} 
.klinktop, klinktop * { 
font-family:verdana; 
font-size:11px; 
color:#070707; 
} 
input.kintop { 
font-size: 10px; 
color: #FFF; 
border: 1px solid #000000; 
background-color: #070707; 
} 
h1.site-name a, 
h2.site-slogan a { 
color:#FFF; 
font-size:28px; 
font-weight:bold; 
font-family:Verdana; 
text-decoration:none; 
outline:0; 
} 
.small, .small * { 
font-size:10px ! important; 
font-family:Verdana; 
} 
h2.site-slogan { 
top:55px; 
} 
h2.site-slogan a { 
font-size:14px; 
} 
.heads { 
font-weight:bold; 
background-color: #4D4D4D; 
} 
div#pksitecopyright { 
border-top: 1px solid #696969; 
border-bottom: 1px solid #696969; 
} 
li.pkcontent_hl_left, 
li.pkcontent_hl_right { 
padding:4px; 
} 
div#pkadview { 
position:absolute; 
top:20px; 
right:20px; 
width:468px; 
} 
#navigation_sub_top { 
height:36px; 
text-align:right; 
} 
#navigation_top { 
position:relative; 
top:5px; 
} 
div#pkcontent_top { 
border-bottom: 1px solid #696969; 
position:relative; 
top:2px; 
} 
div#pksitedate { 
position:absolute; 
top:85px; 
right:20px; 
width:225px; 
text-align:right; 
font-size:92.5%; 
color:white; 
} 
#pkbody { 
width:980px; 
margin:0 auto; 
} 
#pkpagefooter { 
width:980px; 
margin:0 auto; 
} 
#pkC, #pksiteparser,#pksiteadminlogin { 
background: none; 
} 
#pkC *, #pksiteparser *,#pksiteadminlogin * { 
color:#070707; 
font-size:90%; 
} 
/* The menu styling */ 
/* Remove the padding, margins and bullets from the lists */ 
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;} 
/* Set up the top level list items and float left to place inline */ 
.menu li.top {display:block; float:left; position:relative;} 
/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */ 
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} 
/* Default top link link styling */ 
.menu li.top a.top_link {display:block; float:left; height:35px;} 
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* move the link text off screen */ 
/* pre-load the hover images into the lists */ 
.menu li.p1 {width:65px; background:url(multi_level-files/home_1.gif) no-repeat;;} 
.menu li.p2 {width:90px; background:url(multi_level-files/products_1.gif) no-repeat;;} 
.menu li.p3 {width:88px; background:url(multi_level-files/services_1.gif) no-repeat;;} 
.menu li.p4 {width:91px; background:url(multi_level-files/contacts_1.gif) no-repeat;;} 
.menu li.p5 {width:72px; background:url(multi_level-files/shop_1.gif) no-repeat;;} 
.menu li.p6 {width:103px; background:url(multi_level-files/privacy_1.gif) no-repeat;;} 
/* set up the normal unhovered images in the links */ 
.menu li a#home {width:65px; background:url(multi_level-files/home_0.gif) no-repeat;} 
.menu li a#products {width:90px; background:url(multi_level-files/products_0.gif) no-repeat;} 
.menu li a#services {width:88px; background:url(multi_level-files/services_0.gif) no-repeat;} 
.menu li a#contacts {width:91px; background:url(multi_level-files/contacts_0.gif) no-repeat;} 
.menu li a#shop {width:72px; background:url(multi_level-files/shop_0.gif) no-repeat;} 
.menu li a#privacy {width:103px; background:url(multi_level-files/privacy_0.gif) no-repeat;} 
/* Style the list OR link hover. Depends on which browser is used */ 
.menu a:hover {visibility:visible;} /* for IE6 */ 
.menu li:hover { position:relative; z-index:200;} /* for IE7 */ 
/* make the links transparent on hover so that the hover images in the lists show through (no flicker) */ 
.menu li a#home:hover, .menu li:hover a#home, 
.menu li a#products:hover, .menu li:hover a#products, 
.menu li a#services:hover, .menu li:hover a#services, 
.menu li a#contacts:hover, .menu li:hover a#contacts, 
.menu li a#shop:hover, .menu li:hover a#shop, 
.menu li a#privacy:hover, .menu li:hover a#privacy {background:transparent;} 
/* keep the 'next' level invisible by placing it off screen. */ 
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul, 
.menu :hover ul :hover ul :hover ul ul, 
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;} 
/* set up the first drop down sub level */ 
.menu :hover ul.sub {left:0; top:35px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; height:auto;} 
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;} 
.menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;} 
.menu :hover ul.sub li a.fly {background:#fff url(multi_level-files/arrow.gif) 80px 7px no-repeat;} 
.menu :hover ul.sub li a:hover {background:#37a237; color:#fff;} 
.menu :hover ul.sub li a.fly:hover {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
.menu :hover ul li:hover > a.fly {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
/* set up the flyout levels when hovering */ 
.menu :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul :hover ul :hover ul 
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; z-index:200; height:auto; z-index:300;}

HTML

body { 
background-repeat:no-repeat; 
background-position:top center; 
background-attachment:fixed; 
} 
input.knavform{ 
border: none; 
background: none; 
position:relative; 
top:5px; 
} 
.topnavbar{ 
border: none; 
background: none; 
position:relative; 
top:5px; 
} 
.klinktop, klinktop * { 
font-family:verdana; 
font-size:11px; 
color:#070707; 
} 
input.kintop { 
font-size: 10px; 
color: #FFF; 
border: 1px solid #000000; 
background-color: #070707; 
} 
h1.site-name a, 
h2.site-slogan a { 
color:#FFF; 
font-size:28px; 
font-weight:bold; 
font-family:Verdana; 
text-decoration:none; 
outline:0; 
} 
.small, .small * { 
font-size:10px ! important; 
font-family:Verdana; 
} 
h2.site-slogan { 
top:55px; 
} 
h2.site-slogan a { 
font-size:14px; 
} 
.heads { 
font-weight:bold; 
background-color: #4D4D4D; 
} 
div#pksitecopyright { 
border-top: 1px solid #696969; 
border-bottom: 1px solid #696969; 
} 
li.pkcontent_hl_left, 
li.pkcontent_hl_right { 
padding:4px; 
} 
div#pkadview { 
position:absolute; 
top:20px; 
right:20px; 
width:468px; 
} 
#navigation_sub_top { 
height:36px; 
text-align:right; 
} 
#navigation_top { 
position:relative; 
top:5px; 
} 
div#pkcontent_top { 
border-bottom: 1px solid #696969; 
position:relative; 
top:2px; 
} 
div#pksitedate { 
position:absolute; 
top:85px; 
right:20px; 
width:225px; 
text-align:right; 
font-size:92.5%; 
color:white; 
} 
#pkbody { 
width:980px; 
margin:0 auto; 
} 
#pkpagefooter { 
width:980px; 
margin:0 auto; 
} 
#pkC, #pksiteparser,#pksiteadminlogin { 
background: none; 
} 
#pkC *, #pksiteparser *,#pksiteadminlogin * { 
color:#070707; 
font-size:90%; 
} 
/* The menu styling */ 
/* Remove the padding, margins and bullets from the lists */ 
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;} 
/* Set up the top level list items and float left to place inline */ 
.menu li.top {display:block; float:left; position:relative;} 
/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */ 
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} 
/* Default top link link styling */ 
.menu li.top a.top_link {display:block; float:left; height:35px;} 
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* move the link text off screen */ 
/* pre-load the hover images into the lists */ 
.menu li.p1 {width:65px; background:url(multi_level-files/home_1.gif) no-repeat;;} 
.menu li.p2 {width:90px; background:url(multi_level-files/products_1.gif) no-repeat;;} 
.menu li.p3 {width:88px; background:url(multi_level-files/services_1.gif) no-repeat;;} 
.menu li.p4 {width:91px; background:url(multi_level-files/contacts_1.gif) no-repeat;;} 
.menu li.p5 {width:72px; background:url(multi_level-files/shop_1.gif) no-repeat;;} 
.menu li.p6 {width:103px; background:url(multi_level-files/privacy_1.gif) no-repeat;;} 
/* set up the normal unhovered images in the links */ 
.menu li a#home {width:65px; background:url(multi_level-files/home_0.gif) no-repeat;} 
.menu li a#products {width:90px; background:url(multi_level-files/products_0.gif) no-repeat;} 
.menu li a#services {width:88px; background:url(multi_level-files/services_0.gif) no-repeat;} 
.menu li a#contacts {width:91px; background:url(multi_level-files/contacts_0.gif) no-repeat;} 
.menu li a#shop {width:72px; background:url(multi_level-files/shop_0.gif) no-repeat;} 
.menu li a#privacy {width:103px; background:url(multi_level-files/privacy_0.gif) no-repeat;} 
/* Style the list OR link hover. Depends on which browser is used */ 
.menu a:hover {visibility:visible;} /* for IE6 */ 
.menu li:hover { position:relative; z-index:200;} /* for IE7 */ 
/* make the links transparent on hover so that the hover images in the lists show through (no flicker) */ 
.menu li a#home:hover, .menu li:hover a#home, 
.menu li a#products:hover, .menu li:hover a#products, 
.menu li a#services:hover, .menu li:hover a#services, 
.menu li a#contacts:hover, .menu li:hover a#contacts, 
.menu li a#shop:hover, .menu li:hover a#shop, 
.menu li a#privacy:hover, .menu li:hover a#privacy {background:transparent;} 
/* keep the 'next' level invisible by placing it off screen. */ 
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul, 
.menu :hover ul :hover ul :hover ul ul, 
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;} 
/* set up the first drop down sub level */ 
.menu :hover ul.sub {left:0; top:35px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; height:auto;} 
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;} 
.menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;} 
.menu :hover ul.sub li a.fly {background:#fff url(multi_level-files/arrow.gif) 80px 7px no-repeat;} 
.menu :hover ul.sub li a:hover {background:#37a237; color:#fff;} 
.menu :hover ul.sub li a.fly:hover {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
.menu :hover ul li:hover > a.fly {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
/* set up the flyout levels when hovering */ 
.menu :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul :hover ul :hover ul 
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; z-index:200; height:auto; z-index:300;}

http://www.schwarzerdrache.info
Es ist nicht deine Schuld, das die Welt ist wie sie ist. Es wär nur deine Schuld, wenn sie so bleibt.

Stifli

kennen Einige hier

Beiträge: 335

Geschlecht: Männlich

Wohnort: -=]Kreuzberg[=-

PHPKIT Version: 1.6.5

Samstag, 23. Oktober 2010, 13:46

hmmm also ich habe den Ordner multi-level-files auf meinen Space kopiert und den code aus der pro_drop.html kopiert und in meine site.htm eingefügt...es funzt auf anhieb.....mit mozilla

OffTopic

Bernardo

ist gerade angekommen

Beiträge: 40

Geschlecht: Männlich

PHPKIT Version: 1.6.5

Samstag, 23. Oktober 2010, 14:00

Genau das ist ja das Problem. Ich hab den Code ebenfalls schonmal direkt von der CSSPlay Seite auf meinen Webspace kopiert und die pro_drop.html ist absolut valide. Nur kopiert in eine PHPKIT Vorlage bekomme ich einfach keine korrekte Anzeige. Der Internet-Explorer verschiebt die Hovergrafiken aus einen mir unbekannten Grund. Und unter Firefox erscheinen, wie oben beschrieben, nur die Listen... keine Grafiken.

Wo finde ich eigentlich den Head für die PHPKIT eigene CSS. In der regulären Site Vorlage wird ja nur der DOCTYPE beschrieben. Wo muss ich die STYLE <style type="text/css"> Angaben machen? Vielleicht liegt es ja auch daran?

http://www.schwarzerdrache.info
Es ist nicht deine Schuld, das die Welt ist wie sie ist. Es wär nur deine Schuld, wenn sie so bleibt.

Bernardo

ist gerade angekommen

Beiträge: 40

Geschlecht: Männlich

PHPKIT Version: 1.6.5

Samstag, 23. Oktober 2010, 15:20

Erste Schritte

Eben habe ich herausgefunden, dass der Befehl $site_design Grund für die verschobenen Grafiken ist. Ich gehe mal davon aus, dass die CSS Angaben meiner Vorlage irgendwo Einfluss auf die Dropdown Navigation hat. Wo genau weiss ich allerding noch nicht.

Weiterhin habe ich den kompletten Inhalt der pro_drop.html als Site-Vorlage eingefügt, und siehe da nun klappt es auch im Firefox. Scheinbar darf ich den STYLE Inhalt nicht herausnehmen. Mein Ziel war eigentlich die CSS Angaben auch wirklich in die style.css zu bekommen, doch nun belasse ich sie mal vorerst in der HTML.

Oder hat jemand einen Idealvorschlag wie ich die pro_drop.html von CSSPlay korrekt auseinandernehmen muss, damit ich den CSS Inhalt vom HTML trennen kann?

Gruss Bernardo

http://www.schwarzerdrache.info
Es ist nicht deine Schuld, das die Welt ist wie sie ist. Es wär nur deine Schuld, wenn sie so bleibt.

Stifli

kennen Einige hier

Beiträge: 335

Geschlecht: Männlich

Wohnort: -=]Kreuzberg[=-

PHPKIT Version: 1.6.5

Samstag, 23. Oktober 2010, 17:12

ich habe alles was css ist einfach bei mir im Adminbereich unter sonstiges/designs und dann unter optionale angaben. da kannste doch zu deinem Style die css angaben ergänzen.

OffTopic

Bernardo

ist gerade angekommen

Beiträge: 40

Geschlecht: Männlich

PHPKIT Version: 1.6.5

Sonntag, 24. Oktober 2010, 07:27

siehe oben

Das habe ich auch schon versucht. Siehe oben zweiter Post von mir. Was aber bisher leider nicht geklappt hat. Ich bin momentan überfragt warum das so ist. Mal schauen ob ich heute mehr Erfolg haben werden.

http://www.schwarzerdrache.info
Es ist nicht deine Schuld, das die Welt ist wie sie ist. Es wär nur deine Schuld, wenn sie so bleibt.

Bernardo

ist gerade angekommen

Beiträge: 40

Geschlecht: Männlich

PHPKIT Version: 1.6.5

Sonntag, 24. Oktober 2010, 08:17

Es läuft nun unter IE und FF

Ich habs soweit zum laufen gebracht. Der Eintrag $site_design hat noch im HEAD gefehlt. Nun läuft es endlich im IE und im FF gleichermaßen.

http://www.schwarzerdrache.info/sd5/index.php

Jetzt habe ich aber immernoch dieses Styleproblem. Alle oberflächliche Buttons sind exakt um 5 Pixel zu weit nach rechts verschoben. Ich habe aber nichts am original Script von CSSPlay verändert. Lediglich mit dem Eintrag $site_design durchläuft das Script die aktivierte PHPKIT Design Einstellungen.

Ich finde es komisch, wenn ich die CSS Angaben direkt in der HTML belasse. Dann verschiebt sich der Style nicht. Also muss doch irgendein Eintrag aus dem PHPKIT Design die Oberflächengrafik nach rechts verschieben.

Ich finde wirklich nicht den richtigen Eintrag. Kann jemand evtl es auch nochmal bei sich versuchen?

Hier meine Site HTML:

Hier klicken für weitere Informationen

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title> Stu Nicholls | CSSplay | A Professional drop-down menu</title> 
$site_metatags 
$site_design 
$site_header_script 
$site_refresh 
</head> 
<body> 
<div id="multi-level"> 
<img class="pad" src="multi_level-files/pad.gif" title="" alt="" /> 
<ul class="menu"> 
<li class="top p1"><a href="http://www.cssplay.co.uk" id="home" class="top_link"><span>Home</span></a></li> 
<li class="top p2"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span>Products</span><!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="sub"> 
<li><a href="../menu/" class="fly">Cameras<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../mozilla/">Nikon</a></li> 
<li><a href="../ie/">Minolta</a></li> 
<li><a href="../opacity/">Pentax</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="mid"><a href="../boxes/" class="fly">Lenses<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../mozilla/">Wide Angle</a></li> 
<li><a href="../ie/">Standard</a></li> 
<li><a href="../opacity/">Telephoto</a></li> 
<li><a href="../menu/" class="fly">Zoom<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../mozilla/">35mm to 125mm</a></li> 
<li><a href="../opacity/">50mm to 250mm</a></li> 
<li><a href="../menu/">125mm to 500mm</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="../boxes/">Mirror</a></li> 
<li><a href="../opacity/" class="fly">Non standard<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../mozilla/">Bayonet mount</a></li> 
<li><a href="../opacity/">Screw mount</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="../mozilla/">Flash Guns</a></li> 
<li><a href="../ie/">Tripods</a></li> 
<li><a href="../opacity/">Filters</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="top p3"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span>Services</span><!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="sub"> 
<li><a href="../menu/">Printing</a></li> 
<li><a href="../layouts/">Photo Framing</a></li> 
<li><a href="../boxes/">Retouching</a></li> 
<li><a href="../mozilla/">Archiving</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="top p4"><a href="http://www.cssplay.co.uk" id="contacts" class="top_link"><span>Contacts</span><!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="sub"> 
<li><a href="../layouts/">Support</a></li> 
<li><a href="../boxes/" class="fly">Sales<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../mozilla/">USA</a></li> 
<li><a href="../ie/">Canadian</a></li> 
<li><a href="../opacity/">South American</a></li> 
<li><a href="../menu/" class="fly">European<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../mozilla/" class="fly">British<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../ie/">London</a></li> 
<li><a href="../menu/">Liverpool</a></li> 
<li><a href="../boxes/">Glasgow</a></li> 
<li><a href="../opacity/" class="fly">Bristol<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../ie/">Redland</a></li> 
<li><a href="../opacity/">Hanham</a></li> 
<li><a href="../menu/">Eastville</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="../layouts/">Cardiff</a></li> 
<li><a href="../mozilla/">Belfast</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="../opacity/">French</a></li> 
<li><a href="../menu/">German</a></li> 
<li><a href="../boxes/">Spanish</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="../boxes/">Australian</a></li> 
<li><a href="../boxes/">Asian</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="../mozilla/">Buying</a></li> 
<li><a href="../ie/">Photographers</a></li> 
<li><a href="../opacity/">Stockist</a></li> 
<li><a href="../menu/">General</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="top p5"><a href="http://www.cssplay.co.uk" id="shop" class="top_link"><span>Shop</span><!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="sub"> 
<li><a href="../ie/">Online</a></li> 
<li><a href="../opacity/">Catalogue</a></li> 
<li><a href="../menu/">Mail Order</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="top p6"><a href="http://www.cssplay.co.uk" id="privacy" class="top_link"><span>Privacy Policy</span></a></li> 
</ul> 
<img class="pad" src="multi_level-files/pad.gif" title="" alt="" /> 
</div> 
</body> 
</html>

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title> Stu Nicholls | CSSplay | A Professional drop-down menu</title> 
$site_metatags 
$site_design 
$site_header_script 
$site_refresh 
</head> 
<body> 
<div id="multi-level"> 
<img class="pad" src="multi_level-files/pad.gif" title="" alt="" /> 
<ul class="menu"> 
<li class="top p1"><a href="http://www.cssplay.co.uk" id="home" class="top_link"><span>Home</span></a></li> 
<li class="top p2"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span>Products</span><!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="sub"> 
<li><a href="../menu/" class="fly">Cameras<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../mozilla/">Nikon</a></li> 
<li><a href="../ie/">Minolta</a></li> 
<li><a href="../opacity/">Pentax</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="mid"><a href="../boxes/" class="fly">Lenses<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../mozilla/">Wide Angle</a></li> 
<li><a href="../ie/">Standard</a></li> 
<li><a href="../opacity/">Telephoto</a></li> 
<li><a href="../menu/" class="fly">Zoom<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../mozilla/">35mm to 125mm</a></li> 
<li><a href="../opacity/">50mm to 250mm</a></li> 
<li><a href="../menu/">125mm to 500mm</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="../boxes/">Mirror</a></li> 
<li><a href="../opacity/" class="fly">Non standard<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../mozilla/">Bayonet mount</a></li> 
<li><a href="../opacity/">Screw mount</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="../mozilla/">Flash Guns</a></li> 
<li><a href="../ie/">Tripods</a></li> 
<li><a href="../opacity/">Filters</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="top p3"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span>Services</span><!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="sub"> 
<li><a href="../menu/">Printing</a></li> 
<li><a href="../layouts/">Photo Framing</a></li> 
<li><a href="../boxes/">Retouching</a></li> 
<li><a href="../mozilla/">Archiving</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="top p4"><a href="http://www.cssplay.co.uk" id="contacts" class="top_link"><span>Contacts</span><!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="sub"> 
<li><a href="../layouts/">Support</a></li> 
<li><a href="../boxes/" class="fly">Sales<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../mozilla/">USA</a></li> 
<li><a href="../ie/">Canadian</a></li> 
<li><a href="../opacity/">South American</a></li> 
<li><a href="../menu/" class="fly">European<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../mozilla/" class="fly">British<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../ie/">London</a></li> 
<li><a href="../menu/">Liverpool</a></li> 
<li><a href="../boxes/">Glasgow</a></li> 
<li><a href="../opacity/" class="fly">Bristol<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="../ie/">Redland</a></li> 
<li><a href="../opacity/">Hanham</a></li> 
<li><a href="../menu/">Eastville</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="../layouts/">Cardiff</a></li> 
<li><a href="../mozilla/">Belfast</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="../opacity/">French</a></li> 
<li><a href="../menu/">German</a></li> 
<li><a href="../boxes/">Spanish</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="../boxes/">Australian</a></li> 
<li><a href="../boxes/">Asian</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="../mozilla/">Buying</a></li> 
<li><a href="../ie/">Photographers</a></li> 
<li><a href="../opacity/">Stockist</a></li> 
<li><a href="../menu/">General</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="top p5"><a href="http://www.cssplay.co.uk" id="shop" class="top_link"><span>Shop</span><!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="sub"> 
<li><a href="../ie/">Online</a></li> 
<li><a href="../opacity/">Catalogue</a></li> 
<li><a href="../menu/">Mail Order</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="top p6"><a href="http://www.cssplay.co.uk" id="privacy" class="top_link"><span>Privacy Policy</span></a></li> 
</ul> 
<img class="pad" src="multi_level-files/pad.gif" title="" alt="" /> 
</div> 
</body> 
</html>

Und hier mein Eintrag im Design unter Optionale CSS Angaben:

Hier klicken für weitere Informationen

HTML

#multi-level {height:30px; position:relative; z-index:100;} 
#multi-level .pad {float:left;} 
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;} 
.menu li.top {display:block; float:left; position:relative;} 
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} 
.menu li.top a.top_link {display:block; float:left; height:35px;} 
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} 
.menu li.p1 {width:65px; background:url(multi_level-files/home_1.gif) no-repeat;;} 
.menu li.p2 {width:90px; background:url(multi_level-files/products_1.gif) no-repeat;;} 
.menu li.p3 {width:88px; background:url(multi_level-files/services_1.gif) no-repeat;;} 
.menu li.p4 {width:91px; background:url(multi_level-files/contacts_1.gif) no-repeat;;} 
.menu li.p5 {width:72px; background:url(multi_level-files/shop_1.gif) no-repeat;;} 
.menu li.p6 {width:103px; background:url(multi_level-files/privacy_1.gif) no-repeat;;} 
.menu li a#home {width:65px; background:url(multi_level-files/home_0.gif) no-repeat;} 
.menu li a#products {width:90px; background:url(multi_level-files/products_0.gif) no-repeat;} 
.menu li a#services {width:88px; background:url(multi_level-files/services_0.gif) no-repeat;} 
.menu li a#contacts {width:91px; background:url(multi_level-files/contacts_0.gif) no-repeat;} 
.menu li a#shop {width:72px; background:url(multi_level-files/shop_0.gif) no-repeat;} 
.menu li a#privacy {width:103px; background:url(multi_level-files/privacy_0.gif) no-repeat;} 
.menu a:hover {visibility:visible;} 
.menu li:hover { position:relative; z-index:200;} 
.menu li a#home:hover, .menu li:hover a#home, 
.menu li a#products:hover, .menu li:hover a#products, 
.menu li a#services:hover, .menu li:hover a#services, 
.menu li a#contacts:hover, .menu li:hover a#contacts, 
.menu li a#shop:hover, .menu li:hover a#shop, 
.menu li a#privacy:hover, .menu li:hover a#privacy {background:transparent;} 
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul, 
.menu :hover ul :hover ul :hover ul ul, 
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;} 
.menu :hover ul.sub {left:0; top:35px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; height:auto;} 
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;} 
.menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;} 
.menu :hover ul.sub li a.fly {background:#fff url(multi_level-files/arrow.gif) 80px 7px no-repeat;} 
.menu :hover ul.sub li a:hover {background:#37a237; color:#fff;} 
.menu :hover ul.sub li a.fly:hover {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
.menu :hover ul li:hover > a.fly {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
.menu :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul :hover ul :hover ul 
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; z-index:200; height:auto; z-index:300;}

HTML

#multi-level {height:30px; position:relative; z-index:100;} 
#multi-level .pad {float:left;} 
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;} 
.menu li.top {display:block; float:left; position:relative;} 
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} 
.menu li.top a.top_link {display:block; float:left; height:35px;} 
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} 
.menu li.p1 {width:65px; background:url(multi_level-files/home_1.gif) no-repeat;;} 
.menu li.p2 {width:90px; background:url(multi_level-files/products_1.gif) no-repeat;;} 
.menu li.p3 {width:88px; background:url(multi_level-files/services_1.gif) no-repeat;;} 
.menu li.p4 {width:91px; background:url(multi_level-files/contacts_1.gif) no-repeat;;} 
.menu li.p5 {width:72px; background:url(multi_level-files/shop_1.gif) no-repeat;;} 
.menu li.p6 {width:103px; background:url(multi_level-files/privacy_1.gif) no-repeat;;} 
.menu li a#home {width:65px; background:url(multi_level-files/home_0.gif) no-repeat;} 
.menu li a#products {width:90px; background:url(multi_level-files/products_0.gif) no-repeat;} 
.menu li a#services {width:88px; background:url(multi_level-files/services_0.gif) no-repeat;} 
.menu li a#contacts {width:91px; background:url(multi_level-files/contacts_0.gif) no-repeat;} 
.menu li a#shop {width:72px; background:url(multi_level-files/shop_0.gif) no-repeat;} 
.menu li a#privacy {width:103px; background:url(multi_level-files/privacy_0.gif) no-repeat;} 
.menu a:hover {visibility:visible;} 
.menu li:hover { position:relative; z-index:200;} 
.menu li a#home:hover, .menu li:hover a#home, 
.menu li a#products:hover, .menu li:hover a#products, 
.menu li a#services:hover, .menu li:hover a#services, 
.menu li a#contacts:hover, .menu li:hover a#contacts, 
.menu li a#shop:hover, .menu li:hover a#shop, 
.menu li a#privacy:hover, .menu li:hover a#privacy {background:transparent;} 
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul, 
.menu :hover ul :hover ul :hover ul ul, 
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;} 
.menu :hover ul.sub {left:0; top:35px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; height:auto;} 
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;} 
.menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;} 
.menu :hover ul.sub li a.fly {background:#fff url(multi_level-files/arrow.gif) 80px 7px no-repeat;} 
.menu :hover ul.sub li a:hover {background:#37a237; color:#fff;} 
.menu :hover ul.sub li a.fly:hover {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
.menu :hover ul li:hover > a.fly {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
.menu :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul :hover ul, 
.menu :hover ul :hover ul :hover ul :hover ul :hover ul 
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; z-index:200; height:auto; z-index:300;}

Gruss Bernado

http://www.schwarzerdrache.info
Es ist nicht deine Schuld, das die Welt ist wie sie ist. Es wär nur deine Schuld, wenn sie so bleibt.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Bernardo« (24. Oktober 2010, 08:22)

Bernardo

ist gerade angekommen

Beiträge: 40

Geschlecht: Männlich

PHPKIT Version: 1.6.5

Sonntag, 24. Oktober 2010, 09:40

Problem gelößt

In den letzten Posts rede ich zwar mit mir selbst, aber dennoch ist es richtig hilfreich die Probleme direkt in Worte zu fassen, da man plötzlich auf die Lösung des Problems stößt. Und so auch hier... die verschobenen Grafiken wurden im PHPKITeigenen CSS Code gemacht. Ich wusste und weiß auch immernoch nicht wo das PHPKIT seine Angaben speichert. Dennoch habe ich mir immer wieder über den Browser den QUELLCODE anzeigen lassen, bis ich auf diesen Eintrag aufmerksam wurde.

	HTML
1	<link rel="stylesheet" href="include.php?fx=style&id=18" type="text/css" />

Die include.php?fx=style&id=18 ist natürlich der $site_design entsprungen und machte es mir möglich direkt über die Browserzeile den gesamten CSS Code vom PHPKIT auzulesen. So viel dazu.

Nun noch den gesamten Code nach einen Eintrag über 5px durchgesucht und auf Anhieb gefunden:

	HTML
1 2 3 4	ul li { padding-left:5px; list-style-position:outside; list-style-type:disc; }

Mit diesem Eintrag wurden die Grafiken um 5px verschoben. Das ganze auf 0px gestellt und als Optionale CSS Angaben ergänzt. TATA! Alles läuft prima!

Danke für die Aufmerksamkeit.... liebe Grüsse Bernardo

http://www.schwarzerdrache.info
Es ist nicht deine Schuld, das die Welt ist wie sie ist. Es wär nur deine Schuld, wenn sie so bleibt.