Search the Community

Showing results for tags 'css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 686 results

  1. Hello buddy...! how can someone hide image preview/post snippet on Contempo new blogger theme on homepage for mobile view just like THIS BLOG mobile view.? Need it to show only Post title.. Regards...
  2. Hello! I'm trying to create a responsive thumbnail gallery where all the images in the same row are equal in height. The proportions vary - some images are portrait, some landscape. I want them to scale themselves to equal height. But the rows won't have to be the same height - only the images on the same row. My code for one thumbnail row is basically (within a container with a set max-width): <div class="w3-cell-row w3-mobile"> <div class="w3-cell w3-container w3-mobile w3-padding"> <img src="img1.jpg" style="width:100%"> </div> <div class="w3-cell w3-container w3-mobile w3-padding"> <img src="img2.jpg" style="width:100%"> </div> <div class="w3-cell w3-container w3-mobile w3-padding"> <img src="img3.jpg" style="width:100%"> </div> </div> Img1 is landscape, img2 and img3 are portrait - in the thumbnail gallery img1 appears taller in height than the others, why? The actual image files are all 900 px in height (width is different). Is there a way to force the thumbnails on the same row to be the same height? Can this be done without resizing the actual images? And can the gallery still be responsive? Thank you!
  3. 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">&#9660; </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"> &rang;</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">&#9660; </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">&#9660; </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; } }
  4. Hello, My home page has Sticky Notes and they keep affecting my Top Menu, making the Top Menu look like Sticky Notes, but without content, just top menu’s name in it. I believe that there is something wrong with my CSS (I am not a pro at HTML, just copy & paste stuff, though some images and texts have been added). Second, on hover sticky notes are underlined and that is not supposed to happen. I love my sticky notes, they look pretty good, I spent a lot of effort on making them look good but still cannot make them being friendly to my Top Menu, as well as to the Side Modules. Sticky notes turn all my menus into a real mess (see images attached). Images of my problem are in the attachment. Any help ideas are much appreciated Thanks in advance
  5. I want to know about CSS Coding that how it works and who it will help me to build website?
  6. Please Provide me Book or Link which Cover the Following Topics: 1. HTML/HTML5 a. HTML Page design using DIV based layout (no tables) b. META Tags c. Viewport d. HTML5 Page design using &lt;header>, <footer>, <article>, <section> and <div> 2. CSS a. Styling of elements using CSS <b>b. CSS properties – float, align, background, margin, padding, position, width, height c. Pseudo classes d. How to override CSS properties</b> e. Inline, embedded and external CSS <b>3. JavaScript a. DOM Manipulation i. Change content of the DIV based on some event ii. Populate data inside a DIV using AJAX iii. Show/Hide Elements b. Event handlers c. Timer functions – setTimeOut, setTimeInterval d. AJAX and JSON e. Cookies management f. Debugging using Browser Console g. JavaScript/CSS magnification </b> Please advise me any link for the topics of above links, or are there any software houses in Dubai who suggest me with the respective resolution. Please reply asap.
  7. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Page</title> <link rel="stylesheet" href="main.css"> </head> <body> <header> <div class="container"> <h1 class="title">My Personal Page</h1> <nav class="links"> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> <a href="">TEXT LINK</a> </nav> </div> </header> <div class="clear"></div> <div class="container"> <div class="picture "> <img src="https://s-media-cache-ak0.pinimg.com/originals/e5/95/14/e59514c89d530660923148bad789ef67.jpg" alt=""> </div> </div> <div class="img2"></div> </body> </html> *{ margin:0; padding:0; } .container{ width:960px; margin:0 auto 0 auto; } .links{ float:right; padding: 20px; background-color: #737373; } a{ color:white; text-decoration: none; margin-right:10px; } .title{ display:inline-block; color: #9d9d9d; font-family: Georgia,"Times New Roman",Times,serif; } header{ background-color: dimgray; padding:20px 0 50px 0 ; margin-bottom:30px; } .clear{ clear: both; } .picture{ border:1px solid black; padding:5px; } i had this problem before where the picture wont stay in the border , but i forgot how i fixed it the first time .can someone help
  8. it says that position relative and absolute go when you want to adjust some text or a picture without messing with other divs in the container the way i adjusted things before would be to create a div (for example) and then put another div-class(that would be the picture) and another div-class that would hold a paragraph ,and then i would use margins and padding to adjust them along with display and stuff like that. since i found out about position relative and absolute im just wondering if i could use that instead of all of the above that i just wrote .
  9. FYI: The w3-panel class breaks CSS Grid Layouts if added to an element with display: block, by creating an empty, unstyled element at the beginning of the grid. Creating a wrapper element and adding w3-panel to _that_ works, but is a cludge.
  10. is there a better online resource to test responsive design modeling than the Safari browser's RD option?
  11. Hello... I have a footer that won't stick to the bottom of the page. On laptops it looks like it is on the bottom but when I check the site on bigger screens it shows higher. I have uploaded a pic with the problem. Thank you in advance.
  12. Hi, I am going through bootstrap 4 alpha version. But when I tried to create a simple modal I found that it doesn't work in my browser. Can anyone find out what is wrong I am doing? The problem is fixed. It was causing problem because of incorrect data-target attribute. <!DOCTYPE html> <html lang= "en-US"> <head> <meta charset= "utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name= "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit= no"/> <title> . Bootstrap</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <div class= "container"> <div class= "row"> <div class= "col-12"> <h1 class= "alert-info">Live Demo</h1> <div class= "w-100"></div> <button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#liveModal"> Go Live </button> <div class= "modal fade" tabindex="-1" id= "liveModal" role= "dialog" aria-labelledby= "liveModalLabel"> <div class= "modal-dialog" role="document"> <div class= "modal-content"> <div class= "modal-header"> <h5 class= "modal-title">Modal Title</h5> <button class= "close" type="button" data-dismiss= "modal" aria-label= "Close"> <span aria-hidden= "true">×</span> </button> </div> <div class= "modal-body"> <p> Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. </p> </div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </body> </html>
  13. Hi, Need some CSS help regarding SubMenu creation. I have this below code for responsive Main Menu which is working fine. I need to create a SubMenu under the main menu. For example :- Menu2 will habe two submenu like Menu2_SubMenu1 & Menu2_SubMenu2. The color, format and hovering effect will be same like Main menu. Can you kindly help me out with the CSS for the same. I am messing up with the Submenu CSS code code. Thanks in advance for your help. Regards, Ari. Here is the WORKING code where I would like to include sub-menu.( for example under **Menu2**). <!DOCTYPE html> <html> <head> <style> body { margin: 0; } ul.topnav { list-style-type: none; margin: 0px; padding: 0; overflow: hidden; background-color: #2D5C88; text-align: center; /* For fixed header */ position: fixed; width: 100%; z-index: 1000; } ul.topnav li { display: inline; } ul.topnav li a { display: inline-block; color: #fff; text-align: center; padding: 8px 30px 8px 30px; text-decoration: none; transition: 0.3s; font-size: 13px; font-family: 'Verdana', Geneva, sans-serif; } ul.topnav li a:hover { background-color: #33699b; } ul.topnav li.icon { display: none; } @media screen and (max-width:680px) { ul.topnav li:not(:first-child) { display: none; } ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive { position: relative; } ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } </style> </head> <body> <ul class="topnav" id="myTopnav"> <li><a class="active" href="google.com">Menu1</a></li> <li><a href="http://www.gogle.com">**Menu2**</a></li> <li><a href="http://www.gogle.com/">Menu3</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li> </ul> </body> </html>
  14. I have 2 lists I am trying to complete in my website. The first list I have is a navigation bar that runs horizontally. I have all of the css and html for that. In addition, under my gallery division I am trying to add another list to replace my table and make it layout similar to the table. When I add my list it is effected by the navigation bar css. To remedy this I added a class to the division that carries nav bar and added that syntax to my list css such as <div class="nav"> and nav, ul {}. This doesn't seem to be helping though. I don't want to give a class for every li or ul and I'm sure it is an easy fix but I need some help. <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .header, .footer { background-color: #333;; color: lightgrey; padding: 50px; clear: both; } a {color:white;} .clearfix::after { content: ""; clear: both; display: table; } nav, ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } .nav, li { float: left; font-family: arial; } .nav, li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } #border1 { border: 3px solid #2990EA; padding: 10px; } .birthday { float: left; margin-right: 100px; margin-left: 400px; width:500px; } .footer a { text-decoration: none; clear: both; } .column { background-color: #ebecf6; overflow: hidden; clear: both; } .container { background-color:#909ca2; } div.gallery img { width: 300px; height: 250px; padding: 5px; float: left; margin-bottom: 50px; } .gallery1 { margin-left: 500px; } .table1 { padding:100px; } th { font-size: 200%; } tr { font-size: 150%; } tr, p { margin-left: 200px; } </style> </head> <body style="font-family: sans-serif;"> <div class="nav"> <ul> <li class="li" style="float:right"><a href="#about school">ABOUT SCHOOL</a></li> <li class="li" style="float:right"><a href="#about family">ABOUT FAMILY</a></li> <li class="li" style="float:right"><a href="#about me">ABOUT ME</a></li> <li id="border" style="float:right"><a href="#home">HOME</a></li> </ul> </div> <div class="header"> <h1 style="color: #e9cf76;text-align:center;font-size:300%">About Me</h1> </div> <div class="container"> <div class="gallery"> <img class="gallery1" src="bun.jpg" alt="Trolltunga Norway" width="100" height="100"> </div> <div class="gallery"> <img src="3eb.jpeg" alt="Trolltunga Norway" width="100" height="100"> <div class="gallery"> <img src="westworld.jpg" alt="Trolltunga Norway" width="100" height="100"> </div> <div class="list1"> <ul> <li>Technology Teacher</li> <li>Previously a Manager</li> </ul> <ul> <li>Lamb Karahi</li> <li>Pho Thai</li> </ul> </div> <div class="table1"> <table style="width:100%"> <tr> <th>Job</th> <th>Food</th> </tr> <tr> <td><p>Technology Teacher</p></td> <td><p>Lamb Karahi</p></td> </tr> <tr> <td><p>Previously a Manager</p></td> <td><p>Pho Thai</p></td> </tr> </table> </div> </div> <div class="column content"> <img class="birthday" src="birthday.jpg"> <h1 style="text-align:center;font-size:300%">Who am I?</h1> <p style="font-size: 150%">I have two children and a third on the way. My oldest child's name is Harper and her brother is called Nolan. The third baby gender is a mystery to all but me, and no I won't tell you! Minus the lack of sleep being a parent is the best thing that ever happened to me.</p> <p style="font-size: 150%"> teach technology at MMSA. I am one of the few teachers who can say that they have taught every single grade level. I graduated from Wayne State University with a Bachelor's Degree in Secondary Education in 2011. I have been teaching since 2013. </p> </div> </div> <div class="footer"> <p STYLE="text-align:center"><SPAN id="border1"><a href="https://www.weebly.com/" target="_blank">CREATE A FREE WEBSITE</SPAN></a></p> </div> </body> </html>
  15. Hi. I am familiar with some HTML but my knowledge in Javascript, JQuery and CSS is very limited. I have been learning from examples on the web and making my own changes. Please see the fiddle I am working on below; sorry if the full code is messy! https://jsfiddle.net/djj2c84t/ There are a number of features I wish to implement but I am totally stumped! I have gotten as far as I think I can with the fiddle above and it would be more than appreciated if anyone can provide any help, possibly with any example code and where the code needs to go. When I make a multiple selection from the list, how do I get the results (divs) to show in order of most recent selection at the top? For example, if I multi-selected in the order Nuts, Meats, Vegetables, Fruits, how do I get the results (divs) to appear in the order Fruits, Vegetables, Meats, Nuts? At the moment they appear in the order that they are listed in the box. I would also like to ask if it is possible to keep the results (divs) showing for all the items selected even after a new search is performed and a new selection made. For example, if I search for 'F' and select 'Fruits' and then search for 'V' and select 'Vegetables', can I have both the 'Vegetables' and 'Fruits' divs showing in the results? At the moment, 'Vegetables' replaces 'Fruits'. If this is possible, would it also be possible to have the selected items in the list remain highlighted even after a new search is performed? For example, after making the above searches/selections, if I then search for 'ts', the list would show 'Fruits', 'Nuts' and 'Meats', but I would like 'Fruits' to still be highlighted and to be able to close the 'Fruits' div by de-selecting 'Fruits' from the list or clicking the Close (X) button on the 'Fruits' div itself. There are a few other things I have not been able to solve but I will refrain from posting too many questions at once. Any help would be greatly appreciated! Thank you.
  16. So the grid view that is explained here does not work in my own document. This is the code I'm using: /*GRID VIEW*/ [class*="col"] { width: 100%; } @media only screen and (min-width: 720px) { .col1 {width: 8,33%;} .col2 {width: 16,67%;} .col3 {width: 25,00%;} .col4 {width: 33,33%;} .col5 {width: 41,67%:} .col6 {width: 50,00%;} .col7 {width: 58,33%;} .col8 {width: 66,67%;} .col9 {width: 75,00%;} .col10 {width: 83,33%;} .col11 {width: 91,67%;} .col12 {width: 100,00%;} } /*LAYOUT*/ * { font-family: sans-serif; border: 0.1px solid black; } body { width: 100vw; height: 100vh; overflow-y: scroll; margin: 0; } div { height: 100px; background-color: red; } <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="col3"></div> </body> Does anyone see what's wrong? The div has always a width of 100% in my browser (safari)... Thanks!
  17. Hello, I was wondering if anyone out there would like to do a paid job? Ultimately I would like to hire someone to take one of the templates found at https://www.w3schools.com/w3css/w3css_templates.asp and customise it to change the main picture and fill content in for some of the sections. It is to be a 1-page site only, just a landing page, with some javascript included for a sign-up form (code will be supplied). Look forward to anyone who would be available to do this? Kind regards, MC P.S. I really hope it's ok to post this, I can't find anything in the guidelines to say to not so hope ok. Sorry if not!
  18. Recently I used a plugin to create a responsive gallery for a website. After some tweaking I got the gallery looking great but I'm having trouble getting the modal controls to cycle the images correctly. This issue has been plaguing me for a few weeks, I'm about to scrap the whole gallery and start from scratch if I can't get these darn buttons to work correctly:/ Really I'm thinking the issue is stemming from the multiple css files that the plugin needs to run the gallery. A link to the actual site: http://testing123.emcfintech.com/#myCarousel (Gallery at bottom of page.) I tried building another gallery based off w3schools responsive gallery and it was looking great on my wamp server but as soon as I brought it into this website the 3rd row of the gallery skips an image and throws off the design. So I reinserted the plugin gallery. My question is should I try to fix the current gallery's controls or burn it down, remove the plugin's css and js and try to build the gallery from scratch? Any help would be greatly appreciated, thank you so much. <div class="mbr-gallery-row container" style="position: relative; height: 642px;"> <div class=" mbr-gallery-layout-default"> <div> <div> <div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 0%; top: 0px;"> <div href="#lb-gallery2-7" data-slide-to="0" data-toggle="modal"> <img alt="" src="/Images/Bump Die 001(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Bump Die</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Responsive" data-video-url="false" style="position: absolute; left: 25%; top: 0px;"> <div href="#lb-gallery2-7" data-slide-to="1" data-toggle="modal"> <img alt="" src="/Images/COMPACT FORM ROLL (600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Compact Form Roll</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Creative" data-video-url="false" style="position: absolute; left: 50%; top: 0px;"> <div href="#lb-gallery2-7" data-slide-to="2" data-toggle="modal"> <img alt="" src="/Images/Compact Roll Die and Starblade Module in Headstand(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Compact Roll Die and Starblade Module in Headstand</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Animated" data-video-url="false" style="position: absolute; left: 75%; top: 0px;"> <div href="#lb-gallery2-7" data-slide-to="3" data-toggle="modal"> <img alt="" src="/Images/Compact Roll Die and Starblade Unit in Headstand(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Compact Roll Die and Starblade Unit in Headstand</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 0%; top: 214px;"> <div href="#lb-gallery2-7" data-slide-to="4" data-toggle="modal"> <img alt="" src="/Images/Finished Fin Mill Machine and Uncoiler(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Finished Fin Mill Machine and Uncoiler</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Beautiful" data-video-url="false" style="position: absolute; left: 25%; top: 214px;"> <div href="#lb-gallery2-7" data-slide-to="5" data-toggle="modal"> <img alt="" src="/Images/Five - Copper Fin Samples(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Copper Fin Samples</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Responsive" data-video-url="false" style="position: absolute; left: 50%; top: 214px;"> <div href="#lb-gallery2-7" data-slide-to="6" data-toggle="modal"> <img alt="" src="/Images/Louvered Die(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Louvered Dies</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Animated" data-video-url="false" style="position: absolute; left: 75%; top: 214px;"> <div href="#lb-gallery2-7" data-slide-to="7" data-toggle="modal"> <img alt="" src="/Images/Louvered Roll Die in Headstand(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Louvered Roll Die in Headstand</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 0%; top: 428px;"> <div href="#lb-gallery2-7" data-slide-to="8" data-toggle="modal"> <img alt="" src="/Images/Louvered Roll Dies(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Louvered Roll Dies</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 25%; top: 428px;"> <div href="#lb-gallery2-7" data-slide-to="9" data-toggle="modal"> <img alt="" src="/Images/Oil Cooler Roll Die (600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Oil Coller Roll Die</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 50%; top: 428px;"> <div href="#lb-gallery2-7" data-slide-to="10" data-toggle="modal"> <img alt="" src="/Images/Starblade Unit(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Starblade Unit</span> </div> </div><div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p0" data-tags="Awesome" data-video-url="false" style="position: absolute; left: 75%; top: 428px;"> <div href="#lb-gallery2-7" data-slide-to="11" data-toggle="modal"> <img alt="" src="/Images/Tube Mill Cassette(600x450).jpg"> <span class="icon-focus"></span> <span class="mbr-gallery-title">Tube Mill Cassette<br></span> </div> </div> </div> </div> <div class="clearfix"></div> </div> </div> <!-- Lightbox --> <div data-app-prevent-settings="" class="mbr-slider modal fade carousel slide" tabindex="-1" data-keyboard="true" data-interval="false" id="lb-gallery2-7"> <div class="modal-dialog" style="width: 1037px; top: 10px;"> <div class="modal-content"> <div class="modal-body"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-item"> <img alt="" src="/Images/bump-die-001600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/compact-form-roll-600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/compact-roll-die-and-starblade-module-in-headstand600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/compact-roll-die-and-starblade-unit-in-headstand600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/finished-fin-mill-machine-and-uncoiler600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/five-copper-fin-samples600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/louvered-die600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/louvered-roll-die-in-headstand600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/louvered-roll-dies600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/oil-cooler-roll-die-600x450-2000x1500.jpg"> </div><div class="carousel-item"> <img alt="" src="/Images/starblade-unit600x450-2000x1500.jpg"> </div><div class="carousel-item active"> <img alt="" src="/Images/tube-mill-cassette600x450-2000x1500.jpg"> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <a class="close" href="#myCarousel" role="button" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </a> </div> </div> </div> </div> </div> </section>
  19. I posted the code for a custom contact form in a wordpress column container. The resulting code was the form posted as well as the forms background colors. picture below should be all white Webpage: http://reverseloansforseniors.com/ppcfbk/ Code: <!DOCTYPE html> <html> <style type="text/css"> input[type=text]:hover { background-color: #C5E3BF; } input[type=text], select,textarea { width: 48%; display: inline-block; padding: 12px; border: 6px double #96BADD; border-radius: 8px; font-family: "Tahoma", sans, serif; font-size: 20px; box-sizing: border-box; margin-top: 16px; margin-bottom: 16px; margin-left: 10px; } h4 { background-color: #434343; color: #FFF; padding: 12px 200px; border: #FFF; border-radius: 4px; cursor: pointer; font-size: 18px; font-family: "Tahoma"; text-align: center; margin-left: 165px; width: 80px; } h4:hover { background-color: #000; text-align: center; color: white; } h5 { font-size: 30px; font-family: "Tahoma", sans, serif; text-align: center; } .container { border-radius: 15px; background-color: #96BADD; padding: 10px; } </style> <title>1</title> <body> <div class="container"> <h5>Request a Free Information Packet</h5> <div> <input id="fname" name="fullname" placeholder="Full Name" type="text" /> <input id="lphone" name="Phone" placeholder="Phone" type="text" /> <input id="email" name="Email" placeholder="Email" type="text" /> <input id="Message" name="Message" placeholder="Message" type="text" /> <h4>Submit</h4> </div> </body> </html>
  20. Interesting problem with the W3 schools checker 'Nu Html Checker'. I am using a CSS file that I have written which includes a reference 'area1'. I am calling it on many occasions e.g. <a href="mountains.php" id = "area1">Mountains</a> as I only want 'Mountains' to be affected by this particular CSS. When I run Nu Htnl Checker, I get this: Error: Duplicate ID area1. From line 330, column 148; to line 330, column 185 ></td><td><a href="mountains.php" id = "area1">Mounta Surely I can use a piece of CSS more than once in an html document??
  21. I created a contact form using CSS but I may have left out a div. Is there a proper order for the wrappers? My form has side by side fields (Picture) but the fields are horizontal on the website. Picture2. I am knew to this so any help is appreciated. The code is below. <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>
  22. Hello, this is my first time posting, and I wanted to know how to start of on an id using the W3Schools Tab function. Here is the code! <!DOCTYPE html> <html lang="en"> <head> <title>(null)'s Website</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link href="V1.css/Home.V1.css" rel="stylesheet"> <link href="V1.css/Home.V1.Slideshow.css" rel="stylesheet"> <script type="text/javascript" src="V1.js/Tabs.js"></script> <script type="text/javascript" src="V1.js/Slideshow.js"></script> <script src="https://www.w3schools.com/lib/w3data.js"></script> </head> <body> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'Home')">Home</button> <button class="tablinks" onclick="openCity(event, 'News')">News</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="Home" class="tabcontent"> <h3>Home</h3> <h2>Automatic Slideshow</h2> <p>Change image every 2 seconds:</p> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="V1.png/NEW!.png" style="width:100%"> <div class="text">Loving the look of our new website?</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="https://img.clipartfest.com/182119c47939e54a12e23325c2153d0d_garfield-clip-art-garfield-clipart_500-500.jpeg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="https://s-media-cache-ak0.pinimg.com/736x/35/a5/26/35a526aa3f44fb009da502db1127a82c.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> <div id="News" class="tabcontent"> <h3>News</h3> <button onclick="myFunction('Demo1')" class="w3-btn w3-block w3-black w3-left-align">Updates</button> <div id="Demo1" class="w3-container w3-hide w3-animate-zoom"> <h4>Section 1</h4> <p>Some text..</p> <hr> </div> <button onclick="myFunction('Demo2')" class="w3-btn w3-block w3-black w3-left-align">Announcements</button> <div id="Demo2" class="w3-container w3-hide w3-animate-zoom"> <h4>Section 2</h4> <p>Some text..</p> <hr> </div> <button onclick="myFunction('Demo3')" class="w3-btn w3-block w3-black w3-left-align">Blog</button> <div id="Demo3" class="w3-container w3-hide w3-animate-zoom"> <h4>Section 3</h4> <p>Some text..</p> <hr> </div> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex> slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 10000); // Change image every 2 seconds } </script> <script> function myFunction(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> <script> jQuery("#menu li a").click(function(){ var page_url = jQuery(this).attr("href") jQuery(".wide_main").html("<p>loading...</p>"); jQuery(".wide_main").load( page_url + ' #home'); }); </script> </body> </html> What I want to start off on when the html file is loaded, is the 'home' id.
  23. Is it (see title) possible? If yes, how? If not, do you have another suggestion to obtain a similar effect. CONSTRAINT: This is for an HTML formatted email, and I must avoid elaborate coding.
  24. I have a site where I fetch a list of jobs from MYSQL and display them on the page. At the end of the row for each job I have a button that has a drop down menu, unique to the user. All this works fine, but if the lines of jobs get near the bottom of the page, the drop down menu goes off the screen and I cannot scroll up to see it. I need to make the position of the drop down menu change automatically depending on its position on the page. Can this be done in CSS or must I now go and learn javascript? You feedback will be most appreciated! Thank you. I am using W3Schools drop down menu script and it works perfectly well (thank you!) <div class="dropdown"> <button class="dropbtn">Options</button> <div class="dropdown-content"> Menu items go here </div> </div> This is the CSS (from W3) /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #f1f1f1} /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: fixed; top: 1; /*right:50px;*/ background-color: #f9f9f9; min-width: 220px; overflow: auto; /* box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2); */ z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { padding: 2px 2px; text-decoration: none; display: block; } /* specify colour of headings as opposed to line items */ .dropdown-content span { background-color: #0000C1; color:#FFFFFF; font-weight:bold; padding: 2px 2px; text-align:center; text-decoration: none; display: block; }
  25. 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>