Custom Header size and how to centralize

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Hi all,

hoping someone will have an easy answer to this one ;)

I wanted to add a custom Header (not banner) via CSS.
I did it and my image loads up no probs BUT it's not centralized.

What are the exact dimensions of a header to span the width of a website?
and/or how can I centralize the image of my header, so that it's sitting symmetrically above my MENU ?

Thanks in advance for any responses.

Mick
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes

Posted 5 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Mik,

Hoping that this W3C tip & trick may help.

Gop.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Gop... you again ;)

Thanks... great little tutorial.
Thing is, I added the header to the SITE TRACKING CODE area.

Don't suppose you can help me with a style snippet that I could add to this part?
I've tried a few times, but I obviously need a helping hand.. be much appreciated.

Thanks Gop ;)
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
SCRAP THAT - it worked!
I just need to centralize it all now.... thanks for the help so far!
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
The Menu is centralised, just the header not..
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I see you have
<img class="displayed" alt="" src="resources/SL_Banner2.jpg">

try:
<IMG class="displayed" alt="" src="resources/SL_Banner2.jpg">

The capitals will make a difference I think as they are different class names.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Hey Gob, thanks for that. When I accessed my tracking code section I noticed that IMG was in capitals. I did however copy the snippet you suggested, as it did differ slightly to what I had in place. It has not changed to the desired effect though... ?!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I tried it on a trial site: here and it's working as it should.

I set the Site CSS and the HTML in the Site Tracking both with uppercase IMG
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Hi Gop, thanks for your patients.. I really appreciate it!

Still not working, I'm sure it's my CSS - right?

See image attached ;)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Thanks for that confirmation.

Summary: we know that the syntax works so there's something else interfering. Wondering if there is a duplication of the class name IMG?

One way of trying to see if that is the case is to use a different class name and something that isn't used elsewhere. Suggest COMPANY. So simply replace IMG with COMPANY in both places and see how that goes.

The slider has a number of styling elements and I guess this may be interfering with the CSS interpretation??
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
I did that Gop... and cleared cache internet history etc.
It just ended up removing header completely.

I'm thinking you're spot on with regards to the Slider causing some issues. It's within the HTML I think.

But I simply replaced the IMG with COMPANY in both the CSS and TRACKING CODE

Mik
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
What the?

Just to test, I removed the CSS for the Slider, as well as the HTML for the slider

I tried a variation of IMG and COMPANY - Still, not centralising...?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Oops. I got that wrong. The class name is "displayed" so back to where you were and change "displayed" for "shown". That works on the trial site I indicated.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Hi Gop, sorry took so long to get back to you...
I changed both CSS and HTML in Site Track from displayed to shown

no change... I will try some variations.