icon position

[Maugrim]

Hallo!

Ich habe eine, wohl banale, Frage.
Und zwar:

DIe icon-contact icons (also icq, pn, msnm, etc...) haben in der css die positionsdeklaration top und left

Aber eines meiner neuen icons ist kleiner als die anderen
Das klebt nun auch "oben" anstatt mittig.

Ich habe gegoogelt und angeblich soll da center und center helfen, doch wenn ich top und left durch center und center ersetze, dann bleibt das icon noch immer oben links haften...

Kann mir vielleicht jemand helfen und sagen wie ich das Icon mittig ausrichten kann?

ich kenne mich mit css leider absolut nicht aus.

Ich habe schon in der viewtopic einfach versucht den align des img src auf absmiddle zu setzen, aber auch das hilft nicht (habe vorher auch das top left aus der css deklaration heraus genommen)

[Crizzo]

Hi,

bitte einmal einen Link zum Forum, damit wir das sehen können.

Grüße

[Maugrim]

http://www.lyrija.at/Forum/viewtopic.php?f=2&p=15#p15
user: test
pass: 12345

es geht um das skype icon
das blaue ist ein Background-Image, welches ich drunter gelegt habe. Das icon klebt aber so oben links. Ich hätte es aber gerne mittig von dem blauen kästchen...

in der css aus dem Skype Mod steht bei skype icon wie gesagt top left...aber center center hilft nicht
und wenn ich in der viewtopic zu dem img src des skype status bildchens ein align="absmiddle" dazugebe hilft das auch nicht wirklich

[Talk19zehn]

Och, was nun - Login nicht möglich... - da hat wohl wer zu oft ein falsches PW eingegeben... ?

[Maugrim]

ups... da hat sich eine 3 zuviel in das Passwort eingeschlichen

12345 ist dsa richtige

[Crizzo]

Hi,

du bindest das Skype-Icon gar nicht als Hintergrundbild ein, wie bei den anderen auch, sondern als <img>-Element. Ändere das einfach so um, damit es mit den anderen gleich aussieht und dann passt wohl auch die Darstellung.

Vergleich MSN:

Code: Alles auswählen

<li class="msnm-icon">
<a title="Allvater mit MSN kontaktieren" onclick="popup(this.href, 550, 320); return false;" href="./memberlist.php?mode=contact&action=msnm&u=2">
<span>WLM</span>
</a>
</li>

mit Skype:

Code: Alles auswählen

<li class="skype-icon">
<a onclick="popup(this.href, 843, 280); return false;" href="./memberlist.php?mode=contact&action=skype&u=2">
<img title="Allvater in Skype kontaktieren" alt="skype" style="width: 16px; height: 16px;" src="PLATZHALTER">
</a>
</li>

Grüße

[Maugrim]

ah ok.
Naja, diesen "Code" habe ich so aus dem Skype-Mod direkt übernommen.

was müsste ich denn ändern?
Weil einfach nur {L_SKYPE} reinschreiben geht ja nicht *g* (bei WLM steht {L_WLM}

da gehört sicher mehr dazu...

btw: diesen Mod hier habe ich verbaut: https://www.phpbb.com/community/viewtop ... 5#p5525445

gibts nen besseren?

[Crizzo]

Schau einfach 1:1 bei MSN und den anderen ab. Und erstelle dann analog dazu die passende CSS-Regel und den gleichen HTML-Code, nur dass eben der Link zur Funktion und die URL zur Grafik anders ist.

[Maugrim]

Das habe ich schon für die neuen Buttons versucht (google, facebook, twitter etc) da ich bei denen auch ein RolloverBild möchte. Zur Zeit habe ich es ja mit dem Mouseon Mouseoff gelöst, was ich nicht so toll finde


wenn ich zB bei MSN schaue, dann gibt es drei Erwähnungen im Theme.

Code: Alles auswählen

.msnm-icon, .msnm-icon a			{ background: none top left no-repeat; }

Code: Alles auswählen

ul.profile-icons li.msnm-icon	{ width: {IMG_ICON_CONTACT_MSNM_WIDTH}px; height: {IMG_ICON_CONTACT_MSNM_HEIGHT}px; }

Code: Alles auswählen

.msnm-icon, .msnm-icon a			{ background-image: url("{IMG_ICON_CONTACT_MSNM_SRC}"); }

schreibe ich beim zweiten einfach 16x16 rein?
und beim dritten einfach den Link, wie er zZ bei mir drinnen ist?

und was schreibe ich dann in den den <span></span>
bei MSN steht ja da {L_WLM}
schreib ich dann einfach {L_SKYPE} ??

in der viewtopic sieht das msnm so aus dann

Code: Alles auswählen

<!-- IF postrow.U_MSN --><li class="msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{postrow.POST_AUTHOR} mit MSN kontaktieren"><span>{L_MSNM}</span></a></li><!-- ENDIF -->

[Talk19zehn]

Hi, hilft dir jenes Thema [HowTo] ggf. im weitesten Sinne weiter?

viewtopic.php?p=1099087#p1099087

Viele Grüße