zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Background transparent url bilder kollidieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.03.2010, 10:28
K.D K.D ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2010
Beiträge: 4
K.D befindet sich auf einem aufstrebenden Ast
Standard Background transparent url bilder kollidieren

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...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.03.2010, 10:45
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.630
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

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.
__________________
github | http://dnaber.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.03.2010, 10:55
K.D K.D ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2010
Beiträge: 4
K.D befindet sich auf einem aufstrebenden Ast
Standard

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>

Geändert von K.D (01.03.2010 um 11:13 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 01.03.2010, 11:56
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.630
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

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
__________________
github | http://dnaber.de
Mit Zitat antworten
  #5 (permalink)  
Alt 01.03.2010, 12:16
K.D K.D ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2010
Beiträge: 4
K.D befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 01.03.2010, 12:41
Michael Walter
XHTMLforum-Mitglied
 
Registriert seit: 16.02.2010
Ort: Berlin
Beiträge: 237
Walter IT-Services befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
Walter IT-Services
Michael Walter

http://www.walter-it.de
http://blog.walter-it.de
Mit Zitat antworten
  #7 (permalink)  
Alt 01.03.2010, 12:42
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.630
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

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.
__________________
github | http://dnaber.de
Mit Zitat antworten
  #8 (permalink)  
Alt 01.03.2010, 12:45
Michael Walter
XHTMLforum-Mitglied
 
Registriert seit: 16.02.2010
Ort: Berlin
Beiträge: 237
Walter IT-Services befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von David Beitrag anzeigen
[...]
Eine andere Möglichkeit sehe ich nicht.
*hust*
Schau mal eins über dir. Ich war eine Minute schneller :P
__________________
Walter IT-Services
Michael Walter

http://www.walter-it.de
http://blog.walter-it.de
Mit Zitat antworten
  #9 (permalink)  
Alt 01.03.2010, 13:16
K.D K.D ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2010
Beiträge: 4
K.D befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
background, css, kollidieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:02 Uhr.