Blog posts about html

  • Batch download from HTTP directory listing

    August 08, 2013 | Tags: Tools, Open source, HTML

    Want to download a number of files that are exposed through directory listings via HTTP? It can be really time consuming to do manually, especially if it also includes sub folders. Thankfully there's the tool Wget to the rescue! And these are the steps to follow:

    Download and extract GNU Wget:
    http://www.gnu.org/software/wget/

    Launch a command line prompt (ie run "cmd") and enter the following command (replacing "http://domain/folder/" with the url you want to download from:
    wget --wait=1 --recursive --no-parent --reject "index.html*" "http://domain/folder/"
    ..or the same but with parameters in short-hand:
    wget -w1 -r -np -R "index.html*" "http://domain/folder/"

    Explanation of parameters

    -w1, --wait=1 adds a 1 second wait between requests out of courtesy
    -r, --recursive do a recursive request (follow links)
    -np, --no-parent don't follow links backwards
    -R "index.html*", --reject "index.html*" don't save any folder listings, just the files.


  • Keeping aspect ratio in responsive CSS

    June 19, 2013 | Tags: CSS, HTML, Snippet
    Having problem with retaining the aspect ratio when doing responsive design? Setting width in percentage is easy, but doing the same for height will be ignored. The solution is to instead use padding in order to set the correct aspect ratio. In order for this to work the height must be set to 0.

    The example below shows an element that will keep a 4:3 aspect ratio when scaled. The percentage set as padding-bottom will be the ratio, so for 4:3 we'll use 75%. If you instead want a complete square you should use 100%.

    <style>

    .my-box {
    background:#cccccc;
    width:100%;
    height:0;
    padding-bottom:75% /* relative to the element´s width */
    }

    </style>

    <div class="my-box">
    This box should be 4:3
    </div>

    Original solution found at: Pixel Acres


  • Add vertical dividers with CSS

    February 13, 2013 | Tags: CSS, HTML, Snippet

    This is a little snippet of how one adds a vertical line that is the same height to columns that isn't by using CSS.

    Lets say that you have a menu consisting of several columns, something like this:
    <style>
    .first-column,
    .column {
    float:left;
    width:200px;
    }
    .column {
    margin-left:30px;
    }
    </style>

    <div id="fat-menu">
    <div class="first-column">
    ..content..
    </div>
    <div class="column">
    ..content..
    </div>
    <div class="column">
    ..content..
    </div>
    <div style="clear:both;"></div>
    </div>

    And you would like to add vertical lines as dividers between each column. But using a border-left on all but the first column would not do it since the columns contains different amount of data and therefor are of different heights.

    Another solution would be to use CSS in order to add those lines and make them the same height of it's container, thereby following the highest column.

    This can be achieved by using the :before rule in CSS that injects elements before the matching element, in our case .column.

    Besides adding a new :before rule we need to make sure that any offset given using top and bottom attributes are relative to it's parent and not the window (or other grand parent). This is done by setting position to relative on the menu container.

    We use the margin in order to position the line 15 pixels to the left of the column.
    <style>
    #fat-menu {
    /* Set position so that offsets in children are based on parent */
    position: relative;
    }

    .first-column,
    .column {
    float:left;
    width:200px;
    }

    .column {
    margin-left:30px;
    }

    .column:before {
    content:" ";
    margin:0 -15px;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #666666;
    }
    </style>

    <div id="fat-menu">
    <div class="first-column">
    ..content..
    </div>
    <div class="column">
    ..content..
    </div>
    <div class="column">
    ..content..
    </div>
    <div style="clear:both;"></div>
    </div>

    Done! Adjust the top, bottom, background and margin attributes accordingly to your requirements.



  • Soft breaks in HTML text

    May 02, 2012 | Tags: HTML, Snippet

    If you want to hint to the web browser where to break a word when it doesn't fit on the same line there's a nice little thing called soft hyphen, available through &shy; (also &#173; or &#xAD;).


    <p>This is an example of a wordthat&shy;shouldbreak in the middle if it doesn't fit on the same line.</p>

    The above example will break the made up "wordthatshouldbreak" at the &shy; character if the whole word doesn't fit on the same line, resulting in "wordthat-shouldbreak".

    More info about line breaks and hyphenation over at W3's HTML 4.01 Specification.


  • Circled number with pure CSS

    April 24, 2012 | Tags: CSS, HTML, Snippet
    CSS3 has introduced some nice features, one of them is rounded corners. This is a little snippet to create a circled number looking like this:


    The CSS:
    <style>

    span.step {
    background: #cccccc;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 5px;
    text-align: center;
    width: 1.6em;
    }

    </style>
    The HTML:
    <span class="step">1</span>
    A couple of tips:
    If you want a bigger circle, change either font-size to enlarge everything by the same amount (both text and circle) or width, line-height and the border-radius' to only affect the circle (border-radius = half of the width and line-height values).
    To center the circle with other text, place it in an element where you set a line-height that equals or exceeds the one of the circle.