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

Hello,

I have a rating system which uses css and jquey. I have 5 stars, the stars are radio buttons and I used CSS to change them into stars,

I have been asked to modify if so that if someone clicks the 5 star, then the other 4 also change to selected star, or if you click the 3 star, then 2 and 1 also change.

I just want to css display to change, I don't want to change the stars to a selected value for when the form is submitted

I made an initial jquery attempt wth no luck, I am not even sure I am applying the right class
https://fasdinfotsaf.ca/en/fee-for-service/

FYI, the rating is based on 1 per IP, so if you submit it, you wont see stars anymore


My jquery attempt
jQuery('#star5').change(function() {

                  if( ($(this).is(':checked')))  {
						  $("#star4, #star3, #star2, #star1 ").addClass(".star:checked:before");
					}   else   {
						 $("#star4, #star3, #star2, #star1 ").addClass(".star");
					}
	
		 });

Open in new window


My HTML
<input type="radio" name="ratings" value="1" class="star" id="star1"> 
<input type="radio" name="ratings" value="2" class="star" id="star2">
 <input type="radio" name="ratings" value="3" class="star" id="star3">
<input type="radio" name="ratings" value="4" class="star" id="star4">
<input type="radio" name="ratings" value="5" class="star" id="star5">

Open in new window


My CSS
.star {
    visibility:hidden;
    font-size:30px;
    cursor:pointer;
	display:block;
   float:left;
   margin-right:15px;
}
.star:before {
   content: "\2606";
   position: absolute;
   visibility:visible;
   color:#1ac0da;
   
   
}
.star:checked:before {
   content: "\2605";
   position: absolute;
   color:#1ac0da;
}	

Open in new window

1
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.

When I hover over an image I would like the transition effect that I have on my <a> tag to fire. It is only sort of working now.

Here is the code for the a href that works. It just makes the underline of the word stretch from left to right and is animated, and the text moves up a bit. It is working 100%.

 
   &__img-link {
        position: absolute;
        top: 85%;
        left: 8%;
        color: $color-primary;
        font-size: 2.4rem;
        line-height: 2.4rem;
        text-decoration: none;
        transition: all .5s;

        &::after {
            content: '';
            display: block;
            width: 0;
            height: 5px;
            background: $color-primary;
            transition: width .5s;
        }

        &:hover {
            transform: translateY(-10px);
        }

        &:hover::after {
            width: 100%;
        }
    }

Open in new window


I want this above code to execute when I hover over the image instead so I tried this:

The only part that works is the translateY and the opacity

 
   &__img {
        width: 100%;
        height: 400px;
        position: relative;
        object-fit: cover;
        transition: opacity .5s;

        &:hover {
            cursor: pointer;
            opacity: 0.8;

        }
    }

    &__img:hover ~ &__img-link {
        transform: translateY(-10px);

        &::after {
            content: '';
            display: block;
            width: 0;
            height: 5px;
            background: $color-primary;
            transition: width .5s;
        }

        &:hover::after {
            width: 100%;
        }
    }

Open in new window

0
I have created a SQL Server Job that runs a query which I then will email in HTML format. The issue I am experiencing is that when the SQL statement returns a NULL value the resulting table in HTML does not render the cell and the data shifts. Table-Exampes-of-Now-versus-Intende.docx

My goal is to have display a "Blank" in the cell of the table I am emailing when the corresponding value in SQL is NULL. In the embed Word .doc the third employee (Smith) just joined the company and Termination date is NULL in SQL. This is causing the shift of data to the left.






Open in new window

DECLARE @Body NVARCHAR(MAX),
    @TableHead VARCHAR(1000),
    @TableTail VARCHAR(1000)


SET @TableTail = '</table></body></html>' ;
SET @TableHead = '<html><head>' + '<style>'
    + 'td {border: solid black;border-width: 1px;padding-left:1px;padding-right:1px;padding-top:1px;padding-bottom:1px;font: 9px arial} '
    + '</style>' + '</head>' + '<body>' + 'Date and Time: '
    + CONVERT(VARCHAR(50), GETDATE(), 120)
    + ' <br> <table cellpadding=0 cellspacing=0 border=0;>'
       + '<td bgcolor=#669900><b><font size="1" color="white">Employee</font></b></td>'
       + '<td bgcolor=#669900><b><font size="1" color="white">Hire Date</font></b></td>'
         + '<td bgcolor=#669900><b><font size="1" color="white">Termination Date</font></b></td>'
       + '<td bgcolor=#669900><b><font size="1" color="white">Job Title</font></b></td>'
       + '<td bgcolor=#669900><b><font size="1" …
0
Hello Experts,

I would like to position an html table wrapped in a <div> in the $mail->Body = ' of a php mailer. In html I can place a html table anywhere on a web page using the following code:

<div id="Layer1" style="position:fixed; left:250px; top:159px; width:218px; height:55px; z-index:7">
  <table width="250" border="1" cellpadding="1">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>

Using the above code in the php $mail->Body the table aligns to the left margin. I've tried various CSS <style> methods as well but I am unable to place the html table where i want in the ->Body. Is there a way to place the table where I want?  Other than the html table placement the php mailer performs as expected. Attached is a graphic of how I would like to place the html table in the ->Body of the php mailer, any help would be greatly appreciated.

Thank you,
Visionet
html_table.png
0
I am using  a top margin to align my navigation items with the logo. Is this actually okay or is there a better way to do it? I am not using flexbox or css grid, just html and css for this.

<div class="container">
  <div class="header__logo">
    <h1 class="header__logo--blue">Some Logo</h1>
  </div>
  <nav class="navigation">
    <ul class="navigation__list">
      <li class="navigation__item"><a href="#" class="navigation__link">About us</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Services</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Portfolio</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Contact</a></li>
    </ul>
  </nav>
</div>

Open in new window


.navigation {

    &__list {
        float: right;
        list-style: none;
        margin-top: 8px;
    }

    &__item {
        display: inline-block;

        &:not(:last-child) {
            margin-right: 2rem;
        }
    }

    &__link {
        text-decoration: none;
        color: $color-primary-dark;
        font-size: 1.5rem;
        font-weight: 400;
    }
}

Open in new window


.header {

    &__logo {
        float: left;

        &--blue {
            font-size: 2.5rem;
            color: $color-primary;
        }
    }
}

Open in new window

0
On my site, there is a section for Contact Us that is not stacking underneath the section above it in the responsive view. I have been at it for hours trying to figure it out. Any help is appreciated. Here is the URL. Thank you.

http://domgarofalo.com/sticksandbones
0
Any idea how to write CSS to aplie the following element to Border Box model :

1. div element belong to classes that begin with column
2. div element belonging to cell class
3. a elements nested within div elements belonging to cell classes

            <div class="row">
               <div class="column50 cell">
                  <a href="#"><img src="ce_image04.png" alt="Birthday Party Costumes" /></a>
               </div>
               <div class="column25 cell">
                  <a href="#"><img src="ce_image05.png" alt="Makeup Sales"/></a>
               </div>
               <div class="column25 cell">
                  <a href="#"><img src="ce_image06.png" alt="Costume Specials"/></a>
               </div>
            </div>
0
I need to make an image on a link transparent and this is not working....
<a class="Flag" href="index.html"><img src="images/Flags/US.png" style="float:right;width:42px;height:22px;"></a>

Open in new window


Neither did this...
<a href="indexItaly.html"><img src="images/Flags/Italian.png" style="width:42px;height:22px;" class="Flag"></a>

Open in new window


.flag {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

Open in new window

0
When viewing this site on a cell phone on portrait all of the photos look fine but when in landscape mood the photos distort.  These are the photos after the youtube link.

http://mediascrubber.com/
0
The background color on the series of services (Amazon, You Tube, etc, does not change.

http://mediascrubber.com/

#hap-wrapper{
	margin-left: auto;
	margin-right: auto;
	position: relative;
	max-width: 100%;
	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 3px #333;
	background: -webkit-linear-gradient(left, #231c17, #856657;
	background: -moz-linear-gradient(left, #231c17, #856657);
	/*background: -webkit-linear-gradient(left, #333c0f, #8e7944);
	background: -moz-linear-gradient(left, #333c0f, #8e7944);*/
	border-radius: 6px;
	padding: 30px;
	/*background-color: #600;*/
	background-position: left;
}
#hap-wrapper>div:not(:first-child):hover{
	transition: background-color .3s ease;
	background-color: #FFFF00;
	/*background-color: #8e7944;*/
	filter: alpha(opacity=50);
	-webkit-opacity: .5;
	opacity: .5;
}

Open in new window

0
C++ 11 Fundamentals
LVL 13
C++ 11 Fundamentals

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

Text not centering.

<h2>Sign-up for updates! Join Alessandro's mailing list!</h2>

Open in new window


h2 {
	font-family: Arial, Helvetica, sans-serif;
	color: #f6e5d5;
	text-align: center;
	font-size: 22px;
}

Open in new window


even though h2 style is set to center.  It's going left.

http://www.mediascrubber.com/index.html
0
I am trying to make the font a little larger on the bio of this web page. Cannot for the life of me figure out where to change this.  Have spent much time on this....

http://www.mediascrubber.com/index.html

Any help is appreciated.  Thank you.
0
I'm working on https://renalmeals.com. I used Google Chrome audit on it. One of the things it recommends is:
"For stylesheets, consider splitting up your styles into different files, organized by media query, and then adding a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user's device. See Render-Blocking CSS to learn more. Build tools like critical can help you extract and inline critical CSS."

I'm pretty new at npm. No, I'm VERY new at NPM. I managed to install it using $ npm i -D critical@latest. Now I want to do this, below.  And I'm stumped. Can someone give me more specific instructions? Thanks!

Generate and inline critical-path CSS
Basic usage:

critical.generate({
  inline: true,
  base: 'test/',
  src: 'index.html',
  target: 'index-critical.html',
  width: 1300,
  height: 900,
});
0
In the nav section I want to put text like "page1", "page2", etc.  When the user clicks on any of the links in nav I want the "article" to display the content based on the click in the "nav".  How do I do this?
<!doctype html>
<title>CSS Grid Template 1</title>
<style>
    body {
        display: grid;
        grid-template-areas:
            "header header header"
            "nav article article"
            "nav footer footer";
        grid-template-rows: 80px 1fr 70px;
        grid-template-columns: 20% 1fr;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        height: 100vh;
        margin: 0;
    }

    header,
    footer,
    article,
    nav,
    div {
        padding: 1.2em;
        background: gold;
    }

    #pageHeader {
        grid-area: header;
        text-align: center;
    }

    #pageFooter {
        grid-area: footer;
    }

    #mainArticle {
        grid-area: article;
    }

    #mainNav {
        grid-area: nav;
    }

    /* Stack the layout on small devices/viewports. */
    @media all and (max-width: 575px) {
        body {
            grid-template-areas:
                "header"
                "article"
                "nav"
                "footer";
            grid-template-rows: 80px 1fr 70px;
            grid-template-columns: 1fr;
        }
    }
</style>

<body>
    <header id="pageHeader">
        <img src="images/xxxxx.png" alt="Header" />
    </header>
    <article id="mainArticle">Article</article>
    <nav 

Open in new window

0
I am having a problem with my grid in that when I have 3 items it displays correctly but when I add a fourth one it then moves the third one down to the next line and I only have 2 in a row instead of the 3. To better illustrate this I have attached 2 images.

  <section class="section-cards">
    <div class="u-center-text u-margin-bottom-big">
      <p class="sub-text">Features</p>
      <h2 class="heading-secondary">All the features in <br> ONE, Revolutinary Product</h2>
    </div>
    <div class="row">
  
      <div class="col-1-of-3">
        <div class="card">
          <div class="card__img-wrapper">
            <img class="card__img" src="img/atom.png" alt="atom">
          </div>
          <h3 class="heading-tertiary u-margin-bottom-small">One-click Installation. <br> Super easy to use</h3>
          <p class="card__pg">Installation is pretty easy. Just click on "important demo" button and you are set. We've
            told you it's easy and fast!</p>
        </div>
      </div>
  
      <div class="col-1-of-3">
        <div class="card">
          <div class="card__img-wrapper">
            <img class="card__img" src="img/atom.png" alt="atom">
          </div>
          <h3 class="heading-tertiary u-margin-bottom-small">One-click Installation. <br> Super easy to use</h3>
          <p class="card__pg">Installation is pretty easy. Just click on "important demo" button and you are set. We've
            told you it's easy and fast!</p>
        </div>
      

Open in new window

0
http://makandainn2019.staging.wpengine.com/

The right section of the header: It seems like the first row of elements are somehow overlapping the second row so that the links for blog, gift certificates, etc can't be clicked.

I've not taken care of the responsiveness yet, so you need to view in your browser at least above 1210px width. If you also see quickly what css needs added for the logo and right section to stack at 1210px and below, that would also be great. I've been fighting with these two issues for so long I'm just not what what I'm missing.

Thanks for any help.
0

Content wider than screen

Clickable elements too close together

That's the mobile usability report for https://magickitchen.com/info/food-for-chronic-diseases.html.

This one, by contrast, is fine: https://www.magickitchen.com/info/protect-blood-vessels-and-kidneys-with-daily-exercise.html

Which leads me to believe the clickable elements issue isn't with the navigation or footer, which are identical.

The divs are the same as well, so I'm equally confused about the content width issue.

I've tried removing various elements (for instance, the testimonials section), but get the same response.
0
I'm having trouble with the alignment and width of the sub menus in the main navigation at the top below the main header: http://makandainn2019.staging.wpengine.com/

The menu items in them should be aligned to the left on the background and the background be behind all the words, but you can see right now the words are outside of it on the right. I'm sure I'm over looking something simple. Appreciate any help.
0
I have positioned a circle inside another element, in the centre of it and when I hover, a box-shadow should appear and it should move slightly. This works but for some reason when I refresh the page the circle moves from the bottom right corner very quickly to the centre. This movement is animated and only happens on page refresh. How can I prevent this?

<div class="col-1-of-2">
      <div class="bg-video">
        <div class="bg-video__circle">
          &nbsp;
        </div>
      </div>
</div>

.bg-video {
    position: relative;
    background-image: linear-gradient(rgba($color-primary, 0.8), rgba($color-secondary, 0.8)),  url(../img/hero.jpg);
    background-size: cover;
    height: 39rem;
    width: auto;

    &__circle {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%,-50%,0);
        width: 15rem;
        height: 15rem;
        border-radius: 50%;
        background-color: $color-white;
        transition: box-shadow .4s, transform .4s;

        &:hover {

            box-shadow: 0 1rem 2rem rgba(#000, .4);  
            transform: translate3d(-50%,-52%,0);
            cursor: pointer;

        }
    }
}

Open in new window

0
Active Protection takes the fight to cryptojacking
LVL 2
Active Protection takes the fight to cryptojacking

While there were several headline-grabbing ransomware attacks during in 2017, another big threat started appearing at the same time that didn’t get the same coverage – illicit cryptomining.

Hi,

I am having trouble figuring out how to have modified css applied to an existing WordPress site.

Spec:
- WordPress 4.9.9
- Apache

I would like to know:
- How to change the looks of the website

Issues:
- I don't know which scss files are loaded by web browser. There is no scss files under application directories. You can actually find multiple scss files are loaded from the developper console.
- I have 'main.css' that seems relevant to scss files used to style the website. CSS properties can be found in 'main.css' but browser does not use 'main.css' to rendering purpose. Instead, it seems to use .scss files since look of the site does not change by modifying 'main.css'.

Other note:
- There seems no SCSS related plugins are installed.
- This WordPress website was developed by freelancers who I am not in touch anymore.

Live preview site: http://54.178.243.12/

I have been googling for long time, but not successful so far :(
Any advises are welcome. Looking forward to hearing from you.
0
I am using scss and trying to hide an icon and when I hover the button I want the icon to display. I also want to animate it so I can't use display:none as I believe you can't animate that. So I have tried to use opacity and visibility.

I have 2 problems. Firstly, The text in the button is not centered because the icon is there in an invisible state yet when you go to dev tools you can still see it there. Secondly, the icon does not appear on hover.

.btn {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  display: inline-block;
  font-size: 1.6rem;
  box-shadow: 0 1rem 2rem rgba($color-black, .2);
  &--primary {
    background-color: $color-primary;
    color: $color-white;
    transition: all .2s;
    &__icon {
      visibility: hidden;
      opacity: 0;
    }
    &:hover {
      transform: translateY(-2px);
      &__icon {
        visibility: visible;
        opacity: 1;
      }
    }
  }
}

Open in new window


<a href="#" class="btn btn--primary">Discover More <i class="btn--primary__icon icon-basic-clockwise"></i></a>

Open in new window

0
https://github.com/selectize/selectize.js/fork

above is multi select from the datalist to the single textbox. I want this function working on my mvc/razor/c# web form.
however I do not like above selectize because it has css that make my own css website having some issues.

Do you know how to do select multiple value from html datalist to a single textbox (in javascript)?
0
I'm looking for a bandaid css hack to set a nested table the same class as the parent table tr in which it resides until I can recode the entire thing properly (probably 3-4 weeks away).

I have a table which

<table id="table-orders" class="table table-bordered table-condensed full-width table-striped">

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
  background-color: #b3cbcb;
}

now inside each tr there is a nested table

 <table id="order-details" class="table table-bordered table-condensed">

that I need to make it's tr's match up with the table-striped background color.

Can anyone offer a way to accomplish this?
0
Pros and more Cons of using SASS on a new MVC website?

I have not used SASS but hear it produces perfect CSS files. One downside is that everyone who needs to create classes must learn the SASS scripting language. Another may be that debugging time is much higher.

Are there, instead, good coding practices that all developers can follow, so they can avoid the negatives of using SASS and get some of the benefits of using standardized CSS?

(I am not sure if the MVC site will use the Razor View Engine, but does this change your opinion of using SASS?)

Thanks
0
I have this code:

<div class="row" style="padding-top:10px;">
			<div class="col-sm-12 col-xs-12 text-left"><input type="checkbox" name="selall" >&nbsp;<span id="selall" onClick="sel_all();">Select All</span></div>
		</div>
		<div class="row" style="padding-top:10px;">
				
			<div class="row" style="padding-top:10px;">
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="summtr" name="summtr" >&nbsp;<span id="strtxt" onClick="setsummtrcheck();">Summary (Trade Pricing)</span></div>
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="spec" name="spec" >&nbsp;<span id="spectxt" onClick="setspeccheck();">Sample Spec</span></div>
			</div>	
			<div class="row" style="padding-top:10px;">
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="summnt" name="summnt" >&nbsp;<span id="snttxt" onClick="setsummntcheck();">Summary (Net Pricing)</span></div>
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="broc" name="broc" >&nbsp;<span id="broctxt" onClick="setbroccheck();">Product Brochure</span></div>
			</div>	
			<div class="row" style="padding-top:10px;">
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="summnp" name="summnp" >&nbsp;<span id="snptxt" onClick="setsummnpcheck();">Summary (No Pricing)</span></div>
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="draw" name="draw" >&nbsp;<span id="drawtxt" onClick="setdrawcheck();">PDF Drawing File</span></div>
			</div>	

Open in new window


It produces the output as in the attached image. Why does the "Select All" not align vertically with the checkbox elements underneath? I tried everything I could think of, like text-left, which is superfluous .

Thanks
Misalign.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.