By Sitecore Coder to Sitecore Coders

Menu

Some Html CSS tips and tricks

Some Html CSS tips and tricks Trick No. 1:We often need to use clear in our html so insted of using:<divstyle="clear: both"></div> OR <divclass="clear"></div>

We can make use of pseudo selector :after,like this: ———–

.container {

/*dummy attributes*/

height:100%;

width:100%

margin:5px;

}

.container :after {

display: block;

clear: both;

content: " ";

height: 0;

overflow: hidden;

}

.container childDiv {

float:left;

}

——

It makes more sense if we are using LESS,as we can create a mixin for this as:

.clearfix() {

&:after {

display: block;

clear: both;

content: " ";

height: 0;

overflow: hidden;

}

}

and then we can call this in our class,like this:

.container {

/* this div has two floated child,*/

/* so we must clear left/right after this div.*/

/* calling the mixin,which will take care of clear.*/

.clearfix;

.div1{

float:left;

}

.div2{

float:right;

}

}

Trick No. 2: last-child/first-child are another pseudo selector,which are very useful,so if we want to apply some additional attributes to last/first child of certain class,we can use these selector. This is how these can be used:

.class-name {

/* dummy attributes */

height:100%;

width:100%

margin:5px;

}

.class-name:last-child {

margin:0px;

}

Trick No. 3:To select the next element, we can use + selector:

.class-name + span {

/*dummy attributes*/

height:100%;

width:100%

margin:5px;

}

it will select the next span element. We can also select the next element with class name.

.class-name + .some-class {

/* dummy attributes */

}

Trick No. 4:If we want to make some portion of image clickable (hot spot),then we can insert an anchor with absolute position, e.g.:

.container {

background: url('../images/container-bg.png') no-repeat;

height:75px;

width:75px;

position:relative;

}

.hot-spot {

position: absolute;

bottom:0;

right:0;

height:28px;

width: 28px;

display: block;

content:"";

}

HTML for this

<divclass="container">

<!-- We can place this anchor anywhere under this div -->

<aclass=".hot-spot"href="#"alt="hot spot"></a>

<!-- dummy text -->

<p>

Lorem ipsum dolor sit amet.Etiam a ipsum id purus.

</p>

<div>

Note: if the element is positioned absolute, then its parent must be positioned relative.

Trick No. 5: For browser specific css, instead of creating different css/less files we should use this: