piano0011 Posted July 12, 2018 Share Posted July 12, 2018 I would like to have some error handlers on my page so that when the user click on certain links and not login, it will be displayed on the page. I am trying to follow the format of having php at the top and html at the bottom but when adding the following error handlers, I found that it needs to go at the bottom of the page for the whole html contents to be shown: This is my CSS code for it: div.error { color: red; position: relative; bottom: 900px; left: 500px; } <!DOCTYPE html> <html> <head> <title>PianoCourse101</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Aldrich|Mr+Dafoe" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> </head> <body> </body> </html> <section class="main-container"> <img class="pc101" src="includes/pictures/pc101.gif" alt="pianocourse101 logo"/> <div class="music"><i class="fas fa-music fa-8x"></i></div> <div class="sharp"><p>♯</p></div> <div class="natural"><p>♮</p></div> <div class="flat"><p>♭</p></div> <div class="main-wrapper"> <div class="title"> <h3>Welcome to PianoCourse101</h3> </div> <br></br> </div> <div class="main-wrapper"> <div class="first"> <h1>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home!<br></br>PianoCourse101 teaching methods are based on the Bastie Piano Basics series and therefore, we highly recommend you to purchase the book prior to your piano lessons!<br></br> At PianoCourse101, you can choose 4 levels beginning with the FREE "Bastien Piano Basics: Primer Level" lessons!<br></br>If you would like a challenge and are ready to progress to the next level, then you can choose to upgrade your free membership to premium membership, where you can access Level 1, Level 2 and Level 3!<br></br>Also, please ensure that you have read the Q/A section of the website and if you have any questions, you can email to our customer support team from the Contact Us section. </h1> </div> </div> <div class="form"> <form class="signup-form" action="newsletters.php" method="POST"> <label><center>Enter your E-mail Address</center></label> <br></br> <center><input type="text" name='email' placeholder="Enter E-mail Address"></center> <br></br> <center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center> <br></br> </form> </div> <img class="snoopy" src="includes/pictures/snoopy.jpg" alt="snoopy playing the piano" /> </section> </body> </html> <?php include_once 'footer.php'; $fullUrl = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; // Primer level error handlers if (strpos($fullUrl, "primer=notchosen") == true) { echo "<br>"; echo "<div class='error'>You have not subscribed for Primer Level Lessons!</div"; exit(); } if (strpos($fullUrl, "primer=maintenance") == true) { echo "<br>"; echo "<div class='error'>Your Primer Level Lessons are under maintenance</div>"; exit(); } if (strpos($fullUrl, "primer=notlogin") == true) { echo "<br>"; echo "<div class='error'>You have not login!</div>"; exit(); } It is displayed in the middle of the page but doesn't seem to move when I add some positioning.. Quote Link to comment Share on other sites More sharing options...
piano0011 Posted July 12, 2018 Author Share Posted July 12, 2018 (edited) Apologies.... It is moving in IE browser but not in Chrome but for some reasons.. For some reason, IE is more reliable on my computer... Also, according to my IE browser, it doesn't seem to show my pictures at the top of the page whereas in Chrome, it does. This is very confusing but looking at my html page, I forgot to add those pictures in. However, once added, now it looks like I have duplicated the pictures....I should have the three pictures above my pc101 logo... <!DOCTYPE html> <html> <head> <title>PianoCourse101</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Aldrich|Mr+Dafoe" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> </head> <body> </body> </html> <section class="main-container"> <div class="crotchet"> <p>𝅘𝅥</p> </div> <div class="minim"> <p>𝅗𝅥</p> </div> <div class="quaver"> <p>𝅘𝅥𝅮</p> </div> <img class="pc101" src="includes/pictures/pc101.gif" alt="pianocourse101 logo"/> <div class="music"><i class="fas fa-music fa-8x"></i></div> <div class="sharp"><p>♯</p></div> <div class="natural"><p>♮</p></div> <div class="flat"><p>♭</p></div> <div class="main-wrapper"> <div class="title"> <h3>Welcome to PianoCourse101</h3> </div> <br></br> </div> <div class="main-wrapper"> <div class="first"> <h1>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home!<br></br>PianoCourse101 teaching methods are based on the Bastie Piano Basics series and therefore, we highly recommend you to purchase the book prior to your piano lessons!<br></br> At PianoCourse101, you can choose 4 levels beginning with the FREE "Bastien Piano Basics: Primer Level" lessons!<br></br>If you would like a challenge and are ready to progress to the next level, then you can choose to upgrade your free membership to premium membership, where you can access Level 1, Level 2 and Level 3!<br></br>Also, please ensure that you have read the Q/A section of the website and if you have any questions, you can email to our customer support team from the Contact Us section. </h1> </div> </div> <div class="form"> <form class="signup-form" action="newsletters.php" method="POST"> <label><center>Enter your E-mail Address</center></label> <br></br> <center><input type="text" name='email' placeholder="Enter E-mail Address"></center> <br></br> <center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center> <br></br> </form> </div> <img class="snoopy" src="includes/pictures/snoopy.jpg" alt="snoopy playing the piano" /> </section> Edited July 12, 2018 by piano0011 Quote Link to comment Share on other sites More sharing options...
piano0011 Posted July 12, 2018 Author Share Posted July 12, 2018 I forgot to also ask, does a p class work for error handlers? Quote Link to comment Share on other sites More sharing options...
Barand Posted July 12, 2018 Share Posted July 12, 2018 I am going to guess that those rectangles should be music symbols and your browser does not support those entities. This is what I get with Firefox and IE Quote Link to comment Share on other sites More sharing options...
piano0011 Posted July 12, 2018 Author Share Posted July 12, 2018 (edited) This is weird because those symbols should be on music notation and not staff.. it should show minim, quavers etc.... Should using the p class work? Edited July 12, 2018 by piano0011 Quote Link to comment Share on other sites More sharing options...
Barand Posted July 12, 2018 Share Posted July 12, 2018 I was demonstrating that IE does not handle SVG very well and does not hndle the entities at all (just giving the rectangles instead of the clefs) Putting them in paragraph tags <p>...</p> will have no effect. Quote Link to comment Share on other sites More sharing options...
piano0011 Posted July 12, 2018 Author Share Posted July 12, 2018 (edited) This is weird and chrome is showing the pictures well but I don't have that in my html code! When I include inside the code, chrome is displaying each twice! I am still wondering why my error handlers won't be displayed when I use p class? $fullUrl = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; // Primer level error handlers if (strpos($fullUrl, "primer=notchosen") == true) { echo "<br>"; echo "<p class='error'>You have not subscribed for Primer Level Lessons!</p>"; exit(); } and in my CSS... if I do this... .p.error {}, it won't work... My apologies, I think my codes was wrong... should be just .error {}, then it will work... Edited July 12, 2018 by piano0011 Quote Link to comment Share on other sites More sharing options...
Barand Posted July 12, 2018 Share Posted July 12, 2018 8 minutes ago, piano0011 said: chrome is showing the pictures well but I don't have that in my html code! If they are showing then they are in your code. You just have no idea where they are in the code. Quote Link to comment Share on other sites More sharing options...
piano0011 Posted July 12, 2018 Author Share Posted July 12, 2018 This is strange though because this is my html code and I only have 3 pictures above my pc101 logo: <!DOCTYPE html> <html> <head> <title>PianoCourse101</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Aldrich|Mr+Dafoe" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> </head> <body> </body> </html> <section class="main-container"> <div class="crotchet"> <p>𝅘𝅥</p> </div> <div class="minim"> <p>𝅗𝅥</p> </div> <div class="quaver"> <p>𝅘𝅥𝅮</p> </div> <img class="pc101" src="includes/pictures/pc101.gif" alt="pianocourse101 logo"/> <div class="music"><i class="fas fa-music fa-8x"></i></div> <div class="sharp"><p>♯</p></div> <div class="natural"><p>♮</p></div> <div class="flat"><p>♭</p></div> <div class="main-wrapper"> <div class="title"> <h3>Welcome to PianoCourse101</h3> </div> <br></br> </div> <div class="main-wrapper"> <div class="first"> <h1>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home!<br></br>PianoCourse101 teaching methods are based on the Bastie Piano Basics series and therefore, we highly recommend you to purchase the book prior to your piano lessons!<br></br> At PianoCourse101, you can choose 4 levels beginning with the FREE "Bastien Piano Basics: Primer Level" lessons!<br></br>If you would like a challenge and are ready to progress to the next level, then you can choose to upgrade your free membership to premium membership, where you can access Level 1, Level 2 and Level 3!<br></br>Also, please ensure that you have read the Q/A section of the website and if you have any questions, you can email to our customer support team from the Contact Us section. </h1> </div> </div> <div class="form"> <form class="signup-form" action="newsletters.php" method="POST"> <label><center>Enter your E-mail Address</center></label> <br></br> <center><input type="text" name='email' placeholder="Enter E-mail Address"></center> <br></br> <center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center> <br></br> </form> </div> <img class="snoopy" src="includes/pictures/snoopy.jpg" alt="snoopy playing the piano" /> </section> <div class="services_main">Services</div> <div class="services"> <div class="service1"> <h1>Level 1</h1> <div class="piano"> <a href="update.php"><p>🎹</p></a> </div> <p>Purchase the Level 1 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $100<br>Yearly fee: $800</p> <div class="service2"> <h1>Level 2</h1> <div class="piano"> <a href="update.php"><p>🎻</p></a> </div> <p>Purchase the Level 2 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $150<br>Yearly fee: $1300</p> </div> <div class="service3"> <h1>Level 3</h1> <div class="piano"> <a href="update.php"><p>🎹</p></a> </div> <p>Purchase the Level 3 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $200<br>Yearly fee: $1800</p> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.