Urgent Css Help [resolved] Centering header in Demon theme AEF 1.0.9

Hi!

 

I have a really ugly problem with the header image (CSS most possibly) on my newly created AEF forum (thanks jlhaslip for pushing it here!! :angel:).

 

Here's how it looks now:

 

I want you to guid me/tell me what should I edit in style.css (or other files if style.css is not the problem maker) so the image and the text below should be centered on the forum page, here is the style.css of the theme: http://forums.xisto.com/no_longer_exists/

 

Thank you kindly for your help!

Well, in any element you want the text/image to be centered

Anyway, modify element in the css file. You can try this code, just add it to the end of the file.

.elementclass/#elementID {		text-align: center;}

Edited June 20, 2009 by Baniboy (see edit history)

Well, in any element you want the text/image to be centered

 

Anyway, modify element in the css file. You can try this code, just add it to the end of the file.

 

.elementclass/#elementID {[tab][/tab][tab][/tab]text-align: center;}

Well that didn't help at all. As you can see from the pastebin I gave you on line 88 I have the specified the header logo and it's height. Well, adding text-align: center; didn't help at all, the picture stays at the same spot

 

As you're more experienced, can you use FireBug or w/e you're using to inspect the forum and tell me what I'm missing?

 

.header{background:url(images/aeflogo.jpg);height:223px;text-align: center;}

Thanks for your help nevertheless, I appreciate it! :angel:

The picture stays on the same spot because it's not an image inserted in img-tags. Text-align is the attribute for the elements inside an element, forexample text or images.

The picture in the header is displayed as a background image, so it's "attached" to the element itself, you can correct that by replacing

this line:

background:url(images/aeflogo.jpg);

with this line:

background:url(images/aeflogo.jpg) center;

Because it's just a definition "background", you can enter other other styling regarding the background too, directly in there, because it's not a "background-image" or "background-position".

If you want to position a background separetaly without using quicktype, you can do this with "background-position: right/left/top/bottom/pixel values;". And of course use text-align for aligning the text you want centered.
Edited June 20, 2009 by Baniboy (see edit history)

...

I'm sorry to say this, but that still doesn't center the header, here's the code I used following your example:

.header{background:url(images/aeflogo.jpg) center;height:223px;text-align: center;}

The picture still stays on the same spot, do I need to do something else?

Thanks so far! :angel:

It took a bit but I solved your problem, I think, go to line 88 where the CSS for the header is at

.header{background:url(images/aeflogo.jpg) center;height:223px;text-align: center;background-position: 220px;}

Then to center everything replace it with the following code:

.header{background:url(images/aeflogo.jpg) center;width:100%;height:223px;text-align: center;background-position: 220px;}

That should center everything, won't know what it will do to the image if it doesn't stretch out. However, try that piece of code and see if it works and we can go from there.

Hmm. I don't quite know what's wrong there. But there is obviously something wrong in the style sheet. I don't know what to do to give you help. :/ Sorry.

Saint_Michael that doesn't work either! It didn't change anything in the site layout, everything just stays the same...I'm really sick and tired of this! A theory from me: maybe it isn't the stylesheet but the whole layout of the site? What do you think? :angel:

I solved it, a friend helped me, I made .welcome look like this and it's centered now!

.welcome{color: #FFFFFF;font-size:12px;text-align: center;

Mods you can close this thread now!

I had to wait and see what it looked like but now I fixed it and so you have to make two changes to your CSS and it should work.

This is your new wrap code

.wrap {	background:#555 url(images/wrapbg.gif) fixed;	width:745px;border:2px solid #333;	margin:0px auto;padding:1px 12px 12px 12px;	text-align: left;}

Updated Header code:

.header{height:223px;width:100%;text-align: center;background-position: 220px;}

Now this should work for you miladinoski and let me know that you got it up to take a look to make sure.

The CSS doesn't provide me with enough information on the element it is modifying. However, after having a look at the forum's source code, it turns out we're messing with a table, which already has a predefined width, and, according to the source code i'm viewing as of this posting, has an image in it. So, i would suggest the following for the header class (assuming the image element remains and the width of the table is predefined in the HTML):

.header {margin-left: auto;margin-right: auto;}

This CSS won't work if there is no defined width for the element.

I have also spotted an error, as of this posting, in your HTML:

<table border="0" cellpadding="0" cellspacing="0" width="744px" class="header"><td align="right" class="welcome">

should be:

<table border="0" cellpadding="0" cellspacing="0" width="744px" class="header"><tr><td align="right" class="welcome">

You'll have to verify things on your end before we can continue.

EDIT: seems i was a bit late.

Saint Michael, that works even better, but that messes up the categories and the whole layout of the site.. see the atachment if you want to see what I mean...

Edited June 20, 2009 by miladinoski (see edit history)

Adjust the width of the wrap div by 5 pixels and see if it comes back up and then the best thing to do is redesign the banner to that width to correct it.

Forget everything else, just adding:

 

margin-left: auto;margin-right: auto;

to .header solves the problem and REALLY solves it! The image is centered and everything is okay

 

Thanks everyone, you're really kind!

Topic is resolved.Please PM any moderator to continue this discussion. Until then, this topic is closed.