header gadgets in Weaver xtreme

[ehwh]

hello
with the header gadgets option on weaverIIpro I was able to put flags with links to my website in other languages ( I’m running a B&B )
I tried to do this in weaver xtreme  with HTML insertion  in header top. But the flags are put among each other instead of next to each other, and so messing up the header. How can I do this?
( see http://www.a-rigaud.nl   for the “old version” , see http://www.colombotte.nl, ( a site i ‘m building for a colleague)  for the new , i put just one flag ther because of the problem
I put in the {text-align: left;}  in the css custom styling, but that doesn’t help

[Weaver]

I don’t know where you really want to put the flags, but the idea that comes to my mind immediately would be to build a custom manu with the flag images as the link label, and then just use the Header Mini Menu.

[scrambler]

I only see one flag in the page you gave us, So I am not quite following what you mean by “But the flags are put among each other instead of next to each other”

if what you mean is that it is over the Title, to avoid that, you need to add the rule below in Advanced options > HTML Insertion >Pre Header BG CSS+ box

{overflow:hidden;}

So that area knows its height.

If not what you meant please elaborate

[Weaver]

@scrambler:

He said ” i put just one flag ther because of the problem”

I don’t know what styling was used, but there are clearly issues as the flag overlays other content.

The Weaver Xtreme Plus button shortcode could also be used for this in an HTML insertion area.

[scrambler]

Sorry I missed that note about a single flag 🙂

@weaver The HTML Insertion areas do not have overflow:hidden by default, so when people put floated content in them, the div does not know its height and causes the overlap.

Adding the overflow:hidden to the BG CSS+ area solves the issue

[ehwh]

Hello Weaver and scrambler,

Thanks for looking into it and your thinking along!
I used the {overflow:hidden}  in the css and that works, the only problem now is that the space between the top of the page and the tilte/headpicture has doubled.
You can see the difference :  http://www.colombotte.nl : is now with 2 flags,  http://en.colombotte.nl ( english version)  is for the moment without the flags.

[scrambler]

you have several things contributing to the Space at the top.

You have a 10px top margin set on the wrapper as well as a 20px top padding.

Images in the pre header carry a default top and bottom margin of 1em with the rule
You can change that by adding the rule below in Main options > Fonts & Custom > Custom CSS Rule box

#inject_preheader img {margin-top:.5em;margin-bottom:.5em;}
with the values you want

[ehwh]

@scrambler: Thank you for your help, I missed that completely, focused as I was on the html insertion

[Author]

Posts