CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Share tech news, updates, or what's on your mind.

Sign up to Post

Wants a rollover effect in which the tabs appear to come to the front. Create a style rule for the body > header nav.tabs li selector that uses the pseudo-class hover that changes the background color to rgb(231, 231, 231).

   body >header nav.tabs li:hover {
      background-color: rbg(231,231,231);
}

It doesn't work. Any idea ?

Thx
MyWork.zip
2
Price Your IT Services for Profit
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

I'm thinking that I can auto-scale fonts inside a media queries by doing the following. My question is will $font-size-base maintain scope within each media query, or is this the right approach to font scaling?  I'm trying to preserve 1rem = 10px to keep the mental math simple.

html {
font-size: .625;                                      //set 1rem = 10px in most browsers
$font-size-base: font-size * 1.6;         //set font size to 16px
}

@media (min-width: 375px) {
    $font-size-base: $font-size-base * .5;                       //set font size to 8px
  }
}

@media (min-width: 768px) {
        $font-size-base: $font-size-base * 2;                    //set font size to 32px
  }
}

Open in new window

0
I have an SVG and wish to apply a drop shadow to it
https://codepen.io/anon/pen/oVPQLp

Can this be achieved with SVG or do i need to do it with CSS?
If so can someone help with SVG code?
0
I have 2 "Columns" on this page.  You can see the one on the left has a grey background.  The right column will contain a grid which the content will be a result of the selections from the left column controls.

My issue is the height of the left column is small and the list box is not very tall either.  

How do I change the height of the left column?  (Will want the right column to match it).  And I want the list box to take up most of the height too.  Preferable, if the user shrinks/expands the page height, the height of the columns, list box, and datagrid would be reflected.   Is this possible in the way I am doing this?
Thanks,


2colHeight.JPG
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Main.aspx.vb" Inherits="MyProg.Main" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>MyProg - Main</title>

   <style type="text/css">
        .Initial
        {
            display: block;
            padding: 4px 18px 4px 18px;
            float: left;
            background: url("../Images/InitialImage.png") no-repeat right top;
            color: Black;
            font-weight: bold;
        }
        .Initial:hover
        {
            color: White;
            background: url("../Images/SelectedButton.png") no-repeat right top;
        }
        .Clicked
        {
            float: left;
            display: block;
            background: url("../Images/SelectedButton.png") no-repeat right 

Open in new window

0
I have product jpg with light background color. and I have text like product name  on top of that and I want to make it very obvious so people can see.

I am not good with design so I need some helps.
0
Trying to create the attached page with HTML5 and CSS.  Struggling with it.  Top is a jpg.  Having issues aligning everything, putting horizontal line, colors, etc.
index.jpg
0
Using jQuery, is there a way to cross fade two pages?  Meaning if I go from page 1 to page 2 they cross fade to the next instead of an abrupt change?  Is there an example?
0
We are using a SignalR to update records on a webapp.

1. We are experiencing performance issue when there are many records are coming in.
2. A function that is updating the records on average takes 30ms when the SignalR is not busy. When busy the time taken grows to even 200ms per record. The JS function involved uses Jquery to change the table records attributes, such as text, css class etc.
3. Memory usage is steady while CPU usage remains as high as 100% and even more on the Google Chrome Task bar
4. An estimate of 30 records per seconds are working well but beyond that, the application becomes sluggish and unresponsive.
5. Each record is about 60bytes

What can we do to make the browser able to handle high loads of the incoming signalR records?
0
I use bootstrap controls with ajax update panel in Modal

if I use the  postback the controls lose the css  , and the dropdownlist the search is disabled

this is the controls befor postback

this is the controls after postback
0
/** initial setup **/
.nano {
    position : relative;
    width    : 100%;
    height   : 100%;
    overflow : hidden;
}
.nano > .nano-content {
    position      : absolute;
    overflow      : scroll;
    overflow-x    : hidden;
    top           : 0;
    right         : 0;
    bottom        : 0;
    left          : 0;
}
.nano > .nano-content:focus {
    outline: thin dotted;
}
.nano > .nano-content::-webkit-scrollbar {
    display: none;
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
    display: block;
}
.nano > .nano-pane {
    background : rgba(0,0,0,.25);
    position   : absolute;
    width      : 10px;
    right      : 0;
    top        : 0;
    bottom     : 0;
    visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
    display: none;
    opacity    : .01;
    -webkit-transition    : .2s;
    -moz-transition       : .2s;
    -o-transition         : .2s;
    transition            : .2s;
    -moz-border-radius    : 5px;
    -webkit-border-radius : 5px;
    border-radius         : 5px;
}
.nano > .nano-pane > .nano-slider {
    background: #444;
    background: rgba(0,0,0,.5);
    position              : relative;
    margin                : 0 1px;
    -moz-border-radius    : 3px;
    -webkit-border-radius : 3px;
    border-radius         : 3px;
}
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
    visibility : visible\9; /* Target only IE7 and IE8 with this hack */
    opacity    : 0.99;
}

Open in new window


Screen-Shot-2019-01-30-at-15.12.45.png
so the problem it can be seen but when u click you cant scroll, but here the funny part, when you rezize the brower than you can click and scroll, frying my head.

this is nanoscroller.css
0
C++ 11 Fundamentals
LVL 13
C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

I'm trying to create a simple range slider to React with iOS styles for a demo. It is working, the color is changing for the bar when I drag it fine. But the Slider Button cannot be moved. It is just stuck in one position. I'm new at this and pretty sure it must be something small that is being ignored but I'm not sure. Any help will be appreciated. Here is my code:

export class RangeSwitch extends Component {
  onChangeHandler = e => {
    const initValue = e.target.value;
    const min = e.target.min;
    const max = e.target.max;

    let value = (initValue - min) / (max - min);
    e.target.style.backgroundImage = [
      '-webkit-gradient(',
      'linear, ',
      'left top, ',
      'right top, ',
      'color-stop(' + value + ', #007aff), ',
      'color-stop(' + value + ', #b8b7b8)',
      ')',
    ].join('');
  };

  render() {
    return (
      <SwitchContainer>
        <input
          type="range"
          min="1"
          max="100"
          value="20"
          id="range"
          onChange={this.onChangeHandler}
        />
      </SwitchContainer>
    );
  }
}

Open in new window

0
I've been building a React js based site which needs some parallax design. I've tried the basic CSS/SCSS based parallax the following way:

background: url(/image.jpg) fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

Open in new window


But that doesn't work on most mobile browsers, not even in Chrome dev tool while at a responsive mode. Not even on Safari responsive mode. Nor on iOS simulators. Need a better parallax using pure CSS/SCSS that will work everywhere. Also would appreciate the help creating something like the following:

magnifying glass effect using cSS with parallax
This is where the round object should have the look and feel of a magnifying glass and will work on all devices. I'd really appreciate the help asap. Thanx in advance.
0
hey
i have a ul tag that i want to display as grid. and it works, only when there are only 2 items, the itams are too big. so i thought i will use minmax, but then the 2 items are displayed in the middle of the row and not from the first?!!
i use sass so here is my css:
      .products{
        all: unset;
        display: flex;
        justify-content: space-around;
        width: 100%;
        @supports(display:grid){
          display: grid;
          grid-gap: 10px;
          grid-template-columns: repeat(4, auto);
          grid-auto-flow: column;
          @include media(min_tablet){
            grid-template-columns: repeat(1, auto);
            grid-auto-flow: row;
          }
        }
        li{
          width: 100%;
          all: unset;
          position: relative;
          text-align: center;
          background: #FFF;
          h2.woocommerce-loop-product__title{
            &:before{
              transition: all 0.8s ease-in-out;
            }
            &:hover:before{
              width: 100%;
            }

          }
          .star-rating{
            margin: 0 auto;
          }
          &:after{
            content: "";
            position: absolute;
            top: 100%;
            left: 0;
            height: 20px;
            width: 100%;
            background: url() bottom center;
            background-size: 100%;
            filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.1));
          }
        }
      }

Open in new window


here are some images to explain it visually:
this is as things appear now: when only 2 items are left. they are too big
too big
and when there are 4 items:
when there are enough items
and when i use minmax to control the size of the li, they appear in the middle of the grid:
with minmax
how can i use minmax and make them appear not in the middle but on the right, since it is an rtl site

best regards
itemstoolarge.png
0
Experts,
 We have few web applications in sharepoint 2013. Two of them web application we have set up  Anonymous Access. One of the web application is working fine but another one has getting Login Prompt. I have checked the web application setting  as well as site collection setting. I read some article and they mentioned about some css or script can cause the problem.

How to resolve this problem? How to identify those script or css? Is there any tool like fiddler can help us?

Getting Login Prompt on Anonymous Access Enabled SharePoint Sites?
0
Hello,

I discovered that in IE10 my divs are overlapping. I tried adding clear to all the elements with no luck.One of my issues is that it is hard to test as I am on a mac (I thought these css browser compatibility issues were over years ago :()   )
 
Please see screen shot attached, the bottom element "The OADA Accessibility is overlapping my banner above,

here is the page
http://oalaca.nextmp.net
0
Hi Experts,
I'm working on an angular 7 project that requires text field (textarea)  to capture information along with emoji support. I've had a look at some of the existing libraries and thought that quill editor (exposed via ngx-quill) seemed to tick the boxes, it has a quill-emoji extension. The content created using this textarea will also be exposed via a mobile application.

I have managed to get most of the work completed, but I'm suspecting that the CSS is not being loaded properly (see image) since the pop-up is not rendered properly and the emoji's are rendered as the characters instead of the images etc...

screen grab of what is being rendered

I wanted to find out  :
Whether Quill is best choice in my use case (or whether there are any alternatives that are light weight)
What should I store in my db (so that it can be exposed in a mobile application - flutter) - i.e should I store just the quill data structure, the innerhtml, or both. What would make it easier to expose this via a mobile application ?
If there was another way to handle the emoji button (instead of displaying a toolbar) ?
0
A CSS question:

Let's take the <td> tag as an example

Is it possible to make a custom css tag and use that to dictate the styling of any <td> tags inside it
ie
css page:
customtag > td
{
some condition
}
php page:
<customtag><td> text </td></customtag>

The reason for this is that I want to add a specific condition to a set of <td> tag's which already have defined css conditions defined for that particular tag in the css page in the rest of the php page
0
I have a graphic, shaped in a circle 9 (with 2 extra spots bellow it), its got 10 spots on it.  I want to break this down into 10 pieces, in a grid.

Something like this, 5x6, 'g' represents graphic:

_ _ g _ _
_ g _ g _
g _ _ _ g
_ g _ g _
_ _ g _ _
_ g _ g _

Was hoping for a suggestion on the best CSS to tackle this.
0
I have a Wordpress site that I need to disable the hyperlinks for a specific section on the homepage. Basically, I do not want to show the detail page.

The site: https://www.secc-chicago.org/
The section: Neighborhood Business Development Center area on the home page

Links I need disabled:
City Services
Business Operations
Consumer Outreach
Sourcing Suppliers
Business Workshops
Marketing Assistance
Financial Resources
Special Events

If its relevant, the section is created by Services within Wordpress
Screen-Shot-2018-12-31-at-8.04.22-PM.png
Screen-Shot-2018-12-31-at-8.09.58-PM.png
0
Introduction to Web Design
LVL 13
Introduction to Web Design

Develop a strong foundation and understanding of web design by learning HTML, CSS, and additional tools to help you develop your own website.

Hi all!

About Sharepoint 2013 & Sharepoint 2016:

I need to change top navigation menu font size.
I'm very novice in Sharepoint and I understand I have to use Sharepoint Designer 2013 to change maybe Oslo.html or some css files.
Please tell me what is the easiest way to change that font size on the top menu?
I would like to have exact information what to do and how and where. Thanks in advance!

-Juha
1
<h1>Final Report</h1>
<h1>Session Sept2018-Jan2019</h1>
<h2 align=left>Programme             :      Diploma In Computer Science</h2>
<h2 align=left>Course/Module Code            :      TSE3204</h2>
<h2 align=left>Course/Module Name            :      Cisco Discovery1</h2>
<h2 align=left>Lecturer(s)      :      Mdm Jihadah Binti Ahmad</h2>
<h2 align=left>Examiner            :      Mdm Suraya Binti Sulaiman</h2>
<h2 align=left>Date            :      11 Jan 2019</h2>
<h2 align=left>Course/ Module Learning Outcomes:</h2>
<p align=left>Upon successful completion of the course students will be able to:</p>
<ul>
<li align=left>Demonstrate aptitude and competence for working with Cisco routers, switches and Cisco IOS. </li>
<li align=left>Show the practical skills required for associate-level networking support positions.</li>
<li align=left>Demonstrate skills necessary to pass 2 different Cisco certification exams, CCENT or CCNA</li>
  <ul>
https://codepen.io/estelle-yi/pen/GPWaga
0
import.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);


if ( ! empty($_FILES['csv_file']['name']) ) {

    $file_data = fopen($_FILES['csv_file']['name'], 'r');
    fgetcsv($file_data);

    while($row = fgetcsv($file_data) ) {
      
        if( count($row)>15):
            //now you know you have at least 16 element
            $data[] = array(
			'student_id'  => $row[0],
            'name'  => $row[1],
            'Sem'  => $row[2],
            'sec'  => $row[3],
			 'Chapter_Exam'  => $row[4],
			  'Practice skill'  => $row[5],
			   'Assignment'  => $row[6],
			   'Final_Exam'  => $row[7],
			   'Total'  => $row[8],
			   'Grade'  => $row[9],
			   'C01'  => $row[10],
			   'C02'  => $row[11],
			   'C03'  => $row[12],
			   'C04'  => $row[13],
			   'C05'  => $row[14],
			    'Status'  => $row[15]
				);
        endif;
		};

    echo json_encode($data);

Open in new window


upload2.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Import CSV File into Jquery Datatables using PHP Ajax</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script 

Open in new window

1
Experts,
 We have sharepoint 2013 with OOB sharepoint list view.  We would like to change the paging for list view with client side coding. I am attaching the after and before image. I would like to use script editor/content editor web part to implemented this. Can you please help me with sample code.
Before

After
0
Hi Guys, we have a Google tag in place thats supposed to be displaying a page takeover here on https://nova.ie its not displaying correctly so i am trying to add a static image (attached ) so it can appear properly for now, i was wondering what is the best way to add it?
0
Try to run a ASP Core 2.0 with C# and the CSS can only apply if I set the APP URL to 53400 port. It doesn't work for other port. Why it appear so strange ?

Thx
Work.png
NoWork.png
0

CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.