[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

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

What does "~" mean in CSS path reference :

<link rel="stylesheet" href="~/css/first.css" />
1
OWASP: Forgery and Phishing
LVL 12
OWASP: Forgery and Phishing

Learn the techniques to avoid forgery and phishing attacks and the types of attacks an application or network may face.

Is there any way to get "data-image-src"  to be responsive?
 
<section class="banner-area relative boatimg" id="home" data-parallax="scroll"> 

Open in new window


I've tried:
.boatimg {
 background-image:url(../img/sunsetBoat2.jpg);
 background-repeat:no-repeat;
 height:100%;
 width:auto;
}

Open in new window


But it wouldn't work.  Is there any way to make a section tag background image be responsive without using an <img> tag?
1
I'm trying to figure out how to add one of those "View All / Show Less" toggles to a site that I'm developing -- using only CSS --- and have been failing spectacularly at it.  

Here is my HTML:

<div class="category-filter-fields">

  <h3 class="is-size-5 has-text-weight-bold">Things To Do</h3>
    
  <label class="checkbox"><input type="checkbox" name="categories" id="categories-1" value="1"> Outdoor Activities (166)</label>
  
  <label class="checkbox"><input type="checkbox" name="categories" id="category-2" value="2"> Tours (157)</label>
  
  <label class="checkbox"><input type="checkbox" name="categories" id="category-3" value="3"> Boat Tours &amp; Water Sports (126)</label>
  
  <label class="checkbox"><input type="checkbox" name="categories" id="category-4" value="4"> Nature &amp; Parks (14)</label>
  
  <label class="checkbox"><input type="checkbox" name="categories" id="category-5" value="5"> Transportation (45)</label>
  
  <label class="checkbox"><input type="checkbox" name="categories" id="category-6" value="6"> Shopping (56)</label>
  
  <label class="checkbox"><input type="checkbox" name="categories" id="category-7" value="7"> Sights &amp; Landmarks (22)</label>
  
  <label class="checkbox"><input type="checkbox" name="categories" id="category-8" value="8"> Museums (22)</label>
  
  <label class="checkbox"><input type="checkbox" name="categories" id="category-8" value="8"> Fun &amp; Games (25)</label>
  
  <div class="attractions-more">
  
    <label 

Open in new window

0
I have an online form, that once filled out and saved can be opened, for viewing. The problem is I'm using .Enabled=false on the radio buttons/ dropdowns and textboxes. This renders the content too light to be read.

I've had a google, and found some solutions but nothing works, ie I can over ride the disabled style.

for example this is ignored, even though I can see the style is being applied its not working:

      <style type="text/css">
            input {color: black; -webkit-text-fill-color: black;}
      </style>

Anyone have any ideas.

This is in chrome, but must work in Chrome & IE 10 up.

Andy
0
Hi, I have been learning CSS grid these past few weeks.  I have created a page using CSS grid, but I am missing a trick to make it fully responsive.  Can anyone assist me with this?  Basically when I play with screen sizes the images reduce to keep the aspect ratio but the title and box below stays the same so the image becomes detached from the text box.  I need them to stick together.  Do I need to use nested boxes?  If so how do I do this please?  Urgent help much appreciated.

This can be viewed here on codepen:

https://codepen.io/Sjohnson805/pen/7ceaeb8aefafa9269a63573877b4eeaf

Regards

Simon
0
I had a working "Contact Us" button and then moved some coding around and now the script appears as text on the browser instead of as a button.

Please contact us to answer any questions about planning an event at xxxxxxx.</p>
[buttonhref="http://www.xxxxx.co/trada/contact/"]contact us[/button]
[/one_half][one_half class="" margin="" padding="" id="" bg_color=""]
<img class="aligncenter" src="http://www.xxxxxx.co/trada/wp-content/uploads/2018/12/LaPolenta.jpg" alt="pond" width="100%" height="100%" />
[/one_half][one_half class="" margin="" padding="" id="" bg_color=""]

Open in new window

1
I looked through the html code, the js, and the css, and I can't find where "undefined" is being inserted in the title when I collapse all the way down.

http://insuranceqa.illinois.gov/GCI3/index.html

Please see attached.
undefind.jpg
1
I am still trying to rotate an image in MS Visual Studio.

CSS code is:

.auto-style1 {
    border: 10px solid rgb(44,45,140);
    height: 390px;
    width: 467px;
    transform: rotate(270deg);
}

The target in a web form is:

<div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <img src="Images/Anatol_Pilot.JPG"" class="auto-style1" />
           
        </div>

The result is that the  border: 10px solid rgb(44,45,140);
    height: 390px;
    width: 467px;
information all works; but the last one  transform: rotate(270deg);
is lost in translation.  
Webform---CSS.docx
0
Hi,

I have this Flexbox layout that I need a little help with. My layout currently looks like this:
Link to code

It's the Flexbox contained in the .products div that I'm working on.

I want to do a couple of things that I don't know how:
  • I want to align all content in each item to bottom. If you see the third from left is higher up then the others.
  • I want to create space between each wrapped row.
  • I want make it so that the last row doesn't use spacebetween, but aligns nicely between eachother.

How can I achieve this?

Thanks for help!

Peter
0
Hi all,

I cannot seem to get a transition to work when switching classes via a javascript function. The function does properly toggle the classes as I can see the Div appear and disappear. However, I would like it to happen a bit more gracefully and so am trying to implement a transition. What am I doing wrong?

CSS ------------------
.SelOptionsDiv_Op {
display: block;
transition: scale 2s ease-out;
}
.SelOptionsDiv_Cl {
display: none;
transition: scale 2s ease-out;
}

Javascript ------------------------

function SetRadDivBGstyle(PassedID)
{
if (PassedID == 1)
      {
      document.getElementById("OptionsDiv").className = "SelOptionsDiv_Cl";
      }
if (PassedID == 2)
      {
      document.getElementById("OptionsDiv").className = "SelOptionsDiv_Op";
      }
}


Kind regards

Abiel M de Groot
0
Big Business Goals? Which KPIs Will Help You
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

image not responsive in banner.  bootstrap.css does not have "responsive" or "img-responsive".  So I created my own in the main.css, but no matter what I've tried I cannot get it to be responsive.

.responsive {
    max-height:292px;
	height:100%;
	width:auto;	
}

Open in new window


http://insuranceqa.illinois.gov/GCI3/index.html
0
Hello Experts, I am hoping you can help with my dilemma. I have an HTML page that has two tables one table nested to the other. What I need to do is align the cell width of the second table to match with the first one. I have tried everything to get it to work with no success. Any help would be most appreciated.

Code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=10">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
      /* Create two equal columns that floats next to each other */
      .middle {
            
            width: 900px;
            padding: 10px;
            border: solid;
            margin-left: auto;
            margin-right: auto;

      }
</style>
</head>
<body  bgcolor = "#86888c" text="Black">
 <div class="middle" style="background-color:#3399ff;" >
    <p>
      
            <b><center><font size="3">
            Testing <br>
            Request<br>
            <font size="2" color = "Red">Version 5.0 - Development</font>
            </center></b></font>

      </p>
      <table  border="1"  id="content"  style="width:100%" >
      
            <tr>
                  <td style="padding-left: 10px" style="font-size: 12pt">Number:</td>
                  
                  <td style="padding-left: 10px" style="font-size: 12pt">
                  
                  <input type="text" style="width:150px;" name = "RequestNum" size="20" title="" id="RequestNum" disabled/><i><font size="2">
                  </td>
                  
                  <td style="padding-left: 10px" style="font-size: 12pt">Title:</td>
                  
                  <td><input type="text" …
0
Hello Experts,
I have the content of an XML file being shown in a richtextbox (.NET VB)
How can I make it have the color formatting?
Regards,
0
On the title on the below page, when I expand it down the image changes to the text of "undefined".  The text is no where in my css or js.  I don't know where it's coming from.  I added bootstrap.css and img-responsive, but than found that it is no longer in the bootstrap file.  How do I get the image to be responsive and remove the "undefined" text?

http://insuranceqa.illinois.gov/GCI3/index.html
0
How do I include a css file in my php code which is in another directory?
<?PHP
	ECHO("
			<?php include('resource/style/default.css'); ?>
		");

Open in new window

1
I have external css files and want to be able to modify some of the css from a php form ie: Set the font colour to #ffffff for example. When I input that into a text field, it updates the database but needs to update the css in the css file. There is too much css to inline into my view as that would have been an easy option. I am sure doing this must be pretty common but not sure what standard practice is for handling it?
0
Hi Experts,

    I get the following error with reactjs code

 const facet_list2 = this.props.facets.filter(i => i.items.length > 0).map((i) => {
        let inputName =  createSwitchKeySearchBox(i.key);

        console.log("inputname = " + inputName + " - i.key - " + i.key);

        const inputBox = (<input type="text" name={inputName} placeholder={inputName}/>);
        const byKeyText = (<span> By {i.key} </span>);

        const keySearchBox = (
               <div style={{textTransform: "capitalize", marginBottom: 8, display: "inline-block"}}>
                  {byKeyText}
                  { if(inputName != 'Default'){inputBox}}
               </div>
       );

Open in new window


I get error on the line if(inputName) the error is

[0] ERROR in ./search/static/search/search-options.jsx
[0] Module build failed: SyntaxError: Unexpected token (72:6)
[0]
[0]   70 |                <div style={{textTransform: "capitalize", marginBottom: 8, display: "inline-block"}}>
[0]   71 |                   {byKeyText}
[0] > 72 |                { if(inputName != 'Default'){inputBox}}
[0]      |                  ^
[0]   73 |                </div>
[0]   74 |        );

Open in new window


Please help me in resolving this issue.

with many thanks,
Bharath AK
0
I would like to make the background lighter on hover.  What I have is not working. Its on the streaming services.  Amazon, etc.
http://mediascrubber.com/index.html

<div>
  	<a href="">
    <img src ="socials\music-service_amazon.svg" class="service">
    </a>
</div>

Open in new window


.service a:hover {
	transition: background-color .3s ease;
    background-color: #9f9145;
	}

Open in new window

1
I am trying to somewhat duplicate this from Demi Lovato's site.

http://www.demilovato.com/

When you open the site there is a button called "Out Now"  when you click on it. You get a choice of music services.  I kind of have the basic layout.  Problem is the "Listen buttons are underneath the logos as opposed to being next to them.  The other problem is that it's a hot mess on the phone!  Sizes and everything else are all over the place.   It should mimic Demi's site on the phone and the desktop. (The logos and the listen.

<section id="music" class="container">
        <!-- player code -->
        <div id="hap-wrapper">

<div>
		<div><img src ="media\SingleCover2.jpg"></div>	
	<div>
	<h4>Alessandro Coli</h4>
	<div>#permission</div>
    <div>Select A Music Service</div>
	</div>
</div>

<div class="service">
  	<img src ="socials\music-service_amazon.svg">
  	<span>...</span>
  	<span class="play" style="float:right" >Listen</span>
</div>

<div class="service">  
	<img src ="socials\music-service_applemusic.svg">
	<span>...</span>
  	<span class="play">Listen</span>
</div>

<div class="service"> 
  	<img src ="socials\music-service_deezer.svg">
	<span>...</span>
  	<span class="play">Listen</span>
</div>

<div class="service"> 
  	<img src ="socials\music-service_google-play.svg">
    <span>...</span>
  	<span class="play">Listen</span>
</div>

<div class="service"> 
  	<img src ="socials\music-service_itunes.svg">
    <span>...</span>
  	<span 

Open in new window

0
Determine the Perfect Price for Your IT Services
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Having a problem with the menu bar at the top of a mobile device.   It's the perfect height on the desktop, however; on the phone it is too thick as are the menus that come up.  How do I shrink the height of the menu bar as well as each line element.

http://mediascrubber.com/index.html

.mobile_menu {
    overflow: hidden;
}
.logo-mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 18px 0 0 18px;
}
.logo-mobile-menu a img {
    width: 220px;
}
.mean-container a.meanmenu-reveal {
    width: 30px;
    height: 30px;
    padding: 20px
}

.mean-container .mean-bar {
    /*padding: 7px 0;*/
	padding: 5px 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
.mean-container .mean-nav {
    /*background: #3c3c3c;*/
	background: #8f7a45;
	filter: alpha(opacity=70);
    -webkit-opacity: .7;
    opacity: .7;
}
.mean-container .mean-nav {
    /*margin-top: 60px;*/
	margin-top: 20px;
}
.mean-container a.meanmenu-reveal span {
    margin-top: 6px;
}

Open in new window

0
I need to change the background of a button on a form.  It looks perfect on a phone but on the desktop it is white.  Transparent would be good.
.sub-btn:visited,
.sub-btn {
    /*background: -webkit-gradient(linear, left top, right top, from(#e52d27), to(#F27121));
    background: -webkit-linear-gradient(left, #e52d27, #F27121);
    background: -o-linear-gradient(left, #e52d27, #F27121);
    background: linear-gradient(to right, #e52d27, #F27121);*/
    color: #ab8a69;
    border-radius: 50px;
}

.sub-btn,
.p-btn {
	color: #ab8a69;
	font-size: 15px;
    line-height: 25px;
    letter-spacing: 0.5px;
    font-weight: 300;
    padding: 6px 25px;
    border: 1px solid #3c3c3c;
}
.buttons {
	text-align:center;
	padding-bottom: 20px;
}

Open in new window


Am I in the wrong place?  Does this control the text color ant the button color?

It;s the Submit button at the bottom of the page.
http://mediascrubber.com/
0
I would like to reduce the height of the Menu Bar at the top of the page and I am having difficulty finding the CSS for it.  Any help is appreciated.  Thank you.

http://mediascrubber.com/
0
Image isn't centering on landscape view on mobile or desktop.  Home page
http://mediascrubber.com/
<div class="banner">
        <img src="images/1100.jpg" alt="coli">
    </div>

Open in new window


.banner {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

Open in new window

0
I have a circle that has those dotted borders, however the border is more like dashes but as ticks.
Is there a way to make the border exactly the same design (the tick one not the thick solid line) with css?

I want to change this class: "OtherCaptionBorder"

.caption_circle{
    position: absolute;
    top: 450px;
    left: 7%;
    z-index: 10;
    padding-top: 35px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    height: 245px;
    width: 245px;
    background-color: #373737;
    opacity: 0.83;
    border-radius: 50%;
    display: inline-block;
    border-color: #fff;
    border-style: solid;
    border-width: 7px;
    font-family: open_sansregular;
    font-weight: 600;
}
.OtherCaptionBorder{
position: absolute;
    top: 2px;
    left: 1%;
    z-index: 10;
    padding-top: 35px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    height: 228px;
    width: 228px;
    border-radius: 50%;
    border: 2px dotted #ffffff;
}
.InnerCircleText{
margin-top: 8px;
    font-size: 18px;
    font-family: open_sansregular;
    font-size: 24.3px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.11;
    letter-spacing: 0.8px;
    text-align: center;
    color: #ffffff;
}

Open in new window


how the circle is made:
      <div class="caption_circle">
       <div class="OtherCaptionBorder">
       <p class="InnerCircleText">
	    DOCTOR-<br>
		RECOMMENDED<br>
		FOR IBS, IBD,<br>
		CELIAC<br>
		& SIBO<br>
		<hr class="HRHomepage">
		</p>
		</div>
      </div>

Open in new window

dotted.png
0
Gravity Forms layout:
In my Wordpress Gravity Forms layout I am getting this:Gravity forms imageInstead I would like to have the Date of Birth on one line and the Home Phone, Cell Phone, email and Preferred Contact all on the next line.
I have tried putting different commands in the Custom CSS Class for Date of Birth and gf_first_quarter, gf_second_quarter, etc for the contact fields but nothing has worked.

How do I do this?
Thanks
1

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.