Leela Priyadharshini's Profile

11
Points

Questions
0

Answers
5

  • By default, a table in HTML will contain a default value of cellpadding and cellspacing. This can be easily removed if you are using tag properties attached to the HTML table itself. For example, you can see the following image. I have included a border to the table so we can exactly see the cellpadding and cellspacing applied to the table.

    This is the actual table example. Note I have included a border to 1px to showcase the cellpadding and cellspacing.

    If we want to do it in the HTML code itself, it can be done as the following code.

    <table cellpadding='0' cellspacing='0'>

    But how about to do it in CSS? Well it is pretty simple, to remove the cellspacing of a table in the CSS, you can use the following style code.

    table {
         border-collapse: collapse;
    }

    And to remove the cellpadding in the table using CSS, you can use the following style code.

    th,td {
        padding: 0;
    }

     

    • 580 views
    • 2 answers
    • 0 votes
  • Asked on January 27, 2019 in HTML / CSS.
    To position Text over an image using CSS 

    Example

    /* Container holding the image and the text */
    .container {
    position: relative;
    text-align: center;
    color: white;
    }

    /* Bottom left text */
    .bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
    }

    /* Top left text */
    .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
    }

    /* Top right text */
    .top-right {
    position: absolute;
    top: 8px;
    right: 16px;
    }

    /* Bottom right text */
    .bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
    }

    /* Centered text */
    .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    • 519 views
    • 2 answers
    • 0 votes
  • Asked on January 27, 2019 in HTML / CSS.

    If it’s the visual appearance of a button you’re looking for in a basic HTML anchor tag then you can use the Twitter Bootstrap framework to format any of the following common HTML type links/buttons to appear as a button. Please note the visual differences between version 2, 3 or 4 of the framework:

    <a class="btn" href="">Link</a>
    <button class="btn" type="submit">Button</button>
    <input class="btn" type="button" value="Input">
    <input class="btn" type="submit" value="Submit">

    Bootstrap (v4) sample appearance:

    Sample output of Boostrap v4 buttons

    Bootstrap (v3) sample appearance:

    Sample output of Boostrap v3 buttons

    Bootstrap (v2) sample appearance:

    Sample output of Boostrap v2 buttons

    • 560 views
    • 3 answers
    • 0 votes
  • Asked on January 27, 2019 in HTML / CSS.

    You can start with a simple (and working) solution like datetime-input for polymer that allows you to use a tag like this one:

     <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

    or you can get creative and pop-up complete date-pickers styled as you wish, with the formatting and locales you desire, callbacks, and your long list of options (you’ve got a whole custom API at your disposal!)

    • 540 views
    • 4 answers
    • 0 votes
  • Asked on January 27, 2019 in HTML / CSS.

    $(‘input[type=”date”]’).change(function(){ alert(this.value.split(“-“).reverse().join(“-“)); })

    • 565 views
    • 6 answers
    • 0 votes