How to reduce the gap between header and first item?
Author: David F.
Visited 737,
Followers 1,
Shared 0
I have converted from version 9 to 2023 via version 12. Most things I have sorted but I still have a large gap between the header content and the first text box.
The Header is 125 high which just clears the diamonds at each end.
The menu in the side bar sits tight to the header but the first text box start a long way down.
This version is still under development but you can see what I want to achieve on the current site WWW.oldwinburnians.org.uk
Any help apreciated
David
Posted on the
The small error probably won't bother visitors, so you can put the website created with the 2023 version online so that the moderators can look for the error.
David, just in case you did not realise, going to your existing site throws up this warning
Anyway, as Daniel said, it would be easier to identify the problem if we could examine the new website, perhaps you could upload the site into a temporary folder on your site (eg WWW.oldwinburnians.org.uk/new).
Have you checked that both the header and header background are set to 125?
Please also be aware that in the conversion the text has been changed to an image, also, any colours you may have set have not been implemented, but a colour image has been used (this will also apply to menu colours). Look for any images in your new header and after replacing with text and setting background colours, etc, remove all unnecessary images from the new header as these could be taking up space and causing layout errors.
Author
OK
Esahc thank you very much for your comments.
I have completely replaced the header, with one I created from scratch in 2023.
It still has unused space between it and the first page content.
BUT NOW, it and the footer are sticky!
I've seen many posts wishing to achieve this but I've got it and I don't want it!
The x5/2023 version is now live, easily distingished by the sharper focus header.
I have a couple of other problems but I'll make those sepparate posts because they don't concern the header.
As always thank for any help
David
Author
FTML
The menu on the left rolls over the header but the rest of the page goes behind.
When the page scrolls you can see a small portion of it above the header, does help explain the gap between header and text?
always in the context of renovation I advise you to take the path of the responsive site
David, in step 2, template structure, please ensure you have in fact set the height to 125 (if it is set to 0 the sticky bar will always display by default).
In step 2 sticky bar, ensure it is turned off
You may also wish to check step 1, statistics and code (if it exists in Evo) to ensure no "clever" code has been used in the distant past to overcome limitations in V9 and earlier.
Similarly please check page properties for each page for unnecessary code.
For what it's worth
In the dim dark past when I upgraded a number of sites from V9 I decided that it was easier to recreate the site/s afresh (you can open 2 copies of WX5 simultaneously and then copy and past objects between projects) to resolve strange anomolies similar to those you are experiencing.
Author
Esahc
Thanks very much for your crystal clear input. I'm using evo not pro but I have checked what you say.
Header height , and header background height both 125
Sticky bar is off.
There was some hit counter code but I have removed all that from statistic and code, and pages.
I still have sticky headers and footers on every page and a gap at the top.
I will try cut and paste from version 9 or 12 but I begin to wonder if it would be simpler to lear a proper website creator.
Thanks again, if I do fix it I'll post here
David
Author
Well I've found the code that's causing the problem; x5 is adding:
#imHeader {position: fixed; left: 50%; margin-left: -480px; z-index: 50;}
and
#imFooter {position:fixed; left: 50%; margin-left: -480px; bottom:0px; z-index: 50;}
Near the end of each pages html.
Now if anyone can tell me where in X5 the switch for these lines is I would be a happy bunny
Hello David
I'm afraid these lines are there by default in the software and cannot be removed. You need to add further CSS code that overwrites this with other rules if you want to modify this behavior, but the Staff cannot unfortunately provide support for custom codes, I'm sorry
I remain available here just in case
Stefano
David, I know it is a large amount of work, but if it was me I would update from 2023.3.4 to 2023.3.4 by opening 2 copies of WX5 and copy paste content between projects. I would further plan on only having the vertical menu on the desktop page with a horizontal menu on tablet/mobile pages (be aware that by restricting the width and increasing the depth available for the menu you can have multiple rows of menu items), I would also start with the project set to responsive, not desktop (step 2, responsive design).
I believe that the transformation of your V9 project into your V2023.3.4 project has embedded spurious code resulting in the glitch in your existing header (and potentially other objects in the project). As I said, in the past I found it far quicker and the results were far more pleasing when I recreated the site/s. Many objects in your V9 code may no longer be supported, you will do a far better job recreating these objects using todays options than WX5 was able to do in trying to replicate superseded code.