404 404

Design made in Germany

Deutsches Design

Problem...Frage!


Design Magazin Design Agenturen Designer Design Weblogs Design Magazine Design Portale Design Communities Design Hochschulen Design Organisationen Design Ressourcen Design Shops Grafikdesigner Schriftdesigner Webdesigner Interfacedesigner Flashdesigner Motiondesigner Sounddesigner Fotodesigner 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

ok...ich hab ein horizontales menü aus rollover-bildern. alles funktioniert super außer im safari. da wird der erste menüpunkt nach dem letzten nochmal wiederholt.

woran liegts?

Code:
#hauptmenue {position: relative; margin: 0px; padding: 0px; width: 750px; height: 38px;}
#hauptmenue li {width: 158px; height: 19px; position: absolute; top: 2px; background: url(../../images/navi/navi_selbst.gif) 0 0 no-repeat; display: block; list-style: none;}
#hauptmenue a {width: 158px; height: 19px; display: block; border: none;}
#hauptmenue a:hover {border: none;}
#hauptmenue #panel1c {left: 0px;}
#hauptmenue #panel2c {left: 150px; background-position: -150px 0;}
#hauptmenue #panel3c {left: 264px; background-position: -264px 0;}
#hauptmenue #panel4c {left: 325px; background-position: -325px 0;}
#hauptmenue #panel5c {left: 483px; background-position: -483px 0;}
#hauptmenue #panel6c {left: 614px; background-position: -614px 0;}
#hauptmenue #panel7c {left: 690px; background-position: -690px 0;}

#hauptmenue #panel1c a:hover {background: url(../../images/navi/navi_selbst.gif) -0px -19px no-repeat;}
#hauptmenue #panel2c a:hover {background: url(../../images/navi/navi_selbst.gif) -150px -19px no-repeat;}
#hauptmenue #panel3c a:hover {background: url(../../images/navi/navi_selbst.gif) -264px -19px no-repeat;}
#hauptmenue #panel4c a:hover {background: url(../../images/navi/navi_selbst.gif) -325px -19px no-repeat;}
#hauptmenue #panel5c a:hover {background: url(../../images/navi/navi_selbst.gif) -483px -19px no-repeat;}
#hauptmenue #panel6c a:hover {background: url(../../images/navi/navi_selbst.gif) -614px -19px no-repeat;}
#hauptmenue #panel7c a:hover {background: url(../../images/navi/navi_selbst.gif) -690px -19px no-repeat;}


darf leider nichts zeigen...


Deutsches Design: Problem...Frage!

Hallo Oliver,

kann selbst nicht im Safari testen.
Probier es mal mit einem zusätzlichen "overflow: hidden" bei #hauptmenu

Die Angaben beim hover lassen sich auch noch vereinfachen, hast du ja bei den normalen panels schon so gemacht.

G!
Jonis


danke, das wars aber leider nicht...
ich weiß jetzt, worans liegt, aber nicht, wie ichs ändern kann... =/
also: ich hab das hier:

#hauptmenue li {width: 158px;...

weil der breiteste menüpunkt 158px breit ist.
der letzte ist allerdings nur 67px breit, aber safari will da einen mit 158px breite rausmachen, deswegen wiederholt er das vom anfang. höchst merkwürdig, kein anderer browser macht das...


verstehe ich das jetzt richtig, die sollen unterschiedlich breit sein?
wenn ja, geht das nicht aus deinem ccs-markup hervor.

also entweder css oder grafik ändern?


Mal mit background-repeat rumgespielt?

Oder allgemein: Es ist n bisschen blöd, dass du den passenden HTML-Code nicht zeigst - wär ganz hilfreich.

Ich würde dabei einfach eine ul nehmen und für jeden link ein li mit nem a drin. Dann kriegen die li's ein float: left und sind alle hübsch nebeneinander. Deine Lösung scheint mir n bisschen ausgefallener zu sein, oder? Würd mich gern vom Gegenteil überzeugen lassen.


die sind unterschiedlich breit, ja. das klappt auch bei allen, es ist ja nur ein großes bild und die angaben, wo die links sind, geht ja hieraus hervor:

#hauptmenue #panel6c a:hover {background: url(../../images/navi/navi_selbst.gif) -614px -19px no-repeat;}


HTML:

<!-- Navigation -->
<div class="navi">
<ul id="hauptmenue">
<li id="panel1c"><a href="../01selbst.htm" onfocus="if(this.blur)this.blur()"></a></li>
<li id="panel2c"><a href="../02kompetenz.htm" onfocus="if(this.blur)this.blur()"></a></li>
<li id="panel3c"><a href="../03team.htm" onfocus="if(this.blur)this.blur()"></a></li>
<li id="panel4c"><a href="../04erfolg.htm" onfocus="if(this.blur)this.blur()"></a></li>
<li id="panel5c"><a href="#" onfocus="if(this.blur)this.blur()"></a></li>
<li id="panel6c"><a href="#" onfocus="if(this.blur)this.blur()"></a></li>
<li id="panel7c"><a href="#" onfocus="if(this.blur)this.blur()"></a></li>
</ul>
</div>
<!-- End of Navigation -->


okay, nochmal:
ich sehe nirgendwo eine direkte angabe wie breit die jeweilen listenelemente/anker sind, bzw. keine ausnahme regelung für deinen letzten menüpunkt.

lösungsvorschlag:
#hauptmenu #panel7c, #hauptmenu #panel7c a { width: 67px; }


danke, funktioniert leider auch nicht.

es gibt ja eben keine ausnahmeregelung für den letzten punkt!
das ganze ding ist 750px breit und die breite der einzelnen punkte ergibt sich ja aus den angaben:

#hauptmenue #panel7c a:hover {background: url(../../images/navi/navi_selbst.gif) -690px -19px no-repeat;}

(ok, da war der letzte punkt noch 60px breit, sorry...
750-60=690)


also
750 / 7 = 107,14285714285714285714285714286
158 * 7 = 1.106
ich check bei dir nicht durch, sorry...



so sollte es normalerweise gehen (abgesehen von deiner breite):
- -

#hauptmenue {position: relative; margin: 0px; padding: 0px; width: 750px; height: 38px; list-style: none;}
#hauptmenue li {position: relative; display: block; float: left; width: 158px; height: 19px; }

#hauptmenue li a {width: 158px; height: 19px; display: block; background: url(../../images/navi/navi_selbst.gif) 0 0 no-repeat; border: none;}

#hauptmenue #panel1c a {}
#hauptmenue #panel2c a {background-position: -150px 0;}
#hauptmenue #panel3c a {background-position: -264px 0;}
#hauptmenue #panel4c a {background-position: -325px 0;}
#hauptmenue #panel5c a {background-position: -483px 0;}
#hauptmenue #panel6c a {background-position: -614px 0;}
#hauptmenue #panel7c a {background-position: -690px 0;}

#hauptmenue #panel1c a:hover {background-position: -0px -19px;}
#hauptmenue #panel2c a:hover {background-position: -150px -19px;}
#hauptmenue #panel3c a:hover {background-position: -264px -19px;}
#hauptmenue #panel4c a:hover {background-position: -325px -19px;}
#hauptmenue #panel5c a:hover {background-position: -483px -19px;}
#hauptmenue #panel6c a:hover {background-position: -614px -19px;}
#hauptmenue #panel7c a:hover {background-position: -690px -19px;}

- -

schon klasse service, wa? ;-)


super =)

das probier ich gleich aus...allerdings hab ich dank deines tipps von grad eine andere lösung gefunden =D

#hauptmenue #panel1c a:hover {background: url(../../images/navi/navi_selbst.gif) -0px -19px no-repeat; width:140px;}
#hauptmenue #panel2c a:hover {background: url(../../images/navi/navi_selbst.gif) -150px -19px no-repeat; width:115px;}
#hauptmenue #panel3c a:hover {background: url(../../images/navi/navi_selbst.gif) -264px -19px no-repeat; width:59px;}
#hauptmenue #panel4c a:hover {background: url(../../images/navi/navi_selbst.gif) -325px -19px no-repeat; width:157px;}
#hauptmenue #panel5c a:hover {background: url(../../images/navi/navi_selbst.gif) -483px -19px no-repeat; width:135px;}
#hauptmenue #panel6c a:hover {background: url(../../images/navi/navi_selbst.gif) -614px -19px no-repeat; width:77px;}
#hauptmenue #panel7c a:hover {background: url(../../images/navi/navi_selbst.gif) -690px -19px no-repeat; width:60px;}


fein ;)


danke dir vielmals =) hast meinen feierabend gerettet.

ich hab jetzt das 158px komplett rausnehmen können oben. merkwürdig ist nur, wenn ich auch die höhe von 19px oben rausnehme und hinter jedem button angebe, dann funktionierts nicht mehr. aber egal.


Seitentitel: Problem...Frage!