I like CSS Zen a lot, because even though it's extremely CSS-reliant (and therefore not always 100% browser compatible), it's very customizable, and everything in the style.css is pretty easy to understand. All I wanted to do at Dragonfayth ( http://seventh-star.net/drfa) was change the header so that instead of text, I had an image. I succeeded on that front, but when it comes to CENTERING the image, nothing I do works.
I've tried editing the CSS to include various variables in the #sitename class, I've tried adding an align="center" to the div in the CSS Zen header.tpl... nothing works. Right now, my style.css for the #sitename reads:
#sitename {
line-height: 100px;
background-image: url(images/dragonfayth.gif);
text-align: center;
background-repeat: no-repeat;
width: 400;
height: 150px
I've also tried margin-left: auto (and margin-right: auto), and anything else I've found. Absolutely nothing has worked. Is it because something is being overriden elsewhere in style.css, header.tpl, or somewhere else? Or am I going about this the wrong way? I know CSS elements like float and position don't have a "center" or "middle" option, so how do I get the image in my header to center (I want it to be centered regardless of resolution, which is why I don't specify an exact pixel position)?
Archive: Dragonfayth
eFiction: 3.5.5/6
Latest Patch(es): Yes
bridged?: No
modified?: Yes
PHP: 7.4.25
MySQL: 5.7.32-35-log
You need to add background-position to your css. Try this:
#sitename {
line-height: 100px;
background-image: url(images/dragonfayth.gif);
background-position: top center;
text-align: center;
background-repeat: no-repeat;
width: 400;
height: 150px;
}
Or you can try "background-position: center center;" but I like the top of my image to be at the top of the page. You'll also need to adjust the height match that of your image.
Ah, thank you so much for that! I neglected to remember that even though backgrounds are images too (when using the CSS tag that I did), they use different alignment attributes. THANK YOU! (I am curious, though, is there another way to specify a header IMAGE, rather than header "background" in CSS that's aligned centered?)
Archive: Dragonfayth
eFiction: 3.5.5/6
Latest Patch(es): Yes
bridged?: No
modified?: Yes
PHP: 7.4.25
MySQL: 5.7.32-35-log
You can add the image to your html like this:
<div id="header"><img src=""path/to/image.jpg"" height="x" width="y" alt="alttext" title="titletext"></div>
And your style should look like this:
#sitename {
line-height: 100px;
text-align: center;
}
You can align the image in the html, but that's been depreciated. Text-align: center in the css will center it though and it standards compliant.
Wait, the header DIV ID, rather than the site name one? I believe I had tried that method first, and while it took away the text produced by the {sitename} variable, it didn't put an image in... is that because it needed to be in the header DIV, rather than the sitename DIV ID?
Archive: Dragonfayth
eFiction: 3.5.5/6
Latest Patch(es): Yes
bridged?: No
modified?: Yes
PHP: 7.4.25
MySQL: 5.7.32-35-log
Actually, it should be banner. Try this:
CSS:
/* the box at the top of the page */
#banner {
text-align: center;
background: #214263;
padding-bottom: 3px;
border-bottom: 1px solid #000;
}
/* The appearance of your site's name in the banner area*/
#sitename {display: none;}
/* The appearance of your site's slogan in the banner area */
#slogan { display: none;}
HTML (Header.tpl):
<!-- START BLOCK : header -->
<body>
<div id="{page_id}">
<div id="banner"><img src=""image.jpg">"
<div id="sitename">{sitename}</div>
<div id="slogan">{slogan}</div>
<div id="skin">{skinchange_content}</div>
<div id="rss">{rss}</div>
{menu_content}
{login_content}
</div>
<div id="mainpage">
<!-- END BLOCK : header -->
Yikes, that removed the header area almost altogether! Now the top of the page begins with the top menu.
See: http://seventh-star.net/drfa
Archive: Dragonfayth
eFiction: 3.5.5/6
Latest Patch(es): Yes
bridged?: No
modified?: Yes
PHP: 7.4.25
MySQL: 5.7.32-35-log
It's because the path to your image isn't correct. It's looking in your main image folder instead of the skin folder. It'll probably be "skins/CSSZen/images/image.jpg" but you'll have to play around with it to see what will work on your server. Also, you'll need to add a height with width to your image, or in the CSS.
Okay, it was as you said-- looking in the main directory. I added height and width (along with alttext) to the img src HTML, and now everything looks great! Thanks again. 🙂
Archive: Dragonfayth
eFiction: 3.5.5/6
Latest Patch(es): Yes
bridged?: No
modified?: Yes
PHP: 7.4.25
MySQL: 5.7.32-35-log
Is this still an open issue? If there's no response in a week, we'll mark this topic as solved.
Nope, it's been solved. 🙂 Thanks everyone for all your help!
Archive: Dragonfayth
eFiction: 3.5.5/6
Latest Patch(es): Yes
bridged?: No
modified?: Yes
PHP: 7.4.25
MySQL: 5.7.32-35-log
