CSS Layout
Swore that I’d never let you back in Should’ve known better than trying to let you go ‘Cause here we go go go again -Demi Lovato, Here We Go Again.
Chapter 15: CSS Layout
-This whole chapter is about using CSS to change where elements are and how they are displayed on a page.
Block-level boxes start on a new line and act as the main building blocks of any layout, while inline boxes flow between surrounding text.
it is entirely possible to control the shapes and sizes of these boxes also.
you can have one box inside another and that is knows as the parent or containing element.
- sometimes when you want something to be stand alone you will have an absolute postition so while other things around it move this object wont.
you can see and example of what i mean by this on page 367. if youre curious about it.
-When you use relative, fixed, or absolute positioning, boxes can overlap. If boxes do overlap, the elements that appear later in the HTML code sit on top of those that are earlier in the page.
-Because screen sizes and display resolutions vary so much, web designers often try to create pages of around 960-1000 pixels wide (since most users will be able to see designs this wide on their screens).
-it is now recognized that if someone is interested in the content of the page, they are likely to scroll down to see more. Having said which, usability studies have shown that visitors can judge a page in under a second so it is still important to let new visitors know that the site is relevant to them and their interests.
- Fixed width layout designs do not change size as the user increases or decreases
the size of their browser window.
- Liquid layout designs stretch and contract as the user increases or decreases the
size of their browser window. They tend to use percentages.
- To create a fixed width layout, the width of the main boxes on a page will usually be specified in pixels (and sometimes their height, too).
- Composition in any visual art (such as design, painting, or photography) is the placement or arrangement of visual elements — how they are organized on a page. Many designers use a grid structure to help them position items on a page, and the same is true for web designers.( so basically all made up of boxes “heres looking at you windows 8”)
- Back to main