Positionierung von Hintergrundfarbe

[bebbi]

Hallo zusammen,
da bin ich wieder mit einer Frage die sich aus meinem Thread von vorgestern ergeben hat.
Ich bastle gerade an einer Navigationsleiste
http://www.earthquake-productions.com/css_demo/nav_demo15.html
 - wie man bei der Subnavigation (Anamnese etc.) sieht ist die Aufgabenstellung der Layouterin eine gepunktete Linie zwischen den Unterpunkten einzufügen und der Mouseovereffekt ist eine weiße Hintergrundfarbe. Beide Vorgaben sind von den Abmessungen her nicht so groß wie der button selbst. Jetzt habe ich lange getüftelt und nichts gescheites herausbekommen ausser die gepunktete Linie mit hilfe einer Hintergrundgrafik einzufügen was zu einem unschönen leeren div tag führt:
<li><a href="#Beispiel">Anamnese</a><div class="hr1"></div></li>
und die weiße Hntergrundfarbe habe ich mit einem Rahmen realisiert:
 ul#mainnav li ul li a:hover, ul#mainnav li ul li span {
  background-color: #F6F9FC;
  color: #061C34;
  border-width: 5px 9px;
  border-style: solid;
  border-color: #E2EAF4;
  padding: 3px 5px 3px 0px;
 }
als ich gestern eine Frage hatte zur Kompabilität meines Bastelergenisses mit älteren Browsern hatte, hat ChrisB seine Finger genau in meine Wunde gelegt:

Ich sehe nicht, warum du dazu border benoetigen solltest - dazu reicht es doch aus, die Hintergrundfarbe des Links zu aendern.
Abstaende natuerlich ueber margin/padding herstellen.

Mir hat das mit dem leeren div tag und dem gestöpsel mit dem border auch nicht gepasst und da ich die Layouterin nicht einstampfen kann habe ich mir vorgenommen meinen Code einzustampfen. Nun sitze ich aber schon ein paar Stunden da und versuche ChrisBs Vorschlag umzusetzen. Ich bin nicht der css Spezialist und so habe ich die Bitte ob mir jemand einen Hinweiß geben kann wie ich das basteln kann oder ob es unmöglich ist die Vorgabe der nicht eingestampften Layouterin besser umzusetzen.
Für mich wäre es interessant ob es eine Mglichkeit gibt eine Hintergrundfarbe zu positionieren - in diesem Fall ohne padding da es sich immer auf den Text (Anamnese) bezieht...
und ob es dann möglich wäre mit border die gepunktete Linie (die nicht über die gesamte Länge geht) darzustellen. Ausserdem soll beim letzten Punkt die gestrichelte Linie weggelassen werden (wie Gunnar Bittersmann postete würde das dann mit ':last-child' gehen)...

Auf jeden Fall bin ich sehr gespann ob es eine schönere Lösung als mein gebastel gibt...

viele grüße aus dem Süden
bebbi

ps.: das Problem von vorgestern ist gelöst - auch die älteren ies (incl v5.01) stellen das teil jetzt ordentlich dar - nochmals tausend dank für die Unterstützung - man lernt nie aus....

[ChrisB]

Hi,

• wie man bei der Subnavigation (Anamnese etc.) sieht ist die Aufgabenstellung der Layouterin eine gepunktete Linie zwischen den Unterpunkten einzufügen und der Mouseovereffekt ist eine weiße Hintergrundfarbe. Beide Vorgaben sind von den Abmessungen her nicht so groß wie der button selbst.

Hintergrundfarbe bei :hover fuer den Link, gestrichelte Linie als border des LI angeben.
Abstaende ueber margin/padding herstellen.

MfG ChrisB

[bebbi]

Hi Chris,

Hintergrundfarbe bei :hover fuer den Link, gestrichelte Linie als border des LI angeben.
Abstaende ueber margin/padding herstellen.

das hab ich den ganzen Nachmittag versucht. Soweit bin ich gekommen:
http://www.earthquake-productions.com/css_demo/nav_demo16.html

die gepunktete Linie habe ich bei a und a:hover eingefügt (soll ja immer zu sehen sein - siehe:
http://www.earthquake-productions.com/css_demo/nav_demo15.html ). Als nächstes wollte ich die Hintergrundfarbe des Mouseovereffekts in der Größe beschneiden. Mit margin geht es nicht weil das ja der Aussenrahmen ist (der button wird durch mouseover größer) und mit padding geht es nicht weil sich padding an dieser stelle anscheinend immer auf den Text (Buttontext) bezieht - beim mouseover verschiebt es nur den Text bzw. der Button ändert seine Größe. Also habe ich versucht die Größe des Buttons zu definieren was aber auch nicht geht weil er dann bei zweizeiligem Buttontext zu klein ist.
Abgesehen davon habe ich auch keine Idee wie ich den border vorne und hinten kürzen könnte...
Anscheinend kann ich deine Hinweise nicht umsetzen - vielleicht bin ich ja doch ein dau (dümmster anzunehmender user)...

trotz allem viekle grüße aus dem finsteren Süden
bebbi

[ChrisB]

Hi,

die gepunktete Linie habe ich bei a und a:hover eingefügt

Da ist sie fehl am Platze, weil -

Als nächstes wollte ich die Hintergrundfarbe des Mouseovereffekts in der Größe beschneiden.

• sowas geht nicht.
  Die Hintergrundfarbe nimmt den Platz ein, den das Element einnimmt.

Also sorge dafuer, dass die Links den Platz einnehmen, der beim Ueberfahren weiss erscheinen soll.

Abgesehen davon habe ich auch keine Idee wie ich den border vorne und hinten kürzen könnte...

In dem du dafuer sorgst, dass das Element, das den border bekommt, sich auch nicht weiter ausdehnt.
Also gepunktete Linie als Rahmen fuer die LI, und margin, um diese Abstand von den Aussenseite der Liste halten zu lassen.

Anscheinend kann ich deine Hinweise nicht umsetzen - vielleicht bin ich ja doch ein dau (dümmster anzunehmender user)...

Machst du ein Praktikum bei der Firma oder sowas?

MfG ChrisB

[bebbi]

hi Chris,
danke für die Tipps - sowas dachte ich mir schon... Also werde ich mich mal dranmachen und das Teil umfummeln...

Machst du ein Praktikum bei der Firma oder sowas?

nö...

viele Grüße aus dem Süden
bebbi

[bebbi]

hi Chris,

soweit bin ich jetzt gekommen:
http://www.earthquake-productions.com/css_demo/nav_demo18.html
im Vergleich zu:
http://www.earthquake-productions.com/css_demo/nav_demo15.html
fällt auf das die Subnavigation oben und unten jeweils einen 2px Rand dazubekommen - den Fehler kann ich einfach (oder auch mehrfach...) nicht finden.
Ausserdem kann ich keine Möglichkeit finden mittels margin die gepunktete Linie links und rechts zu kürzen weil margin bei ul#mainnav li ul li sich auf die Position des Textes auswirkt.
Muß ich noch eine Box einfügen für die Linie?
Ausserdem ist mir aufgefallen das in den älteren ie Browsern die gepunktete Linie gänzlich anders aussieht... gibt es hierfür einen workaround?
viele müde Grüße aus dem sehr windigen (schon fast stürmischen) Süden...
bebbi
:-)

[ChrisB]

Hi,

Ausserdem kann ich keine Möglichkeit finden mittels margin die gepunktete Linie links und rechts zu kürzen weil margin bei ul#mainnav li ul li sich auf die Position des Textes auswirkt.

Wenn du die LI mehr Abstand vom Rand halten laesst, natuerlich bewegt sich der darin liegende Link dann ebenfalls vom Rand weg. Also gebe dem Link selber weniger Abstand vom LI - ueber sein eigenes margin, oder das padding des LI.

MfG ChrisB

[bebbi]

hi Chris,

danke für all die nützlichen tipps - nun schaut es so aus:
http://www.earthquake-productions.com/css_demo/nav_demo19.html

drei probleme sind noch übrig:
1, zwischen Untersuchung und Anamnese (also zwischen 1.Ebene und 2.Ebene taucht eine 2px Linie auf - ich finde nicht die Stelle an der ich dem Browser das aufgetragen hätte bzw. wo ich es unterbinden kann.
2, wie Gunnar Bittersmann vorgestern postete kann man die letze Linie automatisch entfernen. Im ie 7 geht das auch ganz super mit CSS-Expressions - leider funzt das garnicht in firefox und den alten browsern - auch nicht die li:last-child und li:not(:last-child) Methode. Kann man das irgendwie anders realisieren oder habe ich wieder einen Murks gebastelt?
3, Gibt es eine Möglichkeit in den älteren ies die gepunktete Linie dem Aussehen in den aktuellen Browsern anzugleichen?

tausend Dank für die beharrlichen Mühen...
grüße aus dem... na ihr wisst schon :-)
bebbi

:-)

[Auge]

Hallo

3, Gibt es eine Möglichkeit in den älteren ies die gepunktete Linie dem Aussehen in den aktuellen Browsern anzugleichen?

Jein. Die IEs bis v6 kommen mit border:1px dotted; nicht zurecht und stellen sie wie "dashed" dar. Ist der Border breiter als 1 Pixel, funktioniert das auch in diesen IE-Versionen. Als Workaround bleibt das Leben mit diesem Fehler oder das Zuweisen eines anderen Borderstyles (z.B. "solid") über eine http://de.selfhtml.org/css/layouts/browserweichen.htm@title=CSS-Browserweiche.

Ach ja: Mach dir nicht allzuviele Gedanken über alte Browserversionen. Speziell für MSIE sind bezüglich der Darstellung eigentlich nur noch die Versionen 6, 7 und (kommend, ist ja noch beta) 8 relevant. Ältere Versionen (vor 6) kommen in den Statistiken bestenfalls noch mit einer eins oder zwei vor dem Komma in der freien Wildbahn vor. Ob die Linie dafür noch korrigiert werden muss, darf bezweifelt werden.

Tschö, Auge

[at]

Hallo.

drei probleme sind noch übrig:
1, zwischen Untersuchung und Anamnese (also zwischen 1.Ebene und 2.Ebene taucht eine 2px Linie auf - ich finde nicht die Stelle an der ich dem Browser das aufgetragen hätte bzw. wo ich es unterbinden kann.

Hast du deinen Quelltext schon einmal nach 2px untersucht?

2, wie Gunnar Bittersmann vorgestern postete kann man die letze Linie automatisch entfernen. Im ie 7 geht das auch ganz super mit CSS-Expressions - leider funzt das garnicht in firefox und den alten browsern - auch nicht die li:last-child und li:not(:last-child) Methode. Kann man das irgendwie anders realisieren oder habe ich wieder einen Murks gebastelt?

Du bist unschuldig. Die größtmögliche Kompatibilität wirst du erreichen, indem du nicht mit einem border-bottom arbeitest, sondern mit einem border-top, und zwa nicht für alle untergeordneten Listenelemente, sondern nur für Listenelemente, die auf ein untergeordnetes Listenelement folgen: ul#mainnav li li + li
Der IE versteht das aber auch erst ab Version 7. Hier kannst du Abhilfe schaffen, indem du doch wieder allen untergeordneten Listenpunkten den Rahmen zuweist und mittels eines negativen oberen Außenabstandes für die untergeordnete Liste diese um die Breite der Linie nach oben ziehst.

3, Gibt es eine Möglichkeit in den älteren ies die gepunktete Linie dem Aussehen in den aktuellen Browsern anzugleichen?

Du könntest die Linie durch eine Hintergrundgrafik ersetzen, die eine gepunktete Linie abbildet. Allerdings ist das stilistisch nicht eben sauber, wenngleich sicher zulässig.
MfG, at