Sunday, December 26, 2010

How To Change Your Iframe Settings With Css

How to change your <iframe>'s settings.
It's very simple, you just have to put these settings in your css code between the <head></head> tags. btw. most of these settings can be used in <div> tags too.

Borders

No border at all
iframe { border:0px; }

Dashed border
iframe { border-style:dashed;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}

Dotted border

iframe {
border-style:dotted;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}
Unfortunately, these 'tricks' described above are supported by opera or mozilla firefox only.

Appearently the 'microsoft internet people' doesn't care much about css.

Absolute / Relative

Absolute

If we use it outside of a <div>, we should set as below.

iframe {
position:absolute;
top: 25px; /* 25 pixels from the top of the web-page. */
left:350px; /* 350 pixels from the left of the web-page. */
}

Relative

However if we use it inside of a <div>:
iframe {
position:relative;
top: 25px; /* 25 pixels from the top of the <div> tag. */
left:350px; /* 350 pixels from the left of the <div> tag. */
}
Size

Scrollbars
iframe {
position:absolute;
top: 25px; /* 25 pixels from the top of the <div> tag. */
left:350px; /* 350 pixels from the left of the <div> tag. */
height: 500px;
width: 500px;
overflow: scroll; /* if the content inside of the <iframe> is bigger than its size, scrollbars are added.*/
}

Auto-size

iframe {
position:absolute;
top: 25px; /* 25 pixels from the top of the <div> tag. */
left:350px; /* 350 pixels from the left of the <div> tag. */
height: auto; /* in this case, we get rid of the overflow setting, because the height of the iframe is increased by itself.*/
width: 500px;
}
Note: 'auto' as size, works the same for the WIDTH setting.

Transparent Background

Note: this 'trick' only works on mozilla firefox. But is pretty simple anyway.
iframe { background:transparent; }

Multi-IFrame

And last but not least, if you use more than one iframe in your page, you could use different settings for each one. like this:
#one {
border-style:dashed;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}

#two {
border-style:dotted;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}
-------------------------------------------------

<iframe src="/img_articles/4798/1.htm" id="one"></iframe>
<iframe src="/img_articles/4798/2.htm" id="two"></iframe>

Read more: http://www.webdesign.org/html-and-css/tutorials/how-to-change-your-iframe-settings-with-css.4798.html#ixzz19Hwc71fo

Wednesday, December 22, 2010

SEO Friendly CSS Hiding


#hider {
position: absolute;
left: -555px;
}

Thursday, December 9, 2010

6 KEYS TO UNDERSTANDING MODERN CSS-BASED LAYOUTS


Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There's font styles, margin, padding, color and what not. But there's a wall that people will run into... that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.

These are the six things that will help people get over the hump.

Box Model

At the very core of it, is an understanding of the box model within CSS. Sure, you may know your margin and padding but what happens when elements start to interact with each other. Suddenly things that look good in one browser go all to hell in the other. Consistently in working with the box model comes from understanding the difference between quirks mode and strict mode. It's also a good idea to know how to hack it up for older browsers.

W3C CSS2.1 Spec
The Box Model
Tantek's Box model hack
Quirks mode and strict mode
Activating the Right Layout Mode Using the Doctype Declaration

Floated Columns

While absolute positioning was one of the first approaches that people took when attempting to replace table-based layouts, it was floating content that opened the doors of possibility. Along with learning how to float, you must also learn how to clear floats so that content that follows or backgrounds will appear correctly.

Floatorial
Clearing floats
Faux Columns
Creating Liquid Faux Columns

Sizing Using Ems

There are two different issues at play here when it comes to sizing with ems: fonts and layouts.

With fonts, Internet Explorer 6 and lower don't allow you to resize the text when specified using pixels (px). Those with vision issues may wish to set their font size larger in order to more readily read what you've written. Specifying your font sizes using ems has proven to be the popular approach to this problem. The importance of sizing text using ems is waning as users move on to better browsers.

Sizing layouts with ems can also offer up a whole other avenue of flexibility. When playing with text size, it can often throw an entire design out of whack. Styling elements using ems allow the containers of content to grow along with the text, maintaining the consistency of the design.

How to size text using ems
Elastic Design
Fixed or fluid width? Elastic!

Source : http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/

Saturday, December 4, 2010

11 Classic CSS Techniques Made Simple with CSS3

We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

CSS3? What’s that?!

I’m sure you’ve heard of CSS in general. CSS3 isn’t that much different, in terms of syntax; however, the power of CSS3 is much greater. As you’ll see in these eleven techniques, you can have multiple backgrounds, dynamically resize those backgrounds, border radiuses, text shadows, and more!

Here’s what the official (or at least, what I consider official) website of CSS3, css3.info, has to say about CSS3:

What We’ll Be Covering

Here are the 11 techniques that I’ll be showing you how to recreate with CSS3. I’ll show you how to create them using CSS2 (or JavaScript), and then with CSS3 properties. Remember – these effects will only work in modern browsers that implement these CSS3 features. Your best option is to view these with Safari 4.

1. Rounded Corners
2. Box Shadow
3. Text Shadow
4. Fancy Font
5. Opacity
6. RGBA
7. Background Size
8. Multiple Backgrounds
9. Columns
10. Border Image
11. Animations

Source : http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/

The Difference Between ID and Class

ID's are unique
* Each element can have only one ID
* Each page can have only one element with that ID

When I was first learning this stuff, I heard over and over that you should only use ID's once, but you can use classes over and over. It basically went in one ear and out the other because it sounded more like a good "rule of thumb" to me rather than something extremely important. If you are purely an HTML/CSS person, this attitude can persist because to you, they really don't seem to do anything different.

Here is one: your code will not pass validation if you use the same ID on more than one element. Validation should be important to all of us, so that alone is a big one. We'll go over more reasons for uniqueness as we go on.

Classes are NOT unique

* You can use the same class on multiple elements.
* You can use multiple classes on the same element.

Any styling information that needs to be applied to multiple objects on a page should be done with a class. Take for example a page with multiple "widgets":

Read more at : http://css-tricks.com/the-difference-between-id-and-class/

Thursday, December 2, 2010

CSS3 Slideup Boxes

Follow along as we use a few very simple CSS3 transitions to create a "slideup" box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized box of information jockeys its way into place. This is supported in modern version of Gecko, WebKit, and Opera browsers. No Internet Explorer support yet, but no fallback is needed, the link works and the information shows as expected

VIEW DEMO

Source : http://css-tricks.com/video-screencasts/93-css3-slideup-boxes/