css – Text creating burn-through on gradient while printing in Chrome

I’m getting the following issue only when choosing a physical printer as my destination from the Chrome print prompt. I have a gradient at the top and bottom of the container, with the text being positioned on top.

I tried both setting (and removing) -webkit-print-color-adjust: exact; under the @media print CSS and also setting
background:transparent; on the elements, neither of which are working.

When I select ‘Save as PDF’ everything looks fine, it only does this when printing directly to a printer from the print prompt.

How it SHOULD look:

enter image description here

How it ACTUALLY looks (I know it’s darker in print, the real issue is the text background burning through the gradient behind it)

enter image description here

لینک منبع

How to change height of slider in Materialize css?

Here is my html code:

<div class="slider">
  <ul class="slides">
      <img src="http://stackoverflow.com/img/s1.jpg">

And Here is my Javascript code:


Slider works perfectly but the height is 400px by default. How can I change it to 300px?


Changing image size doesn’t change the height of slider (height is always 400px)

I tried this: <div class="slider" style="height:300px;"> , it also doesn’t work.

لینک منبع

css3 – CSS drop down menu not working with position absolute

I am using the guide at https://www.w3schools.com/howto/howto_css_dropdown.asp but I want to set the #dropdown as absolute so I can position it in another location. When I do this, hovering over the button no longer displays a menu. Any suggestions?


 <div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>


 /* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;

لینک منبع

css – How to precompile assets using wildcard on a rails 4.2.6 application

I’m currently working on a Rails 4.2.6 application. In the styles sheet folder I have sub directories that represents part of the the application, as shown in the image below: enter image description here

In the config/initializers/assets.rb file I have the following code:

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
Rails.application.config.assets.precompile += %w( faq_page/faq.css )
Rails.application.config.assets.precompile += %w( contact/new.css )

I have to add each file in order to precompile the assets. I tried using the following code config.assets.precompile = ['*.js', '*.css'] but it didn’t work. I get the following error

Sass::SyntaxError in Pages#home

How can I precompile the assets with a wildcard without having to add each .css file to assets.rb?

لینک منبع

html – How can I create a skewed footer with CSS?

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

header {
  background: red;
  height: 50px;

main {
  flex: 1;
  margin-bottom: 50px;

footer {
  background: blue;
  height: 150px;
  transform: skew(0deg, -10deg);
  <p>Header Content</p>

  <p>Main content here</p>

  <div id="footer-content">
    <p>Footer Content</p>

لینک منبع

In HTML and CSS, how do you refer to a specific item number in a numbered list?

Suppose I’m writing a procedure, and in step 10, I want to refer back to step 3 by the step number. I don’t want to put in “step 3” in plain text, because if somebody adds a new step above it, the plain text reference will break. Instead, I want to get the position of the list item, and then display that position number in step 10.

<li>This is step 1</li>
<li>This is step 2</li>
<li name="stepreference">This is step 3. Create the widget.</li>
<li>This is step 4</li>
<li>This is step 5</li>
<li>This is step 6</li>
<li>This is step 7</li>
<li>This is step 8</li>
<li>This is step 9</li>
<li>Take the widget that you created in step 3 and do x.</li>

Instead of “step 3” in the last section, I want something like:

<li> Take the widget that you created in step <variable> and do x.</li>

Is there any way to do this? Is there maybe a jquery or other javascript solution? Do I need to so some sort of CSS numbering so the CSS knows what position the list is?

Any help or direction you can provide would be appreciated.

لینک منبع

html – How to rearrange the divs using CSS

I have the divs arranged like this but I need to rearrange them using CSS. My knowledge on CSS is limited. Appreciate help.

<div id=logo>  ... </div>  
<div id=righttmenu> ... </div>  
<div id=mainmenu> .... </div>  

enter image description here

But I need to rearrange them like this

enter image description here

At the moment following css is used.

 #logo {
    float: left;
    margin: 0;
    width: 40%;

 #rightmenu {
    float: right;
    max-width: 60%;
    clear: none;

    clear: both;
    margin: 0;

لینک منبع

javascript – Highlighting a table row when using css hover

function HilightRowOnClick() {

    $(document).ready(function () {
        $('tr').click(function () {
            //if (this.style.background == "" || this.style.background == "#badecc") {
            if (this.style.backgroundColor == "#badecc") {
                alert($("Color is normal?"));
                $(this).css('background', 'burlywood');
            else {
                $(this).css('background', '#badecc');
                alert("Color is not normal?");
.DBTable {
    width: 100%;

.DBToprow {
    font-size: 180%;
    font-weight: 600;

.DBTable td {
    font-size: 50%;
    padding: 7px;

.DBTable th {
    border-style: solid;
    border-width: 1px;
    padding: 7px;

.DBTable tr {
    background: #badecc;
    border-style: solid;
    border-width: 1px;

.DBTable tr:hover {
    background-color: burlywood;
<table class="DBTable">
    <tr class="DBToprow">
            @Html.DisplayNameFor(model => model.ClientID)
            @Html.DisplayNameFor(model => model.Active)
            @Html.DisplayNameFor(model => model.BankID)

    @foreach (var item in Model)
        <tr onclick="HilightRowOnClick()">
                @Html.DisplayFor(modelItem => item.ClientID)
                @Html.DisplayFor(modelItem => item.Active)
                @Html.DisplayFor(modelItem => item.BankID)

لینک منبع

css – Setting input button width not working

I have a modal which is a simple login form:

login form

The button is nested in a <div class="container">, which takes the full width of the modal.
I would like to have that button as btn-block, but neither giving it that class nor trying to set the buttons width to 100% works.

I changed the <input type="submit"> to a <button>, but then I can´t submit that form without using js.

I tried to change the submit-Button by using

input[type="text"] {
    width: 100%;

as well as selecting an id, but nothing worked. That comes from w3schools, where I tried their given example.

There must be something I´m not aware of, but my research ran into nothing. Can someone please give me a useful tip?

لینک منبع