First Diploma Unit 10 Client Side Web. Week 4 -The CSS Box model

Size: px

Start display at page:

Download "First Diploma Unit 10 Client Side Web. Week 4 -The CSS Box model"

Percival Logan
5 years ago
Views:

1 First Diploma Unit 10 Client Side Web Week 4 -The CSS Box model

2 Last Session CSS Basics Fonts Real world site

3 This Session CSS box model Concept of identity -id

4 The CSS box model represents every element on a Web page in a bounded box which contains four components: the element content itself at the core; an envelope of padding around the element; a border around the padding, which demarcates the visible area of the element; a margin around the border.

5 Graphic Representation

6 Notes From the above, it should be clear that when considering how much space an element takes up on a page, the width and height of the content itself are not sufficient. One must also consider the width and height of the element's padding, borders and margins. This fact, though obvious on reflection, is one that most novice developers are unaware of and is, in fact, the reason behind many instances of overlapping page elements or elements that do not resize correctly with the rest of the page.

7 Illustrative example <!doctypehtml public "-//W3C//DTD HTML 4.0//EN"> <html> <head> <style type="text/css"> #box { width: 350px; border-color: red; border-style: dashed; } </style> </head> <body> This is text outside the box. At veroeoset accusamet justoduo doloreset ea rebum. Stet clitakasdgubergren, no sea takimatasanctusestlorem ipsumdolorsit amet. <div id="box"> This is text inside the box. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. </div> </body> </html>

8 In a Browser

9 So, What is a div? A div element is a block of content that can be positioned anywhere on your site by using absolute positioning and the <div> tag The purpose of div elements is to hold content, whereas frames hold pages This content can be placed anywhere on your site and it can even overlap The content can consist of images or html. All of the style elements like scrollbar colour and font colour can be controlled by a simple style sheet

10 What a Div tag Contains <div id=layer1 style="position:absolute; top:20; left:20; width:300; height:300; z-index:1; padding:5px; border: # px solid; background-color:#000000; backgroundimage:url(yourfilename.gif); layer-backgroundimage:url(yourfilename.gif);"> Content goes here (images, text) </div>

11 Div Variables variables that need to be defined: id: This is just the number of your div. It helps you sort out easily which div element is which when you have many layers. It's also useful for identifying layers so that you can have different style attributes in your style sheet for each div element. Top: This is the number in pixels that your div element will be positioned horizontally from the top of the page. If you give "top" a number value of "20," your div element will be 20 pixels down from the very top of your page. Left: This is the number in pixels that your div element will be positioned vertically from the left of your page. If you give "left" a number value of "20," your div element will be 20 pixels left from the very left side of your page. Width: This is the width of your div element in pixels. Height: This is the height of your div element in pixels.

12 Div Variables Z-index: This is the order in which your div elements are stacked, or overlapped. The number 1 would be the first layer, and the layer closest to the background of your site. The number 2 would be stacked on top of number 1, etc. You can remove this tag if you are using layers that you do not want to overlap. Padding: This is the margin of your div element in pixels. For instance, if you have text in your div element, you'll need margins so that the text doesn't go from one end of the div element to the other. This tag acts just like the cellpadding tag for tables. Border: This is the border of your div element in pixels. If you don't want a border, remove this variable. You can have a border that is solid, dotted, dashed, double, groove, ridge, inset, or outset. Background-image: This is the background image of your div element for IE. Layer-background-image: This is the background image of your div element for Netscape.

13 Back to our Box Model Let's add some padding #box{ width: 350px; border-color: red; border-style: dashed; padding: 15px; } As you can see, the additional padding on all four sides of the text has increased the space between the border and the element content by 15px. The total width of the box is now ( ) = 375px

14 Increasing the Border Thickness Increasing the thickness of the border to 30px will do this. #box { } width: 350px; border-color: red; border-style: dashed; padding: 10px; border-width: 30px;

15 Summary CSS box model Concept of identity -id

16 Next Session More CSS Images Headers and footers

17 To Do Acquire the following files from the Wiki: Test.html Zipped files Use CSS styles that will: Place the word Welcome in the centre of the page All paragraphs Need to be placed 200px from the left Need to be placed 200 from the right Be of font Arial Add one other image Place it 250px from the margin Place a single line border around the image Add padding of 10px

First Diploma Unit 10 Client Side Web. Week 4 CSS and Images

First Diploma Unit 10 Client Side Web Week 4 CSS and Images Last Session CSS box model Concept of identity - id This Session External style sheets Using CSS in conjunction with images Introduction External