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

Hi Css experts

How do I add a background opacity to this set of css   I want it "semi-transparent"    

And while we're at it, how do I add a margin to the right.  I know this is simple, but I'm having trouble doing it "my way".

And rather than a "fixed" font size, I would like it to adjust for mobile.  is em a better solution???

I think these are the only changes I need -- I may ask for some little tweaks after I get your solutions.


element {

    letter-spacing: 1.6px;
    font-family: Roboto;
    font-size: 21px;
    color: rgb(255, 255, 255);
    top: 277.5px;
    left: 61px;
    background-size: cover;
    background-color: rgb(5, 70, 128);
    background-position: 0% 100%;
    mix-blend-mode: normal;
    border-radius: 15px;
    text-align: left;
    padding: 20px;
    line-height: 30px;
    white-space: normal;
    margin: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    z-index: auto;
    width: 1054px;
    height: 150px;
    border-width: 0px;

}

Open in new window


Below is the back end admin panel for styles.  I see how it lets me put in a position for left (40px)  --- but can't seem to put in a position for right margin, which I also want to be 40 px.
Here's the back end style editor
And below is the result so far:   The two issues are I want the background color (blue) to be semi transparent.  And I want the right size of the background to be 40 pix from the right, just as the left border is 40 px from the left.  

THere is a place to add custom css, so I guess that is where I would make these adjustments

This is the result of the image so far
Thanks,
Rowby
0
Exploring ASP.NET Core: Fundamentals
LVL 13
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

I have a WordPress site with a video gallery plugin that is pretty good, except for one issue.  I am hoping it can be fixed with CSS -- and not any changes (if possible) in the html.

Here's a link to the page.   Link to website   (work in progress).

On the home page you will see a row of 3 videos. Starting with a title "Gift Wizard...."   Each video has black bars on the right and left.  I want to enlarge the videos so that they fit full size in the div without the black bars..   Need videos bigger -- same aspect ratio -- larger height and width.  Filling out the complete div, eliminating the black bars on the right and left. I have attached a screen capture of how it looks now - and how I want it to look hopefully with just a css fix.      The controlling css file appears to be named player.css

I don't just want the videos wider, I want them taller, keeping the same aspect ratio height x width -- filling the full width of the div -- as well as making the video taller -- without distorting it.

Also it needs to work on cell phones.... :)

It appears that each video is in a div titled div.id="player"   or "vp-video-wrapper transparent"       If necessary I will go into the code and make any html adjustments -- but I prefer a css solution if at all possible. :)

Thanks!
Rowby

Need videos bigger -- same aspect ratio -- larger height and width.  Filling out the complete div, eliminating the black bars on the right and left.
0
I would like to find a tech who can do a remote login and walk me through applying css flexbox code into my web project. I have the website html. I do not understand how to apply the wholy grail template to my site and I would like the tech to show me how its done. I have the wholy grail template but i do not understand how to apply it to my code.

my website:

<html>

  <head>
    <title>TechnicalCafe - Home</titl
  </head>

  <body a link="black" vlink="black">

    <center><h1>TechnicalCafe.com</h1></center>

    <center><b>Home</b> |<a href="about.html">About</a> | <a href="news.html">News</a> | <a href="contact.html">Contact</a></center>
    <center><p>Welcome to TechnicalCafe.com! Please feel free to check out the web pages! Thank you for visiting!</p></center> 

  </body>

  </html>

Open in new window

~
0
Hi Experts,

Steps to reproduce:

1. Open link fiddle
2. click on popover button.
3. popover appears, drag this to the bottom till vertical scroll bar appears.
4. drag down the vertical scroll bar than popover will go back under the button.
5. click again button, the popover will disappear.
6. Click again on button, the popover will appear to the location where the user left it earlier.

expected behavior: when a user drags down vertical scroll bar, popover should not go under the button rather stays there exactly where it is left.
0
I'm working on a Sharepoint webpart where the row header has vertical text.  How can I make sure the column's height just accommodates the text?  This is what I have so far.

  }
  .calendarTableRowHeader {
    font-weight:bold;
    transform: rotate(-90deg) translate(-100%, 0);
    transform-origin: 0 0;
   white-space: nowrap;
    
  }

Open in new window

0
Normally when I see a website using Bootstrap 4 I see the grid classes being used in the HTML. Recently I used a developer who has now managed to implement the grid glasses in the CSS. Is this normal practice and does it work out better?

I'm trying to understand if there are performance vs maintenance trade offs to consider as I'm finding it hard to understand the grid behaviour for HTML elements since the grid classes are not in the HTML. Is this related to Bootstrap Sass mixins?
0
popover moves slightly to the right when the first time user clicks popover button twice.

steps to reproduce:
1. Use link  https://jsfiddle.net/girinishantg/m1p75fbx/1/
2. click on popOver button, a popover appears, drag this to any location, let's say the end of the line.
3. click again popover button, the popover will disappear.
4. click on the popover button again, this time popover will appear but slightly to the right where the user left it earlier.

Expected Behaviour: It should appear exactly the same location where left earlier.
0
SCSS issues. I'm working on a website for a small UK company (something I haven't done for a long while now) who are running this on WordPress and that uses SCSS for the style sheets. The way it was originally designed there's a huge drop down menu system that occupies most of the screen space but, if the browser size is reduced, converts to a mobile setting. The site owners have asked if the code can be changed to always be on the mobile setting. I'm happy with CSS, but have no (or very little) experience with SCSS. I hope someone will be able to help me with the code here. What do I have to strip out, leave or change.

MTIA

Rob

HTML that's generated (from PHP) is
	<nav>
		<div class="inner">
			<ul class="cf cf menu--id-" id="main-navigation">
			<li class="menu-item-8menu-item-type-category">
			      <a href="https://xxxx.com/sheet-music/">Printed Music</a>
				  <div class="mega-menu-container cf"> 
				    <ul>
				      <li class="menu-item-18menu-item-type-category">
					  <a href="https://xxxx.com/sheet-music/sheet-music-sheet-music-piano-keyboard-1/">Piano & Keyboard</a>
					    <div class="mega-menu-container cf"><ul><li class="menu-item-27menu-item-type-category">
						<a href="https://xxxx.com/sheet-music/sheet-music-sheet-music-piano-keyboard-1/piano/">Piano</a>
						[[and lots more like this]]
						</li></ul></div></li></ul>
			<div class="wrapper mobile-menu">
				<div class="container">
					<ul class="shorts cf">
						
					</ul>
					

Open in new window

0
I'm working on a script to pull various elements from our server environment.
For the sake of simplicity, I've removed a lot of what I'm retrieving from below.

Essentially, I'm extracting the appropriate data - writing that output, then pushing it through a function to compare against some thresholds to determine if it's a concern or not.
That in turns writes out a new object that is comprised of only strings (rather than the child objects produced initially).  In the end, I don't need to know what's working - but what is of a concern.  I.e - if I have 14 volumes, but 13 of them are in good shape, only report on the ones nearing capacity (and change the coloring for that field).

I've got all that working, and I end up just leaving a 'Pass' value if everything looks good.  If not, I prepend the field with Warn or Fail based on the logic I'm using.

Now I want to convert it all to a table and remove the 'Warn' and 'Fail' from the field, but I'm stuck because of my lack of knowledge at how to get at these values and manipulate the data, and have it hold.


Here's what's produced in my [xml]$html variable after running it through Convertto-html (would love to remove the colgroup, since I'm obviously not using that, but haven't found a way to do that either).

InnerText          : 
InnerXml           : <table><colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col /><col 
                     

Open in new window

0
Hi,

I d like to pimp my powershell generated html report. I d hope somebody could suggest some changes to my css so it looks more professional (not a designer, more a script er myself).

Thanks!
Below the  css
$HTMLHeader += @"
    <BODY>
<style type="text/css">
    <!--
    body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    #report { width: 835px; }

    table{

    border-collapse: collapse;
    border: 1px solid #FFFFFF;

    font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: black;
    margin-bottom: 10px;
    }

    table td{
    border-collapse: collapse;
    border: 1px solid #FFFFFF;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;

    }

    table th {
    border-collapse: collapse;
    border: 2px solid ##FFFFFF;
   
    font-size: 14px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;

    }

    h2{ clear: both; font-size: 130%; color: black; }

    h3{
    clear: both;
    font-size: 115%;
    margin-left: 20px;
    margin-top: 30px;
    color: brown;
    }

    h4{
    clear: both;
    font-size: 90%;
    margin-left: 20px;
    margin-top: 30px;
    }

    }
   
    button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 25%;
    border: none;
    text-align: center;
    …
0
Become a CompTIA Certified Healthcare IT Tech
LVL 13
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

I am struggling a little bit with the tooltips on the quote form on this page. They are just fine at full size, but when you resize the viewport, they get cut off.

I need them to adjust to fit on the screen no matter the viewport size. Bootstrap does have built in tooltip defaults, but for these specific ones, I have some css in the head of this page to override those as so not to affect the rest of the site. So that's where I need to make the edits.

Thanks!

https://www.stadriemblems.com/products/ajax/custom-enamel-pins/
0
The company intranet site is on Drupal 8 and we would like to create an Event that does not require the email address to be added for authentication and the user to be logged in order to register for the event.  Can someone please let me know if that is possible?  Thanks.
0
Hi, I would like to add a conditional dropdown list to my registration page.

There shall be a dropdown list having 5 entries.

There shall be a second dropdown list, the value of which shall depend on the value in the first dropdown list

Then a third dropdown list which shall depend on the value in the second dropdown.

The second and third dropdowns should have the capability to accept typing out, thus narrowing down the list as the lists are expected to have hundreds of entries.


I am using Ultimate Member plugin. I would like to know how to do this. Or if there is any other/better/simpler way to achieve what I want.
0
CSS Issue.  I'm stuck.  There is a dropdown menu that works fine.  However, if the screen is less than 1250px wide, it changes to a hamburger menu.  When you scroll over, none of the child  menu choices show.  I actually want all menu choices to show and not be hidden. Any ideas?

https://corporatevisions(DOT)com/    Replace the (DOT) so the link works.
0
using Chrome to print a report.  It always comes up in portrait mode.  Is there anything I can do to render the report in landscape format.  Any CSS formatting or something I can default in the browser to force it to always print using landscape?
0
I am using ASP.Net Ajax AutoCompleteExtender with following properties

<div class="col field col-xs-12 col-sm-3 col-md-3 col-lg-2 textBoxAlign fontBold">
                                <div class="row">
                                    <div class="col field col-xs-12 col-sm-12 col-md-12 col-lg-12 textBoxAlign">
                                        <asp:Label ID="lblResStreetName" runat="server" Text="Street Name" />
                                        <asp:Label ID="lblResStreetNameRequired" runat="server" Text="*" CssClass="fontColorRed" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col field col-xs-12 col-sm-12 col-md-12 col-lg-12 textBoxAlign">
                                        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                                            <ContentTemplate>
                                                <asp:TextBox runat="server" ID="txtResStreetName" Width="100%" EmptyMessage="" TabIndex="24" MaxLength="50" AutoPostBack="true" OnTextChanged="txtResStreetName_TextChanged" Class="ResidentialAddressWebFormControls">
                                                </asp:TextBox>
                                                <cc1:AutoCompleteExtender ServiceMethod="SearchStreetNames" MinimumPrefixLength="2" CompletionInterval="10" …
0
Hi,

Need help with our site a popular news platform in our country.  Our featured images are not appearing right on desktop and the positioning is off.. please look at: https://mwebantu.com/2019/06/27/standard-chartered-launches-first-ever-digital-bank-in-zambia/19908/

On this link cannot view the full photo and need help with styling it (css) so it appears right on desktop.  On Mobile it is fine.  

Thanks!
1
Hi Experts,

Need help with our african stock photo site, we are preparing to launch it soon.  We have an issue with loading, it takes forevert to load the images for the categories, and need a better way to load the images ..one by one, and not like now where it loads everything then loads the images... it is using a infinity scroll. See:  https://www.stockimagesafrica.com/downloads/category/southern-africa

We want it to load like pexels.com

Thanks again
0
Hello experts,

Need help with getting our feed to load the page quicker by loading artwork one at a time..it is a large feed and need better way of loading so it does not use a lot of data... http://www.einsteinsolutions.xyz/chaminuka/public/home. the page is loading art that is being uploaded..we have over 1000 artworks to upload but need a way of having an infinity scroll or lazy load that does not consume too much data on page load, and makes the page load slow.  Is they way to load each item in the array one by one like it is on pexels.com , and saving bandwidth.  Help here would be appreciated.
1
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,

I am trying to reverse the order of a set of columns using bootstrap .d-flex flex-column-reverse

Here is my markup, the order gets reverse but they are no longer inline?

<div class="container p-0 row-actions">

<div class="col d-flex flex-column-reverse col-sm-5 p-0 clearfix align-items-stretch">

<span class="col-6 w-50 pl-0 float-right d-inline-block">Edit Gift</span>  

<span class="col-6 w-50 pr-0 float-right d-inline-block">Remove</span>

<span class="col-6 w-50 pr-0 float-right d-inline-block">Quick Edit</span>  

<span class="col-6 w-50 float-right d-inline-block">Copy</span>
</div>
</div>

Open in new window



Would appreciate some help here.

Many Thanks,

Andrew
0
I used the bundled/minify nuget package in asp.net , to bundle JavaScript and css files. Which works great. Is there anyway to update the images files as well ?
0
OK.  I am pretty new to HTML , javascript, jquery and Adobe captivate.
I have to use captivate at work to build my e-learning courses.
Captivate does not have drop down lists, so I have a javascript application that overlays a Captivate text caption element with a "select" drop down element.
It works to a point.  The captivate slide opens with the "select" drop down covering the text caption element.
However, when I resize the browser, all Captivate elements change with the browser, but the "select" drop down remains in the same location.
I need it to follow the text caption element.
So, I opened a debugger and see that the DIV section where the text caption is located is in a DIV section created by Captivate, where the DIV section for the "select" drop down element is in a separate DIV section all together
If I understand HTML correctly, the problem is the "select" drop down element is NOT in the same blocks/frame as the text caption, so it does not move with the browser.

So my question is, how do I get that "select" drop down element to either over write the text caption element or how do I get (trick) the HTML to get the "select" drop down DIV to size with the DIV of the text caption element?
0
Hello,
I have an very old website. When I check the Markup Validation then I get several errors.

https://validator.w3.org/
For example:

1) I am using old  html-tags: applet, basefont, center, align, dir, font, isindex, menu, s, strike and u
With which tags can I replace those old tags?

2)  I need an <br> after an <li>. How can I use this without getting an warning?

3) What does this error mean?
   "Cannot recover after last error. Any further errors will be ignored."



Thank you
0
Hi,

On dropdown change, I am show hiding div on the basis of class.
Code works great in all browser except Windows 7 IE 11.

What is the issue on IE 11 on Windows 7? Please advise

<select id="selectCountryForCarrer" name="selectCountryForCarrer">
    <option value="All">All</option>
    <option value="UK">UK</option>
    <option value="US">US</option>
</select>

Open in new window


<script>
    function fnSelectCountryforCarrer() {

        $('#selectCountryForCarrer').change(function () {
            var selectedValue = jQuery(this).val();
            if (selectedValue == "All") {
                $(".countryselection").hide();
                $("." + selectedValue).show();

                $(".linkedinnews").show();
            } else {
                $(".countryselection").hide();
                $("." + selectedValue).show();
                $(".linkedinnews").hide();
            }
        });
    }

</script>

Open in new window


Regards,
0
Why is the text next to the checkbox floating right instead of left, when the viewport is between about 992 and 1060 pixels?  At 1100 pixels, the text is floating left, and looks like this:

Checkbox label correctly floating left

At 1068, crowded, but still floating correctly LEFT
Crowded, but still floating correctly LEFT


At 1060px, it is floating RIGHT.  I cannot find the problem in the CSS and markup.
Now wrongly floating right.

Inspecting the code, it seems like the browser says it is floating left, but the rendered result is floating right.

 Inspecting the code

You can view the phenomenon at this link, by clicking on the down arrow for signin.


Any assistance you can provide will be much appreciated.

Thank you.
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.