Foren / Cotonti / Skins / align image to text

DemptD
#1 22. März 2009, 10:41
Can someone help me with some align codes or something that would make the image look more "right", like this:


(Done in photoshop)

Instead of like it looks right now:



Here is the code for that part:

index.TPL:
<p id="maintextside"><img src="skins/arcticv3/img/system/groups-member.gif"> Brukerpanel:</p>

CSS:

maintextside {background:#454545; font-weight:bold; font-family:verdana; color: #ffffff;}
Xerora
#2 22. März 2009, 11:41
<p id="maintextside"><img style="vertical-align: middle;" src="skins/arcticv3/img/system/groups-member.gif"> Brukerpanel:</p>

Like that ?
DemptD
#3 22. März 2009, 11:48
Yes! Thanks :)

I really suck at coding :-P
Kort
#4 22. März 2009, 15:51
Btw, you can also specify alignment in pixels: -2px or 1px
SED.by - создание сайтов, разработка плагинов и тем для Котонти
aiwass
#5 3. Mai 2009, 17:44
The smart way would be to instead of having <img style="blablabla"> use it as a sub-class to your
maintextside {background:#454545; font-weight:bold; font-family:verdana; color: #ffffff;}

like this
.maintextside {background:#454545; font-weight:bold; font-family:verdana; color: #ffffff;}
.maintextside img {vertical-align:middle;}

or the even more fancy way/harder way of doing it :
.maintextside {background:#454545; font-weight:bold; font-family:verdana; color: #ffffff;}
.maintextside img {padding-left:5px;background:url("img/image.gif") 0 50% no-repeat;color:#000;}

It's all up to how you want it all to be presented, really !
Take all that money that we spend on weapons and defences each year and instead spend it feeding and clothing and educating the poor of the world, which it would many times over, not one human being excluded, and we could explore space, together, both inner and outer, forever, in peace. - Bill Hicks

https://evlear.com

Dieser Beitrag wurde von aiwass (am 3. Mai 2009, 21:57, vor 14 Jahre) bearbeitet
Elgan
#6 4. Mai 2009, 02:57
# aiwass : The smart way would be to instead of having <img style="blablabla"> use it as a sub-class to your
maintextside {background:#454545; font-weight:bold; font-family:verdana; color: #ffffff;}

like this
.maintextside {background:#454545; font-weight:bold; font-family:verdana; color: #ffffff;}
.maintextside img {vertical-align:middle;}

or the even more fancy way/harder way of doing it :
.maintextside {background:#454545; font-weight:bold; font-family:verdana; color: #ffffff;}
.maintextside img {padding-left:5px;background:url("img/image.gif") 0 50% no-repeat;color:#000;}

It's all up to how you want it all to be presented, really !

nice lil tip