CSS Pagination

Pagination is a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Can be referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.

• CSS Pagination Links- Inspired by the pagination interface you see at the footer of Digg.com.
• Pagination 101- Pagination 101, that will give you some clues as to what makes good pagination.
• Some styles for your pagination- Styles for WP-Digg style pagination plugin, Digg Style pagination Class, the modular version, and the original programed bye strangerstudios.

Block Hover Effect Links

• How to Create a Block Hover Effect for a List of Links- Learn how to create hover effect when you mouse over the list items to see the block hover effect in the demo here.
• How To Make Clickable Areas Bigger - One basic principle of interaction design is that the larger the link you’re trying to click on, the easier it is to click it. With this in mind, if you are using text-based links (for example in a navigation bar), the actual ‘clickable’ area should be as large as possible.
• Anchor tags for block elements- You can see a demo here.
• CSS Examples and demos

Read more…

• CSS3 Multi Column Feature
• How to design css sitemap Tree
• CSS Universal (*) Selector
• Introduction to CSS3
• How to create Rounded Corners Using CSS without Images
• Explaining CSS Positioning
• Top CSS Best Hacks
• Which CSS Propertise using in Email Templates
• Variables in CSS?
• What it’s all about CSS3

The best solutions are often the simplest. Here’s a list of 8 tips that contain only one css property.

1. Vertical centering with line-height

line-height:24px;

When you have a container with fixed height you can use line-height property to vertically center the content.
Take a look at this demo.

2. Prevent oversized content to break fixed width floated layouts

#main{
 overflow:hidden;
}

When oversized content (i.e. wide image) is placed in fixed width floated container, it may break the layout. To prevent that use this trick. It will hide a part of the content but at least your layout structure will remain intact.
I wrote an article about it a while back.

3. Prevent line breaks in links

a{
 white-space:nowrap;
}

This little trick will prevent line breaks on your links. I recommend using this with long text to avoid having links break into 2 lines. Read more…

• CSS Tips
• Organizing Your CSS Files
• 100 CSS Examples and Tutorials
• 150 CSS Examples
• Introduction to CSS3
• Margins and Absolute Positioning
• Top reasons sites break in IE 7
• Write a Clean CSS
• How to design css sitemap Tree
• Top 10 CSS Tips

What is it?

CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes. This first tutorial will give you a very basic introduction to the new possibilities created by the standard.

Modules

The development of CSS3 is going to be split up into ‘modules’. The old specification was simply too large and complex to be updated as one, so it has been broken down into smaller pieces - with new ones also added. Some of these modules include:

• The Box Model
• Lists Module
• Hyperlink Presentation
• Speech Module
• Backgrounds and Borders
• Text Effects
• Multi-Column Layout

Read more…

• Which CSS Propertise using in Email Templates
• 150 CSS Examples
• How to design css sitemap Tree
• How to create Rounded Corners Using CSS without Images
• Explaining CSS Positioning
• Variables in CSS?
• CSS Filter Property
• CSS ! important Declaration
• CSS Universal (*) Selector
• Imports an external style sheet

Getting a Handle on Absolute Elements

First recall how auto positioning is triggered, by letting the side-controlling properties of an absolutely positioned (AP) element be the default values of “auto” rather than some assigned length value. Those side properties are top, left, right, and bottom. When those values are auto, the AP element does not consider any positioned ancestors but instead looks at the current “static position” where it would be placed if it were a normally flowed (static) element. The AP element then occupies that location, but is still placed on a separate layer and may overlap parts of the flow.

This generally works fine, but in doing so we give up the ability to use length values on those side properties, which is normally what we do when tweaking AP elements into desired locations. If the static position does not happen to be exactly where we want the AP element to be, there’s only one possible way to offset auto positioned elements, by using margins.

The specs say that margins work on all AP elements and never collapse with other margins, greatly simplifying the situation. However, there is one question that could cause confusion, having to do with AP elements that start out as inline elements, such as spans and links.

As mentioned in a previous article, inline elements normally ignore all top and bottom margins and padding, but AP elements usually obey all margins and paddings even when they are mere spans or links. This is because the act of becoming AP turns them intocontaining blocks, or to be more specific, into block elements.

This is fine for the purposes of moving the AP elements around via margins, but it’s a little strange when you consider the first auto positioning demo from the previous article. Here’s that live demo:

Vestibulum lacus tellus, adipiscing in, volutpat sit amet, dictum ac, mauris. Duis euismod sapien quis tellus. Vivamus aliquam, lorem a accumsan consequat, dolor est iaculis est, nec pulvinar magna ipsum at lacus. Duis aliquam. Sed mattis. Morbi ipsum ipsum, euismod ut, scelerisque quis, faucibus et, tortor. Sed aliquam erat vel justo. Etiam lacinia, massa a ultrices pellentesque, Link textTooltip text dolor ante sagittis nibh, eget interdum ante lectus nec est. Fusce rutrum faucibus mauris. Aliquam cursus nisl at diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse leo mauris, dictum et, dignissim sed, eleifend et, dolor.

<p> Vestibulum lacus tellus, adipiscing in, volutpat sit amet, dictum ac. Duis euismod sapien quis tellus. Vivamus aliquam, lorem a accumsan consequat, dolor est iaculis est, nec pulvinar magna ipsum at lacus. Duis aliquam. Sed mattis. Morbi ipsum ipsum, euismod ut, scelerisque quis, faucibus et, tortor. Sed aliquam erat vel justo. Etiam lacinia, massa a ultrices pellentesque, <a href="#" class="linkparent1">Link text<span>Tooltip text</span></a> dolor ante sagittis nibh, eget interdum ante lectus nec est. Fusce rutrum faucibus mauris. Aliquam cursus nisl at diam. Lorem ipsum dolor sit amet. </p>   .linkparent1 { color: #a00; } .linkparent:hover span { left: auto; } /* this hover on the link changes the nested span's left value to auto */ .linkparent span { position: absolute; left: -999em; border: 1px solid white; background: #446; color: white; font-weight: bold; padding: 2px 4px; text-decoration: none; } /* tooltip may be custom styled as desired */ .linkparent:hover { background: url(bgfix.gif); } /* Applies 1x1 transparent bgfix.gif on hover - IE hover bug fix */

When the “Link text” link is hovered and the AP span popup appears in the window, auto positioning places that span in the spot where a simple inline span would go, even tho that span is AP and supposedly has become a block element. So as far as the browsers are concerned, the AP span is located like an inline element while at the same time it is treated as a block for all other styles such as margins, padding, and borders. Read more…

• CSS Tips
• Organizing Your CSS Files
• 100 CSS Examples and Tutorials
• 150 CSS Examples
• Top CSS Tips
• Introduction to CSS3
• Top reasons sites break in IE 7
• Write a Clean CSS
• How to design css sitemap Tree
• Top 10 CSS Tips

Websites based on Web standards would be at the greatest risk of breaking, especially sites that use CSS files full of hacks to compensate for bugs in IE 6.

A non-scientific study of one hundred websites seems to confirm that generally, sites based on junk code display the same in IE 7 as they did in IE 6, while a number of sites that use CSS based layouts have issues. The details of the study are available in IE7: Were they ready?.

My guess is that most sites that have rendering issues fall into one of three categories:

1. Sites that have an XML declaration before the DOCTYPE, making IE 6 use quirks mode, but not IE 7. Both browsers still get the same CSS, so IE 7 renders it differently.
2. Sites that depend heavily on CSS hacks that no longer work in IE 7.
3. Sites that use conditional comments to feed a bugfix stylesheet to IE without specifying a version number, thereby making IE 7 load the bugfixes and mess up rendering.

I’m guessing (again) that the reason for the majority of tag soup sites passing the IE 7 test is that they almost always trigger IE’s quirks mode, which if I understand correctly has not been changed from IE 6. Read more…

• CSS Tips
• Organizing Your CSS Files
• 100 CSS Examples and Tutorials
• 150 CSS Examples
• Top CSS Tips
• Introduction to CSS3
• Margins and Absolute Positioning
• Write a Clean CSS
• How to design css sitemap Tree
• Top 10 CSS Tips

Grouping Your Styles

Group your styles into categories (ex. layout, typography, forms, so on) and visually seperate them in your css file. A title and table of contents doesn’t hurt either:

/*
	csshook.com Screen Styles

	Table of Contents:
		layout
		typography
		forms
*/

/* layout
----------------------------------------------- */

/* typography
----------------------------------------------- */

/* forms
----------------------------------------------- */

Choosing Your Categories

Even though I do have some common practices, I don’t have a ‘template’ for how to breakdown styles into categories.

For starters, I almost always have layout and typography categories. Withtypography defining the sitewide look and feel. Depending on the complexity, I may break out the table and form styles into their own categories.

Next, I address the physical sections of the page with their own categories:header, sidebar, content, and footer for example. Lastly, I collect the page and content section specific styles and place them in their own category (and sometimes subcategories).

Importing Stylesheets

Another method is to categorize the styles and place them in seperate CSS files which are all imported by one main CSS file. I find this method good in theory but it can lead to overlapping styles, specification issues, and general confusion if you’re not very careful:

@import url("layout.css");
@import url("typography.css");
@import url("forms.css");

Linebreaks and Indenting Read more…

• CSS Text Properties
• CSS Tips
• Organizing Your CSS Files
• 100 CSS Examples and Tutorials
• 150 CSS Examples
• Top CSS Tips
• Introduction to CSS3
• Margins and Absolute Positioning
• Top reasons sites break in IE 7
• How to design css sitemap Tree

 

I will present a technique to display a multi-level unordered list in the form of a tree with lines connecting nodes.

Our intention is to avoid cluttering the HTML code with unnecessary tags. Ideally, the code would be as simple as this:

<ul class=”tree”> <li>Animals <ul> <li>Birds</li> <li>Mammals <ul> <li>Elephant</li> <li>Mouse</li> </ul> </li> . . . </ul>

So it’s just a regular multi-level unordered list, with no additional elements. The only thing that indicates it’s a tree is the tree class added to the first-level <ul> element. Without styling, the above code produces a familiar result:

Bullets Be Gone

The first thing that we need to do is get rid of the ugly bullets. We accomplish this by setting the list-style-type property to none. Read more…

• 150 CSS Examples
• CSS Universal (*) Selector
• CSS3 Multi Column Feature
• Introduction to CSS3
• How to create Rounded Corners Using CSS without Images
• Explaining CSS Positioning
• Which CSS Propertise using in Email Templates
• Variables in CSS?
• CSS QUOTES
• CSS Filter Property