First Letter Drop Cap

It's becoming a "cool" factor for webblogs to use the first letter drop cap in their first paragraph. It makes your paragraph catchy and stylish. By adding drop caps can increase visual stimulation and drawing your readers attention to stay on a bit longer. Unfortunately, I don't have the statistical data to justify.

Today, I'll show you exactly how I do it, so you can do it on your own in just minutes. Login to your Dashboard> Layout> Edit Html. Copy and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag

.dropcap {
float:left;
color: #000000;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}

Save the template. Next, click on Settings> Formatting> Post Template. Add this line into the post template box.
<span style="gt;<span class="dropcap">Post First Letter Goes Here</span></span>

Save settings. Now, we'll make a new post using our first drop cap. Click on Posting>, you'll notice that anything you type into the box of "Post Template" will appear in your new post.

For this example, copy and paste this into your post editior.
This article is related to my article before. The objective is to create a photo sharing gallery on your webblog. And this is a much simpler way to do.

It will look like this.
<span style="color: rgb(255, 0, 0);">T</span>his article is related to my article before. The objective is to create a photo sharing gallery on your webblog. And this is a much simpler way to do.

(Note - remember to place your first letter between span tags as shown above.

Publish post and you're done with it.

Read more...

CSS: Problematic issues with I.E

We have often heard about IE (Internet Explorer) and its strange way of doing things as compare to FF (FireFox). I came across with one good article and decided to republish on my site as to share with my readers. Here it goes:-

I.E doesn't understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height - go figure!

This can cause problems, because we may need boxes to be resizable should more text need to go in them or should the user resize text. If we only use the width and height commands on a box then non-IE browsers won't allow the box to resize. If we only use the min-width and min-height commands though then we can't control the width or height in IE!

This can be especially problematic when using background images. If you're using a background image that's 80px wide and 35px high, then you'll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text then the box size will need to expand gracefully.

To resolve this problem, you can use the following code for a box with class="box":
.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command3. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

#source: IE and width & height issues

Read more...

CSS: Positioning within a container

The position property is used to determine what kind of positioning you want to use for the container. The most useful values are:

position: absolute;
Positions an element at an arbitrary location in the page

position: relative;
Positions an element relative to its usual position in the page

Now, you can position an object absolutely anywhere you want in the document. It's also possible to position objects within a container. This CSS rule would be applied to:

#container
{
position: relative
}

Now any element within this container will be positioned relative to it. Say you had this HTML structure:

<div id="container"><div id="navigation">...</div></div>

To position the navigation exactly 20px from the left and 10px from the top of the container box, you could use these CSS commands:

#navigation
{
position: absolute;
left: 20px;
top: 10px
}

Alternatively, you could of course also use margin: 10px 0 0 20px, but there are some cases where it's preferable to use positioning.

Read more...

CSS: Centre aligning

If you want to have a fixed width layout blog site, and the content floated in the middle of the screen. You may also use the following CSS command:

#content-wrapper
{
width: 660px;
margin: 0 auto
}

Normally, you would then enclose <div id="content-wrapper"> around every item in the body of the HTML document and it'll be given an automatic margin on both its left and right, thus placing in the centre of the screen.

Bear in mind, the above solution doesn't work in IE, as these browsers won't centre align the element with this CSS command. You'll need to change the CSS rules:

body
{
text-align: center
}

#content-wrapper
{
text-align: justify;
width: 660px;
margin: 0 auto
}

But then, it'll also centre align the text as well. To offset unnecessary changes to the texts, I inserted text-align: justify into the content div.

Read more...

CSS: Styling CSS box

You might use the following CSS rule to specify the dimensions of a container:-

#searchbox
{
width: 200px;
height: 30px;
border: 5px;
padding: 10px
}

This CSS rule would be applied to:

<div id="searchbox">...</div>

It means that the total width of the box is 230px (200px width + two 5px borders + two 10px paddings) in all browsers except in IE. In IE, the total width would be just 200px (plus the padding and border widths).

Alternatively, you may use this CSS:

#searchbox
{
width: 200px
height: 30px;
}

#searchbox div
{
border: 5px;
padding: 10px
}

And the new HTML would be:

<div id="box"><div>...</div></div>

With this simple hack, the search box width will always be 200px, regardless of the browser.

Read more...

CSS : Font size and font family.

You may come across with this in your template:-

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1.2em;
line-height: 1.6em;
font-family: Arial,sans-serif;

Alternatively, you may also write in a single line as follows:-

font: bold italic small-caps 1.2em/1.5em Arial,sans-serif;

Example:-

<style type="text/css">
/*- Styling Ismail--------------------------- */

#Ismail {
font: bold italic small-caps 1.2em/1.5em Arial,sans-serif;
}
</style>
<div id="Ismail">How do you feel today?</div>


How do you feel today?

Note: It will only work if you're specifying both the font-size and the font-family. The font-family command must always be at the very end of this command, and font-size must come directly before this (one another). It's alright, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal.

Read more...