Tweaking question

[scottishdeerhounds]

I know absolutely nothing about CSS, but was able to find enough info on past posts in this community to get almost everything in the layout the way I want it. I just have one problem left. Can anyone advise me as to what I need to do to shift the Journal Title, Subtitle, and Page Title in the header just a little up, so that it doesn't mask any of the image I've put in the header? I am using branchandroot's Green Summer Theme of the Module Style.

Any help will be deeply appreciated.

ETA: Firebug allowed me to isolate the proper CSS code, and I have been able to fix the header image as 100% of the header space, as long as Firefox is the Browser in use. Granted, nobody looks at my journal but me, and I use Firefox, but its the principal of the matter. Is there a way to fix this custom CSS so that it also address the size issue in IE8?

ETA 2: I have now been informed that MS is not yet up to speed, and the potential fixes for this for IE8 would require substantial revision of the header as I currently have it fixed. Ah well, at least it looks OK to hopefully a third of users out there.

Comments

[afuna]

Hm, you can increase the height of the header a bit - the text starts from the top, while the background image starts from the bottom. So add this to your custom css box:


#header { height: 340px;}

That worked for a certain value of sucess

[scottishdeerhounds]

That definitely shifted the header graphic down and out from under the title text. So, success on that front. But, it did make me see that the header graphic isn't scaling properly. (I was on a different computer at when you reply came in). I think I understand enough to guess the header graphic needs to be somehow defined as a percentage of the header block, but 1)have no idea if that can even be done with a jpeg insertion, and 2) have no idea how to do it.

Following one of the CSS FAQ suggestions, I installed the Firebug add on to my Firefox, and I think I see the code for the header, or at least for the jpeg insertion, but I don't see anything which defines it's size.

Any suggestions about where to go from here?

Re: That worked for a certain value of sucess

[branchandroot]

The trick with background images is, until very recently, they couldn't be scaled, and scaling is still not supported in anything but the very newest browsers (and not in IE at all).

I surmise that what you mostly want is for the two side-bits to always be on the sides and the middle bit to always be in the middle? There are two ways to accomplish that, one of them old and fairly foolproof but clunky, the other of them new and not supported on all browsers but spiffy.

Old: To accomplish that, you would need to divide that image into three, one image to a part, with a little green margin as is easy to get. Then use custom css to put one in each layer of the header boxes (#header, #header .inner, and probably #pagetitle, applying height only to #pagetitle), aligned to right, center and left respectively. That will be fluid and keep the proper alignment no matter what size the screen is. It still won't scale, the images will always be the same size, but they'll be right, left and centered properly.

The spiffy new, not wholly supported way: This also needs custom css, but I believe all you need to put in is "#header {background-size: 100% auto;}". That really will scale your image. Be aware that this will change the height also, so you may get overlap again on larger monitors. If you don't actually want scaling, just alignment, you can also chop the image in three and assign all three of them to #header (eg background-image: url(one.jpg), url(two.jpg), url(three.jpg), and similarly list the other values like alignment out). Again, this will only work on the most recent Firefox, Safari, Opera, and Chrome. IE is, as usual, lagging on CSS compliance.

Re: That worked for a certain value of sucess

[scottishdeerhounds]

Thank you for that very useful explanation. I always feel bad that I know nothing at all about Chrome, Safari, or Opera, and hence more inclined to try to get stuff to work in IE. Not happening this time though, since I have decided I can live with the overlap if it means the image is scaled for which ever computer monitor I am at.

I think I will like the Firebug program- I can see it helping me figure out a lot more about CSS than I have managed to date.