Articles Tagged 'CSS2'

Create a pipe separator through CSS

You can often see a number of links distributed horizontally separated by pipe "|", the graphic symbol dell'asticella vertical. . In addition, if there is a good writing HTML, you realize that this list of links - apparently horizontal - are nothing but bulleted lists UL or OL . It follows that instead of writing:

1
2
3
< p >
"#1" > Link 1 < / a > | < a href = "#2" > Link 2 < / a > | < a href = "#n" > Link n < / a > < a href = "# 1"> Link 1 </ a > | < a href = "# 2"> Link 2 </ a > | < a href = "# n"> n Link </ a >
</ p >

It would be better to use:

1
2
3
4
5
< ul >
= "#1" > Link 1 < / a >< / li > < will > < a href = "# 1"> Link 1 </ a > </ them >
= "#2" > Link 2 < / a >< / li > < will > < a href = "# 2"> Link 2 </ a > </ them >
= "#n" > Link n < / a >< / li > < will > < a href = "# n"> n Link </ a > </ them >
</ ul >

Continued ...

Inserting text with CSS: IE7, a bad deal

Again, when I find myself writing about the capabilities of style sheets, I am forced to put aside Microsoft Internet Explorer! e after . With CSS2 introduced a very interesting feature, property, content , used in conjunction with pseudo-elements before and after . Through this "style" you can alter the content of a site acting exclusively on the CSS file. For example if we write:

1
content : ">>" } li: before {content: ">>"}

) avrà ogni elemento preceduto dai caratteri “>>”! A bulleted list ( UL , LI ) will be preceded with every element ">>"! Anything, of course, can be treated in this way:

1
> fogli di stile < / span >< / p > < p > I can insert characters with < span > stylesheets </ span > </ p >
1
content : "-->" } div p: before {content: "-->"}

The versatility of this element does not stop there! It is possible to use other parameters in addition to the simple (but very useful) text. The element content , in fact, it also allows special values ​​or url:

1
2
3
content : url ( images/quote.gif ) } p: before {content: url (images / quote.gif)}
content : close-quote } p: after {content: close-quote}
content : url ( waves/sound.wav ) } p: before {content: url (waves / sound.wav)}

For implementation details refer directly to the W3C - shame it does not even Microsoft!

Continued ...


Stop SOPA