Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Themes /

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Vertically aligning graphics


Reply


4 Posts   1143 Views

Avatar
mrwindupbird

Community Member, 26 Posts

25 October 2009 at 2:28pm

Hi there,

I'm new here, have had a lot of questions over the past 24 hours... Learning so much!

Based on http://www.mrwindupbird.com/

The little grey skull to the left of "mrwindupbird" text in the graphic header.... I want the grey skull to be more vertically centered compared to the text. I have tried valign=middle to the IMG tag as well as adding vertical-align: middle to the GFXHeader section in CSS... I even tried manually adding pixels to the top of the grey skull PNG file but that only pushed the text down to line up with the bottom of the graphic.... (if you use your mouse to highlight the graphic and the text you will see what I mean)

Any ideas? Thanks guys!

Avatar
socks

Community Member, 190 Posts

25 October 2009 at 6:28pm

Edited: 25/10/2009 6:29pm

Don't add extra pixels to an image, that just makes the file size larger.

In this case, I don't consider that graphic to be content, so it shouldn't be in the HTML. Set it as a background image in the CSS. The 80 and -3 are placement, adjust how you want it.

.gfxHeader h1 {
background: #000 url(../images/greyskull.png) no-repeat 80px -3px;
}

You might find this helpful - http://www.w3schools.com/Css/default.asp

Avatar
mrwindupbird

Community Member, 26 Posts

26 October 2009 at 4:52pm

hmmm, tried that and various other incarnations of the background tag (e.g. background-image:url()) but couldn't get it to work...

Avatar
socks

Community Member, 190 Posts

26 October 2009 at 5:34pm

Make sure it's below line 135 in layout.css since the background is being specified there for .gfxHeader h1 & a#big.

or take background out of 135 and specify it separately for a#big and .gfxHeader h1

.gfxHeader h1 {
background: #000 url(../images/greyskull.png) no-repeat 80px -3px;
}
a#big {
background: #000
}