johannes999

thanks ,
I didn’t see that
it solved the problem but one problem still exists.
when you look at the page :https://webdesignleren.net/contact/
every thing is OK besides the email field it doesn’t show itself on the background image.
de html code of the contactform is :

<div class="expanded row">
<div class="contact-formE small-12-column">	

<form id="my_form"   onsubmit="submitForm(); return false;"> 
<p><input id="n"  placeholder="Naam" required></p>
<p><input id="e"  placeholder="Email Address" type="email" required></p>
<p><input id="t"   placeholder="telefoon" ></p>
<p><input id="o"  placeholder="Onderwerp" required></p>
<textarea id="m"  placeholder="Uw bericht" rows="2" required></textarea>
<p><input id="mybtn"  type="submit" value="Submit Form"> <span id="status"></span></p>

</form> 

</div></div>

php code is :

 <?php
if( isset($_POST['n']) && isset($_POST['E']) && isset($_POST['t']) && isset($_POST['o']) && isset($_POST['M'] ) ) {
    
   $n = $_POST['n'];
   $e = $_POST['e'];
   $t =$_POST['t'];
   $o =$_POST['o'];
   $m =nl2br($_POST['m'] );
   $to ="[email protected]";
   $from = $e;
   $subject = 'Contact Form Message';
      $headers = "From: $from\n";
   $headers .="MIME-Version: 1.0\n";
   $headers .= "Content-type: text/html; charset=iso-8859-1\n";
  if(mail($to, $subject, $message, $headers)  ) {
       echo "success";
   } else {
      echo "The server Failed to sent the message. Please try again later.";
  }
}
?>

JQuery code is :

<script>
function _(id) { return document.getelementById(id) ; }
function submitform() {
         _("mybtn") .disabled = true;
         _("status") .innerHTML = 'please wait ...' ;
         var formdata = new FormData () ;
         formdata.append( "n", _("n") .value );
         formdata.append( "e", _("e") .value );
         formdata.append( "t", _("t") .value );
         formdata.append( "o", _("o") .value );
         formdata.append( "m", _("m") .value );
         var ajax =new XMLHttprequest () ;
         ajax.open( "POST", "example_parser.php" );
         ajax.onreadystatechange = function() {
              if (ajax.readyState == 4 && ajax.status == 200) {
                   if(ajax.responseText =="success") {
                      _("my_form") .innerHTML = '<h2>Thanks '+_("n") .value+', your message has been sent.</h2>';
          } else {
                _("status") .innerHTML =ajax.responseText;
                _("mybtn") .disabled =false;
                       }
            }
    }
      ajax.send( formdata );
}                   

</script>

and the CSS code is:

.contact-form-tekst {
font-size:1.2em;
font-weight:500;
margin-top:4em;
color:#074e68;
margin-left:-3%;
}

.contact-form {
margin-top:0.4em;
}

.contact-formT {
color:red;
margin-top:-26em;
margin-left:2%;
}

.contact-formE {

margin-left:2%;
margin-top:-24em;
}

#n{
width:40%;
border:0.1em solid red;

}

#e{
width:20%;
border:0.1em solid #228B22;
}

#t  {
width:20%;
border:0.1em solid #228B22;
}
#o {
width:20%;
border:0.1em solid #228B22;

}
#m {
width:40%;
border:0.1em solid #228B22;
margin-left:0.1%;

}

#mybtn{
width:12%;
border:0.1em solid #228B22;
}

what do you think what is the wrong is here that the email field only is not showing.
johannes

thanks,
the code didn’t work.
the second Question is:
on the right side of the contact page are some containers with borders which includes openig time facebook container ect.
the container for the the opening time for example has this CSS code:

.section-aside1  {
height:26em;
width:92%;
<strong>border:0.1em solid #074e68;</strong>
margin-top:0.4em;

}

this 0.1em solid borders for the container opening times was showing correctly and suddenly they disappeared.there is no borders showing anymore around every container on the right side of the contact page
I just looked with micrososft edge and opera the problem exists as in the chrome .
thanks
johannes

thanks
hovhannes

thanks,
I understand and I know about compression of images with special plug in.
just to get an idea which size do you personally will prefer or use for your projects for example for a website for auto repair service or something like similar?
hovhannes

Thanks,
I am working with foundation grid system it took me more than an hour to do what exactly you advised me .
it is solved anyway.
thank you
hovhannes

thanks
johannes

I see that the image which I had converted to svg format in Illustrator is not recognized in css with positive values(margin-top) but it is recognized with negative values to move it to upward(margin-top) or downward.

for example if I write this code:

.subsectionX-repair,
img {
margin-top:-42px;
}
`
then you can see on my website: https://webdesignleren.net/reparatie-ondehoud/

that the blue arrow logo has moved to upward in the subsection of container.
my questions are now :
1-what can be the reason I have to use negative values to let the svg format arrow to move upward or downward?
is this because when I converted jpeg to svg format the jpeg(image) is embedded in svg format?
2-shall this negative values cause problems with different browsers or it is not a problem at all to use negative values.

johannes

thanks ,
they are svg format.
here is an example:

<div class="subsectionX-repair small-6 column media-object-section">
    <img src="https://webdesignleren.net/wp-content/uploads/2016/11/auto-reparatie.svg" alt="auto-reparatie" class="alignnone size-medium wp-image-4249" />
  </div>

I have converted jpeg images into svg format in Illustrator, maybe this can be the problem .
I am going to test first with inserting some text and jpeg image in subsection class to see if the problem is solved.
thanks again
johannes

thanks ,
the section 1 and section 2 (under the class=”small-8 column”) as you tell in the example above.
its each border of it is divided into 2 subsections.

<div class=" media-object">
<div class="section-repair2">
<div class="subsection-repair2 small-6 column media-object-section">Grote beurt</div>

<div class="subsectionX-repair2 small-6 column media-object-section"><img src="https://webdesignleren.net/wp-content/uploads/2016/11/autopech-in-zomer.svg" alt="" />  </div>
</div>  </div>

foundation works with 12 column. so I have first divided the whole page into 2 sections
1- the left side into small-8 column..
2-the right side into small-4 column.
then I have created 4 borders in the left section( small-8 column)
now I have each border divided into 2 subsections
as example:
<div class=”small-8 column”>
<div class=”section1″>
<div class=”subsection1-first small-6 column> </div>
<div class=”subsection1-second small-6 column”> </div>
</div>
<div class=”section2″>
<div class=” subsection2-first small-6 column”> </div>
<div class=”subsection2-second small-6 column”> the picture url I have replaced here as example </div>
</div>
and the problem is that when I am using padding or margin to rplace the picture in the right position in the border the css code is not responding .exmple:
.subsection2-second {
padding-top:1rem;
or
margin-top:1rem;
}
so as you see the picture is not moving to its place as I tell in css>
thanks
johannes

thanks ,
I have cleared the cache and the problem is solved.
I have also learned from you how to detect ccs. folders if they are loaded or not!
it is under source tab in inspect elements.
thanks again.
johannes

when I write any code in style.ccs or in app.css is not been validated on the site.
for example I wrote this code in css :

.section1  {

border:1px solid green;

height:10rem;

}

.section2  {
height:10rem;

border:1px solid green;

}

.site-footer  {
border:1px solid black;
}

it is not recognizing any css code.
I had once such a problem I deleted the theme and uploaded again and the problem was solved.
johannes

the link is :
https://webdesignleren.net/wp-content/themes/auto-repair/style.css or app.css.

thanks ,
I have this code on my homepage (in dashboard):

<div class="expanded row">

<div class="section1 small-7 column">

</div>

<div class="section2 small-3 column">

</div>
</div>

and this is the url:https://webdesignleren.net/

thanks,
I changed it to jpg image like you adviced me and it resolved the problem.
johannes

thanks,

I have deleted most of the site because I wil try some other design .
I think there is enough to see the problem.
I use also superfly responsive menu plug in, I have deactivated it but the problem is not resolved.
I give you the link it is :https://webdesignleren.net/

I like to hear from you
johannes