Jump to content
xisto Community
Sign in to follow this  
miladinoski

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

Recommended Posts

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:

 

Posted Image


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! :excl:

Share this post


Link to post
Share on other sites

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 by Baniboy (see edit history)

Share this post


Link to post
Share on other sites

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:

Share this post


Link to post
Share on other sites

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 by Baniboy (see edit history)

Share this post


Link to post
Share on other sites

...

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:

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:

Share this post


Link to post
Share on other sites

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! :(

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.