Chapter 15: Layout

This chapter was interesting because I had experience with using Bootstrap to make responsive webpages but I did not know about other css frameworks, like 960 Grid System. It was interesting how similar the syntax of 960 is to Bootstrap, for example container (Bootstrap) and container_12 (960).

I am also glad to have figured out how to make the nav bar on my portfolio fixed to the screen:

Notes:

Positioning schemes of CSS:

-Normal flow: Each block-level element appears on a new line.

-Relative positioning: Shifts an element from where it would be in normal flow, e.g. top, left, right, bottom.  position: relative

-Fixed positioning: element is positioned in relation to the browser window. Is glued onto the screen. position: fixed ( z-index:  10 brings it to the front of the webpage. )

-Floating: puts an element to the far right or left of a containing box. float: right/left

To put elements side by side use the float: left rule. The clear: right/left/both/none rule can align an element if it is off position.

Can create a multi-column layout (like with content and a side panel) by using float, width, and margin.

Designers usually make websites around 960-1000 pixels.

Layout grids help when designing.

960 Grid System is a helpful CSS framework for making a grid.

Can use @import to use more than one stylesheet in your website; it looks like @import url(“blablab.com”); . Can also just put multiple links in your html document.

 

Leave a Reply

Your email address will not be published. Required fields are marked *