Web & Mobile I Part 6 PDF

Web & Mobile I Web & Mobile I Part 6 Assoc. Prof. Dr. Ermir Rogova © Ermir Rogova. Modification and/or dissemination is not...

Web & Mobile I Web & Mobile I Part 6 Assoc. Prof. Dr. Ermir Rogova © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Element dimensions Box Dimensions p { background-color: LightSkyBlue; margin-bottom:.5em; font-family: arial, helvetica, sans-serif; } Web & Mobile I Here is some text that goes in a box which is set to stretch across twenty percent of the width of the screen. Here is some CENTERED text that goes in a box which is set to stretch across eighty percent of the width of the screen. This box is only twenty percent of the width and has a fixed height. What do we do if it overflows? Set the overflow property to scroll! 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 2  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Element dimensions Web & Mobile I 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 3  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Specifying the width and height of an element Dimensions of elements on a page can be set with CSS by using properties height and width Their values can be relative or absolute Web & Mobile I text-align Property Text in an element can be centered using text-align: center; Other values for the text-align property are left and right 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 4  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Overflow property and scroll bars Problem with setting both vertical and horizontal dimensions of an element Content might sometimes exceed the set boundaries, in which case the Web & Mobile I element must be made large enough for all the content to fit Can set the overflow property to scroll, which adds scroll bars if the text overflows the boundaries set for it 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 5  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Box Model and Text Flow Block-level HTML5 elements have a virtual box drawn around them based on the box model When the browser renders an element using the box model, the content is surrounded by padding, a margin and a border. Web & Mobile I Padding The padding property determines the distance between the content inside an element and the edge of the element Padding be set for each side of the box by using padding-top, padding-right, padding- left and padding-bottom Margin Determines the distance between the element’s edge and any outside text Margins for individual sides of an element can be specified by using margin-top, margin-right, margin-left and margin-bottom 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 6  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Border The border is controlled using the properties: border-width May be set to any of the CSS lengths or to the predefined value of thin, medium or thick border-color Web & Mobile I Sets the color used for the border border-style Options are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 7  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Box model for block elements Web & Mobile I 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 8  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Example Borders div { text-align: center; width: 50%; Web & Mobile I position: relative; left: 25%; }.first { border-width: thick; border-style: solid; border-color: red; }.second { border-width: medium; border-style: dotted; border-color: blue;}.third { border-width: thin; border-style: dashed; border-color: orange;}.fourth { border: 5px ridge green;} Example of a bordered div Example of a bordered div Example of a bordered div Example of a bordered div 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 9  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Example Web & Mobile I 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 10  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Floating Elements Floating allows you to move an element to one side of the screen; other content in the document then flows around the floated element. Web & Mobile I The next example demonstrates how floating elements and the box model can be used to control the layout of an entire page. 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 11  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Flowing Text Around Floating Elements header { background-color: skyblue; text-align: center; font-family: arial, helvetica, sans-serif; padding:.2em; } p { text-align: justify; font-family: verdana, sans-serif; margin:.5em; } h1 { margin-top: 0px; }.floated { background-color: lightgrey; font-size: 1.5em; font-family: arial, sans-serif; width: 50%; padding:.2em; margin-left:.5em; margin-bottom:.5em; float: right; text-align: right;} section { border: 1px solid skyblue; } Web & Mobile I Corporate Training and Authoring Deitel & Associates, Inc. is an internationally recognized corporate training and authoring organization specializing in programming languages, Internet/web technology, iPhone and Android app development and object technology education. The company provides courses on Java, C++, C#, Visual Basic, C, Internet and web programming, Object Technology and iPhone and Android apps. Programming Books and Videos Through its publishing partnership with Pearson, Deitel & Associates publishes leading-edge programming textbooks, professional books and interactive web-based and DVD Lessons video courses. 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 12  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Example Web & Mobile I 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 13  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I margin and padding properties The margin property sets the space between the outside of an element’s border and all other content on the page. The padding property determines the distance between the content Web & Mobile I inside an element and the inside of the element’s border. Margins for individual sides of an element can be specified by using the properties margin-top, margin-right, margin-left and margin- bottom. Padding can be specified in the same way, using padding-top, padding-right, padding-left and padding-bottom. 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 14  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Media Types in CSS CSS media types allow you to decide what a page should look like depending on the kind of media being used to display the page Web & Mobile I Most common media type for a web page is the screen media type, which is a standard computer screen A block of styles that applies to all media types is declared by @media all and enclosed in curly braces To create a block of styles that apply to a single media type such as print, use @media print and enclose the style rules in curly braces 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 15  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Media Types Other media types in CSS include: handheld Designed for mobile Internet devices Web & Mobile I braille For machines that can read or print web pages in braille speech Allow the programmer to give a speech-synthesizing web browser more information about the content of the web page print Affects a web page’s appearance when it is printed 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 16  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Media Types (Cont.) Next is a simple classic example that applies one set of styles when the document is viewed on all media (including screens) other than a printer, and another when the document is printed. Web & Mobile I To see the difference, look at the screen captures below the paragraph or use the Print Preview feature in your browser if it has one. 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 17  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Media Types @media all { body { background-color: SteelBlue; } h1 { font-family: verdana, helvetica, sans-serif; color: PaleGreen; } p { font-size: 12pt; color: white; font-family: arial, sans-serif; } Web & Mobile I } @media print { body { background-color: white; } h1 { color: SeaGreen; } p { font-size: 14pt; color: SteelBlue; font-family: "times new roman", times, serif; } } CSS Media Types Example This example uses CSS media types to vary how the page appears in print and how it appears on any other media. This text will appear in one font on the screen and a different font on paper or in a print preview. To see the difference in browser, go to the Print menu and select Print Preview. In Firefox, select Print Preview from the File menu. 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 18  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I On screen Web & Mobile I 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 19  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I On paper (print preview) Web & Mobile I 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 20  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Media Queries Allow you to format your content to specific output devices. Include a media type and expressions that check the media features of the output device. Common media features include: Web & Mobile I width—the width of the part of the screen on which the document is rendered, including any scrollbars height—the height of the part of the screen on which the document is rendered, including any scrollbars device-width—the width of the screen of the output device device-height—the height of the screen of the output device orientation—if the height is greater than the width, orientation is portrait, and if the width is greater than the height, orientation is landscape aspect-ratio—the ratio of width to height device-aspect-ratio—the ratio of device-width to device-height 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 21  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Drop-Down Menus :hover pseudoclass used to apply styles to an element when the mouse cursor is over it display property Web & Mobile I allows a programmer to decide if an element is displayed as a block element, inline element, or is not rendered at all (none) 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 22  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Drop-Down Menu body { font-family: arial, sans-serif } nav { font-weight: bold; color: white; border: 2px solid RoyalBlue; text-align: center; width: 10em; background-color: RoyalBlue; } nav ul { display: none; margin: 0; padding: 0; } nav:hover ul { display: block; } nav ul li { border-top: 2px solid RoyalBlue; background-color: white; Web & Mobile I width: 10em; color: black; } nav ul li:hover { background-color: PowderBlue; } a { text-decoration: none; } Menu Home News Articles Blog Contact 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 23 Web & Mobile I Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 24  Assoc. Prof. Dr. Ermir Rogova – Web & Mobile I Questions ??? Web & Mobile I 2022 © Ermir Rogova. Modification and/or dissemination is not allowed without prior approval from the author 25