Advanced: Web CSS style sheet design skills 10
Related Tags:
8. Use css to achieve vertical center
On the vertical center Xiaocaiyidie form is only designated for cell vertical-align: middle can be, but in how to make use css layout. Suppose you will be a navigation menu set to the Height of two em, and then css Vertical Alignment specified in the rules, or will be into the text box at the top, there was no difference.
To solve this problem, only the boxes will be set to high and the height of the same box can be, in this example, the box 2 em high, then simply add a further css: line-height: 2em can be achieved vertical center!
9. Positioning containers. Css
Css is one of the biggest advantages of object orientation can be at any location in the file, the same can also be targeted at a certain Position within the container. The containers need only add a css rules:
The following is quoted fragment:
# Container
(
Position: relative;
)
The containers of any elements are in relation to the positioning of the containers. If you want to navigation positioning in the container 30 pixels from the left border, 5 pixels from the top, you can use the following css statement:
The following is quoted fragment:
# Navigation
(
Position: absolute;
Left: 30px;
Top: 5px;
)
10. Extended to the Bottom of the screen's Background color
Css shortcomings is the lack of vertical control, resulting in a form layout will not encounter problems. Suppose you set the page on the left side of the one used for the placement of the web site navigation. Pages white background, but you hope that the navigation of the blue as a background, css can use the following:
The following is quoted fragment:
# Navigation
(
Background: blue;
Width: 150px;
)
The problem is not the navigation has been extended to the bottom of pages, naturally it will not be the background Color in the end of the extension. Then lined up in the blue background on the page was cut off halfway, a waste of your design. How do? Unfortunately, we are now the only means by deception, the body will be designated as the Background Color and lined up with the same Width of the picture, css as follows:
The following is quoted fragment:
Body
(
Background: url (/ blue-image.gif) 0 0 repeat-y;
)
Background should be 150 pixels wide blue picture. The drawbacks of this approach can not use the designated em lined up to the width of text when a user changes the size of the width of lead content expansion, the width of the background color will not change accordingly.
To write this article such as this is the only solution, so you can only use pixel values lined up to get automatic extension to the different background color.
A total of three. 9 1 2 3
- The definition and use CSS style
- Default style sheet
- Change the style file box
- Css page of the Style rolling - css style
- Home style developed
- CSS style names on the underlined
- Css style (table)
- XHTML CSS style into what?
- Css style details, page scrolling Style
- Layout style control
- Css underscore style
- No. 1 on the css style sheet
- Establish a Web site's style
- Web2.0 visual style evolution
- How to management style!
- Italic style of navigation
- CSS - Cascading Style Sheets
- Cascading Style Sheets (CSS cascading style sheets)
- [Original] css style tips: on the links-style settings!
- Css style Xi summary




