[bb3] On-Offline-Icon linksbündig setzen

On-Offline-Icon linksbündig setzen

Ich bin nun bereits seit knapp 3 Wochen beim Belesen in Eurem Forum, vieles habe ich auf Anhieb gefunden,
anderes ist durch die teilweise sehr schlechte Namensgebung im Titel durch die User sehr unübersichtlich geworden.

An Euch die Admins, Mods ......gut zu sehen dass man hier auch Hilfe bekommt.

Nun zu meinem Anliegen. Ich hoffe doch ich poste nun auch im richtigen Bereich.


Unschwer zu erkennen, müsste hier das Avatar und der On und Offline Button linksbündig gesetzt werden.

Verwendet habe ich die Codes aus dem Beitrag von Zuckerpuppe Hier

Zum einen habe ich das Modul wie von ihr beschrieben erstellt.

Code:

        <script type="text/javascript">
        jQuery(document).ready(function(){
        jQuery(".postprofile dl dt img").wrap('<div class="user"></div>');
        jQuery(".user").append(jQuery('<div></div>'));
        jQuery(".online .user div").prepend(jQuery('<img src="ADRESSE DER GRAFIK FÜR DAS ONLINE-ICON" alt="online" Title="online" class="rec" />'));
        });
        </script>


Anschließend wie auch von ihr beschrieben in das CSS geschrieben.

Code:

      .user {
        text-align: center;
        }
        .user div{
        position:relative;
        top: -7px;
        height:13px;
        width:87px;
        background: transparent url("http://ADRESSE DER GRAFIK FÜR DAS OFFLINE-ICON") no-repeat bottom center;
        margin: 0 auto;
        }
        .rec {
        position:relative;
        }
        .online {
        background-image:none;
        }

Maße und Link eingetragen, Annehmen, Absenden etc....

Durch das Umschreiben von

.user {
text-align: [b][color=red]center;

in [b][color=red]left bekomme ich auch das Avatar linksbündig.

[color=blue][b]Leider bekomme ich nicht das Online und auch nicht das Offline-ico linksbündig gesetzt???

Wie wird es denn umgestellt????

Hallo

das online-offline-Icon bekommst du linksbündig, indem du den margin-Wert bei dem .user div änderst:

.user div {
background: url("URL") no-repeat scroll center bottom transparent;
height: 13px;
margin: 0 auto 0 -1px;
position: relative;
text-align: left;
top: 10px;
width: 87px;
}

versuch es mal so mit den -1px.

Da ich dein Icon ja aktuell im Forum nicht sehen kann, ist es nur ein Richtwert, der noch auf deine Bedürfnisse angepasst werden muss.
Je höher der negative Wert ist, umso mehr rutscht das Icon nach links

@Zuckerpuppe: Sorry für die Formatierung....kommt nicht wieder vor.

Bingo, dass war es. "Habe fertig", sitzt perfekt.
Nun kann es mit den anderen Styles und dem Wechselschalter weitergehen.
Ich Danke Dir mit einem Smilie aus meinem Forum.

Hier einmal noch für alle Leser oder falls Du es in Deinem anderen Post übernehmen magst.
Meine Grafiken hatten eine Größe von 150x26px bei einem Abstand von 5px von oben (Avatar).

Code:

    }
          .user {
            text-align: left;
            }
            .user div{
            position:relative;
            top: 5px;
            height:26px;
            width:150px;
            background: url("http://ADRESSE DER GRAFIK FÜR DAS OFFLINE-ICON") no-repeat scroll center bottom transparent;
            height: 26px;
            margin: 0 auto 0 -1px;
            position: relative;
            text-align: left;
            top: 5px;
            width: 150px;
            }

Daaaaaaaaaaaaaaaaaaaaaaaanke

Prima, freut mich, dass es passt...da hab ich mit der Pixelzahl wohl voll ins Schwarze getroffen

ich mach dann hier mal zu

-closed-