14 replies to this topic

[miladinoski]

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!! ).

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://pastebin.ca/1467770

Thank you kindly for your help!

[Baniboy]

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, 20 June 2009 - 06:09 PM.

[miladinoski]

Baniboy, on Jun 20 2009, 07:04 PM, said:

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!

[Baniboy]

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, 20 June 2009 - 06:57 PM.

[miladinoski]

Baniboy, on Jun 20 2009, 07:56 PM, said:

...

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!

[Saint_Michael]

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.

[-Sky-]

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.

[miladinoski]

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?

[miladinoski]

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!

[Saint_Michael]

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.