Jump to content

Peter64

Members
 View Profile  See their activity

  • Posts

    34

  • Joined

  • Last visited

 Content Type 

Everything posted by Peter64

  1. Peter64
    Thanks again for the reply. Then when validator says that the HTML is okay I am on the right way. But now: is there a site or video on Youtube that makes it easier for me to onderstand how I should eleminate render-blocking css. My knowledge is poor when it comes to this.
  2. Peter64
    Thanks for your reply. Here it is where I have seen this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery. Sorry the page is dutch, it appears in dutch automatically. Allmost at the end it says: <html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div> </body></html><link rel="stylesheet" href="small.css"> Maybe I see this wrong, that could be, but I thought that I should place the minor css after the body tag. Thanks again.
  3. Peter64
    I am testing my website with Google's PageSpeed Insights. But I can't figger out what to do or how to do this. When I am correct I have to put the most elementary css in-line so the first page can be loaded to be displayed a.s.a.p., The rest of the css should as google says be placed after the closing body tag. But first when I do that I get in conflict with https://validator.w3.org/ ( they want me to have css in the head section ) and how do I know what css is so important that I have to place it in-line to make things properly? Searching on the internet I found: http://jonassebastianohlsson.com/criticalpathcssgenerator/, but I have changed the absolute paths of the images and the clearing floats to .cd-container::after { content: ''; display: table; clear: both;} and I still get an error. I found things like criticalCSS/filamentgroup, critical by addyosmani or penthouse by pocketjoso and the seem to do the job but I am pretty new with these things an can't figger out what is the best way to handel this. Could someone tell me what is the best way to approach this matter and where I can find how to do this ( explained in an easy way so I can understand this ). The last days I have been searching, the haystack is growing and the needle is schrinking. The website is displayed at http://main-site.nl/ Thanks
  4. Peter64
    LOOK UP and Newbie first of all thanks for the reply. Look up thanks for the explanation and the complete rewritten script I will try to replace this for the old script. Newbie you are completly right I know that, the most errors are in the "gallery" section. But this is my first website (I realy didn't have a clue about html, css etc., now I know just a little bit more) and I am struggling for 3 months to get things working. One by one I try to solve the problems, to be honest when I try to solve them all at ones I go crazy. I try to catch up by reading books and the internet but there are not all the solutions that I need and I am 50 years old, so I don't know if school will be the right place for me. I tried to find paid help who could help me out by explaining what I am doing wrong but that isn't as easy as I thought. So when there is a solution that you know of which could help me out with learning and correcting my script please inform me. Again many thanks to the both of you for your time
  5. Peter64
    Thanks this worked out just fine, could you tell me: is ther an easier way to create this and so to avoid this problem. ( Other words what way would be better to create an overlay over an image with out having this problem? Needless to say that this is alle new for me. Thanks again, I owe you a beer
  6. Peter64
    Thanks or your reply. About the margin and float you are right. It is the first time I try to build a website for the first time and sometimes I try and try to solve things by adding all kind of changes, hoping that these changes will work out. But untill now they havend. Here is the link: http://main-site.nl/.
  7. Peter64
    I am trying to create my first website and there is one problem that I can't get fixed. I have 3 images placed in line and the idea is that by hovering over the images there sould appear a colored layer. So far so good, but the problem is that by hovering over the image the width of the layer is okay but it is to high. It seems that the bottom of the layer is following the class="cd-container". I have tried to change magin, padding, display etc, without succes. (I have add 2 printscreens) Could any one tell me what I am doing wrong. The html: <div class="cd-container"> <div class="container-work"> <div class="title-page-work"> <p class="title-work">Een gedeelte van ons werk.</p> </div> <div class="text-page-work"> <p class="description-work">Hover over de foto’s voor meer informatie over de site, wanneer de foto wordt aangeklikt wordt men doorgestuurd naar de betreffende website.</p> </div> <div class="container-work-items"> <div id="work-1"> <div id="work-img-1"><img src="work/thumbs/work1.jpg" alt="Muzieklessen-Berkelland"> <div class="layer-work-1"> <div id="logo-1"><a href="https://muzieklessen-berkelland.nl/" target='_blank'><img src="work/thumbs/Logo_Ton_Rita_lijn_transparant.png" alt="Muzieklessen-Berkelland"></a></div> </div> </div> </div> <div id="work-2"> <div id="work-img-2"><img src="work/thumbs/work2.jpg" alt="Dutchview.us"> <div class="layer-work-2"> <div id="logo-2"><a href="http://dutchview.us/" target='_blank'><img src="work/thumbs/Dutch_view_transparant.png" alt="Dutchview.us"></a></div> </div> </div> </div> <div id="work-3"> <div id="work-img-3"><img src="work/thumbs/work3.jpg" alt="Loonbedrijf te Riet Haaksbergen"> <div class="layer-work-3"> <div id="logo-3"><a href="http://loonbedrijfteriet.nl/" target='_blank'><img src="work/thumbs/te_riet.png" alt="Loonbedrijf te Riet Haaksbergen"></a></div> </div> </div> </div> </div> </div></div> and the css looks like: .cd-container { width: 100%; max-width: 100%; margin: 0 auto;}.cd-container::after { /* clearfix */ content: ''; display: table; clear: both;}.container-work { width: 100%; position: relative; float: right;}.description{ width: 100%; height: 30px; margin-left: auto; margin-right: auto; position: relative; margin-top: 90px;}.description-work { text-align: center; margin-left: auto; margin-right: auto;}.title-page-work { width: 100%; max-width: 1170px; height: 40px; margin-top: -2%; margin-left: auto; margin-right: auto; position: relative; text-align: center;}.title-page-work p{ font-size: 40px; font-weight: 200; color: #000000;}.text-page-work { width: 100%; max-width: 1170px; height: 20px; margin-top: 2.5%; margin-left: auto; margin-right: auto; position: relative;}.text-page-work p{ font-size: 20px; font-weight: 200; color: #000000;}.container-work-items { width: 100%; padding-top: 7%; }#work-1 { width: 33.333%; position:relative; height: 100%; display: inline-block; float: left;}#work-img-1 { width: 100%; position:relative; height: 100%; text-align: center;}.layer-work-1 { height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; position: absolute; background: rgba(22, 254, 22, 0.9); opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}.layer-work-1:hover { opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}#logo-1 { position: relative; z-index: 2; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}#work-2 { width: 33.333%; position:relative; height: 45vh; display: inline-block; float: left;}#work-img-2 { width: 100%; position:relative; height: 100%; text-align: center;}.layer-work-2 { height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; position: absolute; background: rgba(149, 247, 247, 0.9); opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}.layer-work-2:hover { opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}#logo-2 { position: relative; z-index: 2; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}#work-3 { width: 33.333%; position:relative; height: 45vh; display: inline-block; float: left;}#work-img-3 { width: 100%; position:relative; height: 100%; text-align: center;}.layer-work-3 { height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; position: absolute; background: rgba(224, 221, 221, 0.9); opacity: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}.layer-work-3:hover { opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}#logo-3 { position: relative; z-index: 2; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);} Maybe is someone willing to look what I have done wrong and how I can fix this. Thanks
  8. Peter64
    Thanx for the reply. I have tried to change the code to ( with help of searching the internet ): <?php require_once 'validation.php'; ?><?php// We gaan de errors in een array bijhouden$aErrors = array();if ('POST' == $_SERVER['REQUEST_METHOD']) { // Er zijn gegevens verstuurd naar deze pagina! // Een naam bevat letters en spaties (minimaal 3) if ( !isset($_POST['name']) or !preg_match( '~^[w ]{3,}$~', $_POST['name'] ) ) { $aErrors['name'] = 'Please fill in your name'; } // Een email-adres is wat ingewikkelder if ( !isset($_POST['email']) or !preg_match( '~^[a-z0-9][a-z0-9_.-]*@([a-z0-9]+.)*[a-z0-9][a-z0-9-]+.([a-z]{2,6})$~i', $_POST['email'] ) ) { $aErrors['email'] = 'Please fill in your e-mail address'; } // Een adres heeft letters, cijfers, spaties (minimaal 5) if ( !isset($_POST['message']) or !preg_match( '~^[wd ]{28,}$~', $_POST['message'] ) ) { $aErrors['message'] = 'What would you like to share?'; } if ( count($aErrors) == 0 ) { // We hebben alle gegevens // Gegevens verwerken! // Volgende pagina aub header('Location: http://www.phpfreakz.nl/someotherpage.php'); exit(); }}/************************************************************************************************************* Hier kunnen we een hele grote streep trekken. Alles wat hierboven was, was verwerking van de data, acties ** bepalen etc. Alles wat hieronder staat, draait alleen maar om de uitvoer en de feedback. Niets hieronder ** schrijft dingen naar de database, niets hierboven schrijft iets naar het scherm. Zo houden we het model ** van de pagina gescheiden van de weergave! *************************************************************************************************************/?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Forms</title> <style type="text/css"> .errorlist, .error input{ border: 1px solid #f00; background: #fdd; } form.cmxform fieldset { margin-bottom: 10px; } form.cmxform legend { padding: 0 2px; font-weight: bold; } form.cmxform label { display: inline-block; line-height: 1.8; vertical-align: top; } form.cmxform em { font-weight: bold; font-style: normal; color: #f00; } form.cmxform label { width: 100%; /* Width of labels */ } input { width: 80%; height: 35px; margin-left: auto; margin-right: auto; } .contact { width: 100%; } .formfield { width: 80%; margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="contact"> <div class="formfield"> <form action="index.php" method="post" class="cmxform"> <p>Please complete the form below. Mandatory fields marked <em>*</em></p> <fieldset> <div class="fieldset"> <legend>Delivery Details</legend> <input id="name" name="name" placeholder="What is your name?" value="<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>" /> <div error="email"> <?php validation($email); ?> </div> <input id="email" name="email" placeholder="email" value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>" /> <div error="message"> <?php validation($message); ?> </div> <input id="message" name="message" placeholder="message" value="<?php echo isset($_POST['message']) ? htmlspecialchars($_POST['message']) : '' ?>" /> <input type="submit" value="Verstuur" /> </div> </fieldset> </form> </div> </div> </body></html> I hoped by creating div's for the error messages it would make it easy to position the error messages. The validation.php looks like: <?php if ( isset($aErrors['error']) and count($aErrors['error']) > 0 ) { print '<div class="errorlist">'; if ( $aErrors['error'] ) { print 'div' . $aErrors . '</div>' ; } print '</div>'; }?> But the error that keeps appearing is: Fatal error: Call to undefined function validation() in /Users/gebruiker/Documents/MAMP/htdocs/validation kopie 2/index.php on line 104. Thanks again
  9. Peter64
    I could use some help with the following problem: I have a contact formwith validation and it works fine. But there are 2 things that I would like to change: 1. The error messages are displayed in an errorlist at the top of the page. I would like the error message to be displayed in the formfield ( I tried that with placeholder, but that didn't work out) or other wise under, on top or at the and of each form field. 2. I would like the border-color to change to green when it is correctly fild. What is the best way to do that, with Jquery or a separate 'class' and css. (If I am right informed validation should be in PHP and not jQuery.) All my afforts to change the layout just resulted in a different error and nothing else. Could some one tell how, or where I can find how to change, the script so to achieve the different layout. Unnecessary to say that this is alle quit new for me. Thanx in advance Below you find the code of the contact form: <?php$aErrors = array();if ('POST' == $_SERVER['REQUEST_METHOD']) { if ( !isset($_POST['name']) or !preg_match( '~^[w ]{3,}$~', $_POST['name'] ) ) { $aErrors['name'] = 'Please fill in your name'; } if ( !isset($_POST['email']) or !preg_match( '~^[a-z0-9][a-z0-9_.-]*@([a-z0-9]+.)*[a-z0-9][a-z0-9-]+.([a-z]{2,6})$~i', $_POST['email'] ) ) { $aErrors['email'] = 'Please fill in your e-mail address'; } if ( !isset($_POST['address1']) or !preg_match( '~^[wd ]{5,}$~', $_POST['address1'] ) ) { $aErrors['address1'] = 'Please fill in your adress'; } if ( !isset($_POST['address2']) or !preg_match( '~^([wd ]{5,})?$~', $_POST['address2'] ) ) { $aErrors['address2'] = 'Please fill in your adress'; } if ( !isset($_POST['towncity']) or !preg_match( '~^[wd' ]*$~', $_POST['towncity'] ) ) { $aErrors['towncity'] = 'Please fill in your town/city'; } if ( !isset($_POST['postcode']) or !preg_match( '~^d{4} ?[a-zA-Z]{2}$~', $_POST['postcode'] ) ) { $aErrors['postcode'] = 'Please fill in your postal code'; } if ( count($aErrors) == 0 ) { header('Location: http://'); exit(); }}?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Forms</title> <style type="text/css"> .errorlist, .error input{ border: 1px solid #f00; background: #fdd; } form.cmxform fieldset { margin-bottom: 10px; } form.cmxform legend { padding: 0 2px; font-weight: bold; } form.cmxform label { display: inline-block; line-height: 1.8; vertical-align: top; } form.cmxform fieldset ol { margin: 0; padding: 0; } form.cmxform fieldset li { list-style: none; padding: 5px; margin: 0; } form.cmxform em { font-weight: bold; font-style: normal; color: #f00; } form.cmxform label { width: 120px; /* Width of labels */ } </style> </head> <body> <form action="contact.php" method="post" class="cmxform"> <?php if ( isset($aErrors) and count($aErrors) > 0 ) { print '<ul class="errorlist">'; foreach ( $aErrors as $error ) { print '<li>' . $error . '</li>'; } print '</ul>'; } ?> <p>Please complete the form below. Mandatory fields marked <em>*</em></p> <fieldset> <legend>Delivery Details</legend> <ol> <?php echo isset($aErrors['name']) ? '<li class="error">' : '<li>' ?> <label for="name">Name<em>*</em></label> <input id="name" name="name" value="<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>" /> </li> <?php echo isset($aErrors['email']) ? '<li class="error">' : '<li>' ?> <label for="email">E-mail<em>*</em></label> <input id="email" name="email" value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>" /> </li> <?php echo isset($aErrors['address1']) ? '<li class="error">' : '<li>' ?> <label for="address1">Address<em>*</em></label> <input id="address1" name="address1" value="<?php echo isset($_POST['address1']) ? htmlspecialchars($_POST['address1']) : '' ?>" /> </li> <?php echo isset($aErrors['address2']) ? '<li class="error">' : '<li>' ?> <label for="address2">Address 2</label> <input id="address2" name="address2" value="<?php echo isset($_POST['address2']) ? htmlspecialchars($_POST['address2']) : '' ?>" /> </li> <?php echo isset($aErrors['towncity']) ? '<li class="error">' : '<li>' ?> <label for="towncity">Town/City</label> <input id="towncity" name="towncity" value="<?php echo isset($_POST['towncity']) ? htmlspecialchars($_POST['towncity']) : '' ?>" /> </li> <?php echo isset($aErrors['postcode']) ? '<li class="error">' : '<li>' ?> <label for="postcode">Postal Code<em>*</em></label> <input id="postcode" name="postcode" value="<?php echo isset($_POST['postcode']) ? htmlspecialchars($_POST['postcode']) : '' ?>" /> </li> </ol> <input type="submit" value="Verstuur" /> </fieldset> </form> </body></html>
×
×
  • Create New...