arrow_right Grafik ist im Dateiname

[sommer]

Hallo,
ist es normal, dass die arrow_right.gif Grafik bei langen Dateinamen im Namen "hängen"bleibt?

Siehe Foto - rotes Rechteck...
http://www.bilder-upload.eu/show.php?fi ... 502477.jpg

Dies hier ist der CSS Code sein:

Code: Alles auswählen

a.right,
a.right:active,
a.right:visited {
	padding-right:12px;
}
a.right:hover {
	background-position:100% 60%;
	text-decoration:none;
}

Warum greift bei dem langen Namen padding-right nicht?

[Crizzo]

Hi,

das liegt nicht an dir. Ist in einem frischen phpBB3.0.10 mit prosilver genauso. Das Problem ist, die kurzschreibweise hier:

Code: Alles auswählen

a.right		{ background: none no-repeat 95% 60%; }

Die 95% ist schuld. Korrigiere das mal auf 100%, dann sollte es gehen. Dann ist zwar der :hover-Effekt hin, aber es geht nicht anders. Die "padding-right"-Angabe zählt zur Elementenbreite und dann sind 95% einfach zu weit links, desto breiter der Link bzw. je länger der Linkname wird.

Um dann immer noch eine sichtbare Reaktion bei :hover zu haben, kannst du folgendes als Änderung umsetzen:
FINDE:

Code: Alles auswählen

    a.right,
    a.right:active,
    a.right:visited {
       padding-right:12px;
    }
    a.right:hover {
       background-position:100% 60%;
       text-decoration:none;
    }

ERSETZEN MIT:

Code: Alles auswählen

    a.right,
    a.right:active,
    a.right:visited {
       padding-right: 9px;
    }
    a.right:hover {
       padding-right: 12px;
       text-decoration:none;
    }

[sommer]

Klasse, vielen Dank! Funzt einwandfrei!

[sommer]

Ok, jetzt habe ich leider ein anderes Problem... unten rechts steht bei den Themen doch "Nächste", wenn eine gewisse Beitragsanzahl im Thema vorhanden sind und eine neue Seite angefangen wird.
Jetzt steht der Pfeil rechts fest und beim "Hover"-Effekt wird alles andere nach links geschoben, obwohl sich ja nur der Pfeil bewegen sollte.

[Crizzo]

Ah, das wirkt auch noch woanders. Dann muss das anders gemacht werden.

Dann ändere oben die Style-Angaben wieder so, wie sie vorher waren.

Dann öffne: \styles\prosilver\template\posting_editor.html
FINDE:

Code: Alles auswählen

<dd><a href="{attach_row.U_VIEW_ATTACHMENT}" class="{S_CONTENT_FLOW_END}">{attach_row.FILENAME}</a></dd>

ERSETZE MIT:

Code: Alles auswählen

<dd><a href="{attach_row.U_VIEW_ATTACHMENT}" class="{S_CONTENT_FLOW_END} attachfile">{attach_row.FILENAME}</a></dd>

Öffne: \styles\prosilver\theme\links.css
FINDE:

Code: Alles auswählen

a.right		{ background: none no-repeat 95% 60%; }

DANACH in einer neuen Zeile einfügen:

Code: Alles auswählen

a.attachfile		{ background: none no-repeat 100% 60%; }

FINDE:

Code: Alles auswählen

a.right, a.right:active, a.right:visited {
	padding-right: 12px;
}

DANACH in einer neuen Zeile einfügen:

Code: Alles auswählen

a.attachfile, a.attachfile:active, a.attachfile:visited {
	padding-right: 9px;
}

FINDE:

Code: Alles auswählen

a.right:hover {
	color: #d2d2d2;
	text-decoration: none;
	background-position: 100% 60%;
}

DANACH in einer neuen Zeile einfügen:

Code: Alles auswählen

a.attachfile:hover {
       padding-right: 12px;
       text-decoration:none;
    }

[sommer]

Holla!
Vielen Dank für die ausführliche Beschreibung, wie man das doch lösen kann!!