1260 Posts in 349 Topics by 485 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 979 Views |
-
Vertically aligning graphics
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!
-
Re: Vertically aligning graphics
25 October 2009 at 6:28pm Last edited: 25 October 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
-
Re: Vertically aligning graphics
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...
-
Re: Vertically aligning graphics
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
}
| 979 Views | ||
|
Page:
1
|
Go to Top |
