CSS Menü verschiebt sich mit Background Image von suit, 22.01.2009 13:59

CSS Menü verschiebt sich mit Background Image

hawkmaster 22.01.2009 10:26

Hallo zusammen,

Ich versuche gerade ein CSS Menü einzubauen das ich bei Stu Nicholls entdeckt habe.
http://www.cssplay.co.uk/menus/simple_vertical.html

Der dritte menüpunkt "Products" hat ein DropDown Menü nach unten.
Ich versuche nun im CSS Code den "li" anstatt der blauen Hintergrundfarbe eine Grafik zu geben.
/* Set up the list items */
/*#pmenu li {float:left; background:#7484ad;}*/ //Original
#pmenu li {float:left; background: #BBB url(tabs2-big.gif) 0 100% no-repeat;}
}

Sobald ich die grafik einbinde verschiebt sich das Untermenü ganz nach links und ist nicht mehr direkt unterhalb von "Products".

Ich verstehe zwar ein wenig von dem ganzen CSS aber hier verstehe ich nicht warum diese Verschiebung passiert.
Kann mir jemand erklären warum und wie das umgehen?

vielen Dank und viele Grüße
hawk

Beitrag melden

– Informationen zu den Bewertungsregeln

CSS Menü verschiebt sich mit Background Image
suit Homepage des Autors 22.01.2009 12:42

css
– Informationen zu den Bewertungsregeln
Sobald ich die grafik einbinde verschiebt sich das Untermenü ganz nach links und ist nicht mehr direkt unterhalb von "Products".

für mich nicht nachvollziehbar, ein hintergrundbild sollte darauf keine auswirkungen haben
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. CSS Menü verschiebt sich mit Background Image
  
  hawkmaster 22.01.2009 13:42
  
  css
  – Informationen zu den Bewertungsregeln
  Hallo suit,
  
  danke dir für deine Hilfe.
  Dann bin ich froh wenn du als Experte auch keine erklärung hast.
  Ich versuche nun schon ewig den Grund dazu zu finden.
  
  Habe versucht bei;
  /* Position the first sub level beneath the top level links */
  #pmenu > li:hover > ul {left:-2.2em; top:1em;}/*left:-2.2em; top:1em;*/
  
  den wert für Left zu ändern. Das wirkt sich dann zwar aus aber bei jedem Menü wieder anders.
  Und das seltsamste. Der IE7 zeigt alles wunderbar an. Das Submenu schön direkt unter dem hauptmenü wie es sein soll.
  
  viele Grüße
  hawk
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. CSS Menü verschiebt sich mit Background Image
    
    suit Homepage des Autors 22.01.2009 13:59
    
    css
    
    – Informationen zu den Bewertungsregeln
    Habe versucht bei;
    
    hast du schon versucht, das menü selbst nachzubauen bzw zu konstruieren - damit ist es ggf leichter, alles entsprechend zu verstehen
    
    wenn das menü ansich funktioniert und du NUR ein hintergrundbild tauscht, kann sich die darstellung der elemente (mit ausnahme des hintergrunds) nicht verändern
    
    ich könnte mir noch vorstellen, dass du durch deinen css-kommentar unabsichtlich einen hack eingebaut hast oder ähnliches - aber spontan fällt mir nix ein
    
    funktioniert das beispiel denn ohne modifikation wie gewünscht?
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. CSS Menü verschiebt sich mit Background Image
      
      hawkmaster 22.01.2009 15:02
      
      css
      
      – Informationen zu den Bewertungsregeln
      
      Hallo suit,
      
      funktioniert das beispiel denn ohne modifikation wie gewünscht?
      
      ja, wunderbar.
      Auch wenn ich das Original Script nehme und dann nur das Background Bild im LI platziere habe ich den Effekt mit dem Firefox 3 und dem verschobenen Submenu. (siehe Posting weiter oben)
      
      vielen Dank und viele Grüße
      hawk
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum

CSS Menü verschiebt sich mit Background Image

miku 22.01.2009 14:21

– Informationen zu den Bewertungsregeln

Hi,

Ich verstehe zwar ein wenig von dem ganzen CSS aber hier verstehe ich nicht warum diese Verschiebung passiert.
Kann mir jemand erklären warum und wie das umgehen?

hab das bei mir jetzt auch mal lokal versucht und bei mir bleibt das pulldown menü genau da wo es sein soll, unter Products.

Hab genau die gleiche Veränderung gemacht wie du.

Welchen Browser nutzt du? Ich habs im IE6 und im FF3 versucht.

gruß miku

Beitrag melden

– Informationen zu den Bewertungsregeln

CSS Menü verschiebt sich mit Background Image

hawkmaster 22.01.2009 15:00

– Informationen zu den Bewertungsregeln

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

CSS Menü verschiebt sich mit Background Image
Harlequin 22.01.2009 15:06

css
– Informationen zu den Bewertungsregeln
Yerf!

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;}
}

^

Wo kommt den plötzlich diese schließende Klammer her?

Gruß,

Harlequin

--

Beitrag melden

–
Informationen zu den Bewertungsregeln
1. CSS Menü verschiebt sich mit Background Image
  
  miku 22.01.2009 15:09
  
  css
  – Informationen zu den Bewertungsregeln
  Wo kommt den plötzlich diese schließende Klammer her?
  
  Tatsächlich, die hab ich jetzt auch überlesen.
  
  Wenn man die wegmacht dann gehts, deswegen hats vorher bei mir geklappt wo ichs aus dem original Code kopiert habe und bei hawkmaster gings nicht.
  
  Tztz, immer schludern ;)
  
  gruß miku
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
2. Eine Klammer zuviel wars :-)
  
  hawkmaster 22.01.2009 15:15
  
  css
  – Informationen zu den Bewertungsregeln
  Hallo Harlequin,
  
  Wo kommt den plötzlich diese schließende Klammer her?
  
  oh Mann, das wars!
  Irgendwie habe ich diese immer drin gehabt und mitkopiert.
  
  Harlequin dir sei tausend Dank für deine scharfen Augen :-)
  
  Ich stell mich jetzt in die Ecke und schäme mich.
  Oder soll ich ne Runde ausgeben :-)
  
  vielen Dank und viele Grüße
  hawk
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
CSS Menü verschiebt sich mit Background Image
miku 22.01.2009 15:07

css
– Informationen zu den Bewertungsregeln
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ü)

Jetzt hab ich mal deinen Code genommen jetzt gehts bei mir im FF3 auch nicht mehr, verwirrend.

Hab vorher auch nur die eine Zeile ersetzt.

Jetzt kopier ich mir nochma den Code so wie vorher original raus, mal kucken was dann passiert.

gruß
Beitrag melden

–
Informationen zu den Bewertungsregeln

CSS Menü verschiebt sich mit Background Image
ChrisB 22.01.2009 14:31

css
– Informationen zu den Bewertungsregeln
Hi,

Ich versuche gerade ein CSS Menü einzubauen das ich bei Stu Nicholls entdeckt habe.
http://www.cssplay.co.uk/menus/simple_vertical.html

Immer der verflixte Stu mit seiner daemlichen Idee ...

Das Menue baut darauf auf, dem IE < 7 hochgradig fehlerhaften Code zu servieren (Table in A verschachtelt).
Davon erwarte ich also per se kein in irgendeiner Weise vorhersagbares Verhalten.

MfG ChrisB

--
„This is the author's opinion, not necessarily that of Starbucks.“
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. CSS Menü verschiebt sich mit Background Image
  
  hawkmaster 22.01.2009 14:53
  
  css
  – Informationen zu den Bewertungsregeln
  Hallo ChrisB,
  Danke für deine Hilfe.
  
  Immer der verflixte Stu mit seiner daemlichen Idee ...
  
  Nun das kann ich als CSS Anfänger nicht beurteilen aber was er dort so alles zeigt und was machbar ist, ist schon beeindruckend.
  
  Das Menue baut darauf auf, dem IE < 7 hochgradig fehlerhaften Code zu servieren (Table in A verschachtelt).
  Davon erwarte ich also per se kein in irgendeiner Weise vorhersagbares Verhalten.
  
  Das komische ist ja es FUNTKIONIERT im IE7 wunderbar auch mit meiner Änderung mit dem Background Bild. Nur im Firefox wird es verschoben.
  
  vielen Dank und viele Grüße
  hawk
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
2. CSS Menü verschiebt sich mit Background Image
  
  Harlequin 22.01.2009 15:08
  
  css
  – Informationen zu den Bewertungsregeln
  Yerf!
  
  Das Menue baut darauf auf, dem IE < 7 hochgradig fehlerhaften Code zu servieren (Table in A verschachtelt).
  Davon erwarte ich also per se kein in irgendeiner Weise vorhersagbares Verhalten.
  
  Dann passt es doch wunderbar zum IE... von dem erwarte ich sowieso kein vorhersagbares Verhalten ;-)
  
  Gruß,
  
  Harlequin
  
  --
  
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

hawkmaster: CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image

Eine Klammer zuviel wars :-)

CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image

Eine Klammer zuviel wars :-)

CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image

CSS Menü verschiebt sich mit Background Image