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  

Related articles:

Flash text with the mouse produced mobile animation effects
  Today, we look at a small example.    [Go with the mouse is used on the website more than a animation, it is how to make the following are the production of specific steps.  <embed src=http://www.webjx.com/htmldata/2005-06-30/& quality=high pluginspage='http://www.mac...
Yahoo search engine on China
  Yahoo! Originated in an idea, and then turned into a hobby and eventually become a people dedicated to the cause.    Yahoo! Co-founders David Filo (David Filo) and Jerry Yang (Jerry Yang), the United States of electrical engineering at Stanford University doctoral students, in Apri...
Shoubashoujiao you to learn Dreamweaver MX 2004 (video tutorial)
  In 2004, the FIF group launched a multimedia production photoshop video tutorial, which is introduced for the first time such a network integrity system video tutorial.    Work as soon as is the popular, critical acclaims.    FIF According to official statistics, photosho...
Css attributes and the general use of filters
  Before finishing the article, although the standard does not support filters, but sometimes still feel it will be used, it again today to put forward, when there is a need for enquiries to be    Alpha: Setting transparency;    (Filter: alpha (opacity = opacity, finishop...
AJAX File upload Progress
  AJAX File upload Progress    Example of how to use the newest version is available in another post.    Update    There is a new version of this code that follows the same approach but uses HTML_AJAX instead of JPspan.    You can view the new demo, ...