Forums / Cotonti / Skins / align image to text

DemptD
#1 2009-03-22 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 2009-03-22 11:41
<p id="maintextside"><img style="vertical-align: middle;" src="skins/arcticv3/img/system/groups-member.gif"> Brukerpanel:</p>

Like that ?
DemptD
#3 2009-03-22 11:48
Yes! Thanks :)

I really suck at coding :-P
Kort
#4 2009-03-22 15:51
Btw, you can also specify alignment in pixels: -2px or 1px
SED.by - создание сайтов, разработка плагинов и тем для Котонти
aiwass
#5 2009-05-03 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
This post was edited by aiwass (2009-05-03 21:57, 15 years ago)
Elgan
#6 2009-05-04 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