XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Nach Anzeige eines Hintergrundbildes verschieben sich die Textpositionen (http://xhtmlforum.de/showthread.php?t=71821)

sunshineh 12.03.2015 22:33

Nach Anzeige eines Hintergrundbildes verschieben sich die Textpositionen
 
Hi,

ich nutze auf meiner Webseite ein fertiges Theme und passe die custom.css Datei so an, dass neben dem Logo einen Textstring steht.
Die Anpassung meinerseits sieht wie folgt aus

Code:

.logo img {
    width: 40px;
    height: 30px;
    top: 14px;
}

.logo, .logo a {
    width: 100%;
    overflow: visible;
}

#top .logo-title {
    position: absolute;
    color: #666666;
    left: 46px;
    top: 0;
}

Dies funktioniert soweit und ist passend platziert.

Nun möchte ich es noch so anpassen, dass wenn man mit der Maus über das Logo fährt, dieses ausgewechselt wird und der Textstring eine andere Farbe bekommt.
Dies funktioniert alleine mit dem Textstring sehr gut, nur wenn ich das Logo "austausche" indem ich das Bild ausblende und ein anderes an der Stelle im Background anzeige, passen die Positionen von Logo zum String nicht mehr und es verschiebt sich um den Offset des Logos

PHP-Code:

.logo:hover img 
    
opacity0


.
logo:hover 
    
background-imageurl(http://...//Logo_dgruen_56x40.png); 
    
background-size40px 30px
    
background-repeatno-repeat
    
top14px


Was muss ich ändern?
Ich wäre über eure Hilfe sehr dankbar, da ich schon lange erfolglos nach der "trail and error"-Methode rumprobiere und ich wahrscheinlich nur den passenden Befehl nicht kenne

Thielo 13.03.2015 00:00

Dir fehlt HTML. Denn ohne HTML kann nichts dargestellt werden.

Ja, wir brauchen den KOMPLETTEN CODE (mit allem), Keine ZIP, am besten einen Link.

sunshineh 13.03.2015 00:30

Schade, ich dachte es gibt vielleicht einen CSS Befehl, der das Hintergrundbild für die Textpositionierung "unsichtbar" machen kann.

Schade, den Link kann ich hier leider nicht posten...

Dennoch vielen Dank für deine Rückmeldung!

Thielo 13.03.2015 02:08

Können und wollen ist ein Unterschied. Und ein Hintergrundbild beeinflusst niemals eine Textpositionierung.

etux 13.03.2015 11:08

Zitat:

Zitat von sunshineh (Beitrag 543566)
Schade, den Link kann ich hier leider nicht posten...

Ja, schade. Denn den kompletten oder zumindest den relevanten Quellcode hättest Du schon posten können. ;)
So kann ich eben nichts mehr als etwas Theorie beisteuern.

Mit „opacity“ kleiner 1 wird ein neuer Stapelkontext etabliert.
Womöglich kommt er im Konflikt mit dem Stapelkontext, von „.logo-title“.
Weitere mögliche Fehlerquellen: fehlende oder falsche Containing Blocks; Fehlende horizontale Offsets.

Wenn Du das Bild eh nur aus- und einblendest, arbeite lieber mit display: none | block.
Oder hole das Bild beim Hovern aus dem Sichtbereich raus: position absolute plus negativer Wert für left.


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023