Blog posts about css

  • Show text line breaks in ASP.NET MVC Razor view

    December 10, 2014 | Tags: CSS, ASP.NET, MVC, Snippet

    If you have a string with line breaks and want to show that text with the line-breaks intact in your Razor-based view, you can do this without replacing all \r\n with <br/>-tags. Instead present the text in an element that has the style property white-space set to pre-line. You should really add a class like:

    <style>
    .line-breaks { white-space:pre-line; }
    </style>

    <span class="line-breaks">@Model.MyText</span>

  • Offset a background image from the right or bottom using CSS

    December 10, 2014 | Tags: CSS, Snippet

    If you want to offset your background image a certain amount of pixels from the right with CSS you can do this by first defining it as right and then count away the pixels.

    Say that you wish the background image to start 20 pixels from the right you write your CSS as:

    .myclass {
      /* additional styles */
      background-position: right 20px top;
    }

    This will align your background image to the top right and then offset it 20 pixels to the left. This can also be done as an offset from bottom.

    If you want you can also inline the position in the background tag directly. The following will align the background image 20 pixels from the right bottom corner:

    .myclass {
      /* additional styles */
      background: url("/images/my-image.png") no-repeat bottom 20px right 20px;
    }

  • Disable navbar collapse in Bootstrap 3

    August 28, 2014 | Tags: CSS, Snippet

    If you don't want the navbar to be collaspeable in Bootstrap 3 it's pretty easy to disable it using LESS.

    Open the file variables.less and locate @grid-float-breakpoint, it will look something like this:

    @grid-float-breakpoint: @screen-sm-min;

    To disable collapse just change the value to zero:

    @grid-float-breakpoint: 0;

    And the navbar will not collapse ever again!


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