Archive for the ‘css’ Category

Using CSS3 rounded corners in practice

In this article, I am going to test CSS 3 rounded corners. I do want to know can if I can use them in practice in different browsers. Here are some examples of CSS3 rounded corners and if you can see some rounded corners – congratulations your browser supports them!

border-radius: 20px
border-top-right-radius: 20px
border-bottom-right-radius: 20px
border-bottom-left-radius: 20px
border-top-left-radius: 20px
border-radius: 30px 0 30px 0
border-radius: 10px 30px 10px 30px
border-radius: 20px 20px 5px 5px / 40px 40px 5px 5px

Read the rest of this entry »

Centering horizontal CSS menu

It’s a real headache to center a fluid block element horizontally with help of CSS. Some time ago I figured out how to center CodeCharge Studio’s CSS Menu because it doesn’t provide this functionality. In general, any block element without the fixed width can be centered with help of this method.

By the way, if You have a fixed width block then You have to set its left and right margins to auto and You get the block centered.

In this article I’m going to explain the method I use to center a fluid block element. Here is the Demo.

Read the rest of this entry »

Inline YUI AutoComplete layout

Inline YUI AutoComplete layout Recently, i had a problem with YUI AutoComplete layout. I wanted it being inline, fixed width and working with different browsers like IE6/7/8, Opera, FF etc. There were some problems that i solved primarily in CSS. More precisely, i needed an inline YUI AutoComplete layout in such a way that i can place autocomplete <input> next to the <label> without a line break. I just set my styles in CSS and override some existing styles and it works ok!

So, problems i had to solve for my needs:

  • an outer container is a DIV so INPUT always goes on the next line
  • inline-block for DIV doesn’t work in IE6/7
  • an outer container has width of 100%
  • INPUT is absolutely positioned so an outer DIV is collapsed
  • width of 100% makes INPUT 6px larger then outer DIV in IE6
  • using inline-block, INPUT aligns vertically on the bottom in IE6

Read the rest of this entry »

Search
Categories
Archives

You are currently browsing the archives for the css category.

Advertisement
Artisteer - Web Design Generator