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

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
Free Tool: Port Scanner
LVL 12
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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
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
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 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
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
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
Get expert help—faster!
LVL 12
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

exception in chrome
button source code
I am getting an exception
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'loading'

when I click a button more than 5 times after that the button stops working
0
Hello Experts!

I have a client with a site that has a "parralax" feature that I need to turn off.

Here's the page:  Parallax issue site

Near the top of the home page is a image that has a parallax effect added to it.   It's a woman in a red swimsuit.

Here's what firebug found in the html for this image.

<section id="slide-1482978233631" class="parallax-banner parallax-slide slide parallax_effect--true">

Open in new window


I tried via firebug to change the "true" to false, but that didn't seem to make a change.

So I assume there is some css or javascript related to that effect.  I want to totally disable any parallax effect on the entire site.  Or at least this image.

Any thoughts?

Thanks!

Rowby
0
I have this

<span id="showSchedule" class="btn btn-default">Test</span>

Open in new window


I want to add a + before "test" --> so the button looks like + Test

This can't be that hard but drawing a blank.
0
i cannot change the font in my main menu, i have targeted every single class and ID, but it ignores everything

http://delmare.darkstarmedia.net

it should be 26 pixels, i used this code to try to make something happen, but nothing happens..

.navbar, a.nav-link, .nav-link, .menu-item, #menu-main-menu, .nav, .navbar-nav, a.nav, a.navbar-nav, .nav a, .navbar-nav a, .navbar a, .nav-link a { 
font-family: 'Open Sans', sans-serif;
size: 26px !important;
color:#FFFFFF;
font-weight:400;
 }

Open in new window

0
Hello,

I have built a new default bootstrap theme.  In my sandbox site, the responsive menu works perfect and can be clicked. (view hamburger menu in responsive mode, see link below)
http://sandbox.darkstarmedia.net/sub-page-02/

I have the exact same theme.. unedited.. just copied and pasted in a new site.. but I cannot click the hamburger menu, see link below
http://delmare.darkstarmedia.net/about-delmare/


This makes no sense, they are both bare bone websites using the exact same code
0
Please see here

https://codepen.io/anon/pen/zaOyby

and scroll down to "Example tab 2 (using standard nav-tabs)"

You see how I have a dropdown, and 2 input boxes. How can I align them? the dropdown is to the left. I want all 3 to be in the center.
0
On my page here http://ccdenver33.staging.wpengine.com/ I need to make the 2 links at the top called Donate and Newsroom into red buttons. Using CSS, any ideas experts?
0
I came across this example https://codepen.io/Liskanth/pen/wqaReo

Please hover over the "item" box. You see how the cursor looks like. What CSS makes it look like that?
0
I need to hide the area where it says Create an Account and Login on this page... https://ccdenver.org/givetoday/

Any ideas experts?
0
Free Tool: ZipGrep
LVL 12
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

In the Featured Programs section which is the slider in the middle of the page, there are two circles on the bottom of the image slider.  They do not work.  I wish to either remove them completely or fix it so that the same number of circles appears for the same number of images with the correct circle highlighted that shows which images is currently showing.

I've unsuccessfully tried to remove settings in and/or change the owl.carousel.css & owl.theme.css files to remove them, but nothing has worked.  The dots at the bottom are not images, so they must be fonts of some sort, but I can't even find how they are being referenced by the css.

http://insuranceqa.illinois.gov/NewWebsite051718/default.html
0
In the attached image, you can see two ways of crowns in a triangle as border areas of the content of the page. One is just a plain white centered triangle with a small crown in the center of it, the second is that but also a background of repeated tiny ones. I have both crown images to use, but am having too much trouble trying to create the effects with css and keep it responsive.

I've been trying to test css for the triangle here below the main content: http://barkking2.wpengine.com/?page_id=9
username: demo pw: Heather

The triangle is just red so I could see what the css was doing. The only way I've been able to center it is using percentage in absolute positioning but it of course isn't responsive to different browser/mobile widths. The theme is divi, so even if it has to be part css and part html using a row and modules, that would be fine because it can be saved and reused throughout the site.

Any help getting this to work would be greatly appreciated.
Thanks, Heather
Homepage-Desktop.jpg
0
I really really hope someone can help me.  I know this might be hard because I can't show the site... it's work project.. If I need to, I can PM a login/password but can't post it here.

I've attached the HTML that renders.

 I found this example
<script>

	
		$(document).ready(function () {  
			var top = $('#yourID').offset().top - parseFloat($('#yourID').css('marginTop').replace(/auto/, 100));
			$(window).scroll(function (event) {
				// what the y position of the scroll is
				var y = $(this).scrollTop();

				// whether that's below the form
				if (y >= top) {
					// if so, ad the fixed class
					$('#yourID').addClass('fixed');
				} else {
					// otherwise remove it
					$('#yourID').removeClass('fixed');
				}
			});
		});
	</script>

Open in new window


with this CSS
	<style>
		#yourID.fixed {
			/*position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			border-bottom: 5px solid #ffffff;*/
			top: 0;
			width: 100%;
			height: 130px;
			z-index: 1;
			background-color: #000;
			position: fixed;
			/*display: none;*/
			color: #FFF;
			padding: 5px;
		}

		/*#floating-nav-content {
			top: 0;
			width: 100%;
			height: 20px;
			background-color: #000;
			position: fixed;
			display: none;
			color: #FFF;
			padding: 5px;
		}*/
	</style>

Open in new window


When the site loads, the nav bar looks like this
First image
When I scroll down and then go up, the bread crumbs , the dropdown on the right and the search area disappears

DisappersPage.txt
0
Over mobile and using CSS, how can I put a white border around where it says "Make an Impact Today". I can get it to work over desktop but not over smaller devices like phones and tablets. Here is the url... http://ccdenver33.staging.wpengine.com/get-involved/

Any ideas experts?
0
I am working on php mysql.I have used tcpdf to generate pdf.

I have developed code for displaying tables HAVING details of number of employees category wise.
there are four categories
DRDS  (under drds again sub categories are there like Sc. B, Sc. D etc)
DRTC    (under drtc  again sub categories are there like TO. B , TO. C etc)
ADMIN  (under Admin again sub categories are there like Sc. B, Sc. D etc)
ALLIED  (under allied again sub categories like halwai, vehicle operator etc)

i am using two while loops

first while loop is for category (each tim e loop will run for one category)

second while loop is for sub categories

in this manner when a outerloop is run for first time it will display one table.(also calculating count of employees in that category)
loop will run for 4 times as there are 4 categories and  in this way four tables will be displayed.

at the end total number of employees of all categories is displayed

In my tcpdf i want to display all these data into one table only instead of displaying separate tables.

currently it is displaying four tables
I want that  query result  from all four loops should be stored in one array so that it can be displayed in one table

generated pdf is attached

tcpdf php code is here
<?php
ob_start();
extract($_GET);
include("../../config.php");
require_once('tcpdf_include.php');
$pdf = new TCPDF('L', PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

$pdf->SetPrintHeader(false);

Open in new window

0
I am sending a table by email from vb.net, with html format, how can I add the style sheet?
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.