Jump to:

1382 Posts in 491 Topics by 521 members

Themes

SilverStripe Forums » Themes » Vertically aligning graphics

Discuss SilverStripe Themes.

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

Page: 1
Go to End
Author Topic: 1124 Views
  • mrwindupbird
    Avatar
    Community Member
    26 Posts

    Vertically aligning graphics Link to this post

    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!

  • socks
    Avatar
    Community Member
    190 Posts

    Re: Vertically aligning graphics Link to this post

    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

  • mrwindupbird
    Avatar
    Community Member
    26 Posts

    Re: Vertically aligning graphics Link to this post

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

  • socks
    Avatar
    Community Member
    190 Posts

    Re: Vertically aligning graphics Link to this post

    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
    }

    1124 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.