Jaytech
-
Posts
7 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Jaytech
-
-
I have a responsive drop-down navigation bar that is responsive to screens of all width. The navigation bar has a hidden menu icon that displays when the screen width is below 480 px. When the button is clicked the drop-down lists appear. The problem is that am not able to make the navigation scale to the full-width of the mobile screen and also the drop-down lists appear as a block in tandem to the navigation bar.
index.html
<!DOCTYPE html> <html> <head> <link href='style.css' rel='stylesheet' type='text/css'> </head> <body> <!-- Clicking on the label will check the checkbox because for and id of checkbox are the same--> <label for="show-menu" class="show-menu"> Menu </label> <input type="checkbox" id="show-menu"> <div class="navbar"> <div class="menu"> <ul class ="list"> <li class="active"> Home </li> <li> <a href="humanities.html"> Humanities <span class="arrow">▼ </span> </a> <ul> <li> <a href="#" rel="nofollow"> Music </a></li> <li> <a href="#" rel="nofollow"> Linguistics </a></li> <li> <a href="#" rel="nofollow"> Penology </a></li> <li> <a href="#" rel="nofollow"> Anthropology </a></li> <li> <a href="#" rel="nofollow"> Sociology <span class="arrow"> ⟩</span></a> <ul> <li><a href="#" rel="nofollow"> Psychology</a></li> <li><a href="#" rel="nofollow"> Counselling </a></li> <li><a href="#" rel="nofollow"> C.M.D </a></li> </ul> </li> </ul> </li> <li> <a href="education.html"> Education <span class="arrow">▼ </span> </a> <ul> <li> <a href="#" rel="nofollow"> E.C.D.E </a></li> <li> <a href="#" rel="nofollow"> Science </a></li> <li> <a href="#" rel="nofollow"> Arts with Edu </a> <ul> <li><a href="#" rel="nofollow"> Swahili </a></li> <li><a href="#" rel="nofollow"> Psychology </a></li> <li><a href="#" rel="nofollow"> Sociology of Ed. </a></li> <li><a href="#" rel="nofollow"> Liberal Ed. </a></li> </ul> </li> </ul> </li> <li> <a href="eng.html"> Engineering <span class="arrow">▼ </span> </a> <ul> <li> <a href="#" rel="nofollow"> Electrical </a></li> <li> <a href="#" rel="nofollow"> Civil & Structural </a></li> <li> <a href="#" rel="nofollow"> Aeronautical </a></li> <li> <a href="#" rel="nofollow"> Chemical </a></li> <li> <a href="#"rel="nofollow" > Mechanical </a> <ul> <li><a href="#" rel="nofollow"> Industrial </a></li> <li><a href="#" rel="nofollow"> Automotive </a></li> </ul> </li> </ul> </li> <li> <a href="contact.php" rel="nofollow"> Contact Us</a></li> </ul> </div> </div> </body> </html>
style.css
/*Styles the background-color of an active link*/ .menu ul .active{ color: #ffffff; background: #red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(red 20%, green); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red 20%, green); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red 20%, green); /* For Firefox 3.6 to 15 */ background: linear-gradient(red 20%, green); /* Standard syntax */ background: linear-gradient(red 20%, green); /* Standard syntax */ } .navbar{ width:100%; max-width:1000px; text-align:center; margin-top:-8px; margin-bottom:60px; margin-left:160px; } .menu ul{ /*Removes bullets*/ list-style:none; } /*Styles each list within ul*/ .menu ul li{ background-color:green; border:1px solid #ffffff; width:100%; max-width:173px; height:35px; line-height:35px; margin:auto; text-align:center; /*Makes the list dispaly in a horizontal maneer*/ float:left; position: relative; border-radius:8px; font: 15px; font-weight:regular; } .menu ul li a{ text-decoration:none; color:white; display:block; } .menu ul li a:hover{ background-color:red; border-radius:8px; } .menu ul ul{ position:absolute; margin-left:-40px; display:none; } .menu ul li:hover >ul{ display:block; } .menu ul ul ul{ width:100%; margin-left:134px; top:0px; } /*Display the drop-down on hover*/ /*+ selecctor styles every element that are placed immediately after another element */ .menu ul li a:hover + .menu ul li ul, .menu ul li ul:hover{ display:block; } /*Hide Checkbox*/ input[type=checkbox]{ display:none; } /*Show menu when invisible checkbox is checked*/ /*We select checkbox and then use selector column checked to make sure that the checkbox is checked*/ /*~ selects everything that is beneath element on the left shoul be styled with CSS style within the curly bracket*/ input[type=checkbox]:checked ~ .list{ display:block; } /*Styles the menu-label according to its class*/ .show-menu{ font-family:"Helvetica Neue", Helvetica, Arial,sans-serif; text-decoration:none; color:#fff; background: #19c589; text-align:center; padding:10px 0; display:none; } /*Responsive styles*/ @media screen and (max-width:480px){ /*Make drop-down links appear inline*/ .menu ul{ position:static; display: none; } .navbar{ margin-top:-15px; margin-left:5px; } #show-menu:checked ~ .navbar .menu ul { display: block; } /*Create vertical spacing*/ .menu ul li{ margin-bottom:1px; } /*Make all menu links full width*/ .menu ul li, .menu li a{ width:100%; } .show-menu{ display:block; } body{ background-image:none; } }
-
Hello dsonesuk, thanks for the help, I 've read the article and tried to implement some of the suggestions on that site but the problem persists. Do you have any other idea that could be helpful?
-
Hello all, I have a website hosted on Hostgator servers. I have also added it to a CDN(Cloudflare). When I fill the contact form and submit I get Error 524(An error occured). How can I fix that pwebk.com _ 524_ A timeout occurred.html ..Please assist
-
Thanks alot guys, my problem has been solved.
-
Hey all, I have got a PHP contact form which is working fine in localhost, but when I upload it to a live server(hostgator),I get the following single-line error when l load the form, Please assist
PHP CODE
<?php session_start(); //INITIALIZE VARIABLES and set to empty values $name = $phone = $email = $message= $captchaResults= ""; $nameErr = $phoneErr = $emailErr = $checkboxErr= $messageErr= $captchaErr= ""; ini_set('display_errors', 1); error_reporting(E_ALL); if ($_SERVER["REQUEST_METHOD"] == "POST") { $valid = true; //check if name is empty and performs functions in curly brackets if (empty($_POST["name"])) { $valid = false; $nameErr = "Please fill out this field"; } else { //Passes name throught test input function at the bottom of page $name = test_input($_POST["name"]); //remove illegal characters from name , Sanitize data $nm =filter_var($name, FILTER_SANITIZE_STRING); // Validate Data if (!preg_match("/^[a-zA-Z\s,.-]{3,30}$/", $nm)) // Regexp requiring letters, spaces, commas and fullstops and should not exceed 30 letters { $valid = false; $nameErr = "Please don't insert numbers*"; } } //check if phone contains numbers if (empty($_POST["phone"])) { $valid = false; $phoneErr = "Please fill out this field"; } else { $phone = test_input($_POST["phone"]); if (!preg_match("/^[0-9\s(),+.-]*$/", $phone)) { $valid = false; $phoneErr = "Please don't insert letters*"; } } //check if email is valid if (empty($_POST["email"])) { $valid = false; $emailErr = "Please fill out this field"; echo'email is empty<br>'; } else { $email = test_input($_POST["email"]); //Remove all illegal characters from email $em = filter_var($email, FILTER_SANITIZE_EMAIL); if (!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/", $em)) { $valid = false; $emailErr = "*Please insert a valid email address*"; } } // Check the values from checkbox and POST them to email $value= ""; // if (empty($_POST["checkbox"])) { $valid = false; $checkboxErr = "Please fill out this field*"; } else{ $checkbox =$_POST["checkbox"]; //Array of values from the checkbox values $value= implode(' , ', $checkbox); //implode values and separate by a comma $value = test_input($value); } //check if message contains letters and white-space if (empty($_POST["message"])) { $valid = false; $messageErr = "Please fill out this field"; echo 'Message is empty<br>'; } else { $message = test_input($_POST["message"]); //remove illegal characters from url $msg =filter_var($message, FILTER_SANITIZE_STRING); if (!preg_match("/^[a-zA-Z\s-,:;`~.?()]*$/", $msg)) //Regexp requiring spaces, full-stops, colon, semi-colons brackets, question marks { $valid = false; $messageErr = "Only letters and spaces are allowed*"; } } //Captcha Results $getRandomNumber1 = $_POST["firstRandomNumber"]; $getRandomNumber2 = $_POST["secondRandomNumber"]; $getCaptchaResults = $_POST["captchaResults"]; $totalNumber= $getRandomNumber1 + $getRandomNumber2; if($totalNumber == $getCaptchaResults){ echo''; } else{$valid = false; $captchaErr="Wrong Answer";} //stores name in a session variable to be used in thank-you page $_SESSION["nm"]= $nm; require ("PHPMailer/PHPMailerAutoload.php"); //including phpmailer class $mail = new PHPMailer(); $mail->IsSMTP(); // set mailer to use SMTP $mail->SMTPDebug = 2; $mail->Host = "smtp.gmail.com"; // specify main and backup server or I.P ADDRESS from server $mail->SMTPSecure = "tls"; // Connect using a TLS connection $mail->Port = 587; //Gmail SMTP port $mail->SMTPAuth = true; // turn on SMTP authorization $mail->Username = "************@gmail.com"; // SMTP username $mail->Password = "**********"; // SMTP password $mail->From = "$em"; //email of sender $mail->FromName = "$nm"; //name of the sender $mail->AddAddress("**************@gmail.com", "Patwan"); //email address of recepient and name $mail->AddReplyTo($em, $nm); //Address to which recepient will reply $mail->WordWrap = 100; // set word wrap to 100 characters $mail->IsHTML(true); // set email format to HTML $mail->Subject = "Contact Form"; //subject of email $mail->Body = "Name: " . $nm . "<br>Phone: " . $phone . "<br>Email: " . $em . "<br>Subject: " . $value . "<br>Message: " . $msg ; //$mailphp = false; if ($valid) { // if (!$mailphp) { if (!$mail->Send()) { echo 'Form could not be sent.'; echo 'Mailer Error: ' . $mail->ErrorInfo; exit; } else { header('Location:thank_you2.php'); } } } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } ?>Error
Warning: session_start(): Cannot send session cookie - headers already sent by ( output started at /home4/pwebk/public_html/contact.php:1) in /home4/pwebk/public_html/contact.php on line 4
-
Hey all, I have got a jquery slideshow on my website which am trying to make the images in it responsive so that they can fit on tablets and mobile device screens, but it doesn`t work as expected. Kindly assist?
HTML
<div id= "hero"> <div id= "pager"> </div> <div id= "pause"> ≈ </div> <div id= "play"> Δ</div> <div id= "next"> 〉 </div> <div id= "prev"> 〈 </div> <div id= "slider"> <div class= "items"> <img src= "images/hp.jpg" alt="HP Computers" id="img"> <div class = "info"> <h2> HP Computers </h2> <p> We deliver all type of HP laptops <a href= "laptops.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> <div class= "items"> <image src= "images/mobile.jpg" alt="Mobile Phones"> <div class = "info"> <h2> Mobile Phones</h2> <p> We create all kinds of mobile websites <a href= "mobile.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> <div class= "items"> <image src= "images/photography.jpg" alt="Photography Portfolio Designs"> <div class = "info"> <h2> Photography Brochures </h2> <p> We create unique, responsive and amazing photography portfolio <a href= "photography.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> <div class= "items"> <image src= "images/graphic_design.jpg" alt= "Graphics Design"> <div class = "info"> <h2> Graphics Designs </h2> <p> We create amazing graphic contents for your project or institution <a href= "graphic_design.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> </div> <!--End_slider--> </div> <!--End_hero--> <script type="text/javascript" src= "jquery-1.12.3.js"> </script> <script type="text/javascript" src= "jquery.cycle.all.js"> </script> <script type="text/javascript" src= "test.js"> </script>CSS
/*Screen size of laptop and Desktop monitors.*/ @media screen and (min-width: 1024px){ /*Index page Slideshow styles*/ #hero{ width: 550px; height: 250px; border: 2px solid brown; box-shadow: 7px 7px 7px; display: block; position: relative; margin: auto; } #slider{ width: 550px; height: 250px; display: block; position: absolute; overflow: hidden; } .info { width: 550px; height: 100px; display: block; position: relative; bottom: 100px; background: rgba(102,204,204,.2); z-index: 50; } .info h2 { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; padding: 28px 0 0 15px; } .info p { font-family: sans-serif; font-size: 13px; font-weight: lighter; color: #ffffff; padding: 0 0 0 15px; line-height: 1px; } } /* Screen size of a tablet and below.*/ @media screen and (max-width: 1024px){ /*Index page Slideshow styles*/ #hero{ width: 98%; background-size: auto; height: 250px; border: 2px solid brown; box-shadow: 7px 7px 7px; display: block; position: relative; margin: auto; } #slider{ width: 98%; background-size: auto; height: 250px; display: block; position: absolute; overflow: hidden; } .info { width: 98%; height: 100px; display: block; position: relative; bottom: 100px; background: rgba(102,204,204,.2); z-index: 50; } .info h2 { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; padding: 28px 0 0 8px; } .info p { width: 98%; font-family: sans-serif; font-size: 13px; font-weight: lighter; color: #ffffff; padding: 0 0 0 8px; line-height: 1px; } } /*Screen size of a phone in potrait and landscape mode.*/ @media screen and (max-width: 480px){ #hero{ width: 98%; border: 2px solid brown; box-shadow: 3px 3px 3px; display: block; position: relative; margin: auto; } #slider{ width: 98%; display: block; position: absolute; overflow: hidden; } .info { width: 98%; display: block; position: relative; bottom: 100px; background: rgba(102,204,204,.2); z-index: 50; } .info h2 { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; padding: 28px 0 0 5px; } .info p{ opacity: 0; } }
Div not displaying properly on Mobile
in CSS
Posted
I am creating a web page layout using bootstrap and the backend is PHP Laravel, the web page is partitioned into various divs which work fine on various screen devices but when I upload the project on a live server and view the page on mobile part of the service and contact section is hidden behind a white background, I find it hard to figure out to debug the CSS code to make the two sections visible in mobile,,,please assist?
HTML
CSS code