Vertical text alignment – CSS _ and # hacks!

To align text inside <div> or other elements.

The CSS standard is just

.alignStyle{

vertical-align: middle;

}

But this won’t work with IE.

That’s why I am learning those complicated HACKS!

Great Job, Bill, just great…

There are two hacks avaiable, underscore and sharp[]

Learn this hacks if your are paranoid like me.

use <table> when it is really a table but not for layout.

IDEAS of _ and # hacks

  1. The underscore (“_”) is allowed in CSS identifiers by the CSS2.1 Specification
  2. CSS2 selector #value[id] is equivalent to selector #value, but Internet Explorer ignores these types of selectors. Generally: syntax *[foo] means any element with attribute foo. Any HTML element #something must have the attribute id set to “something”. That’s the trick — #value[id] works in standard browsers only (similarly works .value[class])

Example

  1. #box {
    min-height: 300px; //interpret by other browsers
    height: auto;
    _height: 300px; //only IE interpret
    }
  2. #outer {height: 400px; overflow: hidden; position: relative;}
    #outer[id] {display: table; position: static;}
    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {display: table-cell; vertical-align: middle; position: static;}
    #inner {position: relative; top: -50%} /* for explorer only */
    /* optional: #inner[id] {position: static;} */

Vertical align code sample

CSS:

#outer {height: 400px; overflow: hidden; position: relative; border:1px solid #0000FF; width:500px;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%}

HTML:

<div id=”outer”>
<div id=”middle”>
<div id=”inner”>
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>

Advertisements

when mouse is over – hover

Hover is active when your mouse is placed over the element.

According to W3C standard, hover is for every element.

CSS

style{ no mouse over }

style:hover{ when mouse over }

The style will change accordingly to make an really useful effect

which can distinguish what you are clicking.

This is almost used on every website nowadays.

but again, IE sucks, IE only support hover for <a> element.

We need to use Javascript to do that effect instead

which I consider as a hack.

Not a good thing to do but life is like that, what you gonna do.

Complete example:

Standard style

CSS:

div.trans {width: 100%; background-color: silver;border:1px solid black; }

div.trans:hover{width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black;}

HTML:

<div class="trans"><p style="padding:5px;width:75%;">Hover here. The works in Mozilla and  Opera.</p></div>

IE compatible style

CSS:

div.transOFF {width: 100%; background-color: silver;border:1px solid black; }

div.transON {width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; }

HTML:

<div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'"><p style="padding:5px;width:75%;">Hover here. The Filter Opacity works in Mozilla and IE.  It also works in current versions of Opera.</p></div>

REMARK: use this carefully, mixing with different size and z-index will make hover act nasty.

Overlaping layer – z-index

z-index is use when you have layers of element and overlap each other.

They order of visibility is controlled by z-index.

.modalLayer1{
height: 50px;
width: 50px;
z-index: 6;
background-color:#000000;
position:absolute;
}

.modalLayer2{
height: 50px;
width: 50px;
z-index: 7;
background-color:#000000;
position:absolute;
}

The layer with larger z-index will be visible.

i.e. The larger z-index, the closer to the surface (viewer).

I think the z-index can go up to 1000 or even more.

So I just don’t care where it’s limit is…

REMARK: z-index need position to work together!

That is without position, all element are still on the same layer.

Visibility will according to their order on html.

Transparency style – opacity

I really want to make transparency on my website

because it is lightweight and the effect is charming.

it is done by CSS attribute opacity.

I like to keep my web compatible for FF and IE.

I will go straight to the code.

.modalLayer{
opacity: .5;       //for FF
filter: alpha(opacity = 50);      //for IE
height: 50px;
width: 50px;
background-color:#000000;
position:absolute;
}

1 means visible, 0 means invisible. same for 100~0 in IE.

opacity from 1 to 0 is W3C standard.

This is why I don’t like IE, no standard at all and many more to come.

You’ll see what I mean.

REMARK: This effect needs height and width to work together.

How to apply CSS (advance)

After knowing the basic, we can use them together and nested.

1. tagName.className – This will apply the style to tagName element with that className.

This will avoid unwanted style applying to tagName or className only element.

Or grouping of same tagName.

CSS:

tagName.className{ …style… }

HTML:

<tagName class=”className”></tagName>

example:

div.fontStyle{ font-size:24px; }

<div class=”fontStyle”>Font with 24px</div>

2. Nested style – This will apply the style to tagName element with the correct nested structure.

This will avoid style to be active on parent elements.

Or different style of same tagName but different parents.

CSS:

#idName tagName1 tagName2{}{ …style… }

HTML:

<tagName1 id=”idName”>

<tagName2></tagName2>

<otherTag></otherTag>

</tagName1>

example:

#container div p{ font-size:24px; }

<div id=”container”>

<div>

<p>Font with 24px</p>

<a>no style</a>

</div>

</div>

3. Nested style with className – This will apply the style to tagName element with the correct nested structure and className.

Even finer application of style.

CSS:

#idName tagName.className{}{ …style… }

HTML:

<tagName0 id=”idName”>

<tagName class=”className”></tagName>

<otherTag></otherTag>

</tagName0>

example:

#container a.fontStyle{ font-size:24px; }

<div id=”container”>

<a class=”fontStyle”>Font with 24px</a>

<a>no style</a>

</div>

How to apply CSS (basic)

After making a reference to a CSS in your page following my previous post,

I will briefly explain my understanding on how to apply CSS to your elements.

There are a few ways to accomplish this task.

Basic way:

1. tagName – This will apply the style to all element of the type.

CSS:

tagName{ …style… }

HTML:

<tagName></tagName>

example:

p{ font-size:24px; }

<p>Font with 24px</p>

2. id – This will apply the style only to the element with that id.

BEWARE: due to id needs to be unique in one webpage,

this style can only apply once.

CSS:

#idName{ …style… }

HTML:

<tagName id=”idName”></tagName>

example:

#myId{ font-size:24px; }

<div id=”myId”>Font with 24px</div>

3. className – This will apply the style to all element with this class.

CSS:

.className{ …style… }

HTML:

  • <tagName class=”className”></tagName>
  • <span class=”className”><tagName></tagName></span>

example:

.myClass{ font-size:24px; }

<p class=”myClass”>Font with 24px</p>

<span class=”myClass”><p>Font with 24px</p></span>

REMARK: you may apply multiple class by separating className with a white space.

Feedback after using wordpress

The theme Freshy is probably the best theme

because there are so many code inside my posts.

It’s code viewer is very import to me.

Other theme will cut my code if it is too long.

The auto formatting of wordpress is terrible.

making so many <p>, <span>, <pre> inside the content which is

not necessary.

I can’t turn that off. I wonder if I can.