www.wysiwygwebbuilder.com

Posted: **Sun Dec 02, 2018 9:55 am**

Good Day

You can find the HTML, CSS and two image files here: https://nofile.io/f/gC7SWoQTxOa/Desktop.zip

When you run the index.html file everything runs as design, but I have a problem importing the code into WB

WHAT I DID

1. Placed the following into Between <head></head> tag

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

2. Placed the following into After <body> tag

<section>
<div class="wave"></div>
</section>

3. With File Publisher I Add File

body.css
wave.png
aaa.jpg

When I preview it does not look the same as when you run the index file outside off WB. It is as if WB is ignoring part of the css file

Regards

Riaan

Posted: **Sun Dec 02, 2018 2:42 pm**

I seems to work correct for me, I do not see any problems
Please note that I cannot give support on custom code, because it generally takes a lot of time for me too.

Also, note that the behavior of the code has nothing to do with WWB.
Your code will be inserted "AS IS". If it does not work then either the code is invalid, incomplete or conflicts with other code on the page.

Posted: **Sun Dec 02, 2018 7:07 pm**

Just tried to download this on one of my PC's and is blocked by Windows Defender as deemed unsafe!!!.

Posted: **Mon Dec 03, 2018 7:26 am**

Hi BF

I can assure you that the file(s) are clean. In fact - it is so small I can even copy and paste the code here.

HTML CODE

<html>
<head>
<title> Wavy</title>
<link href="body.css" rel="stylesheet" type="text/css">
</head>

<body>
<section>
<div class="wave"></div>
</section>

</body>
</html>

CSS CODE

body
{
margin: 0;
padding: 0;
}
section
{
position: relative;
width: 100%;
height: 100vh;
background-image: url(aaa.jpg);
background-size: cover;
background-attachment: fixed;
}
section .wave
{
position: absolute;
width: 100%;
height: 143px;
bottom: 0;
left: 0;
background: url(wave.png);
opacity: 0.6;
animation: animate 10s linear infinite;
}
section .wave:before
{
content: '';
width: 100%;
height: 143;
background: url(wave.png);
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
animation: animate-reverse 10s linear infinite;
}
section .wave:after
{
content: '';
width: 100%;
height: 143;
background: url(wave.png);
position: absolute;
top: 0;
left: 0;
animation-delay: -5s;
opacity: 0.4;
animation: animate 20s linear infinite;
}
@keyframes animate
{
0%
{
background-position: 0;
}
100%
{
background-position: 1360px;
}
@keyframes animate-reverse
{
0%
{
background-position: 1360px;
}
100%
{
background-position: 0px;
}

}

Posted: **Mon Dec 03, 2018 7:41 am**

To explain a bit more:

When the 4 files are on your desktop and you run the index.html file, you will see the background picture as full screen. The wave effect is running in 3 stages with a difference in opacity.

BUT - When I import this into WB - the best I am able to see is the background picture as full screen, and the wave effect running in only 1 stage. That is why I am saying it is as if only the top part of the css file is being processed

I hope you understand what I mean

Regards

Riaan

Posted: **Mon Dec 03, 2018 7:44 am**

WWB does not change the behavior of the code. The code is interpreted by the browser.

Posted: **Mon Dec 03, 2018 10:41 am**

Hi Pablo

I understand that, but that does not bring me closer to understand why this is happening. As you can see from the code of the html and the css file it is not "major programming".

When you look at the page html code I can see that WB is going to create a css file during the publishing process. Maybe that is conflicting in some way with the css file that contains the custom code ??

One thing that I still don't understand is the purpose of the Inside <body> option. The way I understand this is:

After <body> - The custom code MUST be directly after the <body> tag, and no other code must be before that.
Before </body> - Code an be anywhere in the body tag, and other code may precede the custom code.
Inside <body> - No idea when this option must be used as opposed to the two above. What I do ss is that when I put the custom code in here, nothing works. But when I put the code in one of the other two, it works but with limited effect.

I have tested this outside of WB on Edge, Chrome and Firefox and it works.

I have tested this inside WB with Edge, Chrome and Firefox and all I see is the limited effect.

Regards

Riaan

Posted: **Mon Dec 03, 2018 10:59 am**

The only way I can help you with this is if I study the code you have inserted. This may take a lot of time for me. That is the reason why I cannot provide support on custom code.
If the code does not work then either the code is invalid, incomplete or it conflicts with other code on the page.
By adding custom code it is assumed that you know what you are doing and that you can detect these errors yourself.
If the code works outside WWB then it can also work with WWB.

'Inside <body' should be used for inserting custom attributes, not HTML or scripts.

Posted: **Mon Dec 03, 2018 12:22 pm**

Hi Pablo

I understand that you are busy, and I don't want to waste your time - But maybe this is something for you to look into for the future.

The quick solution to the problem is to add the following code from the original html file to the START of the page:

<link href="body.css" rel="stylesheet" type="text/css">
<section>
<div class="wave"></div>
</section>

When you then look at Page HTML, you will see the following, and I guess you will agree with me, that it is not correct, but somehow it works

<link href="body.css" rel="stylesheet" type="text/css">
<section>
<div class="wave"></div>
</section>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 14 - http://www.wysiwygwebbuilder.com">
<link href="Untitled1.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
</body>
</html>

The code when placed in the correct parts, should show it as follows, but for some reason then it does NOT work.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 14 - http://www.wysiwygwebbuilder.com">
<link href="Untitled1.css" rel="stylesheet">
<link href="page1.css" rel="stylesheet">
<link href="body.css" rel="stylesheet" type="text/css">
</head>
<body>
<section>
<div class="wave"></div>
</section>
</body>
</html>

Posted: **Mon Dec 03, 2018 12:34 pm**

This solution is not correct, this results in invalid HTML code.
Please do not blame the software for this issue. I think there is mistake in your code.
For example, the height property should have a unit.

Code: Select all

height: 143;

https://www.w3schools.com/cssref/css_units.asp

Posted: **Mon Dec 03, 2018 1:35 pm**

Hi Pablo

The height property is specified - Please see css

Regards

Riaan

Posted: **Mon Dec 03, 2018 1:37 pm**

Ahhh - I see what you mean.

Thank you Pablo, fault was indeed on my side

www.wysiwygwebbuilder.com

Insert HTML

Insert HTML

Re: Insert HTML

Re: Insert HTML

Re: Insert HTML

Re: Insert HTML

Re: Insert HTML

Re: Insert HTML

Re: Insert HTML

Re: Insert HTML

Re: Insert HTML

Re: Insert HTML

Re: Insert HTML