WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Centering banner?

Go to page : 1, 2  Next

View previous topic View next topic Go down  Message [Page 1 of 2]

1Centering banner? Empty Centering banner? Sun Apr 01, 2012 3:06 am

Josh

Josh
Registered Member
Registered Member
Hi guys!

I am trying to center a banner wider than my forum width on PhpBB2, but it is making it offcenter with the offset to the right:

https://i.imgur.com/3f4Dr.png

Does anyone know how I could fix this? One idea I had was to remove the banner under pics management and then put an image in its place via the CSS stylesheet, but I'm not sure on the code for that. Or maybe there is an easier fix.

Thank you!

2Centering banner? Empty Re: Centering banner? Sun Apr 01, 2012 4:33 am

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
Just for header add in css :
Code:
margin-left:ypx;
y - is any number
You try experiment how much you want it left.

3Centering banner? Empty Re: Centering banner? Sun Apr 01, 2012 5:43 am

Josh

Josh
Registered Member
Registered Member
Is it possible to 'center' it, though? Since the y-variation would vary on every screen, I think

4Centering banner? Empty Re: Centering banner? Sun Apr 01, 2012 6:09 am

Mr.Joker

Mr.Joker
Mr. WebArtz
Mr. WebArtz
Try to add for header:
Code:
margin-left:auto;
margin-right:auto;

5Centering banner? Empty Re: Centering banner? Sun Apr 01, 2012 6:27 am

Josh

Josh
Registered Member
Registered Member
Doesn't seem to change it

6Centering banner? Empty Re: Centering banner? Sun Apr 01, 2012 4:58 pm

Sanket

Sanket
Administrator
Administrator
Forum URL?

http://www.webartzforum.com

7Centering banner? Empty Re: Centering banner? Sun Apr 01, 2012 10:29 pm

Josh

Josh
Registered Member
Registered Member
http://trforums.com

I'm currently using a smaller banner, but I can switch to the larger one if needed.

8Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 12:01 am

Matti

Matti
Registered Member
Registered Member
your banner shows in center?

http://csshelp.forumotion.net/

9Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 3:21 am

Josh

Josh
Registered Member
Registered Member
It is not as noticeable with a smaller banner, check now.

10Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 4:05 am

Matti

Matti
Registered Member
Registered Member
your logo is to big, but try this

Code:
#logo-desc {
    margin-top: -350px;
    margin-left: -180px;
}

and see if it works

http://csshelp.forumotion.net/

11Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 4:17 am

Josh

Josh
Registered Member
Registered Member
Hm, it just seems to throw it off in the other direction, and I think it varies per screen when you zoom in/out. Is it possible to add a center attribute to the header image?

edit: and if that isn't possible, could I just add a new centered image in CSS, that is centered?

12Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 4:37 am

Matti

Matti
Registered Member
Registered Member
Hey Josh, if you have your banner to Pics management Forum main logo you can remove it and add this css code.



Code:
#logo-desc {
    background-image: url("http://i.imgur.com/xAJTe.png");
    background-position: center center;
}

http://csshelp.forumotion.net/

13Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 4:43 am

Josh

Josh
Registered Member
Registered Member
I think that might work, although it seems to be making it very thin now?

14Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 4:44 am

Matti

Matti
Registered Member
Registered Member
put this on the code height: 345px;

http://csshelp.forumotion.net/

15Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 4:46 am

Josh

Josh
Registered Member
Registered Member
Getting there, it is in the forum body now though?

edit: should the code be put in .headerbar instead?

16Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 4:48 am

Matti

Matti
Registered Member
Registered Member
add this then margin-top: -350px;

http://csshelp.forumotion.net/

17Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 4:56 am

Josh

Josh
Registered Member
Registered Member
That seems to work, thank you so much!

edit: actually, it's centered now, but it seems to be cropped now because of the forum width. Is this possible to fix, so it is not cropped but still centered?

18Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 5:01 am

Matti

Matti
Registered Member
Registered Member
I did some more fixing with FB so you can have full width banner so if you want you can replace that code with this one.

Code:
#logo-desc {
    background-image: url("http://i.imgur.com/xAJTe.png");
    background-position: center center;
    height: 345px;
    margin-top: -350px;
    width: 1400px;
    margin-left: -167px;
}

http://csshelp.forumotion.net/

19Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 5:04 am

Josh

Josh
Registered Member
Registered Member
seems to be skewed again?

http://trforums.com

20Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 5:10 am

Matti

Matti
Registered Member
Registered Member
Hmm in my computer is looking fine.

Centering banner? Tr10

http://csshelp.forumotion.net/

21Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 5:11 am

Josh

Josh
Registered Member
Registered Member
Hm, I may not be universal then, because of the -167px? Is there somewhere else in the CSS that crops the banner width?

22Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 11:38 am

ankillien

ankillien
Administrator
Administrator
The best way is to reduce the banner width to fit the header, or remove the width and margin-left from #logo-desc, wih this code...

Code:
#logo-desc {
margin-left: auto;
width: auto;
}

23Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 9:40 pm

Josh

Josh
Registered Member
Registered Member
Like this?

Code:
#logo-desc {
    background-image: url("http://i.imgur.com/xAJTe.png");
    background-position: center center;
    height: 345px;
    margin-top: -350px;
    margin-left: auto;
    width: auto;
}

That centers it again, but it seems to crop the banner to the fixed width of the header (the width of the forum). Is it possible to have a wider banner than the set width, so it isn't cropped?

24Centering banner? Empty Re: Centering banner? Mon Apr 02, 2012 10:18 pm

ankillien

ankillien
Administrator
Administrator
Certainly possible.

You need to take the headerbar out of the forum wrap, use this javascript for that...

Code:
$(function(){
var headElem = $('.headerbar').html();
$('.headerbar').hide();
$('#wrap').before('<div class="headerbar">'+headElem+'</div>');
});

Now you need some CSS fix, like remove negative margin for header bar and top margin for the wrap, do it with this CSS code...

Code:
#wrap , #logo-desc {
margin-top: 0px;
}

Let me know if it works Smile

25Centering banner? Empty Re: Centering banner? Wed Jan 16, 2013 7:24 pm

ahamadhussain


Registered Member
Registered Member
Hi..
I have been worked the banner centered.
The following code worked properly...
.classname img
{
display:block;
margin-left:auto;
margin-right:auto;
}

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 2]

Go to page : 1, 2  Next

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Centering banner?

Permissions in this forum:
You cannot reply to topics in this forum