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,

I have problem to make the progress bar be animated. It shows a static progress bar with the green image only but no animation. I placed the code below for your reference. May I know what is the problem? Please help. Thanks.

I embedded all the codes below codes in the jsp (the framework is SpringMVC). How to make the progress bar animated? Also, we are using html4 but not the highest (html5).

HTML:
<div id="pwidget">  
<div id="progressbar">
    <div id="indicator"></div>
</div>
<div id="progressnum">0</div>
</div>
<input type="button" name="Submit" value="Start the progression"
    onclick="itv = setInterval(prog, 100)" />
<input type="button" name="Submit" value="Stop"
    onclick="clearInterval(itv)" />


CSS:

#pwidget
{
  background-color:lightgray;
  width:254px;
  padding:2px;
  -moz-border-radius:3px;
  border-radius:3px;
  text-align:left;
  border:1px solid gray;    
}
#progressbar
{
  width:250px;
  padding:1px;
  background-color:white;
  border:1px solid black;
  height:28px;
}
#indicator
{
  width:0px;
  background-image:url("shaded-green.png");
  height:28px;
  margin:0;
}
#progressnum
{
  text-align:center;
  width:250px;
}

Javascript code:

var maxprogress = 250;   // total to reach
var actualprogress = 0;  // current value
var itv = 0;  // id to setinterval
function prog()
{
  if(actualprogress >= maxprogress)
  {
    clearInterval(itv);    
    return;
  }
  var progressnum = …
0
The Ultimate Tool Kit for Technolgy Solution Provi
The Ultimate Tool Kit for Technolgy Solution Provi

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 for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

I want to do a multi select dropdown that is responsive. but the problem is I want it to look like this:
dropdown.png
But im not able to do it without the "select" dropdown, therefore the user will have to open it then select multi selections.
Can anyone help me?
0
Footer doesn't display at the bottom of a long page. It displays on top of the text on the page. Here is the link http://101realestateinvesting.com/about-us/
0
I am trying to learn how to render this effect in pure HTML and CSS, with no frameworks. I have tried to study the source code of the page, but it is so complicated.



Here is the background image:



Here is the transparent overlay:



Ideally, I want to just have this in its own DIV.

<div id="pageHeader">

</div>

Open in new window


Can anyone help me re-create the look? It doesn't have to be exact, but I would love to see how they did this, and learn this technique. I especially like how they centered and styled the form to overlay on the bottom.

Note: Individually, I understand the basics of each CSS rule that is probably applied here, ie. backgrounds, padding, margins. I am confused on how to put them all together.

Thanks for looking.

Regards,

John
0
Hi Guys,
I am trying to print images from my dom:
This is what I am doing:
//dom
<div id="thumbnailViewerDiv" style="width: 200px; height: 700px; background-color: darkgray; text-align: center;">
            <img src="1.Jpg" width="150" height="200">
            <img src="2.Jpg" width="150" height="200">
            <img src="3.Jpg" width="150" height="200">
  
        </div>

Open in new window


//javascript
 function ImageReturne() {
        var div = document.getElementById("thumbnailViewerDiv");
        var img = div.getElementsByTagName("img");
        var imgList = "";
        for (let i = 0; i < img.length; i++) {
            imgList += "<img src='" + img[i].src + "' />"
        }
        debugger;
        var firstFunc = function step1(){ setTimeout('step2()', 10);}
        var secondFunc = function step2(){window.print();window.close()}

        var getImages = "<html><head><script>\n" + firstFunc + "\n" + secondFunc + "</scri" + "pt></head><body onload='step1()'>\n" +
        "'" + imgList + "" + "</body></html>";
        return getImages;
    }


    function PrintImage() {
        Pagelink = "about:blank";
        var pwa = window.open(Pagelink, "_new");
        pwa.document.open();
        pwa.document.write(ImageReturne());
        pwa.document.close();
    }

Open in new window


All working fine, but the pics cut off on the right side when the print popup and also there are picture that go too much down or one pic go on the half page and the other half on another page.
Any idea?

Actually...I fount one solution and it is to change the scale t 50 when I am in the window.print() screen.
If you have better solution before it goes to the printer I would be happy to hear.
Thank you.
0
I am currently building a web application using ASP.NET MVC 5. In the front-end I am using React.js and the Material Design Lite library for styling. However, MDL's select field with dropdown values is not behaving correctly. To be specific, when I select an option from the dropdown, no value gets selected. I have tried using the following demo code found on MDL's official document in my React component:

<!-- Simple Select with arrow -->
    <div class="mdl-textfield mdl-js-textfield getmdl-select">
        <input type="text" value="" class="mdl-textfield__input" id="sample2" readonly>
        <input type="hidden" value="" name="sample2">
        <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
        <label for="sample2" class="mdl-textfield__label">Country</label>
        <ul for="sample2" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
            <li class="mdl-menu__item" data-val="DEU">Germany</li>
            <li class="mdl-menu__item" data-val="BLR">Belarus</li>
            <li class="mdl-menu__item" data-val="RUS">Russia</li>
        </ul>
    </div>

Open in new window


I believe this must be conflicting with the React library, as I have tried using the same component in an ASP.NET MVC project in a plain Razor view file. What could be causing this conflict, and how can I go about resolving this issue?

Thank you.
0
How to make html div always stay at the bottom of the mobile or desktop device? And make the width auto ?
Inside the div we will put jsignature pad for signature
0
I used form maker to create a form that pops up after 15 seconds on certain pages. The problem is when I click to close the box, it automatically take me to a page that says OOPs that page can't be found. It's directing it to a website that's in my footer link, after my domain. In other words my site is 101realestateinvesting.com but it redirects it to the link in my footer as part of my domain 101realestateinvesting.com/www.linkinfooter.com
0
Page title shows up on some pages but not all pages. How can I make them show up on all pages or none at all?
0
I have a div and on its blank state, I will like to hide it. However, there are spaces in the div and
div:empty { display: none;}

Open in new window

is not working.

Do you have any suggestions on how to hide the div on its empty/blank state?

Thank you all in advance.
0
Get your problem seen by more experts
LVL 12
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Hi folks

I have created a video grid and wish to add a footer div to the bottom of each iframe.  However the footer I have just overwrites the bottom of the iframe.  Any ideas how I can atatch to each video iframe below the video?

Thanks

HTML
 <div class="video-grid">
    <div class="video-item">
      <div class="video-wrap">
        <iframe src="https://player.vimeo.com/video/12112529?portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        <div class="footer" <p>This is where the title will go</p>
        </div>
        
        </div>
      </div>
    <div class="video-item">
      <div class="video-wrap">
        <iframe src="https://player.vimeo.com/video/61487989?portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    
      </div>
    </div>
    <div class="video-item">
      <div class="video-wrap">
        <iframe src="https://player.vimeo.com/video/21081887?portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
    </div>
  </div>

Open in new window





CSS

.video-item {
  overflow: hidden;
}

.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
}

.video-item iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 10px;

}

.video-item img {
  

Open in new window

0
Hi I have this page where a background image blurs on Scroll (transition to a different image) + Simple Parallax. It works great in Chrome, but not working as expected in IE11. It's not broken, per se, just not working as intended.
0
I am trying to export the div content to PDF using jsPDF

function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    source = $('#customers')[0];

    // we support special element handlers. Register them with jQuery-style 
    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
    // There is no support for any other type of selectors 
    // (class, of compound) at this time.
    specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function (element, renderer) {
            // true = "handled elsewhere, bypass text extraction"
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    // all coords and widths are in jsPDF instance's declared units
    // 'inches' in this case
    pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, { // y coord
        'width': margins.width, // max width of content on PDF
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {
        // dispose: object with X, Y of the last line add to the PDF 
        //          this allow the insertion of new lines after html
        pdf.save('Test.pdf');
    }, margins);
}
<script 

Open in new window

0
Hello,
I want to open a modal composed of an iframe full screen.
Any idea on how to achieve that?
0
https://mdbootstrap.com/sections/testimonials-sections/

I want to create pure html Testimonials v.1 from above URL but I do not want to use their plug in. Do you know how i can create the Testimonials v.1 like the one they have?

Thanks
0
I am trying to do something with ScrollMagic and I'm stuck.

This example on scrollmagic.io shows almost what I want to do:
http://scrollmagic.io/examples/advanced/section_wipes_manual.html

The only thing I would like to add, is the ability to "pause" the scrolling on a given slide (i.e., make it "sticky"). So that as you continue scrolling, the slide stays on your screen for a given number of pixels, then continues on to the next slide.

A good example of what I want is in this example on scrollmagic.io:
http://scrollmagic.io/examples/basic/section_wipes_natural.html

Note that in-between screens 3 and 4 there is a pause. This is achieved by adding margin-bottom to screen 3.

However, using the first example, it doesn't appear that adding margin-bottom achieves the pause, because the animations are built in a different way.

I was hoping someone more familiar with ScrollMagic may have some good advice on how to tweak that example, which will then correspond to exactly what I'm trying to do.

Thank you!
0
Is there a way to have a outside border around the <th> of table, but not
around each cell in the table?
Capture.JPG
0
Icons are not showing up on my website after I have uploaded it from my local.

URL: sydneylocalpainting.com
Screenshot of missing icons: https://screenshots.firefox.com/dmdhWFGEgemoIIOi/www.sydneylocalpainting.com
how it looks on local: https://screenshots.firefox.com/aAgJEGTTDkJ0cZRW/localhost

Anyway I was wondering if anyone can figure out the file that the CSS is pointing to so I can just upload the icon to the relevant file (I have uploaded the icons folder from the local install but they are still not showing for some reason).

Thanks!
0
I have below codes in razor / mvc. and i hope to add two buttons (<a></a>) in the center (Remove/View). What do i need to do in css?
When the view button is clicked, just want to open the image.
When the remove button is clicked, it will remove the images from the file directory/remove a record from the database(I know how to do this one)
Not really a web designer :-(... thanks

<div class="submit-section">
   <img style="float:left;width:300px;height:300px;" src="~/images/blog-compact-post-01.jpg" />&nbsp;&nbsp;
   <img style="float:left;width:300px;height:300px;" src="~/images/blog-compact-post-01.jpg" />&nbsp;&nbsp;
</div>
0
Cloud Class® Course: CompTIA Cloud+
LVL 12
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

My apsx page loads with proper data but won't scroll?

Top of code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register tagprefix="WebPartPages" namespace="Microsoft.SharePoint.WebPartPages" assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<HTML dir="<%$Resources:wss,multipages_direction_dir_value%>" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office" __expr-val-dir="ltr" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:v="urn:schemas-microsoft-com:vml">

<head runat="server">
<meta name="WebPartPageExpansion" content="full" /> <meta name="ProgId" content="SharePoint.WebPartPage.Document" /> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <title>Untitled 1</title>

<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/forms.css?rev=P8J2jJIMQlHWGCoogd8ohQ%3D%3DTAG0"/>

Open in new window

0
Hello

I am working on a site that has some background images.  The background images are created by css.    I would like someone to review the css and confirm that it is indeed a true background image.

I am asking because I want to use some javascript effects on the image -- but they only work with "background images".

Here's the link to the page  Link to page

Here's the image link:  Image file via url

And here's the css I find via firebug related to the above image.  
div#shopify-section-1489283919239.featured-collection-section .parallax_image {
    background: url(//cdn.shopify.com/s/files/1/0008/6940/0623/files/goldenbannernew.png?v=1529908976) no-repeat scroll;
        background-attachment: scroll;
        background-size: auto auto;
    background-size: cover;
}

Open in new window

BTW in order to attach some javascript effects to the backgorund image I realize I will have to remove some of the existing css, such as
 background-attachment: scroll;
        background-size: auto auto;

Open in new window



So with all this "evidence" I am 99 percent sure that it is indeed a traditional background image (even though it's created via css and  not embedded directly in the HTML).

Just an Expert confirm that it is indeed a background image -- and that there are no warnings that I have not thought of == as I try to add some special effects to that image.

Such a long winded question for such a simple request!  :)

Best
Rowby
0
Hi,

I have a problem with my website: link to my site.

If I check the site from a mobile device, there are huge space after the descriptions in normal mode in mobile Chrome.  If I load it in Incognito mode, the space disappears.
I checked with Firefox Inspector in Responsive Mode: 'w-testimonials type_masonry' is 8097px, but it should be somewhere ~3836px. (at the 1st description)

Where is the problem and how can I resolve it?

Thanks advanced,
Steve
Capture.JPG
0
Hi, Why don't these underlines grow/shrink with the images... It's all percentage based. They shift to the left or right depending on the browser window size.
0
Hi there. On these pages over mobile I need to center the secondary hamburger menu tabs... https://ccdenver.org/newsroom/

Same is true on these Newsroom subpages...

https://ccdenver.org/media-center/
https://ccdenver.org/pressroom/

And also make the social media icons all on one line over mobile.

Any ideas experts?
0
I have a simple mvc razor view webpage. and javascript.
my question is why below code is not working.
I try to get all of the <input type=text> that has id prefix start with 'cost'.
However, when I take out substring, i can read the entire string.


if (id_name.substring(0,4) == "cost") {
                        alert(id_name);
                    }

@model List<Domain.FleetEventPricing>
@Html.AntiForgeryToken()
@{ int totalcount = 0;}
@foreach (var i in Model)
        {
            totalcount = totalcount + 1;
        <div class="row with-forms">
            <!-- Status -->
            <div class="col-md-8">
                <input type="text" placeholder="@i.eventname" value="@i.eventname" id="eventname_@i.eventId" readonly />
            </div>
            <!-- Type -->
            <div class="col-md-3">
                <input type="text" placeholder="@i.cost" id="cost_@i.eventId"  value="@i.cost">
            </div>
            <div class="col-md-1" style="vertical-align:middle;">
                <a href="#"><i class="fa fa-trash" style="font-size:25px;"></i></a>
            </div>
        </div>           
}
<input type="hidden" value="@totalcount" id="totalcount" />
<div class="col-md-12">
    <a href="#" onclick="UpdateEventCost()" class="button preview">Update Now <i class="fa fa-arrow-circle-right"></i></a>
    <br /><br />
</div>
<script>
        function Validator() {
            return true;
        }
        function UpdateEventCost() {
          

Open in new window

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.