cheyinka: The text 'NaNoWriMo participant since 2003' & images of a mug, a laptop, pens, & a stack of paper (nanowrimo)
Cheyan ([personal profile] cheyinka) wrote in [community profile] style_system2010-10-05 01:29 pm

Header text overlapping header image (fixed)

I'm working on a NaNoWriMo 2010 theme for Practicality for my writing journal ([personal profile] the_omelet) and am having difficulties with the header.

If I use
set image_background_header_url = "http://endersgame.net/~cheyan/images/nanowrimo2010_participant_03.png";
set image_background_header_height = 90;
set image_background_header_position = "top right";
set image_background_header_repeat = "no-repeat";
set custom_css = "
h1#title,
h2#subtitle
{
text-align: center;
margin-right: 120px;
}";

then the title and subtitle don't seem to be exactly centered, but if I don't include the margin line, when I make my browser window very small the text goes over the top of the image.

Am I missing something? Is there a better way to get that image up at the top of the page?

Solution: Obviously, if it's going to be centered, the margins on left and right need to be the same. So, I just added a margin-left line to match the margin-right line. :)

ninetydegrees: Art: self-portrait (Default)

[personal profile] ninetydegrees 2010-10-05 06:49 pm (UTC)(link)
IF you want to have them centered, you need to have the same margin on the left and on the right so:

h1#title,
h2#subtitle
{
text-align: center;
margin-left: 120px;
margin-right: 120px;
}";
Edited 2010-10-05 18:49 (UTC)