MORE CSS HTML POSITIONING IMAGES BIS 1523 Lecture

MORE CSS & HTML, POSITIONING, IMAGES BIS 1523 – Lecture 3 1

Positioning and the Box Model • When working on layouts for your HTML web pages, it is convenient to think about your content in the terms of being in boxes. • If you took a simple web page with 4 elements, and put a border around each element, this becomes easy to visualize. • CSS Display 2

Area • The area of each of these boxes is controlled by a few different factors. • The inner-most area is controlled by the width and height elements. • The space between your elements is controlled by margin, border, and padding elements. • By default, the size of the box is 100% of the width of the browser, and the height grows to the size of the content 3

Padding and Margin • Padding is on the inside of the border, margin is on the outside. Both can be used to add extra white space between elements. • The unit of measurement is the “pixel”, abbreviated “px” in the style sheet. 4

Height and Width • The height and Width elements are used to control the size of your content-area. • Height and Width can be expressed as absolute values, measured in pixels. • Width can also be expressed as percentages. (Height cannot. ) • Both are useful for making multi-column content areas in your HTML, the primary differences is: • Percentage based widths expand contract as the width of the browser window changes • Absolute doesn’t • For this reason, percentage based values for width are often more desirable for web pages that will be viewed in a variety of widths. 5

Width example • In the above example the width of each element has been set to a percentage of the browser window. • If you shrink something down to less than the full width of the screen, normally it will be left justified. • 6

Centering Things • If you want to center things, you can specify the left and right margins. • Using the “auto” tag for the margins will set them to be equal, centering the area. 7

Relative Positioning • • • Each element has a natural location in a page’s flow. Relative positioning means moving the element with respect to this original location. The surrounding elements are not affected at all. CSS: • position: relative; • The top and left tags are used to move the element • away from its ‘normal’ position in the direction desired. You can use pixels or percentages for positioning, and both positive and negative values Ø Notice that though the “Nav” is moved over, sections 1 and two still fall into place as if the “Nav” hadn’t moved. 8

Absolute Positioning • When using absolute positioning, content is taken completely out of the normal flow, and no space is left for them at all. • So in this case, section 1 and 2 are moved up as if “Nav” didn’t exist at all. This causes some overlap for this example, but it can still be used to get correct results. 9

Example: Positioning • Lets’ take our 4 -box example, and try to put it into a common layout for web pages, where we have a navigation area on the left, a header at the top, and 2 columns of content. Header Nav Sect 1 Sect 2 • First, we’ll set the widths for each column at 30%, and move section 1 over 30%, and section 2 over 60%. • We have no height, width, or positioning set for the header section. And only “width” set for the nav area. 10

Example: Positioning • The resulting web page is close to what we want. Each column is in about the correct space, though there is some overlap. We need to move the content sections up to align with the Nav section next. • We can do this with the “top” attribute, but we need to figure out where to put it. It needs to be right under the Header, so we need to fix the headers “height”, and then move the sections up the same amount. 11

Example: Positioning • Due to the padding, and margins on each piece of content, we will need to space them out a bit more to prevent overlap. 12

Example: Positioning 13

Formatting Text • Several CSS attributes can be used to change the appearance of text: • Font-family: A font name, such as Tahoma • Font-style: normal or italic • Font-weight: normal or bold • Font-size: in pixels • Text-align: left, right, center, or justify 14

Images • Three most widely used formats on the web are GIF, PNG, and • • JPEG format is good for color photographs. JPEG is a lossy format, which means some of the image’s original information will be lost when the image is saved. PNG and GIF formats compress areas of continuous colors or repetitive patterns better than JPEG. PNG and GIF formats are good for saving files that: • Have large amounts of solid colors and patterns and need transparency. • PNG has a better compression algorithm for smaller file sizes and superior transparency support (alpha transparency). 15

Images: Transparency • Transparency can give an image a non-rectangular outline, blending it in with a background color or texture behind the image. • PNG and GIF allow transparency; JPEG does not. • Index transparency: Pixel can be transparent or not. • Both GIF and PNG support index transparency. • Alpha transparency: Controls the degree of a pixel’s transparency. • Only PNG supports alpha transparency. • Images with complex transparent backgrounds look better as PNGs because edges appear smooth, not jagged. 16

Images: Animation • Animated images can be saved as GIFs, but not as JPEGs or PNGs. • Using images for animation is becoming uncommon, except for GIFs on site’s like Tumblr. • Animation is generally created using CSS Animations, Java. Script, HTML 5 Canvas, SVG (the dark horse of the bunch), and Flash. • Flash animations on the web are becoming rare due to i. OS’s lacks Flash support and the increased capability and support for other technologies. 17

Images: Aquiring • Ways to get images: • • Buy or download ready-made images. Digitize photographs or hand-drawn images with a scanner. Use a digital camera. Draw images from scratch in an image editing program like Adobe Photoshop. • Once you’ve got them in your computer, you can adapt them for use on the web. • Use Google to find images on the web. • Even free images on the web have some restrictions. • Stock photography and images can be bought for a reasonable price. • Purchased images can be used for most purposes, except reselling. • Read any disclaimers or licenses carefully 18

Images: html • Use the HTML tag <img> to add an image to your web page. • <img src=“image. url” /> • The url can be a relative URL for image that exists on your own web site, or an absolute URL for an image from somewhere else • You can specify the size of your displayed image using the width and height attributes in the <img> tag • <img src=“image. url” width=“ 200 px” height=“ 200 px” /> • The above example would tell the user’s browser to scale the image to 200 pixels by 200 pixels. 19

Lists • There are 2 types of list structure for web pages, ordered and unordered. • Ordered lists are typically labeled with ascending numbers or letters. Unordered just use a non-sequential bullet or marker (similar to the bullet points in these Power. Point slides). • The beginning of a list is marked by <ol> for ordered, and <ul> for unordered. Each type has a matching end tag (</ol> and </ul> • Within the list, each item is marked by the <li> and </li> tags. 20

Ordered vs Unordered 21

List Example • The HTML for ordered and unordered lists is almost identical. Only the starting and ending marker for the entire list is different, the individual list items all use the <li> tag 22

List Markers • You can use CSS to select from various marker types for your list. • The list-style-type: attribute can have any of the following values: • • Disc Circle Square Decimal (1, 2, 3) Upper-alpha (A, B, C) Lower-alpha (a, b, c) Upper-roman (I, III) Lower-roman (I, iii) 23

Final Example • We are going to use HTML and CSS to make our example from last class nicer looking. • The final layout will look something like: Header Nav Links Image Article Section 24

25

CSS for Kells Example • Center the heading at the top • Move the “article” group, which contains • • both sections, to have a left 25% margin, and set it to 70% width of the browser. Set the “nav” section, which contains the id’s #navlinks and #navheader as well as the image, to 20% Set a border around the links section Center the header for the navigation links Give the image a bit of a margin so it doesn’t push right up against the links box 26