Slide 1 of 55 Positioning The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what.

of 55 Positioning The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. There are four different positioning methods. CENG 449 Lecture 7

of 55 Static Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties. CENG 449 Lecture 7

of 55 Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled: CENG 449 Lecture 7

of 55 p.pos_fixed { position: fixed; top: 30px; right: 5px; color: red; } Note: IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified. Some text Some text Some text Some text Some positioned text. CENG 449 Lecture 7

of 55 CENG 449 Lecture 7

of 55 Relative Positioning Relative positioning changes the position of the HTML element relative to where it normally appears. So "left:20" adds 20 pixels to the element's LEFT position. You can use two values top and left along with position property to move an HTML element anywhere in HTML document. Here's a quick reference when moving HTML elements in CSS. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top. Move Down - Use a positive value for top. NOTE: You can use bottom or right values as well in the same way as top and left. CENG 449 Lecture 7

of 55 Practice CSS position:relative Property This example shows how relative positioning works. <div style="position:relative;left:80px; top:2px; background-color:yellow;"> This div has relative positioning. CENG 449 Lecture 7

of 55 Same example with alternative writing Practice CSS position:relative Property div{ position:relative; left:80px; top:2px; background-color:yellow; } This example shows how relative positioning works. This div has relative positioning. CENG 449 Lecture 7

of 55 h2.pos_left { position: relative; left: -20px; } h2.pos_right { position: relative; left: 20px; } Heading with no position This heading is moved left according to its normal position This heading is moved right according to its normal position Relative positioning moves an element RELATIVE to its original position. The style "left:-20px" subtracts 20 pixels from the element's original left position. The style "left:20px" adds 20 pixels to the element's original left position. CENG 449 Lecture 7

of 55 Absolute positioning: This positions the element in relation to its containing element. It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements (as they simply ignore the space it would have taken up). Absolutely positioned elements move as users scroll up and down the page. CENG 449 Lecture 7

of 55 Absolute Positioning body { width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;} h1 { position: absolute; top: 0px; left: 500px; width: 250px;} p { width: 450px;} The Evolution of the Bicycle In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk. The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden. …. … CENG 449 Lecture 7

of 55 Overlapping Elements When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order: CENG 449 Lecture 7

of 55 img { position: absolute; left: 0px; top: 0px; z-index: -1; } This is a heading Because the image has a z-index of -1, it will be placed behind the text. CENG 449 Lecture 7

of 55 The cursor property specifies the type of cursor to be displayed when pointing on an element. cursor: value; CENG 449 Lecture 7

of 55 Mouse over the words to change the cursor. auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait CENG 449 Lecture 7

of 55 div { cursor:cell; } Hello ALL CENG 449 Lecture 7

of 55.box1{ width: 300px; height: 300px; background-color: #00FFFF; } Inside Box1 CENG 449 Lecture 7

of 55.box1{ width: 300px; height: 300px; background-color: #00FFFF; }.box2{ position: static; width: 100px; height: 100px; background-color: red; } Inside Box1 Inside Box2 CENG 449 Lecture 7

of 55.box1{ width: 300px; height: 300px; background-color: #00FFFF; }.box2{ position: static; width: 100px; height: 100px; background-color: red; }.box3{ width: 100px; height: 100px; left: 50px; top: 50px; background-color: green; } Inside Box1 Inside Box2 Inside Box3 CENG 449 Lecture 7

of 55.box1{ width: 300px; height: 300px; background-color: #00FFFF; }.box2{ position: static; width: 100px; height: 100px;background-color: red; }.box3{ position: absolute; width: 100px; height: 100px; top: 10px; background-color: green;} Inside Box1 Inside Box2 Inside Box3 CENG 449 Lecture 7

of 55.box1{ position:relative; width: 300px; height: 300px; background-color: #00FFFF; }.box2{position: static; width: 100px; height: 100px; background-color: red; }.box3{ position: absolute;width: 100px; height: 100px; top: 10px; background-color: green; } Inside Box1 Inside Box2 Inside Box3 CENG 449 Lecture 7

of 55.box1{ position:relative; width: 300px; height: 300px; background-color: #00FFFF; display:inline-block; }.box2{width: 100px; height: 100px; background-color: red; display:inline-block; }.box3{width: 100px; height: 100px; background-color: green; display:inline-block; } Inside Box1 Inside Box2 Inside Box3 CENG 449 Lecture 7

of 55.box1{ position:relative; width: 300px; height: 300px; background-color: #00FFFF; display:inline-block; }.box2{ width: 100px; height: 100px; background-color: red; display:inline-block; }.box3{position: relative;width: 100px; height: 100px; top: 20px;left: -40px; background-color: green; display:inline-block; } Inside Box1 Inside Box2 Inside Box3 CENG 449 Lecture 7

of 55 CSS Float With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. If an image is floated to the right, a following text flows around it, to the left: CENG 449 Lecture 7

of 55 img { float: right; } In the paragraph below, we have added an image with style float:right. The result is that the image will float to the right in the paragraph. This is some text. This is some text. This is some text. CENG 449 Lecture 7

of 55 CANCELING FLOATED CONTENT The clear property is used to cancel floating property. The following outlines the clear property and its possible values. clear left | right | both CENG 449 Lecture 7

of 55 img { float: left; } p.clear { clear: both; } This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. CENG 449 Lecture 7

of 55 Aligning Block Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: In this part we will show you how to horizontally align block elements for layout purposes. CENG 449 Lecture 7

of 55 Center Aligning Using the margin Property Block elements can be center-aligned by setting the left and right margins to "auto".center { margin-left: auto; margin-right: auto; width: 70%; background-color: #b0e0e6; } In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.' Note: Using margin:auto will not work in IE8, unless a !DOCTYPE is declared. CENG 449 Lecture 7

of 55 Left and Right Aligning Using the position Property One method of aligning elements is to use absolute positioning:.right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; } In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.' CENG 449 Lecture 7

of 55 Left and Right Aligning Using the float Property One method of aligning elements is to use the float property:.right { float: right; width: 300px; background-color: #b0e0e6; } In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.' CENG 449 Lecture 7

of 55.right { float: right; width: 300px; background-color: #b0e0e6; } In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.' CENG 449 Lecture 7

of 55.thumbnail { float: left; width: 110px; height: 90px; margin: 5px; } Image Gallery Try to resize the browser-window to see what happens when the images do not have enough room. CENG 449 Lecture 7

of 55 CSS Combinators A combinator is something that explains the relationship between the selectors. There are four different combinators in CSS3: descendant selector child selector adjacent sibling selector general sibling selector CENG 449 Lecture 7

of 55 Descendant Selector The descendant selector matches all element that are descendants of a specified element. The following example selects all elements inside elements: div p { background-color: yellow; } Paragraph 1 in the div. Paragraph 2 in the div. Paragraph 3 in the div. Paragraph 4. Not in a div. Paragraph 5. Not in a div. CENG 449 Lecture 7

of 55 Child Selector The child selector selects all elements that are the immediate children of a specified element. The following example selects all elements that are immediate children of a element: div > p { background-color: yellow; } Paragraph 1 in the div. Paragraph 2 in the div. Paragraph 3 in the div. Paragraph 4. Not in a div. Paragraph 5. Not in a div. CENG 449 Lecture 7

of 55 Adjacent Sibling Selector The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and "adjacent" means "immediately following". The following example selects all elements that are placed immediately after elements: div + p { background-color: yellow; } Paragraph 1 in the div. Paragraph 2 in the div. Paragraph 3. Not in a div. Paragraph 4. Not in a div. CENG 449 Lecture 7

of 55 General Sibling Selector The general sibling selector selects all elements that are siblings of a specified element. The following example selects all elements that are siblings of elements: div ~ p { background-color: yellow; } Paragraph 1 in the div. Paragraph 2 in the div. Paragraph 3. Not in a div. Paragraph 4. Not in a div. CENG 449 Lecture 7

of 55 CSS Image Opacity / Transparency Creating transparent images with CSS is easy. The CSS opacity property is a part of the W3C CSS3 recommendation. IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent. IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent. CENG 449 Lecture 7

of 55 img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ } Image Transparency CENG 449 Lecture 7

of 55 img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ } img:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } Image Transparency Note: In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element. CENG 449 Lecture 7

of 55 div.background { width: 250px; height: 250px; background: url(tree.png) no-repeat; border: 2px solid black; } div.transbox { width: 250px; height: 250px; background-color: #ffffff; border: 1px solid black; opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ } div.transbox p { font-weight: bold; color: #000000; } This is some text that is placed in the transparent box. CENG 449 Lecture 7

of 55 div.background { width: 250px; height: 250px; background: url(tree.png) no-repeat; border: 2px solid black;} div.transbox { width: 250px; height: 250px; background-color: #ffffff; border: 1px solid black; opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */} div.transbox p{ font-weight: bold; color: #000000;} div.transbox:hover { opacity: 0.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } This is some text that is placed in the transparent box. CENG 449 Lecture 7

of 55 Navigation Bar Design Home About Us Services Contact Us CENG 449 Lecture 7

of 55 #menu { width: 550px; font-size: 16px; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; text-align: center; background-color: #8AD9FF; } Home About Us Services Contact Us CENG 449 Lecture 7

of 55 #menu { width: 550px; height: 35px; font-size: 16px; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; text-align: center; background-color: #8AD9FF; text-shadow: 3px 2px 3px #333333; border-radius: 8px } #menu ul { height: auto; /*list-style-type:none;*/ padding: 8px 0px; margin: 0px; } Home About Us Services Contact Us CENG 449 Lecture 7

of 55 #menu { width: 550px; height: 35px; font-size: 16px; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; text-align: center; background-color: #8AD9FF; text-shadow: 3px 2px 3px #333333; border-radius: 8px } #menu ul { height: auto; /*list-style-type:none;*/ padding: 8px 0px; margin: 0px; } #menu li { display: inline; padding: 20px; } Home About Us Services Contact Us CENG 449 Lecture 7

of 55 #menu { width: 550px; height: 35px; font-size: 16px; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; text-align: center; background-color: #8AD9FF; text-shadow: 3px 2px 3px #333333; border-radius: 8px } #menu ul { height: auto; /*list-style-type:none;*/ padding: 8px 0px; margin: 0px;} #menu li { display: inline; padding: 20px; } #menu a { text-decoration: none; color: #00F; padding: 8px 8px 8px 8px;} #menu a:hover { color: #F90; background-color: #FFF;} Home About Us Services Contact Us CENG 449 Lecture 7

Slide 1 of 55 Positioning The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what.

Similar presentations

Presentation on theme: "Slide 1 of 55 Positioning The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Slide 1 of 55 Positioning The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what.

Similar presentations

Presentation on theme: "Slide 1 of 55 Positioning The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what."— Presentation transcript:

Similar presentations

About project

Feedback