Jump to content

ishan_shah

Members
  • Content Count

    47
  • Joined

  • Last visited

Everything posted by ishan_shah

  1. Hey @ryanstua, You can do something like that: Html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="navbar"> <div class="dropdown"> <button class="dropbtn">Menu <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <h3>Category 1</h3> <a href="#">Link A</a> <a href="#">Link B</a> <a href="#">Link C</a> </div> <div class="column"> <h3>Category 2</h3> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <div class="column"> <h3>Category 3</h3> <a href="#">Link X</a> <a href="#">Link Y</a> <a href="#">Link Z</a> </div> </div> </div> </div> <a href="#home">Home</a> <a href="#news">About Us</a> </div> </body> </html> And css: * { box-sizing: border-box; } body { margin: 0; } .navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 100%; left: 0; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content .header { background: red; padding: 16px; color: white; } .dropdown:hover .dropdown-content { display: block; } .column { float: left; width: 33.33%; padding: 10px; background-color: #ccc; height: 250px; } .column a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column a:hover { background-color: #ddd; } .row:after { content: ""; display: table; clear: both; }
  2. Hello @JStahn,there is no default class which will provide you to set image in background ,you can use bootstrap 4 class to create good looking navbar after that you can use custom css to override that particular class and apply background-img tag for your desire background image like this: HTML: <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us </a></li> <li><a href="#">About us</a></li> </ul> </div> </nav> css: .navbar .navbar-default{ background-image: url("Your Image path"); }
  3. Hello, we use dir tag to apply direction to our text for example : Add dir="rtl" to the html tag any time the overall document direction is right-to-left. This sets the base direction for the whole document. No dir attribute is needed for documents that have a base direction of left-to-right, since this is the default. <!DOCTYPE html> <html dir="rtl" lang="ar"> <head> <meta charset="utf-8"> ... Adding dir="rtl" to the html element will cause block elements and table columns to start on the right and flow from right to left. All block elements in the document will inherit this setting unless the direction is explicitly overridden. Same goes for ltr(Left to right ) {rtl(Right to Left)}
  4. ishan_shah

    Drop down menu

    Hello, You can use This For Providing Date Selection <input type="date"> Or You Can Also DO this: <select name="month"> <option value="Month" Selected></option> <option value="1" Selected>Jan</option> <option value="2">Feb</option> <option value="3">March</option> ... <option value="12">Dec</option> </select> <select name="day"> <option value="Select" Selected></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> ... <option value="31">31</option> </select> <select name="year"> <option value="Years"selected>Select Year</option> <option value="1900">1900</option> <option value="1900">1901</option> <option value="1900">1901</option> ... <option value="2019">2019</option> </select>
  5. You Can user Bootstrap To Make It easy , here is something that i made using bootstrap that might help you to create what you want. <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>YourTv</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel="stylesheet" type="text/css" href="bootstrap.css"> <link rel="stylesheet" type="text/css" href="Fmovies.css"> <link rel='stylesheet' type='text/css' media='screen' href='main.css'> <script src='main.js'></script> </head> <body> <div class="card"> <div class="card-header"> <a href="https://fmovies.wtf/" class="badge badge-Info" style="font-size: 24px; text-decoration: none;">YourTv</a> </div> <ul class="link"> <li> <a href="https://fmovies.wtf/home" class="badge badge-dark">Home</a> </li> <li> <a href="https://fmovies.wtf/az-list" class="badge badge-dark">A-Z List</a> </li> <li> <a href="https://fmovies.wtf/movies" class="badge badge-dark">Movies</a> </li> <li> <a href="https://fmovies.wtf/tv-series" class="badge badge-dark">Tv-Series</a> </li> <li> <a href="https://fmovies.wtf/most-watched" class="badge badge-dark">Most Watched</a> </li> </ul> </div> </div><br/> <div class="container"> <div class="row"> <div class="col-4"> <a href=""> <img src="image/GOT.jpg" class="img-fluid" title="Game Of Thrones" alt="GOT"></a> </div> <div class="col-4"> <a href=""><img src="image/Money.png" class="img-fluid" title="Money Heist" alt="Money Heist"></a> </div> <div class="col-4"> <a href=""><img src="image/Stranger.png" title="Stranger Things" class="img-fluid" alt="Stranger Things"></a> </div> </div> <div class="row"> <div class="col-12"> <br/> </div></div> <div class="row"> <div class="col-4"> <a href=""> <img src="image/black.png" class="img-fluid" title="Black Mirror" title="Game Of Thrones" alt="Black Mirror"></a> </div> <div class="col-4"> <a href=""><img src="image/vikings.jfif" class="img-fluid" style="height: 220px;" title="vikings" alt="vikings"></a> </div> <div class="col-4"> <a href=""><img src="image/sherlock.jfif" title="Sherlock" style="height: 220px; width: 400px;" class="img-fluid" alt="Sherlock"></a> </div> </div> <div class="row"> <div class="col-12"> <br/> </div></div> <div class="row"> <div class="col-4"> <a href=""> <img src="image/13reason.jfif" class="img-fluid" title="Black Mirror" style="height: 220px; width: 400px;" title="13 Reason Why" alt="GOT"></a> </div> <div class="col-4"> <a href=""><img src="image/friends.jfif" class="img-fluid" style="height: 220px; width: 400px;" title="Friends" alt="Friends"></a> </div> <div class="col-4"> <a href=""><img src="image/see.jpg" title="See" style="height: 220px; width: 400px;" class="img-fluid" alt="See"></a> </div> </div> </div> <footer class="card-footer text-center"style="color:white">This Page reffers To Fmovies!</footer> </body> </html> here is a ss for your use , You Can re-adjust code for color and contain as you like
  6. Hi, You should try the following CSS. I hope it will work for you. tr:before { content: "Text"; font-size: 0.5em; display: inline-block; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
  7. Hello @briansirbu, You should start with HTML then CSS after that you can go with the JavaScript and other required stuff for your site. You can refer to this link: https://www.w3schools.com/
  8. Hello @surajt, You can simply use the table. You can place both the images into two columns. This could be the easiest solution. Although you can set its height and width in such a manner that it could place horizontally in the same line. As <img> is an inline element.
  9. Hello @caleb1, You should use the pseudo-class to be more effective and attractive UI effects. kindly refer to the following link for more reference and understanding. https://www.w3schools.com/css/css_pseudo_classes.asp
  10. Hi @vitalnet, I have tried to code as per your requirement. Kindly check the same. Hope it will work for you. <html lang="en"> <head> <title>Bootstrap 4 Tooltip Persists, Looks Terrible</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Bootstrap 4 Tooltip Persists, Looks Terrible</h3> <br> "Other button disabled" scenario works fine. <br> First, hover over buttons. Look at tooltips while hovering. <br> Then, click button A to disable button B. Works fine: <br> - Button B is disabled, and no tooltip. <br> - Tooltip still works correctly on button A. <br> <br> <button type="button" id="button_a" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button B" onclick='change_button ("button_b", true);'> Button A </button> <button type="button" id="button_b" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disabled by Button A"> Button B </button> <br> <br> <hr> <br> "Same button disabled" scenario fails. <br> First, hover over Button C. Look at the tooltip. <br> Then, click button C to disable button C. Messes up: <br> - Button C is disabled, so that part is OK. <br> - But Button C tooltip persists, looks terrible. <br> <br> <button type="button" id="button_c" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button C" onclick='change_button ("button_c", true);'> Button C </button> <button type="button" id="button_d" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Enables Button C" onclick='change_button ("button_c", false);'> Button D </button> <br> <br> <hr> <br> So if a button is disabled while the cursor is hovering over it, the tooltip persists. <strong> Could you please explain how to make tooltip go away when Button C is disabled? </strong> I would prefer if tooltip went away when Button C disabled, since that is default behavior of bootstrap disabled buttons. And disabled button may later get enabled again, so I do not want to delete title attribute. Basically I want bootstrap to behave the same way as when Button B is disabled. I have looked around and cannot find how to fix this problem, and have tried various things, with no success. There are real instances where a button carries out an action, and then the button needs to be disabled, so I appreciate the help. Thanks </div> <script> $(document).ready(function () { $('[data-toggle="tooltip"]').tooltip(); }); function change_button(button_id, bool_val) { if (button_id === 'button_c') { $('[data-toggle="tooltip"]').tooltip('hide'); } var button_obj = document.getElementById(button_id); button_obj.disabled = bool_val; } </script> </body> </html>
  11. Hello @leela52452, dir attribute is used to set the direction of the text within an element in an HTML document. If you set it as an RTL then it will display HTML from right to left. It generally used when language is like Arabic etc. dir attribute is not a compulsory attribute so you can also skip this.
  12. Hello @Pygmalion, I prefer bootstrap. Because Bootstrap is the best framework for all kinds of modifications to existing dynamic code. Following is the link to learn bootstrap from basic to advance. Refer the same for the basic ideas. Bootstrap 4 Tutorial
  13. ishan_shah

    Universal selector

    Hello @smus, Simply you can use the element name separated by a comma as a selector in CSS. Following is the example of multiple tags as a single selector. E.x. h1, h2, h3 { color:orange; }
  14. GET method is used to retrieve the data from the database while to insert data into the database, the POST method is used.
  15. Hello @Yoni, You should use the latest version of Angular as it supports the latest features and new functionalities. Using AngularJs is not a good way to build a new application.
  16. Hi, You can use the <figcaption> tag to fulfill your requirements. For further reference, you can use the following link: https://www.w3schools.com/tags/tag_figcaption.asp
  17. Hello @BigDemond, Generally, when you use Bootstrap you should avoid the use of semantic elements. Bootstrap allows you to use its default class to implement the functionality you want. So, as per my opinion, you should avoid the use of semantic HTML.
  18. Hi @ughhope, I have tried to code as per your requirement. I think you should try this once. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } </style> </head> <body> <h2>Fade in Overlay</h2> <p>Hover over the image to see the effect.</p> <div class="container"> <img src="https://www.roadtestreviews.com/wp-content/uploads/2014/11/mustang-batcave-017.jpg" alt="Avatar" class="image"> <a href="https://www.google.com/" class="overlay"></a> </div> </body> </html> I hope it will work as per your requirements. I have also added an anchor tag for your second query.
  19. Hello @smeeks87, I have tried your code and also I have made some changes in your code in <style>. I am attaching the file after solving your issue. Kindly check it. Thank You. 2123815979_holman-bmw-ft-lauderdale-accordion-x7-page_v3nocarousel (1).html
  20. Hi @Slevin, According to me you should try following code. It will work as per your requirement. You just have to add following item into your CSS. justify-items: center;
  21. ishan_shah

    SEO

    Hello @Rakibul Hasan, For SEO purpose you have following tutorial sites for learning it from basic to expert level. https://www.tutorialspoint.com/seo/index.htm https://www.javatpoint.com/seo-tutorial
  22. Hi @danh4648, As much as I know, w3schools does not allow you to create account to learn the tutorials. But for forums you can create the account and learn more from this forums. w3schools does not provide any storage functionalities for your completed exercise.
  23. Hello, I have tried the following query. I hope it will work for you also. select * from [table_name ]where SUBSTRING(col_name,len(col_name),len(col_name)) in ('a','e','i','o','u'); Or in case of case sensitivity, you should try following query. select * from TABLE_NAME where SUBSTRING(COL_NAME,len(COL_NAME),len(COL_NAME)) in ('a','e','i','o','u','A','E','I','O','U') I have tried other one query also. It is as follows: select * from TABLE_NAME where (RTRIM(COL_NAME)) like '%a' or (RTRIM(COL_NAME)) like '%e' or (RTRIM(COL_NAME)) like '%i' or (RTRIM(COL_NAME)) like '%o' or (RTRIM(COL_NAME)) like '%u'
  24. Hello, You can give multiple styles using semicolons(;) to a single element. Following is the example of the same as an inline CSS. <h1 style="color:blue; text-align:center"> Your Text </h1> In case you want to apply internal CSS then your code will be as follows: <h1 id="header1">Your Text</h1> #header1 { color:blue; text-align:center }
  25. Hello, You should use cellspacing attribute of the table element for spacing between two columns of the table. Following is the example code of the same. <table cellspacing="10"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>100</td> </tr> </table>
×
×
  • Create New...