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>

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.

build web site basic steps

Preparation :

I use xampp as my environmemt, which is apache+php+mysql+etc.

I have tried both normal and lite version.

If you are not doing any CGI like perl, I think lite is enough.

Just unpack it, run xampp-control to start your apache.

If you are using Skype, please do some configuration.

turn off skype->option->advance->connection->use port 80

because many people ask me this question.

Then you are ready to develop and test your own website.

Import CSS to html

I like to use the html+CSS+Javascript approach.

Which is html handle only content, CSS handle layout and style, Javascript handle interaction.

Try not to mix these content together which will get nasty after sometime.

First of all, import a CSS, there are two ways, I prefer the 1st

put one of them inside your <head> tag

1. <link href=”css/template.css” rel=”stylesheet” type=”text/css” />
2.<style type=”text/css”>
<!–
@import url(“css/template.css”);
–>
</style>

Basic testing and practice

make sure your link is correct and put the .html and .css files under
xampp/htdocs/yourFolder
htdocs is where your web root location.
for example if I put them under xampp/htdocs/maxiweb/
the url will be http://localhost/maxiweb/

and also try to put CSS inside a css folder, images inside images, it is a good practice.
basically something like this.
htdocs/
|
+–maxiweb/
|
+–css/style.css
+–images/logo.gif
+–index.htm

I will get deeper in some other articles as I learn more. About CSS, PHP, Javascript and etc.

Thanks for reading my post ;P