codepaq: CSS

Showing posts with label CSS. Show all posts

Monday, January 20, 2020

Simple sticky bottom footer

Simple sticky bottom footer example with text-overflow hidden with ellipses.

<!doctype>
<html><head><title>Sticky Bottom Footer</title>
<style>
#content {
 text-align: center;
}
#google_promo {
 position: fixed;
 bottom: 30px;
 left: 0; 
 right: 0;
 text-align: center;
 transition: bottom 400ms;
}
.promo-content {
 border: 1px solid #ccc;
 border-radius: 16px;
 display: inline-block;
 padding: 0 16px;
 width: 237px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

</style>
</head>
<body>
<div id="content">
 <h1>Simple Sticky Bottom Footer</h1>
 <div id="google_promo">
  <div class="promo-content">
   Hello, I am a sticky footer. It's simple to create me.
  </div>
 </div>
</div>
</body>
</html>

Sunday, November 19, 2017

Full-Page Background Image CSS

Using CSS3, the following can be used for most modern browsers to produce full-page background image.

html {
  background-image: url('images/background-image.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Make sure to start the style with background-image: url(''). This style should work with IE9 or above.

Saturday, July 29, 2017

"vertical-align: middle" that works anywhere

Outside a table cell, vertical-align: middle does not work as expected. The following is a css that allows any child element to be positioned at center vertically and horizontally.

text-align: center works in most cases. However, it does not place a child element in perfect center position. It generally places the left-most edge of child element to the center horizontally, giving the look of off-to-right appearance of the child element.

.cell {
 position: relative;
 border: 1px solid #587cdd; 
 border-radius: 5px; 
 margin: 5px;
 width: 50px; 
 height: 50px;
 text-align: center;
 float: left;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 ransform-style: preserve-3d;
}
.content {
 position: absolute; 
 top: 50%; 
 left: 50%;
 transform: translate(-50%, -50%); 
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
 <span class="cell" v-for="n in 10">
  <span class="content">{{ n }}</span>
 </span>
</div>

new Vue({
 el: '#app',
 
});

The above code will produce the following. Each square has content with dead center position: both horizontally and vertically.

Tuesday, May 24, 2016

Wrap Text in PRE tag

In order to wrap text in a <pre> tag, one can use the following:

<style>
  pre {
      white-space: pre-wrap;       /* Since CSS 2.1 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
  }
</style>

Friday, October 2, 2015

Format <td> to handle linefeed and wrap long text in a table

When a table cell needs to properly display texts with linefeed and really long text with no whitespace (i.e., long URL), try the following styles.

<table style="table-layout: fixed">
  <tbody>
    <tr>
      <td>Some Links</td>
      <td style="white-space: pre-wrap; word-wrap: break-word">
        ...
      </td>
    </tr>
  </tbody>
</table>

Below is a problematic example of table cell display. The long URL text, which has no whitespace character stretches the table's width beyond the specified table width of 400px.

<table style="width: 400px; border: 1px solid white; color: white">
  <tbody>
    <tr>
      <td style="width: 100px; border: 1px solid white; vertical-align: top; ">Some Links</td>
      <td style="border: 1px solid white;" >Link Example: 
        https://www.google.com/maps/@33.7338729,-117.8530829,3a,75y,304h,90t/data=!3m7!1e1!3m5!1suAg9o6LKzX3</td">
    </tr>
  </tbody>
</table>

Some Links

Link Example: https://www.google.com/maps/@33.7338729,-117.8530829,3a,75y,304h,90t/data=!3m7!1e1!3m5!1suAg9o6LKzX3

Below is better way to display the content with proper line-feed in order to keep the specified table width of 400px;

<table style="width: 400px; border: 1px solid white; color: white; table-layout: fixed;">
  <tbody>
    <tr>
      <td style="width: 100px; border: 1px solid white; vertical-align: top; ">Some Links</td>
        <td style="border: 1px solid white; 
          white-space: pre-wrap; word-wrap: break-word;" >Link Example:
https://www.google.com/maps/@33.7338729,-117.8530829,3a,75y,304h,90t/data=!3m7!1e1!3m5!1suAg9o6LKzX3</td>
    </tr>
  </tbody>
</table>

Some Links

Link Example:
https://www.google.com/maps/@33.7338729,-117.8530829,3a,75y,304h,90t/data=!3m7!1e1!3m5!1suAg9o6LKzX3

Thursday, August 28, 2014

Using Less in Visual Studio 2013 Web Project

Here is a cheat sheet on "what to do" to start using LESS on Visual Studio 2013 web project.

Install "dotless" using Package Manager Console ("install-package dotless") or the Nuget Package Manager

Open Web.config, locate the "dotless" section, and change it as the following.
The main thing is to add

<validation validateIntegratedModeConfiguration="false"/>

to the <system.webServer> node.

<dotless minifyCss="false" cache="true" web="false" />
<system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <handlers>
      <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
    </handlers>
</system.webServer>

If the main less file is "my.less", which imports all other less files, add the following comment at the top of each less file except the "my.less".
```
/// <reference path="my.less" />
```