CSSSponsored by Jamf Now

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

I am trying to get the speaker images on this page http://www.lesmeetings.org/am18/speakers/ to align to the center of the div like the text below it.  I can't figure out what I need to override in the base css to do this.  Nothing I have tried has worked.
0
Ultimate Tool Kit for Technology Solution Provider
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

can anyone make js code can do that

execute as @e[type=input] run data merge element @s {value:"foo"}

do it like minecraft commands
i have simple idea

function command(str){
var arg = str.split(" ")
if(arg[0] == "say"){
  console.log(arg[1])
}
}

Open in new window

command("say 123")
//in console will show 123

this like minecraft command line

anyone have idea to improve my project :D it will be massive project :D
0
Hello CSS experts,

I want to hide a class using css. but I don't have my css quite right.

Here is the html on  the web page.  

<h1 class="title grid__item one-whole text-center">demo-collection</h1>

And here's my attempt at css

h1.title grid__item one-whole text-center {
display: none;
}
It's not working.  The words "demo-collection" is still showing on the page, even though I have the css set to "none"  

I think the issues are related to the spaces between the items in my css.

Any suggestions?

Thanks!  

Rowby
0
Hi

I am using the following html on my ASP.net to try to float two link buttons to the left nd two to the right. The CSS is shown further down. The problem is that the controls that shouls appear on the right area appearing underneath

            <asp:Panel ID="Panel_Menu" runat="server">

                <div class="entire-thing">
                <div class="ad-left">
                            <asp:LinkButton ID="LinkButton2" runat="server" PostBackUrl="~/Default.aspx">HOME</asp:LinkButton>
                &nbsp;
                <asp:LinkButton ID="LinkButton3" runat="server" PostBackUrl="~/Checkout.aspx">CHECKOUT</asp:LinkButton>
                </div>
                <div class="ad-right">
                              <asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/Checkout.aspx" Visible="False"></asp:LinkButton>
                <asp:ImageButton ID="ImageButton1" runat="server" Height="23px" ImageUrl="~/Resources/Basket.jpg" PostBackUrl="~/Checkout.aspx" Visible="False" Width="34px" />
                </div>
                <div class="clear"></div>
                </div>
            </asp:Panel>

Open in new window


.ad-left {
    float: left;
    width: 49%;
}

.ad-right {
    float: right;
    width: 49%;
}

.entire-thing {
    width: 100%;
}

Open in new window

0
Hi,

I'd like to start by saying I am new to SP and trying to build an employee directory. I am using a guide from hyperfish (https://blog.hyperfish.com/employee-directory-in-office-365-and-sharepoint-). I am having a problem with thumbnails on the results page. They show as broken images. Looking at the template I believe this is where the variable is being set for the source image

<!--#_
            if(!$isNull(ctx.CurrentItem) && !$isNull(ctx.ClientControl)){
                  var encodedPath = $urlHtmlEncode(ctx.CurrentItem.Path);      
                  var accountName = ctx.CurrentItem.AccountName.substr(ctx.CurrentItem.AccountName.lastIndexOf('|') + 1);
                  // Use size M and 72px for medium instead of small                  
                  var picUrl = '/_vti_bin/DelveApi.ashx/people/profileimage?size=S&userId=' + accountName;
                  var css = 'min-width: 48px;min-height: 48px;clip: rect(0px, 48px, 48px, 0px);max-width: 48px;';
_#-->

I really don't even know where to start to find what the path should be. When i try t update the URL to anything the whole page fails with this error:

Display Error: The display template had an error. You can correct it by fixing the template or by changing the display template used in either the Web Part properties or Result Types.

Template '~sitecollection/_catalogs/masterpage/_EmployeeDirectory/Display Templates/Search/Item_Person_Table.js' not found or has syntax errors. (LoadTemplate: ~sitecollection/_catalogs/masterpage/Display Templates/Search/Group_Default.js)

I really would …
0
I want to change the font color of a row to white when an order is Priority = 1 with the database. I assume I will accomplish this by using CSS.
I am using third party that came with our ERP which displays dashboards. Can anyone point me in the right direction on how
to accomplish this? below is the complete sql statement I am using to display results in the dashboard. Also attached a screenshot of how the
results are displayed.

SELECT WO_NUMBER AS WONUM
      ,PART_NUMBER AS PN
      ,DESCRIPTION AS DESCR
      ,PRIORITY
      ,CASE CONTRACT_TYPE WHEN 'PBH Pool' THEN 'PBH' ELSE 'TM' END AS CONTRACT
      ,DAYS_OPEN AS TAT
      ,CASE WARRANTEE_FLAG  WHEN 'F' THEN ' ' WHEN 'T' THEN 'W' END AS INFO
      ,TECHNICIAN AS TECH
,case when days_open > 5 or priority >= 1 then '#ff0000' else case when days_open > 3  then '#f68835' else '#66b65d' end end row_color
  FROM BA_VIEW_WIP_SHOP_SCREENS
  WHERE STATUS IN ('OPEN', 'AWT SHOP EVAL', 'SHOP EVALUATION') AND SHOP = 'SH AVIONIC ARO'
order by days_open desc

Open in new window

Capture.PNG
0
My carousel images are stacked instead of carouseling.

Any help is appreciated

https://oala.ca/test-home/
0
I wonder if this is because of IIS and how the site is setup

1. My coworker set up an IIS site like this

image
2. You see there's a path assets-->pages-->img-->login the images in this path aren't showing up. I've tried
/assets/pages/img/login/bg1.jpg,
../assets/pages/img/login/bg1.jpg
~/assets/pages/img/login/bg1.jpg

3. Images under this folder show up "img". This is in the root folder of that "Demo" site. In the image above, I've marked the folder with XX. I have it like this ~/img/CSI-logo.png

When I look at Chrome's console, that path is translated to this (has "demo" in the beginning of it)
2.png
4. If I hard code the "demo" root folder, then the image shows up /Demo/assets/pages/img/login/bg1.jpg

Why is this?  I don't want to hardcode /Demo/ How can I fix this? what path do I need to use?
0
Hi Experts,

Could any one tell me what does testing a website to be compliant with WCAG 2.0 Level A and AA involve?

Are there any curses for this?

What is the going rate for this?

I'm also wondering, what are the types of assistive devices covered, so that I can recruit the right persons with disabilities (myself included ), and what to test for. The client is asking for testers with disabilities.

Thank you.
0
Hi, I have some code I found to create a speech bubble.  However the code has a shadow on the outside of the bubble.  How do I get this to be an inset shadow on the inside edge of the bubble?  


.bubble {
  background-color: #ffffff;
  background-image: -webkit-linear-gradient(
    top,
    hsla(0, 0%, 100%, 0.5),[embed=file 1335990]
    hsla(0, 0%, 100%, 0)
  );
  background-image: -moz-linear-gradient(
    top,
    hsla(0, 0%, 100%, 0.5),
    hsla(0, 0%, 100%, 0)
  );
  background-image: -ms-linear-gradient(
    top,
    hsla(0, 0%, 100%, 0.5),
    hsla(0, 0%, 100%, 0)
  );
  background-image: -o-linear-gradient(
    top,
    hsla(0, 0%, 100%, 0.5),
    hsla(0, 0%, 100%, 0)
  );
  background-image: linear-gradient(
    top,
    hsla(0, 0%, 100%, 0.5),
    hsla(0, 0%, 100%, 0)
  );
  border-radius: 5px;
  box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, 0.5),
    3px 3px 0 hsla(0, 0%, 0%, 0.1);
  color: #333;
  display: inline-block;
  font: 16px/25px sans-serif;
  padding: 15px 25px;
  position: relative;
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.5);
}

.bubble:after,
.bubble:before {
  border-bottom: 25px solid transparent;
  border-right: 25px solid #ffffff;
  bottom: -25px;
  content: "";
  position: absolute;
  right: 25px;
}

.bubble:before {
  border-right: 25px solid hsla(0, 0%, 0%, 0.1);
  bottom: -28px;
  right: 22px;
}

Open in new window

bubble.jpeg
0
Free Tool: Subnet Calculator
LVL 12
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

I bought this template and this is the front page

https://keenthemes.com/preview/metronic/theme/admin_4/page_user_login_5.html

I replaced the images in my project but the images are too bright. I was looking at some sites and there's a way to apply a background color to make the images a little bit darker.

I looked at our own company website and they've darkened the images with this CSS. I don't think I need all that. The key is "background". How can I apply it to the site? where does it go? if I know where I can put it, then I can make the change in my code.


body .page #hero .inner-wrap {
  background: rgba(9, 9, 9, 0.6);
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  max-height: 700px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

Open in new window

0
Is it possible to set the fonts to white when the results are red, '#ff0000'? This is being used in a third party
browser based KPI dashboard. Screenshot of exmaple attached.

SELECT WO_NUMBER AS WONUM
      ,PART_NUMBER AS PN
      ,DESCRIPTION AS DESCR
      ,CASE CONTRACT_TYPE WHEN 'PBH Pool' THEN 'PBH' WHEN 'FLAT RATE' THEN 'TM' END AS CONTRACT
      ,DAYS_LEFT AS TAT
      ,CASE WARRANTEE_FLAG  WHEN 'F' THEN ' ' WHEN 'T' THEN 'W' END AS INFO
      ,TECHNICIAN AS TECH
,case 
		WHEN days_left = 0 then '#ff0000' 
                when PRIORITY = 1 then '#ff0000'  
		when days_left BETWEEN 1 AND 3  then '#f68835'
		when days_left > 3  then '#66b65d' 
		ELSE '#add8e6'
	 end row_color
  FROM BA_VIEW_WIP_SHOP_SCREENS
  WHERE STATUS IN ('AWT SHOP REPAIR', 'SHOP REPAIR', 'RETURN AS IS', 'SCRAP') AND SHOP = 'SH AVIONIC ARO'
order by days_left desc

Open in new window

Capture.PNG
0
I'm trying to customize this template. Support has not been really useful.  I replaced those links with "xxx"

On the section course categories there is some columns.

<div class="col-xs-12 col-md-4 teaser_border teaser_border_column_11">
        <div class="teaser text-center  h5">
                <div class="teaser_image">
            <img src="xxx">
        </div>
                    <h5>
                    <a href="rainbow-colleges/course-category/creative-arts/">
                Creative ARts &amp; Media                   </a>
                </h5>
                    <p>
            Explore film, journalism, photography or theatre, music. Learn from the experts
 in creative arts and media...      </p>
                    </div>

        </div>
So let's say I want the whole column to hover when the cursor is on and I also want put a link on the img. which hovers too

HTML

<div class="col-xs-12 col-md-4 teaser_border teaser_border_column_11">
        <div class="teaser text-center  h5">


<div class="teaser_image"><a href="http://rainbow-colleges/course-category/creative-arts/">
        <img src="xxx">
    </div>
                <h5>
                <a href="http://rainbow-colleges/course-category/creative-arts/">
            Creative ARts &amp; Media                   </a>
            </h5>
                <p>
        Explore film, journalism,
0
I am trying to use Jquery or CSS (or some combination thereof) to get a dynamically created button to appear directly to the right of a dynamically created input that gets generated as part of a DataTables implementation. and follow it if the page is resized.

input:
<input type="search" class="" placeholder="" aria-controls="faq_table">

Open in new window


the button (appears somewhere else on the page at first):
<input id="reset" type="button" onclick="reset();" value="reset" id="reset_button">

Open in new window


Any suggestions?

Thx

Adam
0
Hi Experts,

I need my icon(speakers) to be flashing while playing the audio.  I want to start audio and icon(speaker) needs to be flashing on clicking this speaker icon.  and it should stop flashing once the audio is finished playing.  How to create this with html and css.  Please help in resolving this.speaker.png
With many thanks,
Bharath AK
0
I am having a problem with a portion of my HTML not being responsive.  On a desktop, it looks fine - as pictured here:



and on a small screen, such as a phone, it looks like this:



My HTML - links specifically in the stepWrapper Div
<section class="ls ms section_padding_50">
  <div class="container">
    <div class="row">
        <div class="col-sm-12 text-center">
            <div id="stepWrapper" class="stepWrapper">
                <a id="link-manufacturer" href="/RapidRepair/Manufacturer" class="step ">Manufacturer</a>
                <a id="link-deviceModel" href="#" class="step current">Model</a>
                <a id="link-serviceProvider" href="#" class="step">Service Provider</a>
                <a id="link-repair" href="#" class="step">Repair</a>
                <a id="" href="" class="step">Add-Ons</a>
            </div>
            <div class="topmargin_40">
                <h3 class="topmargin_20 ">What model needs repair?</h3>
                <ul class="rapid">
                    <!-- ko foreach: modelList() -->
                    <li><a href="#" data-bind="click:addDevice"><span data-bind="text:name"></span></a></li>
                    <!-- /ko -->
                </ul>
            </div>
        </div>
    </div>
  </div>
</section>

Open in new window


Here is the style for that Div

 <style>
        .stepWrapper {
            text-align: center;
        }

        .step 

Open in new window

0
I am using jQuery UI & bootstrap Modals in my website. As both modals have different styling, so I want to change the styling of jQuery Ui Modals
according to the Bootstrap Modals. I have tried to change the styling in jQuery UI css but it not works. What is the best way to do this?

Any Working example?
0
I am using Angular directives. I have a section where I don't want to have the two (will be 3) fields to align vertically.  Usually, I would control this with the HTML or CSS, but it does not seem to be playing nice.  I guess it's the way Angular is designed. I tried editing properties in the Developer Tools in the browser, nothing worked.

I have this:
Hello
But I want this:
Hello, Guest LOGIN

Here is my code:
<!-- User NOT logged in -->
<ng-template #guest class="box">
   <h3>Hello, GUEST</h3>
   <button class="button" routerLink="/login">Login</button>
  </ng-template>

Open in new window

0
Hi

I am trying to use the following css style "HeaderFreez" on my ASP.net page below to freeze the header of my GridView
but it isn't working
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Steel._Default" %>

<!DOCTYPE html>

<style type="text/css">
.HeaderFreez
{
	position:relative ;
	top:expression(this.offsetParent.scrollTop);
	z-index: 10;
}
</style>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    </head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Panel1" runat="server">
            <table>
                <tr>
                    <td></td>
                    <td>
                        <asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
                    </td>
                    <td></td>
                    <td>
                        <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
                    </td>
                    <td></td>
                    <td></td>
                    <td>

                    </td>
                    <td>

                        &nbsp;</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
              

Open in new window

0
WEBINAR: 10 Easy Ways to Lose a Password
LVL 1
WEBINAR: 10 Easy Ways to Lose a Password

Join us on June 27th at 8 am PDT to learn about the methods that hackers use to lift real, working credentials from even the most security-savvy employees. We'll cover the importance of multi-factor authentication and how these solutions can better protect your business!

I have a Revolution Slider on this page... http://ccdenver33.staging.wpengine.com/

However, I need to center it and I think it's b/c there is canvas padding. Anyway to remove the canvas padding?

Also, each of the puzzle pieces click through to a webpage but b/c it's a circle the links overlap and not contained just within the puzzle piece. Anyway to fix that?
0
cardHi Experts,

I want to create lots of cards in a html page.  Please refer the attached sample card.  I want all Cards to be like this  I had tried the following below code to create the card but it is not working as expected.

<div class="card" style="width: 15rem;">		
	           <a href="pages/harriet-dally.html"> <img class="card-img"  src="images/thumbnail/HarrietDouglasDalyetal-PH0238-0383.jpg" style="border:0;"/>
			   <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
			      <p class="card-text"><strong>Harriet Daly</strong></p>
			   </div>
			   </a>
	    </div>    

Open in new window


I tried to make opacity for the bottom div  on hover and on focus.  but not working.  please refer the attached image for reference I need card to be like this.


Please help me in creating this card

with many thanks,
Bharath AK
0
whenever I try to start  MVC application from Visual Studio 2017  I am getting this error with Chrome but I can run FireFox or IE with no problemerror.JPG
0
I finally figured out how to create my upper collapse div javascript on the following page which is the PLUS SIGN or MINUS SIGN next to the column of SONGS total number.  However, I can't get the accordion menu to work inside the collapsible div. I've moved the JS file reference from the header to inside the collapsible div and finally to the very bottom of the entire doc assuming there may be some issue of the JS not responding because the divs with the accordion ID have no relevance to the accordion JS.

I've tested the accordion script just fine on a standalone page. I can't figure out why the moving of that concept to this page isn't working.

http://www.day6management.com/Scripts/WriterRoyaltyReport.cfm?wid=16

SAMPLE MENU: http://www.day6management.com/Scripts/acc.cfm
0
I can't figure this out and I've spend too much time on it....

1. I used this plugin https://lirancohen.github.io/stickUp/
to make the top navigation bar stick when user scrolls down

2. In IE and Chrome, when I scroll down...the navigation bar on top stays put and it works.

3. In Edge, I scroll down and the navigation bar flickers the first time user scrolls down...the transition is not smooth. . Only happens one time and then if you keep scrolling up and down...the navigation bar doesn't flicker.

You can see it here http://147.75.0.35/

On the front page, under "DoctorAccessNow Login", I have this "Click here to see the page". Click it and you'll see my sample page.

In chrome, there are some errors in the console. That's because I created a sample page out of the project. Still works in Chrome and IE.

What's causing it to flicker in Edge?
0
Hi,

I want to setup a development project using Bootstrap 4, so basically what I want to achieve is that I want to modify the actual .scss files provided by Bootstrap as per my requirement instead of creating my own scss file. I am using Netbeans 8.2 as the IDE for the same. As per Bootstrap we need to have Sass compiler and Autoprefixer to achieve the same. In Netbeans i setup the Sass compiler and i can compile the scss file to css. But I am unable to understand how to use the Autoprefixer to compile the css with vendor prefixes.

Also, instead of using the inbuilt webserver I have wampserver 3.1.3 installed on my windows 10 machine

Kindly help with the step by step to use Autoprefixer along with Sass compiler in Netbeans 8.2

Kindly let me know if any further information is required.

Thanks in advance.
0

CSSSponsored by Jamf Now

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.