Search the Community

How do I make my animation run backwords? Instead of it moving from right to left, I need it to move from left to right. #arrowAnim { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .arrow { width: 5vw; height: 5vw; border: 2.5vw solid; border-color: black transparent transparent black; transform: rotate(-45deg); } .arrowSliding { position: absolute; -webkit-animation: slide 4s linear infinite; animation: slide 4s linear infinite; } .delay1 { -webkit-animation-delay: 1s; animation-delay: 1s; } .delay2 { -webkit-animation-delay: 2s; animation-delay: 2s; } .delay3 { -webkit-animation-delay: 3s; animation-delay: 3s; } @-webkit-keyframes slide { 0% { opacity:0; transform: translateX(15vw); } 20% { opacity:1; transform: translateX(9vw); } 80% { opacity:1; transform: translateX(-9vw); } 100% { opacity:0; transform: translateX(-15vw); } } @keyframes slide { 0% { opacity:0; transform: translateX(15vw); } 20% { opacity:1; transform: translateX(9vw); } 80% { opacity:1; transform: translateX(-9vw); } 100% { opacity:0; transform: translateX(-15vw); } } <div id="arrowAnim"> <div class="arrowSliding"> <div class="arrow"></div> </div> <div class="arrowSliding delay1"> <div class="arrow"></div> </div> <div class="arrowSliding delay2"> <div class="arrow"></div> </div> <div class="arrowSliding delay3"> <div class="arrow"></div> </div> </div> Any help?

It seems that as time passes, more and more HTML tags are deprecated with the note: "The [???] attribute of <???> is not supported in HTML5. Use CSS instead." The problem with that approach is that there organizations that create and maintain Knowledge articles or wiki sites, where the tool and tool output is owned and managed by a third party. I work as a writer at an international company, creating and updating knowledge base articles all the time. My company is in a contract arrangement with a third party who provides the CRM software, the CRM database, and the knowledge base tool. We have asked to make modifications to the CSS, but the third party company will not permit it, because the CSS governs more things than just the knowledge base articles. I realize situations like our may not be the "norm," but there must be others experiencing the same thing. Every time W3C deprecates another HTML tag and says "Use CSS instead," people whose output is controlled by a third party are left out in the cold. What do you expect writers to do in situations like ours?

I have been recruited to create a website for out working group, http://www.4hlatinopyd.org/ My experience in web work is limited, just getting back into it after a long break. I used a menu script I found, and have mostly implemented it, but some issues appear when the site is views on a small device, such as a cell phone. 1, When is small screen mode, the drop-down menus do not appear. 2. Is there a way to change the size of the images so that they are clear when in small-screen mode? Perhaps a way to swap them out when in small-screen mode for different images, perhaps better tuned for small-screens? 3.How can I style individual pages to achieve a consistent font size? I have tried to use the CSS , but it doesn't seem to affect everything. I have more, but these are the biggest issues I have at the moment. Thank you!

Hello , nav buttons from slider is visible and functional on Chrome ,but not in Firefox here is the link of repository: https://bitbucket.org/zdarkmind94/sportaddict/src

Ok so basically I have a table with a form in it and regardless of how much people may hate tables and how porrly coded this may be I need to format the submit button inside the table but nothing seems to work. I have tried the usual like #confirmation #confirm {} table th #confirmation #confirm {} and every combination between that. Can anyone shed some like on how to style the submit button. Thanks <th><form id="confirmation" name="myFormAll" method="post" action="confirm.php"> <input type="number" id="amount" name="amount" style="width:100px;" required min="0" /></th><th> <input type="submit" value="Confirm" id="confirm" /></form></th>

hi there, i have implemented a scrolling tbody for a css loaded dynamic table. the results i have saved - can be viewed at http://www.performatix.co/Customer%20Counts.htm, but what descriptors need to be added to the css to stretch the scrollable tbody as wide as the thead? (100%) the css used sofar is as follows: /* define height and width of scrollable area. Add 16px to width for scrollbar *//* allow WinIE to scale 100% width of browser by not defining a width *//* WARNING: applying a background here may cause problems with scrolling in WinIE 5.x */div.tableContainer { clear: both; border: 1px outset #808080; height: 500px; overflow: auto; width: 100%;}html div.tableContainer/* */ { padding: 0 16px 0 0; width: 100%;}html>body div.tableContainer { height: 467px; padding: 0;}head:first-child+body div[class].tableContainer { width: 97%; height: 467px; overflow: hidden;}div.tableContainer table { float: left; width: 100%}html div.tableContainer table/* */ { margin: 0 -16px 0 0;}html>body div.tableContainer table { float: none; margin: 0; width: 100%;}head:first-child+body div[class].tableContainer table { width: 100%;}thead.fixedHeader tr { position: relative; width: 100%; top: expression(document.getElementById("tableContainer").scrollTop);} */head:first-child+body thead[class].fixedHeader tr { display: block; width: 100%;}thead.fixedHeader th { background: #d8d8d8; font-weight: normal; padding: 4px 3px; text-align: left;}head:first-child+body tbody[class].scrollContent { display: block; width: 100%; height: 400px; overflow: auto;}tbody.scrollContent td, tbody.scrollContent tr.normalRow td { background-color: #f8f8f8; border-bottom: none; border-left: none; border-right: 1px solid #d8d8d8; border-top: none; padding: 2px 3px 2px 3px;}tbody.scrollContent tr.normalRow td + td + td + td + td + td { background-color: #f8f8f8; border-bottom: none; border-left: none; border-right: none; border-top: none; padding: 2px 3px 2px 3px;}tbody.scrollContent tr.alternateRow td { background-color: #d8d8d8; border-bottom: none; border-left: none; border-right: 1px solid #f8f8f8; border-top: none; padding: 2px 3px 2px 3px;}tbody.scrollContent tr.alternateRow td + td + td + td + td + td { background-color: #d8d8d8; border-bottom: none; border-left: none; border-right: none; border-top: none; padding: 2px 3px 2px 3px;}head:first-child+body thead[class].fixedHeader th { border-right: none; padding: 2px 4px 2px 4px;}head:first-child+body thead[class].fixedHeader th[title=EXECUTE], head:first-child+body thead[class].fixedHeader th[title=RESET] { width: 50%;};head:first-child+body tbody[class].scrollContent td { border-right: none; padding: 2px 4px 2px 4px;}#form_services thead.fixedHead { margin-top: 2px; margin-bottom: 2px; width: 100%;}#form_services tbody.scrollContent { width: 100%; height: 350px; overflow-y: scroll; background: #d8d8d8;}#form_transactions input[type="button"]#button_preview, #form_transactions input[type="button"]#button_sendcontact, #form_transactions input[type="button"]#button_sendaccmgr, #form_transactions input[type="button"]#button_sendsvcmgr, #form_transactions input[type="button"]#button_refresh { width: 19.22%;}#form_services input[type="button"]#title_service, #form_services input[type="button"]#title_country, #form_services input[type="button"]#title_region, #form_services input[type="button"]#title_supplier, #form_services input[type="button"]#title_status, #form_services input[type="button"]#title_primattval, #form_services input[type="button"]#group_service, #form_services input[type="button"]#group_country, #form_services input[type="button"]#group_region, #form_services input[type="button"]#group_supplier, #form_services input[type="button"]#group_status, #form_services input[type="button"]#group_primattval, #form_services input[type="button"]#execute_query, #form_services input[type="button"]#reset_query { width: 100%;}#form_services select#where_service, #form_services select#where_country, #form_services select#where_region, #form_services select#where_supplier, #form_services select#where_status, #form_services select#where_primattval { width: 98%; margin-top: 1px; margin-left: 1%;} the html is an excerpt of the dhtml populated mysql table from a select. my last two posts (one and more accurately two) were on this functionality. this is highly important to resolve, got lots of other php work to do!

<div id="navbar"> <nav id="navbar_text"> <ul> <li><a href="index.html">Home</a></li> <li><a href="aboutus.html">About</a></li> <li><a href="products.html">Products</a> <ul class="submenu"> <li><a href="fireplace.html">Fireplaces & Accessories</a></li> <li><a href="stoves.html">Stoves</a></li> <li><a href="outdoorkitchens.html">Outdoor Kitchens</a></li> <li><a href="gasgrills.html">Gas Grills</a></li> </ul> </li> <li><a href="services.html">Services</a> <ul class="submenu"> <li><a href="chimney_services.html">Chimney Services</a></li> <li><a href="gas_services.html">Gas Services</a></li> <li><a href="custom_design.html">Custom Design</a></li> </ul> </li> </ul> </nav> </div> <!--END navbar--> #navbar_text a:link{ color: #bca380; } #navbar_text a:hover{ color: #dccfbd; } #navbar_text { word-spacing: 15px; } #navbar_text li{ display:inline; } #navbar_text ul li a { display:inline; padding: 5px; background: #663333; margin-top: 5px; font-family:Georgia, "Times New Roman", Times, serif; font-size: 150%; color: #bca380; text-decoration: none; } ul.submenu { display: none; } li:hover ul.submenu { padding: 0; margin: 0; list-style: none; line-height: 25px; display: list-item; width: 100px; font-size: 70% } #sidebar ul li a { display: block; padding: 10px 10px 10px 15px; background: #cab69a; -webkit-border-radius: 8px 0px 0px 8px; border-radius: 8px 0px 0px 8px; margin-top: 10px; font-family:Georgia, "Times New Roman", Times, serif; font-size: 120%; font-weight: bold; color: #663333; text-decoration: none; -webkit-box-shadow: 4px 4px 5px rgba(181, 154, 115, 0.75); -moz-box-shadow: 4px 4px 5px rgba(181, 154, 115, 0.75); box-shadow: 4px 4px 5px rgba(181, 154, 115, 0.75); } nav ul { list-style:none; } #navbar { background: #663333; height: 35px; width: 940px; padding: 10px 0px 0px 20px; } submenu test.html submenu test.css

I have a div tag with an id of container. In this container I'm trying to do is setup some blocks. top blockleft blockcenter blockright blockbottom block. Can some one please show me how to do this in a html using css. I just need an html document with the css to show me how to this so I can line this up right. I never been all that good using CSS. Joe