Background transparent url bilder kollidieren

K.D · #1 (**permalink**) 01.03.2010, 10:28

Habe zwei .css die miteinander kollidieren, bzw. das li background image arrow.png erscheint über dem repeat'eten rate-star.png

Hat jemand eine Idee wie ich das beheben kann?

css #2

Code:

li 
{
background:transparent url(../images/arrow.png) no-repeat scroll left top;
}

css #1

Code:

.star-rating, .star-rating a:hover, .star-rating a:active, .star-rating a:focus, .star-rating .current-rating {
background:transparent url(images/rate-star.png) repeat-x scroll left -1000px;
}

übrigens: chrome zeigt es korrekt an, aber ff und ie nicht...

David · #2 (**permalink**) 01.03.2010, 10:45

Nein, denn ohne Beispiel bzw. wenigstens das Markup kann man nur Raten wo genau das „Problem“ liegt.

So wie du es beschreibst ist dein <li> offensichtlich ein Kindelement eines Elementes, dass druch deine zweites CSS angesprochen wird. Damit liegt dessen Hintergrund nun mal über dem des Elternelementes, was normales Verhalten ist.

K.D · #3 (**permalink**) 01.03.2010, 10:55

danke für die Blitzantwort

hier ist das beispiel , einverstanden li eigenschaft wird vererbt, wie kann ich das jedoch verhindern?

=====================

Code:

<ul class="star-rating">
                <li id="shopping-stars" class="current-rating" style="width:0"></li>
                <li><a href="javascript:;" class="star1" id="shopping-rating-1"><input type="radio" value="1" name="rating_1" id="shopping-rating-input-1"/>1</a></li><li><a  href="javascript:;" class="star2" id="shopping-rating-2"><input type="radio" value="2" name="rating_1" id="shopping-rating-input-2"/>2</a></li><li><a  href="javascript:;" class="star3" id="shopping-rating-3"><input type="radio" value="3" name="rating_1" id="shopping-rating-input-3"/>3</a></li><li><a  href="javascript:;" class="star4" id="shopping-rating-4"><input type="radio" value="4" name="rating_1" id="shopping-rating-input-4"/>4</a></li><li><a  href="javascript:;" class="star5" id="shopping-rating-5"><input type="radio" value="5" name="rating_1" id="shopping-rating-input-5"/>5</a></li>
              </ul>

Code:

<ul class="x_ul">
        
            <li class="x_li">
                <a href="http://xxx.html" class="header_link" title="SWF">
                text...              </a>
            </li>

David · #4 (**permalink**) 01.03.2010, 11:56

Das hat nichts mit Vererbung zu tun. Deine Liste hat das Hintergrundbild "rate-star.png", die Listenpunkte haben "arrow.png". Dann ist klar, dass "arrow.png" über "rate-star.png" liegt, wenn die Abmessungen der Grafiken entsprechend groß sind.

Hast Du kein Onlinebeispiel. Mir fällt es schwer, hier dein Problem zu erkennen, denn das Verhalten das du beschreibst ist normal.

Du könntest versuchen mit Hintergrundpositionen oder margins zu arbeiten oder die Abmessungen der Hintergundbilder zu ändern.

background: Hintergrundbilder: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

K.D · #5 (**permalink**) 01.03.2010, 12:16

Nein, leider kein Bsp. zugänglich.

Die Listenpunkte sollen im "normalen" Seitenbereich auch "arrow.png" haben. Das läuft und ist gut so bei der class="x_li".

Ein Ajax Popup Kontaktformular welches erlaubt ein Bewertung abzugeben, hat jedoch neben dem 5 mal repeat'eten "rate_star.png" - von mir ungewollt - je ein "arrow.png".

Das Ajax Popup soll nicht als "gleichwertige" Liste behandelt werden (damit eben keine arrow.png als Listenpunkte erscheinen).

Deshalb ist wohl die Frage, kann ich das "arrow.png" begrenzen für listen die eine bestimmte class="x_li" sind, also einengen damit nicht über die ganze Site immer Listen mit den arrows versehen werden?

Walter IT-Services · #6 (**permalink**) 01.03.2010, 12:41

Hallo!

Einfachste Lösung:
Du machst eine Klasse für die <li>-elemente in deinem Formular:

HTML-Code:

li.form{
  background-image: none;
}

Die Alternative ist das, was du scheinbar wirklich willst:

HTML-Code:

<ul class="test1">
  <li>test</li>
  <li>asd</li>
</ul>

<ul class="test2">
  <li>test</li>
  <li>asd</li>
</ul>

HTML-Code:

ul.test1 li{
	color:red;
}

Bei dieser Variante werden nur die Listeneinträge von der Klasse test1 rot dargestellt.

David · #7 (**permalink**) 01.03.2010, 12:42

Kannst Du auf das Markup des Kontaktformular Einfluss nehmen? Dann wäre wohl eine ID für diese Liste oder eine Klasse für diese Listenpunkte die einfachste Möglichkeit, das Hintergrundbild einfach zu entfernen.
(background-image:none).

Wiederholte Hintergründe erstrecken sich über die gesammte Fläche (width/height + padding). Also entweder über entsprechende Angaben diese Fläche begrenzen, oder die Hintergrundgrafik so Erstellen, dass sie nicht wiederholt werden muss.

Eine andere Möglichkeit sehe ich nicht.

Walter IT-Services · #8 (**permalink**) 01.03.2010, 12:45

Zitat:

Zitat von David

[...]
Eine andere Möglichkeit sehe ich nicht.

*hust*
Schau mal eins über dir. Ich war eine Minute schneller :P

K.D · #9 (**permalink**) 01.03.2010, 13:16

Besten Dank an beide.
Habe noch hier zur Info den Link zum ajaxpopform (ajax popup formular), welches ich in eine andere Seite mit eigenem css einbaue.... http://www.brightyoursite.com/blog/2...l-ajaxpopform/

Dort gibt es folgenden code im ajaxpopform.css
rot was ich jetzt geändert habe , das hat das Prob gelöst... also wie walter it services sagt die li vom formular background: none stellen

Code:

.star-rating, .star-rating a:hover, .star-rating a:active, .star-rating a:focus, .star-rating .current-rating {
background:transparent url(images/rate-star.png) repeat-x scroll left -1000px;
}
.star-rating {
background-position:left top;
height:10px;
line-height:10px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
overflow:hidden;
padding:0;
position:relative;
width:50px;
}

.star-rating li {
display:inline;
background: none;
}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Inline Listenelement wird nicht richtig im background befüllt	SteveB	CSS	3	28.04.2011 20:41
Darstellungsprobleme im IE	lea11011989	CSS	17	05.11.2010 09:44
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
Frage zu horizontalen Linien	marvin1989	CSS	3	29.12.2009 23:35
Float-Reihenfolge?	wolf1985	CSS	0	21.08.2008 01:35