Jump to content

Search the Community

Showing results for tags 'html'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 848 results

  1. Hi Guys, I have a form adds details to a table and one of them is owner email which takes in an email address. this in turn displays this email address on the form. What I am looking to do is for the form have the user just put in there username and the email address is automatically attached at the end(as all the details after@ in the email address will be the same). Then when the table is displaying the email address it just displays the username which when clicked still brings you to a new email to that email address. Images: so here it would be just username and @whatver.com is always on the form and here it just displays the username so dmurran instead of the whole email address. here is the code for the table: // display data in table echo "<table align='center' border='1' cellpadding='2' class='footable mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--4dp full-width'>"; echo "<tr> <th>ID</th> <th>Administration Console</th> <th>Product Version</th> <th>Platform</th> <th>Database</th> <th>Owner</th> <th>Status</th> <th></th> <th></th></tr>"; // loop through results of database query, displaying them in the table while($row = mysql_fetch_array( $result )) { // echo out the contents of each row into a table echo "<tr>"; echo '<th>' . $row['id'] . '</th>'; echo '<td><a href="'.$row['curl'].'">'.$row['curl'].'</a></td>'; echo '<td>' . $row['pversion'] . '</td>'; echo '<td>' . $row['platform'] . '</td>'; echo '<td>' . $row['dversion'] . '</td>'; echo '<td><a href="mailto:'.$row['email'].'">' . $row['email'].'</a></td>'; echo '<td>' . $row['status'] .'</td>'; echo '<td><a href="php/edit.php?id=' . $row['id'] . '">Edit</a></td>'; echo '<td><a onclick="javascript:confirmationDelete($(this));return false;" href="php/delete.php?id=' . $row['id'] . '"onclick="return confirm("Do you want to delete this?")">Delete</a></td>'; echo "</tr>"; } // close table> echo "</table>"; ?> and here is the form: <?php /* NEW.PHP Allows user to create a new entry in the database */ // creates the new record form // since this form is used multiple times in this file, I have made it a function that is easily reusable function renderForm($curl, $pversion, $platform, $dversion, $email, $status, $error) { ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="../css/style.css"> <link href='../css/bootstrap.cs' rel='stylesheet'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src='../js/bootstrap.js'></script> <title>New Repo</title> </head> <body> <div id="page-wrap"> <center><a href="https://repo-project-danielmurran.c9users.io/view.php"><img src="../images/logo.png" alt="what image shows" height="90" width="300"></a></center> <h1>GCS Reproduction Environment</h1></br> <button type="button" onclick="window.location='https://repo-project-danielmurran.c9users.io/view.php'">Home</button> <hr/> <h2> Add Reproduction</h2> <?php // if there are any errors, display them if ($error != '') { echo '<div style="padding:4px; border:1px solid red; color:red;">'.$error.'</div>'; } ?> <form action="" method="post"> <div id="bform"> <table id="maintable" border='1' cellpadding='10'> <thead> <tr> <th>Repoduction Console URL: *<td><input type="text" name="curl" value="<?php echo $curl; ?>" /></td> </tr> <th>Product Version: *<td> <input type="text" name="pversion" value="<?php echo $pversion; ?>" /></td></tr> <th>Platform: * <td><input type="text" name="platform" value="<?php echo $platform; ?>" /></td></tr> <th>Database: * <td><input type="text" name="dversion" value="<?php echo $dversion; ?>" /></td></tr> <th>Owner Emaill: * <td><input type="email" name="email" value="<?php echo $email; ?>" /> </td></tr> <th>Repo Status: * <td><input type="text" name="status" value="<?php echo $status; ?>" /></td></tr> </table> * required <input type="submit" name="submit" value="Submit"> </div> </form> </div> </body> </html> <?php } // connect to the database include('../php/connect-db.php'); // check if the form has been submitted. If it has, start to process the form and save it to the database if (isset($_POST['submit'])) { // get form data, making sure it is valid $curl = mysql_real_escape_string(htmlspecialchars($_POST['curl'])); $pversion = mysql_real_escape_string(htmlspecialchars($_POST['pversion'])); $platform = mysql_real_escape_string(htmlspecialchars($_POST['platform'])); $dversion = mysql_real_escape_string(htmlspecialchars($_POST['dversion'])); $email = mysql_real_escape_string(htmlspecialchars($_POST['email'])); $status = mysql_real_escape_string(htmlspecialchars($_POST['status'])); // check to make sure all fields are entered if ($curl == '' || $pversion == '' || $platform == '' || $dversion == '' || $email == '' || $status == '') { // generate error message $error = 'ERROR: Please fill in all required fields!'; // if either field is blank, display the form again renderForm($curl, $pversion, $platform, $dversion, $email, $status, $error); } else { // save the data to the database mysql_query("INSERT INTO players SET curl='$curl', pversion='$pversion', platform='$platform', dversion='$dversion', email='$email', status='$status'") or die(mysql_error()); // once saved, redirect back to the view page header("Location: ../view.php"); } } else // if the form hasn't been submitted, display the form { renderForm('','','','','','',''); } ?> I tried to cut off the end of the email but it was not bringing me to the email address anymore. Any help is appreciated. Thanks!
  2. Hi, I just need a simple code to add space between words. I have some text above a pic so I would like one word to align to the left and the other to the right. So it would be (if you refer to the image) Seca 674 Information. One of my words is actually a link to another page though so not sure what I can use. I thought of using <p>...</p> but then the height spacing is too big (like the top image in the picture attached). Help! Thanks in advance for all your suggestions.
  3. Tarzan67

    Format Contact Form

    I created a contact form inside a wordpress container using the column selection. When I apply the code only inside the container it changes the color of the entire page to that background color of the form. Also, the form has side by side fields but for some reason onilne the fields are stacked. See photos. As you can see in the first picture I removed the background color. <!DOCTYPE html> <html> <head> <style> input[type=text]:hover { background-color: #C5E3BF; } input[type=text], select, textarea { width: 100%; padding: 12px; width: 48%; border: 6px double #96BADD; border-radius: 8px; font-family: "Tahoma", sans, serif; font-size: 20px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #FFF; color: #434343; padding: 12px 200px; border: box; border-radius: 4px; cursor: pointer; font-size: 18px; font-family: "Tahoma", sans, serif; } input[type=submit]:hover { background-color: #96badd; text-align: center; color: black; } h2 { font-size: 30px; font-family: "Tahoma", sans, serif; text-align: center; } .container { border-radius: 15px; background-color: #96BADD; padding: 20px; } </style> </head> <body> <div class="container"> <h2>Request a Free Information Packet<h2> <form action="/action_page.php"> <input type="text" id="fname" name="firstname" placeholder="Full Name"> <input type="text" id="lphone" name="Phone" placeholder="Phone"> <input type="text" id= "email" name="Email" placeholder="Email"> <input type="text" id= "Message" name="Message" placeholder="Message"> <p style="text-align: center;"><input type="submit" name="Submit" value="SUBMIT"></p> </form> </div> </body> </html>
  4. Hello, I use W3 responsive layout (W3.CSS) and I am trying to create photo gallery. When displaying a single photo I want to have hover overlay above the photo so it is possible to navigate to previous / next photo. When hovered above left part of the photo < is displayed and when clicked goes to previous photo, same for > over right part of the photo. So far I managed to do that using relative/absolute/flex positioning but it is not responsive, the position stays the same when window size is smaller and messes up page layout. Image size, width is which matter, is not always the same. Also I would like to have w3 container immediately below the photo for further info (title and other details). When I add it the layout is broken completely. I have this and hover navigation works. It is not responsive, I cannot add any w3 container for further info under a photo unless breaking the layout. Is there a way doing this a cleaner way using W3 styling? Many thanks! <div style="background:#fff; position:relative; padding:0; margin:0;"> <a href="#left" > <div style="position:absolute; top:0px; background:none; align-items:center; display:flex; left:95px; height:667px;"> &nbsp;&lt;&nbsp; </div> </a> <img src="photo.jpg" style="max-width:100%;"> <a href="#right" style="position:absolute; top:0px; background:none; align-items:center; display:flex;"> <div style="position:absolute; top:0px; background:none; align-items:center; display:flex; right:95px; height:667px;"> &nbsp;&gt;&nbsp; </div> </a> </div>
  5. Hello Everyone, How to make HTML Search Like Google But : For Example my link is example.com/videos When I want to make search for this word funny by HTML inbut and when I click submit button the result should be like this: example.com/videos/funny How I do that, please ... Thanks
  6. <head> <script> $( document ).ready(function() { console.log( "ready!" ); $('#other').hide(); function otherTongue() { if ($('#tongue').val() == 'other_tongue') { $('#other').show(); } } }); </script> </head> <body> <form> <select name="tongue" id="tongue" size=4 onchange="otherTongue()" > <optgroup label='Oceania'> <option value=mi>Maori</option> <option value=haw>Hawaiian</option> <option value=sm>Samoan</option> </optgroup> <optgroup label='Not Listed'> <option value='other_tongue'>Other Language</option> </optgroup> </select> <input type='text' name='other' id='other' /> </form> </body> Why do I am receiving the error message: "Can't find variable otherTongue( )"?
  7. Hello When i use a facebook share url on my site on Wordpress, it picks the title of my site, the sub-title and then it picks the first image of the site. How can i choose the pic to be displayed, what if i want to show a special picture like a logo or something whenever i want to share my site on Facebook? How can i do it?
  8. Hi all - I'm trying to hyperlink from a web page to a specific slide in Powerpoint 2013. I thought coding as follows would do the trick (the pound sign and slide number at the end): /mypowerpoint.pptx#5 However when clicking on the link, it opens up to the first slide and not the fifth - any ideas? Thanks! Steve
  9. Hi. I am relatively new to using PHP and am working on building a contact form. It's pretty much good to go and it sends to my email, however, I am having the issue where it just sends this information to my email and not what the user put in, just leaving the message blank. Name: Email: Phone: Message: I'm not exactly sure what I am doing incorrectly. Also is there way to improve my code to make sure it gets in my inbox and not my spam? I've included the PHP and the HTML regarding the form. Here's the PHP. <?php $name = $_POST['name']; $email = $_POST['email']; $phone = $_POST['phone']; $message = $_POST['message']; $formcontent=" From: $name \n Email: $email \n Phone: $phone \n Message: $message"; $recipient = "contact@immersivewebdesign.com"; $subject = "Contact Form"; $mailheader = "From: $email \r\n"; mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); echo "Thank You!" . " -" . "<a href='http://immersivewebdesign.com/' style='text-decoration:none;color:#ff0099;'> Return Home</a>"; ?> Here's the HTML form. <div class="container"> <div class="col-lg-offset-4 col-lg-4" id="panel"> <h2>Get In Touch</h2> <form action="mail.php" method="post"> <div class="group"> <input type="text" name="name" required> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div> <div class="group"> <input type="email" email="email" required> <span class="highlight"></span> <span class="bar"></span> <label>Email</label> </div> <div class="group"> <input type="tel" phone="phone" required> <span class="highlight"></span> <span class="bar"></span> <label>Phone</label> </div> <div class="group"> <input type="text" message="message" required> <span class="highlight"></span> <span class="bar"></span> <label>Message</label> </div> <div class="group"> <center> <button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button></center> </div> </form> </div> </div> Thank you for your help.
  10. I've got this responsive image gallery, made with W3.CSS <div id="portraits" class="w3-row tab"> <div class="w3-half"> <img src="img/img1.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img2.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> <div class="w3-half> <img src="img/img3.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> <img src="img/img4.jpg" onclick="onClick(this)" style="width:100%;cursor:zoom-in"> </div> </div> <--! more stuff here -->... These images are all in different aspect ratios. So at the bottom of the image gallery, the images don't match up; 1 half is longer than the other. I've looked for answers. Putting the image in the div etc... doesn't work... I'm new here, and also relatively new to css3, so if you need more information to help me out, feel free to ask. Thanks in advance! (attached document is the HTML file. I'm using w3-third instead of w3-half, doesn't matter though) portfolio.html
  11. Hi there, I have a form with a field, which will be prefilled, but this field is a text box and editable for everyone. But i want it only as a readonly field, but this field can´t be changed directly to a html field, so i was wondering, is it possible to copy the body of that field and show it as readonly and only, if it is not empty? I do not want to use a button for that Thanks a lot in advance
  12. Hello, I would like to ask if there is any tool which automatically simplifies the creation of external or internal styles from inline styles of a html page and make the appropriate changes into the html code. For example, I build html pages with a CSS framework and use inline styles. Instead of making a mysite.css file on my own, a tool parses the inline styles, creates an elegant and sophisticated css file, and makes the appropriate changes into the html page code. Thanks in advance.
  13. Hello, I want to do a countdown and put it in my website. I did a countdown but I have a problem, when I launch it, the seconds are freezing they are not anymore running... So the countdown is not in realtime anymore... I have to refresh in order to see the countdown running. Here is what I did: <div id="after"> <span id="dhour"></span>:<span id="dmin"></span>:<span id="dsec"></span> </div> <div id="count2">Texte à afficher</div> <div class="numbers" id="dday" hidden="true"></div> <script> var ladate = new Date("<?php echo gmdate("Y-m-d\TH:i:s\Z");?>"); var year=ladate.getFullYear(); var month=ladate.getMonth()+1; var day=ladate.getDate(); var hour=14; var minute=20; var tz=0; var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); function countdown(yr,m,d,hr,min){ theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min; var today= new Date("<?php echo gmdate("Y-m-d\TH:i:s\Z");?>"); var todayy=today.getYear(); if (todayy < 1000) {todayy+=1900; } var todaym=today.getMonth(); var todayd=today.getDate(); var todayh=today.getHours(); var todaymin=today.getMinutes(); var todaysec=today.getSeconds(); var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec; var todaystring=Date.parse(todaystring1)+(tz*1000*60*60); var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min); var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60)); var dd=futurestring-todaystring; var dday=Math.floor(dd/(60*60*1000*24)*1); var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1); var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1); var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1); if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){ document.getElementById('count2').style.display="inline"; document.getElementById('after').style.display="none"; document.getElementById('dday').style.display="none"; document.getElementById('dhour').style.display="none"; document.getElementById('dmin').style.display="none"; document.getElementById('dsec').style.display="none"; document.getElementById('days').style.display="none"; document.getElementById('hours').style.display="none"; document.getElementById('minutes').style.display="none"; document.getElementById('seconds').style.display="none"; return;}else { document.getElementById('count2').style.display="none"; document.getElementById('dday').innerHTML=dday; document.getElementById('dhour').innerHTML=dhour; document.getElementById('dmin').innerHTML=dmin; document.getElementById('dsec').innerHTML=dsec; window.location.reload(); setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);}} countdown(year,month,day,hour,minute); </script> Thank you.
  14. Is there a way to prevent that a malicious person crafts a piece of code that changes the value of an action attribute? Like when you have this line of html: <form method="post" name="register" action="<?php echo $_SERVER['PHP_SELF']; ?>"> but the attacker places the entire script on his own server. Is this XSS? What are the consequences of gaining/finding protected data? If this kind of attack is possible, can someone show with an example how this is done?
  15. I'm a student, and currently busy with creating my own website, but now I've got a question which I can't figure out myself. My website is about professional cycling and on it I'll have the jerseys of the teams which I want to overlay when going over it with the mouse. I figured this out OK, but now it happens that if I move over it with my mouse, a big square overlays the picture (because it's a square picture with a transparent background) and I want that there is only an overlay over the jersey and not over the "background" of the picture. I hope you can help me! Need to fix this! Thank you in advance! .container { position: relative; width: 25%; height: auto; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: #00b0f0; opacity: 0.8; overflow: hidden; width: 100%; height: 0; transition: .5s ease; } .container:hover .overlay { height: 100%; } .text { white-space: nowrap; color: white; font-size: 20px; position: absolute; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } <div class="container"> <a href="AG2R.html"> <img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image"> </a> <div class="overlay"> <div class="text">AG2R La Mondiale</div> </div> </div> This is the picture I used:
  16. <p><strong>My first Javascript</strong></p> <button type="button" on-click="myfunction()">Click here</button> <script> function myfunction() {document.getElementById("demo").innerHTML = "Hello its Wednesday";}</script> <p id="demo">Hello its Tuesday</p> Any assistance would be much appreciated. I am learning the W3Schools tutorials and I can't seem to move forward. The results dont's show its a "Wednesday"! <script> function light(sw) {var pic; if (sw == 0) {pic = "gifs/pic_bulboff.gif"} else {pic = "gifs/pic_bulbon.gif"} document.getElementById('myImage').src = pic;</script> <img id="myImage" src="gifs/pic_bulboff.gif" width="100" height="180"> <p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button></p> I can't quite make the light bulb to go on.
  17. I'm going to get this out of the way right up front, I am very new at this PHP stuff. After a lot of research I have developed a standalone PHP file that I want to call from a HTML page. It isn't getting past my HTML code so I think I've done something there. This is my HTML code: <div class="visitor-count">Number of visitors since 12-10-2016:</div> <img alt="Hit counter" src="../javascripts/counter.php" /> Any help would be greatly appreciated. RPatton
  18. Why does the border on hover that appears on the 4 smaller pictures not fall exactly on the pictures edge, but at the bottom it is about 7px lower and leaves an empty space? http://www.mikroviologos.gr/test2 Thank you!
  19. hi everyone im trying to get back in to web design and re learn everything i knew 5 6 months ago . im curently stuck on this and have no idea how to fix it . can someone help me pls. i cant click on the Pages i linked and i have no idea how to fix it .ive been trying to fix it for about 40 min now and nothing comes to mind this is the Index.html http://imgur.com/a/5eQnt this is the page2 http://imgur.com/a/sHxO9 this is the page3 http://imgur.com/a/IWj0h this is main.css http://imgur.com/a/wJJaf this is the result http://imgur.com/a/dIU6t
  20. i wanted to use this sample code from code pen http://codepen.io/emilioincerto/pen/yaVzJd However, when i want to use it my java script isn't working Here is my code. <!DOCTYPE html> <html> <head> <script src="../java/java2.js"></script> <title> </title> </head> <body> <h1>Shopping List</h1> <ul class="shopping-list"> </ul> <div> <input type="text" id="item" /> <button id="b1" value="Add">Add</button> </div> </body> </html> ************This is JavaScript*********** $(document).ready( function(){ $("#b1").on("click", function(){ //grab the value of input element with id item and set it to userinput var userInput = $("#item").val(); //log userinput to the console console.log( userInput ); var shoppingItem = $(document.createElement("li")); //shoppingItem.addClass("item"); shoppingItem.html(userInput); if (userInput.length > 3){ $("ul.shopping-list").append(shoppingItem); //clear all input fields $("input").val(""); } }); $("ul").on("click", "li", function(){ console.log("test number two"); $(this).remove(); }); } );
  21. 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; } }
  22. Here is my code: <!DOCTYPE html><html lang="en"><head> <link rel='stylesheet' href='style.css'/><meta charset="utf-8"/><title>title</title><style></style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+' Column: '+d);return true;}</script><script>'use strict';window.onload = init;function init() {var str = "<h3>Available Products:</h3>";for (var key in products){str += products[key].name +" $"+ products[key].price +"<br/>";}document.getElementById("products").innerHTML = str;}function add(item){cart.push(products[item]);var str = "<h3>Items in your cart:</h3>";for (var key in cart){ str += cart[key].name +" $"+ cart[key].price +"<br/>";}document.getElementById("cart").innerHTML = str;console.log(products[item]);};function item(name,price){ this.name = name; this.price = price;};function add(item){var sum = 0;cart.push(products[item]);var str = "<h3>Items in your cart:</h3>";for (var key in cart){ str += cart[key].name +" $"+ cart[key].price +"<br/>"; sum += Number(cart[key].price);} str += '<br/><b>Total = $' + sum.toFixed(2) +'</b>';document.getElementById("cart").innerHTML = str;console.log(products[item]);}var products = [];products["milk"] = new item("Milk",2.89)products["eggs"] = new item("Eggs",1.72)products["candybar"] = new item("Candy bar",0.87)products["soda"] = new item("Soda",1.99)products["water"] = new item("Water",1.29)products["cereal"] = new item("Cereal",1.87)products["donut"] = new item("Donut",1.09)products["chips"] = new item("Chips",1.99)products["magazine"] = new item("Magazine",2.79)products["nwspaper"] = new item("Newspaper",0.99)products["bagel"] = new item("Bagel",0.99)products["fruit"] = new item("Fruit",1.99)products["cgrtts"] = new item("Cigarettes",5.99)products["batteries"] = new item("Batteries",3.99)var cart = [];function buyItem() { var buy = prompt("What item do you want to buy?").toLowerCase(); switch(buy){ case 'milk':add("milk");break; case 'eggs':add("eggs");break; case 'candy bar':add("candybar");break; case 'soda':add("soda");break; case 'water':add("water");break; case 'cereal':add("cereal");break; case 'donut':add("donut");break; case 'chips':add("chips");break; case 'magazine':add("magazine");break; case 'newspaper':add("nwspaper");break; case 'bagel':add("bagel");break; case 'fruit':add("fruit");break; case 'cigarettes':add("cgrtts");break; case 'batteries':add("batteries");break; default: alert("We do not sell that item!"); console.log("We do not sell that item!"); }}</script></head><body><div class="header"> <h3 style="font-family: corsiva; font-size: 25; color: indigo;">Cash Register<h3></div><div class="left"> <button style="font-family: corsiva; font-size:22; border:2px solid black; border-radius: 100%;" onclick="buyItem()"><strong>What item do you want to buy?</strong></button><div class="right"> <div id="products"> </div> <div id="cart"> </div></div><div class="footer"> <h5>Brooke Simmerman</h5></div></body></html> What I would like is for the list of products to appear in two columns so that I have space for more items. With what I have now, some of the items continue vertically into the footer div. I would rather they continue in another column next to the first. How do I do this?
  23. Hi, I thank all of you in this forum because whenever I don't understand anything you people help me. Now I want to know something more. I know HTML, CSS, JavaScript and jQuery. Now I have started building an e-commerce shopping website. But I don't know how I will manage the data on this site, how I will request data from server,keep the recordings of the sales and products. Is there any way, I can complete my website with just javascript scripting language. Please have some dynamic suggestion for me. Thank you in advance.
  24. Hi, I am having some problem while creating a mega dropdown menu. I want the mega-dropdown-content to be divided to 4 column and 3column will be for the menu and rest 1 column will be for an image. But this is not the expected result. Here is the code. Please tell how can I fix it? Thank you. <!DOCTYPE html> <html> <head> <link rel= "stylesheet" href= "mega%20menu%20copy%20copy.css"/> <link rel= "stylesheet" href= "font-awesome-4.7.0/css/font-awesome.min.css"/> <style> .menu-container, .mega-menu, .nav, .nav li, .nav a, .nav div{ margin: 0; padding: 0; border: none; outline:none; } .nav { position: relative; } .nav a { text-decoration: none; } .nav li { list-style: none; } a { color: white; } .menu-container { position: relative; width: 100%; } .mega-menu { position: absolute; width: 48%; left: 26%; height: 40px; background-color: red; } .nav > li { display: inline-block; height: 40px; font-size: 20px; font-weight: bold; } .nav > li > a { display: block; padding: 10px 10px; color: white; text-align: left; vertical-align: center; margin-bottom: 10px; } .mega-menu-content, .dropdown { padding-top: 60px; position: absolute;; width: 100%; display: none; background-color: white; color: black; font-size: 16px; border: 2px solid lightgrey; } .mega-menu-content > ul > li:first-child,.dropdown > ul >li:first-child { padding-top: 10px; } .mega-menu-content > ul> li, .dropdown > ul > li { display: block; min-width: 120px; min-height: 40px; margin: 0; padding: 0; } .mega-menu-content > ul > li > a, .dropdown > ul > li > a { color: red; font-size: 16px; min-width: 120px; padding: 8px 10px; border: 1px solid lightgrey; } .mega-menu-content { column-count: 3; column-width: 33%; column-gap: 0; } .mega-menu-content > ul > li > a:hover, .dropdown > ul > li > a:hover { background-color: lightgrey; } .nav > li:hover .mega-menu-content, .nav > li:hover .dropdown{ display: block; } </style> </head> <body> <div class= "menu-container"> <div class= "mega-menu"> <ul class= "nav"> <li><a href= "#">Home</a></li> <li><a href= "#">Clothing <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class= "mega-menu-content"> <ul>Men<hr/> <li><a href= "#">T-shirts</a></li> <li><a href= "#">Shirts</a></li> <li><a href= "#">Pants</a></li> <li><a href= "#">Shoes</a></li> <li><a href= "#">Sunglasses</a></li> <li><a href= "#">Caps</a></li> <li><a href= "#">Jewelry</a></li> <li><a href= "#">Others</a></li> </ul> <ul>Women<hr/> <li><a href= "#">Jewelry</a></li> <li><a href= "#">Coats & Jackets</a></li> <li><a href= "#">Tops & Blouses</a></li> <li><a href= "#">Intimate & Sleep</a></li> <li><a href= "#">Jeans</a></li> <li><a href= "#">Pants</a></li> <li><a href= "#">Skirts</a></li> <li><a href= "#">Sweaters</a></li> </ul> <ul>Others<hr/> <li><a href= "#">Boys</a></li> <li><a href= "#">Girls</a></li> <li><a href= "#">Baby</a></li> <li><a href= "#">Luggage</a></li> </ul> <ul>From Popular Sites<hr/> <li><a href= "#">Amazon</a></li> <li><a href= "#">Ebay</a></li> <li><a href= "#">Etsy</a></li> <li><a href= "#">Shoppify</a></li> </ul> <img src= "#" height= "100px" width= "100px" style= "float: right;"/> </div> </li> <li><a href= "#">Products <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class= "mega-menu-content"> <img src= "#" height= "100%" width= "25%" style= "float: left;"/> <hr/> <ul>Electronics & Computers<hr/> <li><a href= "#">TV & Video</a></li> <li><a href= "#">Cellphone & Camera</a></li> <li><a href= "#">Head Phones</a></li> <li><a href= "#">Video Games</a></li> <li><a href= "#">Computers & Tablets</a></li> <li><a href= "#">Monitors</a></li> <li><a href= "#">Schools & Office Supplies</a></li> <li><a href= "#">Trade In Your Electronics</a></li> <hr/></ul> <ul>Health & Beauty<hr/> <li><a href= "#">All Beauty</a></li> <li><a href= "#">Luxury Beauty</a></li> <li><a href= "#">Specialty Diets</a></li> <li><a href= "#">Health,Household & Baby care</a></li> <li><a href= "#">Coupons</a></li> <hr/></ul> <ul>Sports & Outdoors<hr/> <li><a href= "#">Athletic Clothing</a></li> <li><a href= "#">Exercise & Fitness</a></li> <li><a href= "#">Hunting & Fishing</a></li> <li><a href= "#">Team Sports</a></li> <li><a href= "#">Cycling</a></li> <li><a href= "#">Water Sports</a></li> <li><a href= "#">Winter Sports</a></li> <li><a href= "#">All Sports</a></li> </ul> </div> </li> <li><a href= "#">Gifts <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class="dropdown"> <ul> <li><a href= "#">Games</a></li> <li><a href= "#">Books</a></li> <li><a href= "#">Show Piece</a></li> <li><a href= "#">Kids Birthday</a></li> </ul> </div> </li> <li><a href= "#">Arts & Crafts</a></li> <li><a href= "#">Services</a></li> </ul> </div> </div> </body> </html>
  25. In my site www.mikroviologos.gr I would like to make a news section at the bottom of the content like this example. I tried different ways: 1. Inside <div id="content" class="col-9"> after the last <p> I created a <div class="col-4"> to divide the content into 3 columns. 2. I made .floating-box following this tutorial inside <div id="content" class="col-9"> after the last <p> but the result was always the same: part of bottom text goes under footer. Why does this happen? Since I put news section inside <div id="content" class="col-9"> shouldn't it have the behavior of content (push the footer down)? So, I would like to ask, which is the best way to create a News section and how can I make it not hide under the footer, but push the footer down like now content does? Here is my .css: * {box-sizing: border-box;} html{overflow-y:scroll;position:relative;height:100%} header{height:92px;width:100%;margin:auto;background-color:#1a3365;border-bottom:2px solid #6e98c2;} header > .container {overflow: visible;white-space:nowrap;} #nav a{color:#d2dce6;font-size:15px;display:block;padding:3px 4px;font-weight:bold;} #nav li{margin-left:8px;border:2px solid #6e98c2;border-radius:5px;float:left} #nav li:hover,#nav li:active,#nav li.selected{background-color:#101f3d;border:2px solid #4b80b4;} #l1 {color:#f2f2f2;font-size:19px} #l2 {color:#d2dce6;font-size:14px} #logoArea {display:inline-block;float:none;height:auto;padding-bottom:0;vertical-align:top;font-weight:bold;font-family:Arial} #logoArea > a {white-space:normal;} #logoArea > a div {margin-left:12px;} #nav {list-style:outside none none;overflow:hidden;} #logoArea,#nav {margin:0;} #navArea {display:inline-block;margin:50px 0 0;position:relative;white-space:nowrap;} ul#nav {padding:0;} .container {width: 81%; margin:0 auto;max-width:1000px} aside{height:100%;margin:12px 0 15px 0} h1{color:#4A6B98;font-size:21px;} h2{font-size:19px} h3{font-size:16px} #block1{height:auto;margin-top:14px;} #block1 ul{height:auto;padding:0;margin:0;} #block1 ul li{list-style:none;padding:6px;text-align:left;margin:0 6px;border-bottom:1px solid #d9d9d9;} #block1 ul li a{color:#4a6b98;text-decoration:none;font-size:15px;padding:0;display:block;font-weight:bold;} #block1 ul li a:hover, #block1 li a.selected{color:#262626;} #block1 li:first-child{border-top:1px solid #d9d9d9;} #block2, #block3{height:auto;background-color:#ecf1f8;border-top:1px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,0.2);border-radius:5px;padding:10px;margin-top:20px;line-height:1.5} #block2 h2, #block3 h2{margin:0;font-size:18px} #block2 h3, #block3 h3{margin-top:0;} #block2 p, #block3 p, #block2 form{font-size:13px;} p{font-size:15px;} body{height:100%;background:#fff;margin:0;padding:0;font-family:"Trebuchet MS",Helvetica,Arial;font-size:14px;line-height:1.43;color:#4d4d4d;} body a{text-decoration:none;color:#4a6b98;} #content{font-size:15px;margin:26px 0 15px;line-height:1.5} footer{width:100%;text-align:center;background-color:#dae4f1;margin-left:auto;margin-right:auto;border-top:#6e98c2 2px solid} footer p{font-size:12px;text-align:left;margin:0;line-height:1.43} #iso {width:41px;height:40.5px;float:left;margin-right:5px} #p1 {color:#1a3365} #p2 {color:#dae4f1} #c {color:#1a3365} ul.topnav li.icon {display:none;} .row::after {content: "";clear:both;display:block;} [class*="col-"] {float:left;padding:15px;} .col-1 {width:8.33333%;} .col-2 {width:16.6667%;} .col-3 {width:25%;} .col-4 {width:33.3333%;} .col-5 {width:41.6667%;} .col-6 {width:50%;} .col-7 {width:58.3333%;} .col-8 {width:66.6667%;} .col-9 {width:75%;} .col-10 {width:83.3333%;} .col-11 {width:91.6667%;} .col-12 {width:100%;} #wrapper {min-height:100%;} footer.col-12 {position:relative;bottom:auto;overflow:hidden;min-height:100px;padding-top:0;padding-bottom:0;} aside:after, #content:after {content:"";display:block;padding-bottom:100px;} footer.col-12 {margin-top:-100px;} @media screen and (max-width:1020px) { aside:after {padding-bottom:15px;} #content img:first-child, #content h1:first-child + img {margin:0 auto;display:block;} ul.topnav li:not(:first-child) {display:none;} ul.topnav li.icon {float:right;display:inline-block;} #logoArea {display:block;text-align:center;} header {height:auto;} #navArea {display:block;height:30px;margin:1em 15px;} [class*="col-"] {width:100%;} #nav li {float:none;margin:0;background-color:#1a3365;} #nav {position:absolute;left:0;right:0;} ul.topnav li.icon {display:inline-block;position:absolute;right:0;top:0;} #navArea #nav a {font-size:16px;} #content {margin-top:0px;} aside {margin-bottom:0;} .container{width:auto;} ul.topnav.responsive {position:relative;} ul.topnav.responsive li.icon {position:absolute;right:0;top:0;} ul.topnav.responsive li {float:none;display:block;margin: 0;} ul.topnav.responsive li a {display:block;text-align:left;} #nav.topnav.responsive > li:not(:first-child):not(:last-child) {margin-top:-1px;} } @media screen and (max-width:1090px) {#nav a {font-size:14px;}} and here is my .html <!DOCTYPE html> <html lang="el"> <head> <meta name=viewport content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="css/main.css"> <title>Αρχική σελίδα | Μικροβιολογικό Εργαστήριο στην Καβάλα</title> <meta name="description" content="Ο Χάρης Καραχριστιανίδης είναι Mικροβιολόγος στην Καβάλα. Το Μικροβιολογικό Εργαστήριό του λειτουργεί από το 2005 στην οδό Φιλικής Εταιρείας 5"> <style> h1 {margin-top:0;font-weight:bold;font-family:Arial;margin-left:12px} #mc {max-width:100%;height:auto} #l1, #l2 {display:block} </style> </head> <body><div id="wrapper"> <header> <div class="container"> <div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"><h1><a href=/><span id="l1">mikroviologos.gr</span><span id="l2">Εργαστήριο Μικροβιολογίας</span></a></h1></div> <div id="navArea"> <ul id="nav" class="topnav"> <li><a href="/">Αρχική σελίδα</a></li> <li><a href="biografiko">Βιογραφικό</a></li> <li><a href="syxnes-erotiseis">Συχνές ερωτήσεις</a></li> <li><a href="arthra/">Άρθρα</a></li> <li><a href="apotelesmata">Αποτελέσματα</a></li> <li><a href="epikoinonia">Επικοινωνία</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">☰</a> </li> </ul> </div><!--End of navArea--> <script> function myFunction() { var x = document.getElementById("nav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; }} </script> </div> </header> <div class="row"> <div class="container"> <aside class="col-3"> <div id="block1"> <ul> <li><a href="organosi-ergastiriou">Οργάνωση εργαστηρίου</a></li> <li><a href="exoplismos">Εξοπλισμός</a></li> <li><a href="fotografies">Φωτογραφίες</a></li> <li><a href="tmimata-exetaseis">Τμήματα - εξετάσεις</a></li> <li><a href="proliptikes-exetaseis">Προληπτικές εξετάσεις</a></li> <li><a href="politiki-poiotitas">Πολιτική ποιότητας</a></li> <li><a href="asfalistika-tameia">Ασφαλιστικά ταμεία</a></li> </ul> </div><!--End of block1--> <div id="block2"><h2>Εξετάσεις αλλεργίας</h2><hr><p>Το εργαστήριό μας πρόσφατα απέκτησε τον αναλυτή της Phadia UniCAP 100 που προσδιορίζει με μεγάλη ακρίβεια με τη μέθοδο αναφοράς ImmunoCAP τις ειδικές IgE και την τρυπτάση</p></div> <div id="block3"><h2>Αποτελέσματα online</h2><hr><p>Αν θέλετε να μπορείτε να βλέπετε τα αποτελέσματά σας online και να τα κατεβάζετε σε μορφή pdf παρακαλώ ενημερώστε μας και <a href="/user/register">εγγραφείτε στην ιστοσελίδα μας</a></p></div> </aside> <div id="content" class="col-9"> <img id="mc" src="http://s.mikroviologos.gr/image/microscope.jpg" alt="Μικροβιολογικό Εργαστήριο του Χάρη Καραχριστιανίδη στην Καβάλα"><p>Το μικροβιολογικό εργαστήριο του Χάρη Καραχριστιανίδη, Iατρού Bιοπαθολόγου (Mικροβιολόγου), λειτουργεί από τις αρχές του 2005 στο κέντρο της πόλης της Καβάλας. Σε καίριο σημείο, με εύκολη πρόσβαση από τα χωριά του νομού μας καθώς και από άλλους νομούς, προσφέρουμε υπηρεσίες ιατρικής με εγκυρότητα και υπευθυνότητα.</p> <p>Ο άρτια εξοπλισμένος χώρος μας με αναλυτές τελευταίας τεχνολογίας, σε συνδυασμό με το εξειδικευμένο και ειδικά καταρτισμένο προσωπικό, σας εγγυώνται αξιοπιστία και ασφάλεια.</p> <p>Η συνέπεια, η στήριξη, ο επαγγελματισμός και το ανθρώπινο πρόσωπο είναι τα βασικά στοιχεία της παροχής υπηρεσιών υγείας του εργαστηρίου μας, για την κάλυψη των δικών σας αναγκών, κάθε στιγμή που αυτό είναι απαραίτητο.</p> </div><!--End of content--> </div><!--End of container--> </div><!--End of row--> </div><!--End of wrapper--> <footer class="col-12"><div class="container"><p class="col-3"><u>Πιστοποίηση ποιότητας</u><br><img id="iso" src=http://s.mikroviologos.gr/image/iso_logoss.png alt="Πιστοποιημένο με ISO 9001:2008 Μικροβιολογικό Εργαστήριο στην Καβάλα">Εργαστήριο πιστοποιημένο<br>με <a href="http://s.mikroviologos.gr/files/iso90012008.pdf" target="_blank">ISO 9001:2008</a> από την<br>TUV Hellas</p><p class="col-2"><u>Διεύθυνση</u><br>Φιλικής Εταιρείας 5<br>(έναντι ΙΚΑ και ΚΤΕΛ),<br>Καβάλα</p><p class="col-3"><u>Επικοινωνία</u><br><span id="p1">☏</span> 2510-620630,<br><span id="p2">☏</span> 6974-900493<br><span id="c">✉</span> <a href="http://www.mikroviologos.gr/forma-epikoinonias">Φόρμα επικοινωνίας</a></p><p class="col-4"><br>Σχεδιασμός: <a href="/">Χάρης Ν. Καραχριστιανίδης</a><br>Copyright © 2005-2016</p></div></footer> </body> </html> Thank you!
  • Create New...