Bild in PHP einfügen

[ingwe]

Hallo

Ich habe folgendes php. Wie kann ich vor den jeweiligen links (facebook, twitter, email) ein (anderes) Bild einfügen? Jetzt kommt bei facebook und twitter das facebook logo und bei email nichts. Und es muss alles auf der selben höhe bleiben.

<div class="deal-share-top">
<div class="deal-share-links">
<h4>Share: </h4>
<ul class="cf"><li><a class="facebook" href="<?php echo share_facebook($team); ?>" target="_blank">facebook</a></li><li><a class="twitter" href="<?php echo share_twitter($team); ?>" target="_blank">twitter</a></li><li><a class="email" href="<?php echo share_mail($team); ?>" id="deal-buy-mailto">email</a></li></ul>


Danke schon mal im voraus für die hilfe.

 

[mermshaus]

Willkommen im Forum.

Die Bilder sind nicht dort definiert, sondern vermutlich in einer zugehörigen CSS-Datei. Änderungen müsstest du dort vornehmen. Etwa mit der Firefox-Extension Firebug kannst du sehen, welche CSS-Styles auf welches Element wirken.

 

[threadi]

Das hat nichts mit PHP zu tun. Du willst etwas gestalten. Also suchst Du nach CSS um die Ausgabe zu beeinflussen. Ich habe daher dein Topic mal zu CSS verschoben.

Eine Grafik kann man mit CSS z.B. als Hintergrundbild an einen Link hängen. Da Du schon CSS-Klassen verwendest, muss man diese CSS-Eigenschaften nur an diese hängen. Beispiel:

.facebook {
 background-image: url(grafik.png);
 background-position: 0 0;
 background-repeat: no-repeat;
 padding-left: 20px;
}

Wie "alles auf einer Höhe" bleibt hängt vom restlichen CSS deiner Seite ab. Wenn diese Links, die Du oben gezeigt hast, nebeneinander stehen sollen, kannst Du sie floaten.

.cf li {
 display: inline;
 float: left;
}

.cf a { 
 display: block;
 float: left;
}

Mit margin kannst Du noch die Abstände bestimmen.

 

[ingwe]

Vielen Dank für eure Antworten. Leider komme ich schon wieder nicht weiter. Ich habe probiert eure inputs umzusetzen in der CSS. Leider ohne Erfolg. Wo und wie müsste ich dies jetzt einsetzen? Es müsste ein Bild bei Facebook, Twitter und Email sein.

Nochmals vielen Dank.

/* deal */
#deal-share .deal-share-fix{float:left;width:10px;height:30px;background:url(i/bg-share-corner.gif) no-repeat 100% -50px;}
#deal-share .deal-share-top{float:left;_display:inline;margin-left:24px;background:url(i/bg-share-corner.gif) no-repeat 0 0;}
#deal-share .deal-share-links{float:left;width:453px;height:23px;padding:7px 0 0 20px;}
#deal-share .deal-share-links h4{float:left;font-weight:normal;}
#deal-share .deal-share-links ul{zoom:1;}
#deal-share .deal-share-links li{float:left;margin-top:2px;margin-left:3px;}
#deal-share a{float:left;dwidth:30px;height:16px;line-height:16px;*line-height:18px;padding-left:20px;background:url(i/icons-share.gif) no-repeat 0 0;margin-right:10px;color:#000;font-size:12px;font-family:Helvetica,arial,sans-serif;outline:0;}
#deal-share a:hover{color:#0981be;}
#deal-share a img{margin-right:2px;vertical-align:-2px;}
#deal-share .kaixin{background-position:0 -40px;}
#deal-share .renren{background-position:0 -80px;}
#deal-share .twitter{background-position:0 -120px;}
#deal-share .email{background-position:0 -161px;}
#deal-share .facebook{background-position:0 -201px;}
#deal-share-im-c{display:none;clear:both;width:483px;margin-left:24px;}
#deal-share-im-c .deal-share-im-b{height:50px;padding:10px 10px 10px 20px;border-left:1px solid #89b4d6;border-right:1px solid #89b4d6;background-color:#e5f8ff;}
#deal-share-im-c .f-input{width:345px;*width:320px;}
#deal-share-im-c .formbutton{display:none;*display:inline;}

 

[threadi]

Du musst nicht bestehenden CSS-Code verändern. Du kannst auch den von mir vorgeschlagenen Code unterhalb des Vorhandenen einfügen. Wie ich sehe wäre es dann nur noch wichtig die ID voranzustellen. Also:

#deal-share .facebook {  background-image: url(grafik.png);  background-position: 0 0;  background-repeat: no-repeat;  padding-left: 20px; }

Wenn Du dich bisher nicht mit CSS auskennst, schau dir mal einige Tutorials und Beispiele an. Im Netz und auch bei uns im Wiki gibt es einiges dazu zu finden. Mit dem Firefox-/Chrome-Addon Firebug kann man vorhandene CSS-Eigenschaften auch wunderbar im Browser untersuchen und testweise mal beeinflussen.