CSS Menü verschiebt sich mit Background Image von hawkmaster, 22.01.2009 15:00

CSS Menü verschiebt sich mit Background Image

hawkmaster 22.01.2009 15:00
Hallo miku, vielen Dank für deine Mühe. Also wenn ich das original Script bzw. File von Stu nehme und nur die Änderu ng mache mit dem Hintergurnd Bild erscheint es bei mir im FF3 auch schon so verschoben. (das Untermenü)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Stu Nicholls | CSSplay | A simple 6 level drop-down menu with overlap and overrrun</title>
<meta name="Author" content="Stu Nicholls">
<meta name="Keywords" content="cssplay, css, play, Cascading, Style, Sheets, opacity, layouts, navigation, menus, experiments,demonstrations, photo, photograph, gallery, slide, slideshow, picture, drop, down, pull, up, fly, out, free">
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS">
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=">
<meta http-equiv="imagetoolbar" content="no">


<link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels">
<meta http-equiv="pics-Label" content="(pics-1.1 &quot;http://www.icra.org/pics/vocabularyv03/&quot; l gen true for &quot;http://cssplay.co.uk&quot; r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0)  gen true for &quot;http://www.cssplay.co.uk&quot; r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml">
<link rel="shortcut icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/ico">
<link rel="stylesheet" media="all" type="text/css" href="simple_vertical-Dateien/css_play4.css">
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
#search {width:360px; top:10px; float:right; text-align:right;}
</style>

<link rel="stylesheet" media="all" type="text/css" href="simple_vertical-Dateien/menus.css">

<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_vertical.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.
=================================================================== */

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#menu_container {margin:25px 0 100px 15px; position:relative; width:735px; height:25px; z-index:100;}

/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}

/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {display:block;width:120px; font-size:11px; color:#fff; height:25px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #000; border-width:1px 0 1px 1px;}

/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}

/* Set up the list items */
/*#pmenu li {float:left; background:#7484ad;}*/
#pmenu li {float:left; background: #BBB url(tabs2-big.gif) 0 100% no-repeat;}
}
/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative;}
/* Make the hovered list color persist */
#pmenu li:hover > a {background:#dfd7ca; color:#c00;}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:120px;}
/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:-30px; top:16px;}

/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative; background:#dfd7ca; color:#c00;}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {background:#dfd7ca; color:#c00;}

/* Set up the pointers for the sub level indication */
#pmenu li.fly {background:#7484ad url(http://www.cssplay.co.uk/menus/fly.gif) no-repeat right center;}
#pmenu li.drop {background:#7484ad url(http://www.cssplay.co.uk/menus/drop.gif) no-repeat right center;}


/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}

/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul{
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */

</style>
</head><body id="www-cssplay-co-uk">
 <div id="wrapper">
 <a href="#content" class="hiddenfromview" accesskey="X" title="skip to content">skip to content</a>
 <!-- end of header -->
<div id="showcase">

<div id="info">

<h2>A simple six level drop-down menu with overlap and overrun</h2>
<h3>22nd March 2007</h3>

<div id="menu_container">
<ul id="pmenu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us</a></li>
<li class="drop"><a href="#nogo">Products<!--[if IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href="#nogo" class="enclose">Tripods</a></li>
 <li><a href="#nogo">Films</a></li>
 <li class="fly"><a href="#nogo">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
   <li><a href="#nogo" class="enclose">Compact</a></li>
   <li class="fly"><a href="#nogo">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
     <li><a href="#nogo" class="enclose">Canon</a></li>
     <li class="fly"><a href="#nogo">Nikon<!--[if IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul>
       <li><a href="#nogo" class="enclose">Lenses</a></li>
       <li><a href="#nogo">Speedlight</a></li>
       <li class="fly"><a href="#nogo">Coolpix<!--[if IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]-->
         <ul>
         <li><a href="#nogo" class="enclose">Coolpix S10</a></li>
         <li><a href="#nogo">Coolpix L2</a></li>
         <li><a href="#nogo">Coolpix S500</a></li>
         <li><a href="#nogo">Coolpix P5000</a></li>
         <li><a href="#nogo">Coolpix 4600</a></li>
         <li><a href="#nogo">Coolpix S6 Silver</a></li>
         </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       <li><a href="#nogo">D200</a></li>
       <li><a href="#nogo">D80</a></li>
       </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
     <li><a href="#nogo">Minolta</a></li>
     <li><a href="#nogo">Pentax</a></li>
     </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="#nogo">SLR</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
 <li><a href="#nogo">Flash</a></li>
 <li><a href="#nogo">Video</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
<li><a href="#nogo">FAQs</a></li>
<li><a href="#nogo">Privacy</a></li>
<li><a href="#nogo" class="enclose">Contact us</a></li>
</ul>
</div>
<br class="clear">

</div> <!-- end of info -->
<div id="info_right"></div>
</div>
<!-- end of showcase -->
<div id="content">

<div id="left_column">
<h3>&nbsp;</h3>
</div>


<div id="right_column">

<h3><br>
</h3>
</div>
<!-- end of right column -->
</div> <!-- end of content -->

<div id="far_right">

<h3><br>
  <!--
'<a href="http://www.medialab.com/sitegrinder/?utm_source=CSSPlayAll&amp;utm_medium=banner&amp;utm_campaign=SG2"><img src="../ads/sg2_220x100_200810.jpg" alt="Sitegrinder" title="Sitegrinder - Photoshop plug-in converts designs to fully valid CSS websites" width="220" height="100" /></a>' ,
-->
</h3>
</div>
 <div id="foot">
   <ul>
  <li></li>
  <li><a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Strict!">xhtml 1.0 Strict</a></li>
  <li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.cssplay.co.uk/menus/simple_vertical.html" title="Valid CSS!">css 1/2/3</a></li>
   </ul>
   </div>
</div> <!-- end of wrapper -->
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>
</body></html>
Also nur das ändern: /* Set up the list items / /#pmenu li {float:left; background:#7484ad;}*/ #pmenu li {float:left; background: #BBB url(tabs2-big.gif) 0 100% no-repeat;} }
Die Grafik tabs2-big.gif ist 600x400px und ist eigentlich nur unten mit runden Ecken.
Im IE7 sieht es bei mir wunderbar aus. vielen Dank und viele Grüße hawk
Beitrag melden
– Informationen zu den Bewertungsregeln
SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

hawkmaster: CSS Menü verschiebt sich mit Background Image

Beitrag lesen

CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image

Eine Klammer zuviel wars :-)
