Wednesday, June 30, 2010
Tuesday, June 29, 2010
Monday, June 28, 2010
15+ CSS Tips and Tricks
A list of CSS tips and tricks that will make your life so much easier! I have also make a list of CSS shorthands for your convenience.
Introduction
CSS (Cascading Style Sheet) is not very difficult to learn. The hardest thing is to ensure the CSS layout being displayed identically among different browsers. Even though CSS3 will be released soon, but I believe it will take quite a long time for all the browsers to start supporting it, especially all the old browsers like Internet Explorer 6 *AHEM*.
Right, here is a list of CSS tips and tricks that I believe will help you! You might also want to use some of the tools that will help you in web design and development - 22 extremely useful tools for web designers and developers
1. Avoid CSS hacks, use future proof method
We should avoid using hacks unless there are no other ways to fix it. Because, we will not able to know when those hacks will stop working. The most common way to tackle with different version of IEs is using the if else statement:
<!--[If IE 5]>
ie 5
<![endif]-->
<!--[If lte 6]>
ie 6 and lower
<![endif]-->
<!--[If gte 7]>
ie 7 or higher
<![endif]-->
2. Use group selector
Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your stylesheet. We can group the selector to avoid repeating declaring the same properties for different elements
h1, h2, h3, h4, h5, h6 {
font-family:arial;
margin:0.5em 0;
padding:0;
}
3. Center elements
It's easy to center an element, for firefox and safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.
body {
text-align:center; /* for ie */
}
#container {
width:800px;
margin:0 auto;
text-align:left;
}
4. CSS Positioning
This is something I've just discovered it few weeks ago. Set the abolute position within a container. #item will appear inside the #container exactly 200px from the left and 50px from the top.
#container {
position: relative;
width:500; height:300;
}
#item {
position: absolute;
left: 200px;
top: 50px;
}
5. Text transform
This is something I discovered long time ago, CSS has the ability to transform text to lowercase, uppercase and capitalized the first character of a word. w3schools CSS - Text transform
h1 {text-transform:uppercase; }
h2 {text-transform:capitalize; }
p { text-transform:lowercase; }
6. Remove links or textbox hightlight border
When you click on textbox or link, you will able to see a border highlighting the element. It's even more obvious if you are using mac os. Luckily, you can solve it using outline property. I used it when I set the indentation of a link text to -999em and also when I'm building a textfield with rounded border.
a, input { outline:none; }
7. Hidden text
I think the correct way to do it is using text-indent. And also, you'd want to apply outline:none to hide the border. We use hidden text when we're using images to replace text but we want to make sure search engine can crawl the keyword.
a {
text-indent:-999em;
outline:none;
background: url(button.jpg) no-repeat 0 0;
width:100px; height:50px;
display:block;
}
8. Keep consistent with SUP and SUB
I have a chance to work on one website that uses ® and ™ massively (bad... bad experience). The problem I was facing is, the sup and sub being rendered differently in different browsers, so, I found this and it solved my problem. Adobe Advisor / CSS
sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
}
sup { bottom: 1ex; }
sub { top: .5ex; }
9. CSS Transparency Setting for all browsers
Yes, I can never able to remember it, so I guess it's a must to list it out here for future reference.
.transparent_class {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}
10. PNG Fix for IE6
Yes, this is the best thing ever to fix ie6 annoying short coming (it doesn't work with background-position). However, if you want a better solution to could fix all the png images in your css files, you can try this IE PNG Fix from twinhelix and the new version support background position!
.png_hack{
background-image: url(../img/the_image.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png');
}
11. Prevent line break
This is a simple css tips, but some of us might not know about it. It forces the text display in one line.
view plaincopy to clipboardprint?
h1{ white-space:nowrap; }
12. Force page breaks when printing your document
When you're creating a printer friendly webpages, you want to know about these property. More about printing CSS property, visit W3C CSS Print Reference and also the CSS3 stardard
h1{ page-break-before:always; }
h2{ page-break-after:avoid; }
h2{ page-break-inside:always; }
13. Remove vertical textarea scollbar in IE
Remember that annoying textarea scrollbar that display by default in IE? Yes, we can remove it.
textarea{
overflow:auto;
}
14. 3D push button effect
You can create a 3D button effect easily using CSS. The most important thing is the border, set light color on top and left border, and dark color on bottom and left (shadow).
a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
15. CSS Tooltips
So, you must be thinking, we will need javascript to make tooltips! :) I got this trick from Kollermedia.
a:hover {
background:#ffffff; /*BG color is a must for IE6*/
text-decoration:none;
}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
view plaincopy to clipboardprint?
<a href="#" class="tooltip">Tooltip <span> Extra info </span> </a>
16. CSS links sequence
Apparently, the sequence of the links is very important, read more. Honestly, I don't use this much, but hey, good for future reference! :)
a:link {
color: #000;
text-decoration: underline
}
a:visited {
color: #666;
}
a:hover {
color: #333;
text-decoration: none;
}
a:active {
color: #333;
text-decoration: none;
}
17. CSS Shorthands!
Last but not least, here are the CSS shorthands that will make our life easier!
/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}
h1 {margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
}
/* BORDER */
h1 {border:1px solid #000;}
h1 {border-width:1px;
border-style:solid;
border-color:#000;
}
/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}
h1 {border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}
/* BACKGROUND */
div {background:#f00 url(background.gif) no-repeat fixed 0 0;}
div {background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}
/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}
h1 {font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
}
/* LIST STYLE */
ul {list-style:square inside url(image.gif);}
ul {list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}
/* OUTLINE */
h1 {outline:#f00 solid 2px;}
h1 {outline-color:#f00;
outline-style:solid;
outline-width:2px;
}
Source : http://www.queness.com/post/402/15-css-tips-and-tricks
Introduction
CSS (Cascading Style Sheet) is not very difficult to learn. The hardest thing is to ensure the CSS layout being displayed identically among different browsers. Even though CSS3 will be released soon, but I believe it will take quite a long time for all the browsers to start supporting it, especially all the old browsers like Internet Explorer 6 *AHEM*.
Right, here is a list of CSS tips and tricks that I believe will help you! You might also want to use some of the tools that will help you in web design and development - 22 extremely useful tools for web designers and developers
1. Avoid CSS hacks, use future proof method
We should avoid using hacks unless there are no other ways to fix it. Because, we will not able to know when those hacks will stop working. The most common way to tackle with different version of IEs is using the if else statement:
<!--[If IE 5]>
ie 5
<![endif]-->
<!--[If lte 6]>
ie 6 and lower
<![endif]-->
<!--[If gte 7]>
ie 7 or higher
<![endif]-->
2. Use group selector
Using group selector is a good practise to minimize your coding effort and also save a few bytes out of your stylesheet. We can group the selector to avoid repeating declaring the same properties for different elements
h1, h2, h3, h4, h5, h6 {
font-family:arial;
margin:0.5em 0;
padding:0;
}
3. Center elements
It's easy to center an element, for firefox and safari, we only need to specify the width and margin left and right set to auto. However, you will need to specify text-align to center in the parent element for IE.
body {
text-align:center; /* for ie */
}
#container {
width:800px;
margin:0 auto;
text-align:left;
}
4. CSS Positioning
This is something I've just discovered it few weeks ago. Set the abolute position within a container. #item will appear inside the #container exactly 200px from the left and 50px from the top.
#container {
position: relative;
width:500; height:300;
}
#item {
position: absolute;
left: 200px;
top: 50px;
}
5. Text transform
This is something I discovered long time ago, CSS has the ability to transform text to lowercase, uppercase and capitalized the first character of a word. w3schools CSS - Text transform
h1 {text-transform:uppercase; }
h2 {text-transform:capitalize; }
p { text-transform:lowercase; }
6. Remove links or textbox hightlight border
When you click on textbox or link, you will able to see a border highlighting the element. It's even more obvious if you are using mac os. Luckily, you can solve it using outline property. I used it when I set the indentation of a link text to -999em and also when I'm building a textfield with rounded border.
a, input { outline:none; }
7. Hidden text
I think the correct way to do it is using text-indent. And also, you'd want to apply outline:none to hide the border. We use hidden text when we're using images to replace text but we want to make sure search engine can crawl the keyword.
a {
text-indent:-999em;
outline:none;
background: url(button.jpg) no-repeat 0 0;
width:100px; height:50px;
display:block;
}
8. Keep consistent with SUP and SUB
I have a chance to work on one website that uses ® and ™ massively (bad... bad experience). The problem I was facing is, the sup and sub being rendered differently in different browsers, so, I found this and it solved my problem. Adobe Advisor / CSS
sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
}
sup { bottom: 1ex; }
sub { top: .5ex; }
9. CSS Transparency Setting for all browsers
Yes, I can never able to remember it, so I guess it's a must to list it out here for future reference.
.transparent_class {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}
10. PNG Fix for IE6
Yes, this is the best thing ever to fix ie6 annoying short coming (it doesn't work with background-position). However, if you want a better solution to could fix all the png images in your css files, you can try this IE PNG Fix from twinhelix and the new version support background position!
.png_hack{
background-image: url(../img/the_image.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png');
}
11. Prevent line break
This is a simple css tips, but some of us might not know about it. It forces the text display in one line.
view plaincopy to clipboardprint?
h1{ white-space:nowrap; }
12. Force page breaks when printing your document
When you're creating a printer friendly webpages, you want to know about these property. More about printing CSS property, visit W3C CSS Print Reference and also the CSS3 stardard
h1{ page-break-before:always; }
h2{ page-break-after:avoid; }
h2{ page-break-inside:always; }
13. Remove vertical textarea scollbar in IE
Remember that annoying textarea scrollbar that display by default in IE? Yes, we can remove it.
textarea{
overflow:auto;
}
14. 3D push button effect
You can create a 3D button effect easily using CSS. The most important thing is the border, set light color on top and left border, and dark color on bottom and left (shadow).
a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
15. CSS Tooltips
So, you must be thinking, we will need javascript to make tooltips! :) I got this trick from Kollermedia.
a:hover {
background:#ffffff; /*BG color is a must for IE6*/
text-decoration:none;
}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
view plaincopy to clipboardprint?
<a href="#" class="tooltip">Tooltip <span> Extra info </span> </a>
16. CSS links sequence
Apparently, the sequence of the links is very important, read more. Honestly, I don't use this much, but hey, good for future reference! :)
a:link {
color: #000;
text-decoration: underline
}
a:visited {
color: #666;
}
a:hover {
color: #333;
text-decoration: none;
}
a:active {
color: #333;
text-decoration: none;
}
17. CSS Shorthands!
Last but not least, here are the CSS shorthands that will make our life easier!
/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}
h1 {margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
}
/* BORDER */
h1 {border:1px solid #000;}
h1 {border-width:1px;
border-style:solid;
border-color:#000;
}
/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}
h1 {border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}
/* BACKGROUND */
div {background:#f00 url(background.gif) no-repeat fixed 0 0;}
div {background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}
/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}
h1 {font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
}
/* LIST STYLE */
ul {list-style:square inside url(image.gif);}
ul {list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}
/* OUTLINE */
h1 {outline:#f00 solid 2px;}
h1 {outline-color:#f00;
outline-style:solid;
outline-width:2px;
}
Source : http://www.queness.com/post/402/15-css-tips-and-tricks
Thursday, June 24, 2010
Styling Links with CSS
Learn how to style links in a Web page using CSS. This article shows you how to add CSS styles to any type of link, including non-visited, visited, active, and hovered links.
CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:
normal links
* links that have already been visited
* links that are being clicked on, and
* links that are hovered over with the mouse.
You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.
Different link states
CSS distinguishes between 4 different states for a link using a concept called pseudo-classes. A pseudo-class is a way of selecting page elements based on special characteristics such as whether an element is being rolled over with a mouse, or whether the element has focus.
Here are the 4 pseudo-classes that you can use to select and style the different link states in
CSS:
a:link - Selects links that have never been visited in the browser
a:visited - Selects links that have been visited before in the browser
a:active - Selects links that are being clicked on or otherwise activated by the user
a:hover - Selects links that are being hovered over by the user's mouse cursor
Selecting links regardless of their state
As well as using pseudo-classes to select particular link states, you can of course use the a selector on its own to select links in general:
a { color: pink; } /* Set all links to pink */
However, note that using a pseudo-class overrides any styling that you've set using the a selector. For example, the following code makes all links pink except visited links, which become green:
a { color: pink; }
a:visited { color: green; }
Mixing pseudo-classes with classes and ids
You might want to style only certain types of links within your website. To do this, assign a class to the links:
Home
You can then style those links using pseudo-classes as follows:
/* Make all navigation links red when hovered over */
a.nav:hover { color: red; }
If you only want to style a single link on the page, you can use an id instead of a class, and select the link's pseudo-classes in the same way — for example
<a id="home" href="home.html">Home</a>
...
/* Make the "home" link yellow, whether visited or not */
a#home:link, a#home:visited { color: yellow; }
Some examples
Once you've selected the particular link state you're interested in, you can apply any styles you want to that state, as you'll see in the following examples.
Styling link colours
It's easy to change the colour of links from the default values. On most browsers, the default link colours are:
:link - blue
:visited - purple
:active - red
Here are some examples of how to change link colours:
/* Make all links grey on black, whatever their state */
a { color: gray; background-color: black; }
/* Use the default colours except for links that are being
clicked on, which become yellow instead of red */
a:active { color: yellow; }
/* Set unvisited links to green; visited and hovered
links to brown */
a:link { color: green; }
a:visited, a:hover { color: brown; }
INFO
Use caution when changing link colours. Most visitors expect normal links to be a shade of blue, visited links to be a shade of purple, and links generally to be underlined. If you deviate too wildly from these standards then visitors may have a hard time navigating your site.
Turning off underlines on links
To remove the underlining from text links, use the text-decoration property, as follows:
a { text-decoration: none; }
To remove the underlining from links except when they're hovered over, use:
a { text-decoration: none; }
a:hover { text-decoration: underline; }
Giving links a button effect
You can style links — and their pseudo-classes — pretty much any way you like. This example turns a standard text link into something more closely resembling a form button:
a
{
color: #000;
background-color: #f0f0f0;
padding: 2px 11px;
border: 2px outset #fafafa;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
Adding background images to links
Here's another example of styling a link purely using CSS. It adds an arrow graphic to the link by inserting the graphic as a background image and moving the link text to the right to allow space for the image:
a
{
background: #fff url('red-recessed-arrow.gif') no-repeat 0 0;
padding: 3px 0 4px 34px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
Replacing link text with an image
What if you wanted to use just an image for a link, without any text? It's a good idea to keep the link text in your HTML markup, so that non-graphical browsers and search engines can still read and understand the link. However, you can still hide the link text within your CSS. Here's how it's done.
First, put your link text within a span element in your markup:
<a href="home.html"><span>Home</span></a>
Then you can style the link as follows:
a
{
background: #fff url('remote-control-home.gif') no-repeat 0 0;
display: block;
width: 114px;
height: 24px;
}
a span
{
display: none;
}
First the CSS sets the button as a background image on the link, and adjusts the link's width and height to match the dimensions of the image. Then the a span selector ensures that the link text is hidden from CSS-aware browsers.
Here's how the above example looks:
INFO
Why the display: block? Well, links are inline elements, which means that (amongst other things) you can't apply certain properties such as width and height to them. If you want to specify a width and height for a link, you first need to make it display as a block-level element using the display: block property.
Article Source : http://www.elated.com/articles/styling-links-with-css/
CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:
normal links
* links that have already been visited
* links that are being clicked on, and
* links that are hovered over with the mouse.
You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.
Different link states
CSS distinguishes between 4 different states for a link using a concept called pseudo-classes. A pseudo-class is a way of selecting page elements based on special characteristics such as whether an element is being rolled over with a mouse, or whether the element has focus.
Here are the 4 pseudo-classes that you can use to select and style the different link states in
CSS:
a:link - Selects links that have never been visited in the browser
a:visited - Selects links that have been visited before in the browser
a:active - Selects links that are being clicked on or otherwise activated by the user
a:hover - Selects links that are being hovered over by the user's mouse cursor
Selecting links regardless of their state
As well as using pseudo-classes to select particular link states, you can of course use the a selector on its own to select links in general:
a { color: pink; } /* Set all links to pink */
However, note that using a pseudo-class overrides any styling that you've set using the a selector. For example, the following code makes all links pink except visited links, which become green:
a { color: pink; }
a:visited { color: green; }
Mixing pseudo-classes with classes and ids
You might want to style only certain types of links within your website. To do this, assign a class to the links:
Home
You can then style those links using pseudo-classes as follows:
/* Make all navigation links red when hovered over */
a.nav:hover { color: red; }
If you only want to style a single link on the page, you can use an id instead of a class, and select the link's pseudo-classes in the same way — for example
<a id="home" href="home.html">Home</a>
...
/* Make the "home" link yellow, whether visited or not */
a#home:link, a#home:visited { color: yellow; }
Some examples
Once you've selected the particular link state you're interested in, you can apply any styles you want to that state, as you'll see in the following examples.
Styling link colours
It's easy to change the colour of links from the default values. On most browsers, the default link colours are:
:link - blue
:visited - purple
:active - red
Here are some examples of how to change link colours:
/* Make all links grey on black, whatever their state */
a { color: gray; background-color: black; }
/* Use the default colours except for links that are being
clicked on, which become yellow instead of red */
a:active { color: yellow; }
/* Set unvisited links to green; visited and hovered
links to brown */
a:link { color: green; }
a:visited, a:hover { color: brown; }
INFO
Use caution when changing link colours. Most visitors expect normal links to be a shade of blue, visited links to be a shade of purple, and links generally to be underlined. If you deviate too wildly from these standards then visitors may have a hard time navigating your site.
Turning off underlines on links
To remove the underlining from text links, use the text-decoration property, as follows:
a { text-decoration: none; }
To remove the underlining from links except when they're hovered over, use:
a { text-decoration: none; }
a:hover { text-decoration: underline; }
Giving links a button effect
You can style links — and their pseudo-classes — pretty much any way you like. This example turns a standard text link into something more closely resembling a form button:
a
{
color: #000;
background-color: #f0f0f0;
padding: 2px 11px;
border: 2px outset #fafafa;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
Adding background images to links
Here's another example of styling a link purely using CSS. It adds an arrow graphic to the link by inserting the graphic as a background image and moving the link text to the right to allow space for the image:
a
{
background: #fff url('red-recessed-arrow.gif') no-repeat 0 0;
padding: 3px 0 4px 34px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
Replacing link text with an image
What if you wanted to use just an image for a link, without any text? It's a good idea to keep the link text in your HTML markup, so that non-graphical browsers and search engines can still read and understand the link. However, you can still hide the link text within your CSS. Here's how it's done.
First, put your link text within a span element in your markup:
<a href="home.html"><span>Home</span></a>
Then you can style the link as follows:
a
{
background: #fff url('remote-control-home.gif') no-repeat 0 0;
display: block;
width: 114px;
height: 24px;
}
a span
{
display: none;
}
First the CSS sets the button as a background image on the link, and adjusts the link's width and height to match the dimensions of the image. Then the a span selector ensures that the link text is hidden from CSS-aware browsers.
Here's how the above example looks:
INFO
Why the display: block? Well, links are inline elements, which means that (amongst other things) you can't apply certain properties such as width and height to them. If you want to specify a width and height for a link, you first need to make it display as a block-level element using the display: block property.
Article Source : http://www.elated.com/articles/styling-links-with-css/
Css tips: how to use the position fixed property?
What is meant by fixed positioning and what is the difference with absolute positioning?
For fixed positioning the same rules apply as in the case of absolute positioning: the “fixed” value set to the “position” property indicates that the element should be positioned in absolute mode with regard to the HTML root element which coincides with the browser’s area, thus subtracting it from the normal flow of the document. The element is subsequently positioned on the basis of the value of the coordinates provided through the properties: “top”, “left”, “right” or “bottom”.
The difference with absolute positioning consists in the fact that when the user scrolls the page, the element with fixed positioning does not scroll with it but remains fixed on screen.
After having discussed the theoretical part it is the moment to pass on to practice and see how to implement this property inside our works.
How is fixed positioning used?
As a practical example we will take into consideration a real case applied to the theme of our blog, the fixed positioning of the three icons relative to our Twitter, Facebook accounts and feed subscription.
If you have a video resolution superior to 1024px of width you must have noticed that these three icons – displayed on the external right side of our blog’s container – keep staying in their original position even when the page scrolls down.
<body>
<!-- START SOCIAL FIXED -->
<div class="box-fixed">
<a href="#" title="YIW on Twitter">
<img src="images/bg/fixed/twitterfixed.gif" alt="twitter" />
</a>
<a href="#" title="Become a Fan">
<img src="images/bg/fixed/facebookfixed.gif" alt="facebook" />
</a>
<a href="#" title="subscribe feed">
<img src="images/bg/fixed/rssfixed.gif" alt="rss" />
</a>
</div>
<!-- END SOCIAL FIXED -->
You must be asking yourself at what point of the document is this markup inserted?
We said that the fixed positioning subtracts the content from the normal flow of the document thus it can be inserted at any point because it’s anyway going to be subtracted from the flow of the document and positioned on the screen according to the values subsequently defined with the properties: “top”, “left”, “right” or “bottom”.
For example on the theme of YIW we have added it exactly in the beginning of the document, immediately after the <body> tag.
As you might have noticed in the HTML markup we have assigned a class named “box-fixed” to the section which contains the three images; now let’s see which properties to assign to this class so that the contents of this section can always remain fixed on the screen even when the page is scrolled by the user:
.box-fixed {width:60px;position:fixed;top:370px;right:15px;z-index:0;}
As you can see – by analyzing the line of code provided above -we have assigned a width of 60px to our box and then we have positioned it in fixed mode on the screen bringing it to a distance of 370px from top of the browser window and to 15px from the right side of the browser window.
What’s the z-index property for?
Probably you are asking yourself wondering what’s the “z-index” property for set on zero.
I would like to dedicate an entire article in the future regarding the use of the “z-index” property since it is a very interesting property introduced by the CSS2 specifications: in practice through the use of this property we can have our boxes on more levels – in case the later are found to occupy the same area of the screen – (for those who use photo-retouch programs the functioning is similar to the layers made available by these applicatives) defining the order of overlapping. The elements which are set on a higher value are arranged higher compared to elements which have a minor value.
In our specific case when the user finds himself scrolling the page all the way to the bottom we need to handle the section of the three icons in such a way that it is positioned below the footer layer so that these go under the footer background avoiding to give the unpleasant aesthetic effect of three white squares positioned on a red background. Here’s explained the presence of this property inside our line of code. However, we will resume this argument in a future article in which we will see in depth the use of this property.
Conclusions
We have said – and I repeat it – that the positioning of elements is one of the toughest arguments regarding the CSS, after the use of absolute positioning dealt with in the previous article this week we have examined also the employment of fixed positioning.
As you had the chance to see, once understood the functioning and use of these properties, there’s little left to obtain effects of a remarkable aesthetic impact and what’s more important you no longer have limits in positioning the elements in the desired spots inside your layout.
And to you, has it ever happened to correct or review yourself a particular layout just because you were not able to position certain elements as they were originally designed?
Source : http://www.yourinspirationweb.com/en/css-tips-how-to-use-the-position-fixed-property/
For fixed positioning the same rules apply as in the case of absolute positioning: the “fixed” value set to the “position” property indicates that the element should be positioned in absolute mode with regard to the HTML root element which coincides with the browser’s area, thus subtracting it from the normal flow of the document. The element is subsequently positioned on the basis of the value of the coordinates provided through the properties: “top”, “left”, “right” or “bottom”.
The difference with absolute positioning consists in the fact that when the user scrolls the page, the element with fixed positioning does not scroll with it but remains fixed on screen.
After having discussed the theoretical part it is the moment to pass on to practice and see how to implement this property inside our works.
How is fixed positioning used?
As a practical example we will take into consideration a real case applied to the theme of our blog, the fixed positioning of the three icons relative to our Twitter, Facebook accounts and feed subscription.
If you have a video resolution superior to 1024px of width you must have noticed that these three icons – displayed on the external right side of our blog’s container – keep staying in their original position even when the page scrolls down.
<body>
<!-- START SOCIAL FIXED -->
<div class="box-fixed">
<a href="#" title="YIW on Twitter">
<img src="images/bg/fixed/twitterfixed.gif" alt="twitter" />
</a>
<a href="#" title="Become a Fan">
<img src="images/bg/fixed/facebookfixed.gif" alt="facebook" />
</a>
<a href="#" title="subscribe feed">
<img src="images/bg/fixed/rssfixed.gif" alt="rss" />
</a>
</div>
<!-- END SOCIAL FIXED -->
You must be asking yourself at what point of the document is this markup inserted?
We said that the fixed positioning subtracts the content from the normal flow of the document thus it can be inserted at any point because it’s anyway going to be subtracted from the flow of the document and positioned on the screen according to the values subsequently defined with the properties: “top”, “left”, “right” or “bottom”.
For example on the theme of YIW we have added it exactly in the beginning of the document, immediately after the <body> tag.
As you might have noticed in the HTML markup we have assigned a class named “box-fixed” to the section which contains the three images; now let’s see which properties to assign to this class so that the contents of this section can always remain fixed on the screen even when the page is scrolled by the user:
.box-fixed {width:60px;position:fixed;top:370px;right:15px;z-index:0;}
As you can see – by analyzing the line of code provided above -we have assigned a width of 60px to our box and then we have positioned it in fixed mode on the screen bringing it to a distance of 370px from top of the browser window and to 15px from the right side of the browser window.
What’s the z-index property for?
Probably you are asking yourself wondering what’s the “z-index” property for set on zero.
I would like to dedicate an entire article in the future regarding the use of the “z-index” property since it is a very interesting property introduced by the CSS2 specifications: in practice through the use of this property we can have our boxes on more levels – in case the later are found to occupy the same area of the screen – (for those who use photo-retouch programs the functioning is similar to the layers made available by these applicatives) defining the order of overlapping. The elements which are set on a higher value are arranged higher compared to elements which have a minor value.
In our specific case when the user finds himself scrolling the page all the way to the bottom we need to handle the section of the three icons in such a way that it is positioned below the footer layer so that these go under the footer background avoiding to give the unpleasant aesthetic effect of three white squares positioned on a red background. Here’s explained the presence of this property inside our line of code. However, we will resume this argument in a future article in which we will see in depth the use of this property.
Conclusions
We have said – and I repeat it – that the positioning of elements is one of the toughest arguments regarding the CSS, after the use of absolute positioning dealt with in the previous article this week we have examined also the employment of fixed positioning.
As you had the chance to see, once understood the functioning and use of these properties, there’s little left to obtain effects of a remarkable aesthetic impact and what’s more important you no longer have limits in positioning the elements in the desired spots inside your layout.
And to you, has it ever happened to correct or review yourself a particular layout just because you were not able to position certain elements as they were originally designed?
Source : http://www.yourinspirationweb.com/en/css-tips-how-to-use-the-position-fixed-property/
Subscribe to:
Posts
(
Atom
)