In css the position properties, such as top, left, right, bottom is auto by default, one miss conception is that they are 0. Which is not the case. So when you change from positon values (static, relative; absolute, fixed) without setting the top/left/right/bottom, there should be no change, except that absolute and fixed value will disable the margin merge.
Showing posts with label css. Show all posts
Showing posts with label css. Show all posts
May 7, 2010
position property
Apr 27, 2009
divitus classitus
In the book of CSS Mastery: Advanced Web Standards Solutions, there is a section about divitus and classitus.
Using too many divs is often described as divitus and is usually a sign that your code is poorly structured and overly complicated. Some people new to CSS will try to replicate their old table structure using divs. But this is just swapping one set of extraneous tags for another. Instead, divs should be used to group related items based on their meaning or function rather than their presentation or layout.
The root reason of this phenomenon is that designer tend to rush to see the result first, and forget the semantic of the content(the markup) express. My experience is that the a clean markup with strong semantic is a good document. A good document is starting point of good design. A good design is easy to be restyled and extended. Most of visual style can be implemented by CSS of current version. If it can not satisfying your requirements, we can wait for next generation (CSS 3 or CSS 4?). But before they are available, we can use javascript implement your advanced design needs. But the bottom line is to forget about style, when you authorize your markup, and always remember make your markup semantic, which means your document is still understandable even it is opened in notepad or lynx.
Semantic and style , they are different concern. While some developers and visual designer understand the rule of separation of concern, but web technology (like asp.net server controls, Web form) tend to make people deviate from it. Although it is not the fault of these technology, in fact, you can use these technology to achieve very semantic markup, but they tend to lure people to mix them together. ASP.NET MVC is trying to fix this.
Below is example of divitus classitus.
RegistrationFirst name:Last name:Email address:Password:Password Confirmation:Company / Access code:
Here is restructure markup
Apr 4, 2009
Overflow
This property is used to control the behavior of container in which its content expend over its content area. It is not used to control the behavior of container of the container of the content. Normally overflow will not happen because the container of content can expend vertically or horizontally. For text content is non-replaced elements, overflow horizontally will not happen because it can be wrapped into next line. But overflow overcritical y is possible. But for Replaced Elements it can overflow horizontally.
Horizontal Formating of block element
The "seven properties" of horizontal formatting are: margin-left, border-left, padding-left, width, padding-right, border-right, and margin-right. Padding and margin is set to 0 by default. Width is set to auto. This means the block element will try expend as much as possible into its containing content space. /p>
If width is auto, whether margin-left and margin-right is set to auto or just 0 has not effect. Because either way, their computed value will be the same 0. But if width is has a value, and margine-left and margin-right is set to auto, then that margin will expand or contracted automatically. If both margin is set to auto, and the width has a value, the the content of the block will be set to horizonal center.
The Containing Block
Every element is laid out with respect to its containing block; in a very real way, the containing block is the "layout context" for an element.For an element in the normal, Western-style flow of text, the containing block is formed by the content edge of the nearest block-level, table cell, or inline-block ancestor box. You don't need to worry about inline elements since the way they are laid out doesn't depend directly on containing blocks.
vertical-align
In CSS, the vertical-align property applies only to inline elements and replaced elements such as images and form inputs. vertical-align is not an inherited property. It can be one of baseline | sub | super | top | text-top | middle | bottom | text-bottom |
line-height
The line-height property refers to the distance between the baselines of lines of text rather than the size of the font, and it determines the amount by which the height of each element's box is increased or decreased. In the most basic cases, specifying line-height is a way to increase (or decrease) the vertical space between lines of text, but this is a misleadingly simple way of looking at how line-height works. line-height controls the leading, which is the extra space between lines of text above and beyond the font's size. In other words, the difference between the value of line-height and the size of the font is the leading.
When applied to a block-level element, line-height defines the minimum distance between text baselines within that element. Note that it defines a minimum, not an absolute value, and baselines of text can wind up being pushed further apart than the value of line-height
Every element in a line of text generates a content area, which is determined by the size of the font. This content area in turn generates an inline box that is, in the absence of any other factors, exactly equal to the content area. The leading generated by line-height is one of the factors that increases or decreases the height of each inline box.
To determine the leading for a given element, simply subtract the computed value of font-size from the computed value of line-height. That value is the total amount of leading. And remember, it can be a negative number. The leading is then divided in half, and each half-leading is applied to the top and bottom of the content area. The result is the inline box for that element.
As an example, let's say the font-size (and therefore the content area) is 14 pixels tall, and the line-height is computed to 18 pixels. The difference (four pixels) is divided in half, and each half is applied to the top and bottom of the content area. This creates an inline box that is 18 pixels tall, with 2 extra pixels above and below the content area. This sounds like a roundabout way to describe how line-height works, but there are excellent reasons for the description.
When the line-height is inherited by one block-level element from another, things get a bit trickier. line-height values inherit from the parent element as computed from the parent, not the child. It probably wasn't what the author had in mind:
body {font-size: 10px;}
div {line-height: 1em;} /* computes to '10px' */
p {font-size: 18px;}
This paragraph's 'font-size' is 18px, but the inherited 'line-height'
value is only 10px. This may cause the lines of text to overlap each
other by a small amount.
A solution is, instead using em, or percentage (%), simply use a number with out any unit symbol
div {line-height: 1.5;}
p {font-size: 18px;}
This paragraph's 'font-size' is 18px, and since the 'line-height'
set for the parent div is 1.5, the 'line-height' for this paragraph
is 27px (18 * 1.5).
inherit
There is one keyword that is shared by all properties in CSS2.1: inherit. inherit makes the value of a property the same as the value of its parent element. In most cases, you don't need to specify inheritance, since most properties inherit naturally; however, inherit can still be very useful.
For example, consider the following styles and markup:
#toolbar {background: blue; color: white;}
The div itself will have a blue background and a white foreground, but the links will be styled according to the browser's preference settings. They'll most likely end up as blue text on a blue background, with white vertical bars between them.
You could write a rule that explicitly sets the links in the "toolbar" to be white, but you can make things a little more robust by using inherit. You simply add the following rule to the style sheet:
#toolbar a {color: inherit;}
This will cause the links to use the inherited value of color in place of the user agent's default styles. Ordinarily, directly assigned styles override inherited styles, but inherit can reverse that behavior.
Pixel in CSS
CSS2 recommended 90ppi as the reference pixel, but CSS2.1 recommends 96ppia measurement common to Windows machines and adopted by modern Macintosh browsers such as Safari. This means when I display 96 pixel in my screen, it should be 1 inch length in physics. But if my screen is about 110ppi, so 1 inch in css is going to less than 1 inch in my scree. But how about printer, it normally print 600ppi. It actually first convert pixel in screen to inch in scree, then print the length in inch in printer, and print the pixel by timing 600ppi to length in inch.
Unit in css
All length units can be expressed as either positive or negative numbers followed by a label (although some properties will accept only positive numbers). You can also use real numbersthat is, numbers with decimal fractions, such as 10.5 or 4.561. All length units are followed by a two-letter abbreviation that represents the actual unit of length being specified, such as in (inches) or pt (points). The only exception to this rule is a length of 0 (zero), which need not be followed by a unit.
Mar 18, 2009
Using user style sheet to modify the style of a web site
I tried to modify the style by using user style sheet. But some of style just could not take effect. I seemingly forget the basic rule of css cascade. The cascade works in the following order of importance:
- User styles flagged as !important
- Author styles flagged as !important
- Author styles
- User styles
- Styles applied by the browser/user agent
Nov 23, 2008
LoVe:HAte and links
a:link, a:visited, a:hover, a:active, this order can not be reversed, otherwise it won't work. This is due to the cascade rule. If two rules have the same specificity, the last rule to be defined wins out.
a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}
Designer tend to dislike link underlines as they add too much weight and visual clutter to a page. If you decide to remove link underlines, you could choose to make links bold instead. That way your page will look less cluttered, but the links will still stand out, and you can then reapply the underlines when the links are hovered over or activated.
a:link, a:visited {
text-decoration: none;
font-weight: bold;
}
a:hover, a:active {
text-decoration: underline;
}
However, it is possible to create a low-impact underline using borders instead. In the following example, the default underline is removed and replaced iwth a less obstuctsive dotted line. When the link is hovered over or clicked, this line turns solid to provide the user with visual feedback that something has happend:
a:link, a:visited {
text-decoration: none;
border-bottom: 1px dotted #000;
}
a:hover, a:active {
border-bottom-style: solid;
}
You can create fancy links iwth image
a:link, a:visited {
color:#666;
text-decoration: none;
background: url(images/underline1.gif) repeat-x left bottom;
}
a:hover, a:active {
background-image: url(images/underline1-hover.gif);
}
You can you attribute selector to style different links.
a[href^="http:"] {
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}
a[href^="http://www.yoursite.com"], a[href^="http://yoursite.com"] {
background-image: none;
padding-right: 0;
}
a[href^="mailto:"] {
background: url(images/email.png) no-repeat right top;
padding-right: 10px;
}
a[href^="aim:"] {
background: url(images/im.png) no-repeat right top;
padding-right: 10px;
}
a[href$=".pdf"] {
background: url(images/pdfLink.gif) no-repeat right top;
padding-right: 10px;
}
a[href$=".doc"] {
background: url(images/wordLink.gif) no-repeat right top;
padding-right: 10px;
}
a[href$=".rss"], a[href$=".rdf"] {
background: url(images/feedLink.gif) no-repeat right top;
padding-right: 10px;
}
May 1, 2008
Requirement s for logo
-
Who is your audience?
Determine which people will view this logo and their interests? What is the product of the company.
-
What do competitors' logos look like?
Take a look at some competitors of the company for which you're designing the logo. How can you make a logo that stands out in a positive way?
-
Deside the format for the logo.
Since we’re designing logos for the World Wide Web, you’ll need to create either JPEG or GIF images that are 72 dpi, and use RGB color mode. If these logos were for print work, you’d want to use no less than 300 dpi, and use CMYK color mode.
Mar 8, 2008
A well structured table
Before we can style an element, we you should have a well structured element. In this this case, table is the element. The more semantic your element is , the more control you have over your stylling. Table is complex element. Below is a very well structured element.
| Brand | Price | Power Source |
|---|---|---|
| Chinook Push-o-matic Indoor Mower | $247.00 | Mechanical |
| Sampson Deluxe Apartment Mower | $370.00 | Mechanical |
We have top level children like, caption, colgroup, and thead(table head), tbody(table body). This structure is great, because we they are good selector, we can target our element without classes. For example, we want style table header, we can use selector thead, if we want to style a column width or color, we can use col#id, if we want selector header cell, we can use th, we want to select normal cell, if we can use td. One of table style I often use is border-collapse:collapse;
fluid layout with fixed margin.
The following is fixed width layout.
div#container
{
width:800px;
margin:0px auto;
}
The following is fluid layout with fluid margin.
div#container
{
width:80%;
margin:0px auto;
}
The following is fluid layout with fixed margin.
div#container
{
margin:0px 20px;
overflow:auto;
}
A wrapper with fixed margin and expandable width
The following is fixed width layout.
div#container
{
width:800px;
margin:0px auto;
}
The following is fluid layout with fluid margin.
div#container
{
width:80%;
margin:0px auto;
}
{
width:800px;
margin:0px auto;
}
The following is fluid layout with fixed margin.
div#container
{
margin:0px 20px;
overflow:auto;
}
Mar 6, 2008
pure css tool tip
Custom tootip can be achieved by using css, but it require firefox and ie7 up to support. Below is demo
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display:block;
position:absolute;
top:1em;
left:2em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:#000;
}
link as button
Anchors are inline elements, they only activate when you click on the content of the link. However, there instances when you want to create more of a button like with a larger clickable area. You can do this by setting the display property to block, and then change the width, and height, other properties to create the style and hit area you want.
a {
display: block;
width: 6em; /* dimensions needed for IE5.x/Win */
padding: 0.2em;
line-height: 1.4;
background-color: #94B8E9;
border: 1px solid black;
color: #000;
text-decoration: none;
text-align: center;
}
/* to rollover */
a:hover {
background-color: #369;
color: #fff;
}
/* another example */
a:link, a:visited {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/button.gif) no-repeat left top;
text-indent: 50px;
}
a:hover {
background: #369 url(images/button_over.gif) no-repeat left top;
color: #fff;
}
/* sometime you can use a combine two image into one, and use it as back-ground
but changing background-position, you can use different part of the image as the back
ground */
a:link, a:visited {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/pixy-rollover.gif) no-repeat left top;
text-indent: 50px;
}
a:hover {
background-color: #369;
background-position: right top;
color: #fff;
}
float basic
A floated box can either be shifted to the left or the right until its outer edge touches the edge of its containing box, or another floated box. Because floated boxes aren’t in the normal flow of the document, block boxes in the regular flow of the document behave as if the floated box wasn’t there. But the space taken the repositioned element can not be used by other elements.
Subscribe to:
Posts (Atom)