One more question about header

plocploc / 2012-10-26 18:18:49   

HEllo

The previous thread (indexhibit.org/forum/thread/17159/) has been closed

I manage to show my header but when I change screen resolution (my laptop for example) this banner dispears. Can't find how to do a variable position depending on screen size, and window size.
I've tried during a couple of hours without success.

Any idea ?

Hope I'm clear (young kids around me)

Thanks

Vaska A / 2012-10-26 18:23:51   

Eek, that's hard - you need javascript to adjust things via monitor size.

I don't understand why your header needs a width of 1920px. If you set it at width 100% it should scale perfectly...

plocploc / 2012-10-26 19:13:43   

Thanks for your answer, Vaska

1920px follows Arsondpi's code
I changed it into 100%
But nothing happens

About monitor size, i thought this header could behave like index+exhibit which are nice on my laptop and my big monitor. Of course you've done the index+exhibit stuff so it works.

Thanks anyway

Vaska A / 2012-10-26 19:16:56   

Why is left set to 250? Shouldn't it be 0?

It did change things - now your name is at the far left of the monitor.

Vaska A / 2012-10-26 19:20:30   

Another way to go about doing this...if you want it centered in/over the #exhibit region is to simply add the header to the template - within #exhibit .container just before the plugin that displays the exhibit.

Then, it would be even more simple...

  1. #exhibit .container #header {
  2. width: 100%
  3. height: 250px;
  4. background: url ( etc ) center center no-repeat;
  5. }

There are really alot of ways to do this - I'm not saying the previous way is wrong, but it didn't take into account monitor issues (1920 is too wide).

plocploc / 2012-10-26 19:33:06   

Thanks very much to give me some precious time

As you can see my name is pretty long so it doesn't fit above index area. That's why i wanted to try a head with my name on the right (not left). I thought it would be better balanced like this.

I'll try your solution and change center into "right".

I'll let you know

Thanks again for your answer and the terrific work !

arsondpi / 2012-10-27 07:40:43   

to be honest I copied what was already there...
You can have your name overlap the menu even when it's placed on the left (I've got a really long name as well)...
As Vaska said there's a lot of ways to do this - it does come down to what you're after (and I just noticed you reverted to the original layout)

plocploc / 2012-10-27 10:10:48   

YEs I reverted because no solution was good enough

With your codes, it was working with my large screen but the name disappeared on my laptop's screen)

I'm sure it's not so hard to fix but it will take me time . I'll this afternoon...

Thanks

arsondpi / 2012-10-27 10:42:35   

try it again and repost the url - let's have a go at it this weekend...

plocploc / 2012-10-27 12:55:43   

Thanks Arsondpi for your determination

I've made a medium solution working both for my major and little screens

I jiggled around the codes from you and Vask

For now it's like this :

  1.   #header { position: fixed; 
  2.         background: url("aymericvergnon.net/files/dimgs/…;) center right no-repeat;
  3.         height: 150px;
  4.         width: 1300px; 
  5.         top: 0;
  6.         left: 0;
  7.         z-index: 9999;
  8.     }
  9.     #index { height: auto; top: 80px; } 
  10.     #exhibit { position: relative; top: auto; right:auto; margin: 50px 0 0 250px; }

It's not a brilliant solution but it works

Any piece of advice would be nice but don't waste your time. It's saturday !

All the best

aymericvergnon.net

arsondpi / 2012-10-27 13:18:29   

Just add a width: 100%; to your #header instead.

I'm not sure about the position of your #index and #exhibit - there's overlap in all three div's.
Basicaly if want to align things, the height of your #header should be equal to the top value of your #index and the top margin of your #exhibit.
Also the width of your #index should be equal to the left margin of #exhibit
In other words:

  1. #header { position: fixed; 
  2.         background: url('URL_OF_YOUR_LOGO') center right no-repeat;
  3.         height: XXXpx;
  4.         width: 100%; 
  5.         top: 0;
  6.         left: 0;
  7.         z-index: 9999;
  8.     }
  9.     #index { height: auto; top: XXXpx; width: YYYpx; } 
  10.     #exhibit { position: relative; top: auto; right:auto; margin: XXXpx 0 0 YYYpx; }
plocploc / 2012-10-27 15:01:27   

thanks

I've changed the width. My logo is far right but it's work
I've changed the differents values you mentionned. But there's a slight difference between index and exhibit thought it should be equal

I'll have a more accurate look asap. Thanks very much for your help

Vaska A / 2012-10-27 15:46:38   

I don't know why you don't make the name slightly smaller...increase the width of #index...decrease the left padding of #exhibit...

Things would fit properly then.

Right now, your name is far right and that will look strange on some monitors (being in an odd place). To be honest, I don't see the need for a header the way you are using it - just my opinion though.

plocploc / 2012-10-27 16:42:51   

I really want to thank you guys for your help : through the magical way of the www, I send you a typical smelly old french cheese.

Vaska, your opinion matters. I'll consider that. The previous layout was sober but I thought my name was too long to be above the index and being visible at the same time.

I'll consider all that very soon.

Enjoy this french cheese as thanking !!!

This thread has been closed, thank you.