Problem with Form / Covers

[Acorn]

You can make the CSS coding semi-automatic with CSS variables but this cannot handle percentages as used in the @kayframes statement.
Instead, you can calculate the percentages by hand (calculator) or I have also used MS Excel.
Doing so loses the closer understanding of what is happening.

Here is another demo: CSS - Simple Fading Clock Face.xar.

You could use the lower left CSS and the calculated @keyframes together to allow you to have any number of images.

Acorn

[rhdpre07]

Ho 07, I see there are problems. On the REPARACIONES page there are two forms. If I submit the one on the left the page tells me the form has been submitted then disappears but the top slider height is reduced and the menu disappears. The form on the right acts similarly but the slider remains the same height but the menu disappears. Without seeing your xar file I wouldn't like to say what exactly is causing it. Firstly try the forms on their own dedicated page. Do they work correctly on this? I suspect it's the form. On completion the reply height of the form is far smaller than the fill-in section which is causing this issue within the placeholder.

As an aside I dislike the mouse-over effect opening your pages rather than an on click opening.

I'm looking for "a pattern" to understand the problem (I've been able to dedicate very little time to it...

Thanks..good advice

[rhdpre07]

Body

<img src = "fondo1.jpg" class = "slider" />
<img src = "fondo2.jpg" class = "slider" />
<img src = "fondo3.jpg" class = "slider" />
<img src = "fondo4.jpg" class = "slider" />
<img src = "fondo5.jpg" class = "slider" />
<img src = "fondo6.jpg" class = "slider" />
<img src = "fondo7.jpg" class = "slider" />
<img src = "fondo8.jpg" class = "slider" />
<img src = "fondo9.jpg" class = "slider" />
<img src = "fondo10.jpg" class = "slider" />
<script>
var imagenes = document.getElementsByClassName("slider"),
total = imagenes.length;
indice = 0;

imagenes[indice].style.opacity = 1;

var slider = {
show: function(){
imagenes[indice].style.opacity = 0;
indice = indice == total - 1 ? 0 : ++indice;
imagenes[indice].style.opacity = 1;
}
};

setInterval(slider.show, 5000);
</script>


head

<link href="cookies.css" rel="stylesheet" type="text/css">


<style id="jsbin-css">
body{
background: black;
}

.slider{
width: 100%;
height: 100%;
position: fixed; z-index: -1;
//margin: -7em 0 0 -10em;
top: 0;
left:0;
opacity: 0;
transition: opacity 1s;
background-repeat: repeat
}
</style>

[rhdpre07]

It is a clutch of sticky images set with no opacity and a JS timer that makes each one visible in turn every 5 seconds.
A CSS solution would be cleaner.

Acorn

could you share some?


EDIT...I just saw your answer

[rhdpre07]

The problem, in addition to the forms, occurs with the menu and "link the anchor"

At first I thought it was some incompatibility with the forms...
When you click on the sub-menus it eats all the content that is above that marker...

I'm totally lost...


https://www.parquetbeckfloor.es/

[Initiostar]

One problem with your slider is images become horizontally compressed (distorted), as can be seen when you squeeze a desktop browser. Acorn's fade-in fade-out slider in this thread works well, but if you could live with a "crossfade" transition, you could create a slider as a separate website and embed this into your main website.

Here is an example: https://initiostar.co.uk/demo/pan/index.htm. The upside in this example is the website slider can have a mobile variant which will correctly display in the main website with little additional effort. Automated transition for the slider has a number of options, but can be just one line of code.

On the Forms issue, Acorn showed a solution for having just one copy of a form that works across multiple variants - Jot Form example here: https://initiostar.co.uk/demo/formtest/-. I cannot tell whether this helps or not, but you could first remove the slider which seems to be causing an issue and check the outcome.