In this form, each topic we ask Email: the user about is placed inside a
element to ensure that
each question appears on anew
line. It is easier for users to fill in Gender: a form if the form controls are The CSS on the opposite page Male addresses this. If you look at where we ask Female
radio buttons each have their
own (one saying male elements that contain each row of the form (fixing Email: ~ © their width and creating vertical space between each row). The Gender: OMOF submit button is also aligned to the right. (Register ) LISTS, TABLES AND FORMS 346 CORSO so) Wiles Cursor The cursor property allows you to control the type of mouse chapter-14/cursor.html HTML cursor that should be displayed to users. Walt Whitman For example, on a form you might set the cursor to be a hand when the user hovers over it. eae a { Here are the most commonly cursor: move; } used values for this property: auto crosshair detaule Walt Whitmag. pointer move text wait help URIGcuRSORagtih) You should only use these values to add helpful information for users in places they would expect to see that cursor. (For example, using a crosshair on a link might confuse users because they are not used to seeing it.) 347 LISTS, TABLES AND FORMS Download this tool from: www.chrispederick.com/ work/web-developer To see the CSS styles and HTML structure of a web page, go to the CSS menu of the Web Developer Toolbar and pick View Style Information. 1: OUTLINES When you hover over an element, a red outline will be drawn around it, showing you how much space the element takes up. (3 (line 14) f WEB DEVELOPER TOOLBAR This helpful extension for Firefox and Chrome provides tools to show you the CSS styles that apply to an element when you hover over it, along with the structure of the HTML. ' Line-boight: Japxr | pepe [Aine 19) | colors #41vel07 list~style~image: tiek~ loan. png py writ Liat-style-positions {noides 2; STRUCTURE While you are hovering over an element, the structure will be shown at the top of the window. Here you can see the <1i> element has a class of completed, inside a with a class called to-do. The list is inside a element with an id of page, and this sits inside the and elements. This can be very helpful when writing CSS selectors to help you target the right element. $; CSS STYLES When hovering over an element, click with your mouse to display the CSS. You will be shown the rules that apply to that element (and the line they are on). Above the rules, you can see the name of the style sheet (and the path to it). This helps check which styles are being applied to an element. You can use it on code for your own site or when you want to see what styles someone else is using on their site. This tool also allows you to change the screen size, validate your HTML and CSS code, and turn off images. LISTS, TABLES AND FORMS = 348 @ Safari File Edit View History Bookmarks Develop Window Help Lists, Tables and Forms www. himliandessbook.com/code/chapter-14/example.htm! Poetry Workshops We will be conducting a number of poetry workshops and symposiums throughout the year Please note that the following events are free to members: © A Poetic Perspective @ Walt Whitman at War Found Poems and Outsider Poetry at, 3 Mar 2 Sat A Poatic Perspective 44am - 2p. a 41am Sat, 7 Apr 2012 Sat, 5 May 20 Sat. 19 May 2012 Wait Whitman at War Ae a May 11am - 1pm >” 11am - 1pm Sat, 9 Jun 2012 Sat, 7 Jul 2012 Sat, 21 Jul 2012 Found Poems & Outsider Poetry Sean: Sort 44am - 2pm 11am - 2pm Sat, 4 Aug 2012 t, 8S é Sat Natural Death: An Exploration 4am - dom 4 44am Ap Var Register your interest Your name Your email Your closest center: New York | Are you a member? Yes No EXAMPLE = fa 4 Sun 12:20 LISTS, TABLES AND FORMS This example demonstrates several of the CSS properties we have met in this chapter to control the presentation of lists, tables, and forms. For the list of free poetry events near the start of the page, the bullet points are styled with an image. The space between each list item is increased using the line-height property. For the table, the gaps between cells are removed using the border- spacing property. Font size is set for the
and elements as they do not inherit their size from parent elements. The head of the table has a darker background, light text, and a dark 2-pixel line between it and the table content. Rounded corners on the table header are created using the :first-child and :last-child pseudo classes (for browsers that support rounded corners). Alternate rows of the table have different shading, and texture is added with different borders on each side of the cell. For the form, the related form controls are put ina element. The labels of the form controls on the left also use the float property to ensure the form controls are vertically aligned. When the text boxes of the form receive focus, or the user hovers over it, the background color and border colors change. The submit button has also been styled to make it clear where people should submit the form. LISTS, TABLES AND FORMS 350 EXAMPLE LISTS, TABLES AND FORMS Lists, Tables and Forms Poetry Workshops We will be conducting a number of poetry workshops and symposiums throughout the year.
Please note that the following events are free to members:
<1i>A Poetic Perspective1i> <1i>Walt Whitman at War1i> <1i>Found Poems and Outsider Poetry1i> New York Chicago San Francisco A Poetic Perspective Sat, 4 Feb 2012 Sat, 3 Mar 2012 Sat, 17 Mar 2012 Walt Whitman at War 353 LISTS, TABLES AND FORMS EXAMPLE LISTS, TABLES AND FORMS Sat, 7 Apr 2012 Sat, 5 May 2012 Sat, 19 May 2012 Found Poems & Outsider Poetry Sat, 9 Jun 2012 Sat, 7 Jul 2012 Sat, 21 Jul 2012 Natural Death: An Exploration Sat, 4 Aug 2012 Sat, 8 Sep 2012 Sat, 15 Sep 2012
LISTS, TABLES AND FORMS 354 SUMMARY LISTS, TABLES AND FORMS In addition to the CSS properties covered in other chapters which work with the contents of all elements, there are several others that are specifically used to control the appearance of lists, tables, and forms. List markers can be given different appearances using the list-style-type and list-style image properties. Table cells can have different borders and spacing in different browsers, but there are properties you can use to control them and make them more consistent. Forms are easier to use if the form controls are vertically aligned using CSS. Forms benefit from styles that make them feel more interactive. LAYOUT >» Controlling the position of elements > Creating site layouts >» Designing for different sized screens 359 LAYOUT In this chapter we are going to look at how to control where each element sits on a page and how to create attractive page layouts. This involves learning about how designing for a screen can be different to designing for other mediums (such as print). In this chapter we will: » Explore different ways to position elements using normal flow, relative positioning, absolute positioning and floats. Discover how various devices have different screen sizes and resolution, and how this affects the design process. » Learn the difference between fixed width and liquid layouts, and how they are created. » Find out how designers use grids to make their page designs look more professional. Safari file Edt View History Bookmarks Develop Window _ Help MO + = G4 Ssunizza Q MacBook Pro LAYOUT 360 KEY CONCEPTS IN POSITIONING ELEMENTS BLOCK-LEVEL ELEMENTS START ON A NEW LINE Examples include: INLINE ELEMENTS FLOW IN BETWEEN SURROUNDING TEXT Examples include: @ LAYOUT BUILDING BLOCKS CSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an inline box. 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. You can control how much space each box takes up by setting the width of the boxes (and sometimes the height, too). To separate boxes, you can use borders, margins, padding, and background colors. Lorem Ipsum | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. * Lorem ipsum dolor sit * Consectetur adipisicing * Elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. CONTAINING ELEMENTS If one block-level element sits inside another block-level element then the outer box is known as the containing or parent element. It is common to group a number of elements together inside a (or other block-level) element. For example, you might group together all of the elements that form the header of a site (such as the logo and the main navigation). The
element that contains this group of elements is then referred to as the containing element. A box may be nested inside several other block-level elements. The containing element is always the direct parent of that element. Lorem * Ipsum * Dolor * Consectetur Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute. The orange lines in this diagram represent
elements. The header (containing the logo and navigation) are in one
element, the main content of the page is in another, and the footer is in a third. The element is the containing element for these three
elements. The second
element is the containing element for two paragraphs of Latin text and images (represented by crossed squares). LAYOUT @ CONT RIOIEILIINGS) Pale POSTON OF elle Mie Ns CSS has the following positioning schemes that allow you to control the layout of a page: normal flow, relative positioning, and absolute positioning. You specify the positioning scheme using the position property in CSS. You can also float elements using the float property. NORMAL FLOW Every block-level element appears on a newline, causing each item to appear lower down the page than the previous one. Even if you specify the width of the boxes and there is space for two elements to sit side-by- side, they will not appear next to each other. This is the default behavior (unless you tell the browser to do something else). Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. The paragraphs appear one after the other, vertically down the page. See page 365 @ LAYOUT RELATIVE POSITIONING This moves an element from the position it would be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed. This does not affect the position of surrounding elements; they stay in the position they would be in in normal flow. Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea. Duis aute irure dolor in reprehenderit in voluptate velit. The second paragraph has been pushed down and right from where it would otherwise have been in normal flow. See page 366 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. Lorem ipsum dold Lorem Ipsum consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. The heading is positioned to the top right, and the paragraphs start at the top of the screen (as if the heading were not there). See page 367 To indicate where a box should be positioned, you may also need to use box offset properties to tell the browser how far from the top or bottom and left or right it should be placed. (You will meet these when we introduce the positioning schemes on the following pages.) FIXED POSITIONING This is a form of absolute positioning that positions the element in relation to the browser window, as opposed to the containing element. Elements with fixed positioning do not affect the position of surrounding elements and they do not move when the user scrolls up or down the page. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo: bore et ec Lorem lpsum Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. The heading has been placed in the center of the page and 25% from the top of the screen. (The rest appears in normal flow.) See page 368 FLOATING ELEMENTS Floating an element allows you to take that element out of normal flow and position it to the far left or right of a containing box. The floated element becomes a block-level element around which other content can flow. Lorem Lorem ipsum dolor sit amet, consectetur Ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. The heading has been floated to the left, allowing the paragraphs of text to flow around it. See page 370-376 When you move any element from normal flow, boxes can overlap. The z-index property allows you to control which box appears on top. LAYOUT @ NORMAL FLOW position:static se eel chaptersinart-faw te one. Since this is the default way in which browsers treat
The Evolution of the Bicycle HTML elements, you do not In 1817 Baron von Drais invented a walking need a CSS property to indicate machine that would help him get around the that elements should appear royal gardens faster...
in normal flow, but the syntax would be: position: static; css | have not specified a width body { property for the heading width: 750px; element, so you can see how it font-family: Arial, Verdana, sans-serif; stretches the width of the entire color: #665544; } browser window by default. hl { background-color: #efefef; The paragraphs are restricted padding: 10px;} to 450 pixels wide. This shows p 4 how the elements in normal flow width: 450px;} start on a new line even if they do not take up the full width of the browser window. Met epee ie: The Evolution of the Bicycle demonstrate positioning wl II use In 1817 Baron von Drais invented a walking machine that ae would help him get around the royal gardens faster: two same- a similar HTML structure. 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"). twas 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 asin a park. or garden, The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel This machine was known as the velocipede (meaning “fast foot") as well as the "bone shaker,” since it's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride, They also became a fad and indoor riding academies, simitar to roller rinks, could be found in large cities. 365 LAYOUT RELATIVE POSITIONING position:relative Relative positioning moves an element in relation to where it would have been in normal flow. chapter-15/position-relative.html The Evolution of the Bicycle In 1817 Baron von Drais invented a walking For example, you can move it 10 pixels lower than it would have been in normal flow or 20% to machine that would help him get around the royal gardens faster...
the right. You can indicate that an element should be relatively positioned css using the position property p.example { with a value of relative. position: relative; top: 10px; left: 100px; } You then use the offset properties (top or bottom and left or right) to indicate how far to move the element from where it would have been in normal flow. To move the box up or down, you can use either the top or bottom properties. The Evolution of the Bicycle |n 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 straddied. 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 ir any other place than a well maintained pathway such as in a park or garden. The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning “fast foot") as well as the "bone shaker," since it's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They alsa became a fad and indoor riding academies, similar to roller rinks, could be found in large cities. To move the box horizontally, you can use either the left or right properties. The values of the box offset properties are usually given in pixels, percentages or ems. LAYOUT 366 ABSOLUTE POSITIONING position:absolute When the position property is given a value of absolute, the box is taken out of normal flow and no longer affects the position of other elements on the page. (They act like it is not there.) The box offset properties (top or bottomand left or right) specify where the element should appear in relation to its containing element. In this example, the heading has been positioned at the top of the page and 500 pixels from its left edge. The width of the heading is set to be 250 pixels wide. The width property has also been applied to the elements in this example to prevent the text from overlapping and becoming unreadable. By default, most browsers add a margin to the top of the
In 1817 Baron von Drais invented a walking machine that would help him It positions the element in get around the royal gardens faster...
relation to the browser window. Therefore, when a user scrolls down the page, it stays in the exact same place. It is a good idea to try this example in your browser to see the effect. hl { position: fixed; To control where the fixed top: Opx; position box appears in relation left: 50px; to the browser window, the box padding: 10px; offset properties are used. margin: Opx; width: 100%; In this example, the heading background-color: #efefef; } has been positioned to the top p.example { left hand corner of the browser margin-top: 100px;} window. When the user scrolls down the page, the paragraphs disappear behind the heading. | RESULT eel) The elements are in normal , I flow and ignore the space that The Evolution of the Bicycle the
metal which was strong enough to make small, light parts out of.) The pedals were atttached directly to the , front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front element below where the fixed wheel provided a much smoother ride than its predecessor. cee é aan position
elements. Because the paragraphs are relatively positioned, by default they would appear over the top of the heading as the user scrolls down the page. To ensure that the
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 ...
blockquote { float: right; width: 275px; font-size: 130%; font-style: italic; font-family: Georgia, Times, serif; margin: Opx Opx 10px 10px; padding: 10px; border-top: 1px solid #665544; border-bottom: 1px solid #665544; } The Evolution of the Bicycle \n 1817 Baron Von Drais invented a walking machine that ean a 2 . would help him get around the royal gardens faster: twosame- “Life is like riding a bicycle. size in-line wheels, the front one steerable, mounted in a To keep your balance you frame upon which you straddied. The device was propelled by « "eo pushing your feet against the ground, thus rolling yourself and must keep moung. Albert the device forward in a sort of gliding walk Einstein 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. The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning “fast foot") as well as the "bone shaker,” since |t's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride, They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities, f loa The float property allows you to take an element in normal flow and place it as far to the left or right of the containing element as possible. Anything else that sits inside the containing element will flow around the element that is floated. When you use the float property, you should also use the width property to indicate how wide the floated element should be. If you do not, results can be inconsistent but the box is likely to take up the full width of the containing element (just like it would in normal flow). In this example, a element is used to hold a quotation. It's containing element is the element. The element is floated to the right, and the paragraphs that follow the quote flow around the floated element. LAYOUT 370 USING FLOAT TO PLACE SE SIM=INVES S)|Diaois)\os] Bis next toeachother The float Shapter-15/using-Float heat property is commonly used to achieve this. The Evolution of the Bicycle In 1817 Baron von Drais invented a walking When elements are floated, the machine that would help him get around...
height of the boxes can affect where the following elements sit. In this example, you can see six paragraphs, each of which has a css width anda float property set. body { width: 750px; The fourth paragraph does not font-family: Arial, Verdana, sans-serif; go across to the left hand edge color: #665544; } of the page as one might expect. pt Rather it sits right under the width: 230px; third paragraph. float: left; Margin: 5px; The reason for this is that the padding: 5px; fourth paragraph has space to background-color: #efefef;} start under the third paragraph, but it cannot go any further to the left because the second paragraph is in the way. Setting the height of the paragraphs to be the same The Evolution of the Bicycle height as the tallest paragraph Viiv Pe In 1817 Baron von Drais The device know as the Itwas not seen a suitable for would solve th ISuSSUC? but it invented a walking machine that Draisienne (or "hobby horse") any place other than a well 2 . would help him get around the was made of wood, and maintained pathway. is rarely suited to real world royal gardens faster. propelled by pushing your feed i on the ground in a gliding In 1865, the velocipede designs where the amount of movement, (meaning “fast foot”) attached 4 pedals to the front wheel, but its text in a paragraph or column wooden structure made it 6 extremely uncomfortable. may Vary. It is more common in 1870 the first all-metal Solid rubber tires and the long to use the clear property machine appeared. The pedals spokes of the large front wheel a were atttached directly to the provided a much smoother ride (discussed on the next page) to front wheel than its predecessor. solve this issue. 371 | EAYOUT, CLEARING FLOATS clear The clear property allows you chapters Tovelearstuenl to say that no element (within In 1865, the velocipede (meaning the same containing element) "fast foot") attached pedals to the front wheel, should touch the left or right- but its wooden structure made it extremely hand sides of a box. It can take uncomfortable.
the following values: left The left-hand side of the box should not touch any other elements appearing in the same bod ee containing element. width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544; } right p { The right-hand side of the width: 230px; box will not touch elements float: left; appearing in the same containing margin: 5px; element. padding: 5px; background-color: #efefef;} -clear { both Neither the left nor right-hand sides of the box will touch elements appearing in the same containing element. clear: left;} El none Evolution of the Bicycle Elements can touch either side. In 1817 Baron von Drais The device know as the It was not seen a suitable for Z invented a walking machine that Draisienne (or "hobby horse") —_ any place other than a well In this example, the fourth would help him get around the was made of wood, and maintained pathway royal gardens faster. propelled by pushing your feed pa ragraph has aclass called on the ground in a gliding ‘ movement clear. The CSS rule for this In 1865, the vélocipede In 1870 the first all-metal Solid rubber tires and the long class uses the clear property (meaning “fast foot") attached machine appeared. The pedals spokes of the large front wheel 2 x F pedals to the front wheel, but Its were attached directly to the provided a much smoother ride to indicate that nothing should wooden structure made it front wheel than its predecessor. 7: r extremely uncomfortable touch the left-hand side of it. The fourth paragraph is therefore moved further down the page so no other element touches its left-hand side. LAYOUT 372 PARENTS OF FLOATED ELEMENTS: PROBLEM If a containing element only contains floated elements, some browsers will treat it as if it is zero pixels tall. As you can see in this example, the one pixel border assigned to the containing element has collapsed, so the box looks like a two pixel line. 373 | EAYOUTT chapter-15/float-problem.html The Evolution of the Bicycle In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster...
div { border: 1px solid #665544; } The Evolution of the Bicycle In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster. In 1865, the velocipede (meaning “fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable, The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed ‘on the ground in a gliding movement. In 1870 the first all-metal machine appeared. The pedals were atttached directly to the front wheel css It was not seen a suitable for any place other than a well maintained pathway Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than ls predecessor. PARENTS OF FLOATED ELEMENTS: SOLUTION . Traditionally, developers got chapter-15/float-solution.html around this problem by adding an extra element after the The Evolution of the Bicycle last floated box (inside the containing element). A CSS
In 1817 Baron von Drais invented a walking rule would be applied to this machine that would help him get around the additional element setting the royal gardens faster...
clear property to have a value
element): The Evolution of the Bicycle ® The overflow property is In 1817 Baron von Drais The device know as the Itwas not seen a suitable for givena value auto. invented a walking machine that Draisienne (or "hobby horse") any place other than a well would help him get around the was made of wood, and maintained pathway royal gardens faster. propelled by pushing your feed ® The width property is set to on the ground in a gliding movement 100%. In 1865, the velocipede In 1870 the first all-metal Solid rubber tires and the long (meaning “fast foot") attached machine appeared. The pedals spokes of the large front wheel pedals to the front wheel, but its were alttached directly to the provided a much smoother ride wooden structure made it front wheel than its predecessor. extremely uncomfortable LAYOUT 374 CREATING MULTI-COLUMN LAYOUTS WITH FLOATS Many web pages use multiple columns in their design. This is achieved by using a
element to represent each column. The following three CSS properties are used to position the columns next to each other: chapter-15/columns-two.html
The Evolution of the Bicycle The First Bicycle In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size ...
width This sets the width of the columns. float This positions the columns next to each other. css .columnlof2 { . float: left; margin a . width: 620px; This creates a gap between the i margin: 10px;} columns. -column2of2 { float: left; width: 300px; margin: l0px;} A two-column layout like the one shown on this page would need two elements, one for the main content of the page and one for the sidebar. Inside each of the
elements there can be headings, paragraphs, images, and even other
elements. The Evolution of the Bicycle The First Bicycle (1817 Baron von Drais mvented a wathing machine that would help him get around the royal gardens faster two same-size in-ine wheels, the front one steerable mounted in a frame upon which you straddied. The device was propelled by pushing your feet against the ground. thus rolling yourself and the Gevice forward in a sort of Bicycle Timeline * 1817: Draisionne * 1865: Velocipede * 1870; High-wheo! bicycle * 1876: High-wheel safety lieing wale © 1885: Hard-tired safety © 1888: Pneumatic satoty The machine became known as the Draksianne (or “hobby horse”) it was made entirety Of wood. This énjoyed & short lived poputarily as a fad, nol being practical for transportation in any other place than a well maintained pathway such as in a park or garden Further Innovations The next appearance of a two-wheeled riding machine was in 1865, when pedals wore applied directly to the front wheel. This machine was known as the valosipede (meaning “tast foot") as wel as the “bone shaker.” since it's wooden structure combined with tne cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad ant indoor riding academies, simiar to roller rinks, could be found in large cities, bh 1870 the first all-metal machine appeured. (Prior to this, metallurgy was not advanced enough to provkle metal which was sirong enough to make small, gh! parts Out of.) The pedals were attached directly to the front wheet with no Mechanism, Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor 375 | EAYOUT Similarly, a three column layout could be created by floating three
elements next to each other, as shown on this page.
The Evolution of the Bicycle chapter-15/columns-three.html The Evolution of the Bicycle The First Bicycle Further innovations Bicycle Timeline th 1817 Baron von Drals invented a walking machine that would help him get Afound the royal gardens faster, two sama-size in-line Wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelied by pushing your feet against the ground. thus rolling yourself and the dewce forward in a sort of gliding walk The machine became known as the Draisionne (or “hobby horse”), tt was made entirely of wood. This enjayed a short lived popularity as a fad. not being practical for transportation in any other place than a wall maintained pathway such as in @ park or garden The next appearance of 3 two-wheoked riding machine was in 1865, when pedals wore applied directly to the tront whee! This machine was known as the veloopade (maaning “tast foot) as weil as Ihe “bone shaker,” since M's wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They aiso became a fad and indoor riding academies, similar fo roer rinks, could be found in large cabes In 1870 the first a-motal machine appeared. (Prior to this. metalurgy was not advanced enough to provide metal which was sirang enough to make small, light parts out of.) The padats were attached directly to the front wheel with ne freewheeling mechanism Solid rubber ties and the long spokes of the targe front wheel provided @ much smoother ride than its predecessor 1817: Draisionna 1865: Velocipede 1870: High-whwe! bicycle 1876: High-whee! safety 1885: Hard-tred safety 1888: Pneumatic satety LAYOUT 376 SCREEN SIZES Different visitors to your site will have different sized screens that show different amounts of information, so your design needs to be able to work on a range of different sized screens. iPhone 4 Size: 3.5 inches Resolution: 960 x 640 pixels When designing for print, you always know the size of the piece of paper that your design will be printed on. However, when it comes to designing for the web, you are faced with the unique challenge that different users will have different sized screens. 577) LAYOUT Since computers have been sold to the public, the size of screens has been steadily increasing. This means that some people viewing your site might have 13 inch monitors while others may have 27+ inch monitors. iPad 2 Size: 9.7 inches Resolution: 1024 x 768 pixels The size of a user's screen affects how big they can open their windows and how much of the page they will see. There are also an increasing number of handheld devices (mobile phones and tablets) that have smaller screens. SCREEN RESOLUTION Resolution refers to the number of dots a screen shows per inch. Some devices have a higher resolution than desktop computers and most operating systems allow users to adjust the resolution of their screens. 13" MacBook 27" iMac Size: 13.3 inches Size: 27 inches Resolution: 1280 x 800 pixels Resolution: 2560 x 1440 pixels Most computers will allow It is interesting to note that Pee ae owners to adjust the resolution the higher the resolution, the 720 x 480 of the display or the number smaller the text appears. Many 720 x 480 (stretched) 5 3 3 800 x 500 of pixels that are shown on the mobile devices have screens 800 x 600 . . Sh sGti rE screen. For example, here you that are higher resolution than 1024 x 640 can see the options to change their desktop counterparts. 1024 x 768 ; 1024 x 768 (stretched) the screen size from 720 x 480 1152 x 720 pixels up to 1280 x 800 pixels. LAYOUT @ PAGE SIZES 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). 379) LAYOUT Judging the height that people are likely to see on the screen without scrolling down the page is much harder. For several years, designers assumed that users would see the top 570- 600 pixels of a page without having to scroll and some tried to fit all of the key messages in this area (fearing that people would not scroll down the page). As screen sizes have increased and handheld devices have become more popular, the area users will see is far more variable. The area of the page that users would see without scrolling was often referred as being “above the fold” (a term newspapers had originally coined to describe the area of the front page you would see if the paper were folded in half). 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. As aresult, many designs still try to let the user know what the site is about within the top 570- 600 pixels, as well as hint at more content below this point. But do not try to cram too much into that top area. At the time of writing, there was a growing trend for people to create adaptive or responsive designs that could change depending on the size of the screen. The shaded area is hidden by However, the user gets a taste the constraints of the browser for what is lower on the page window, so the user must scroll and can tell that there will be in order to view the lower region. more to see if they scroll down. —“S mmm 1000 2X or login with your ID: “9 Upload Discover Share More ways to get your photos online. See what's going on in your world. Your photos are everywhere you are. Keep up with your friends and share you Jpload your phot ibrougt WE OUl RODE AWiCG. airmail os SLOD ES WILD COMME DL ode DOLE So ANG LCD. an y share them through Facebook, your favorite photo applications information like tags, locations & people. Twitter, email, blogs and more Sign up n oa It takes less than a minute to create your free account & start sha Have &@ Google or Facebook account? You can use them to sign in! Community Privacy Flickr on the go Flickr is made of people. Your photos are safe with us. Mobile options to keep you going. my . a i = f _ cc ro We ickr. =" ‘yes Saeane (enuseanenasnemie nian > ; > reo cor you explo: ' rs s- q — =a Sin Join one of over 10 million active groups to Share photos only with the people you want to Flickr is always in your back pocket with apps take part in the conversation, learn from our with our easy privacy settings. Flickr's multiple- for IPhone, Windows 7, and more. Or use LAYOUT ® FIXED WIDTH LAYOUTS Fixed width layout designs do not change size as the user increases or decreases the size of their browser window. Measurements tend to be given in pixels. © LAYOUT Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et * Ipsum * Dolor * Consectetur ADVANTAGES Pixel values are accurate at controlling size and positioning of elements. The designer has far greater control over the appearance and position of items on the page than with liquid layouts. You can control the lengths of lines of text regardless of the size of the user's window. The size of an image will always remain the same relative to the rest of the page. DISADVANTAGES You can end up with big gaps around the edge of a page. If the user's screen is a much higher resolution than the designer's screen, the page can look smaller and text can be harder to read. If a user increases font sizes, text might not fit into the allotted spaces. The design works best on devices that have a site or resolution similar to that of desktop or laptop computers. The page will often take up more vertical space than a liquid layout with the same content. ADVANTAGES Lorem Ipsum LIQUID LAYOUTS Lorem = Ipsum * Dolor * Consectetur Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. DISADVANTAGES Pages expand to fill the entire @ lf you do not control the browser window so there are width of sections of the page no spaces around the page on a large screen. @ |fthe user has a small window, the page can contract to fit it without the user having to scroll to the side. ®@ The design is tolerant of users Setting font sizes larger than the designer intended (because the page can stretch). then the design can look very different than you intended, with unexpected gaps around certain elements or items squashed together. @ lf the user has a wide window, lines of text can become very long, which makes them harder to read. @ Ifthe user has a very narrow window, words may be squashed and you can end up with few words on each line. @ |fa fixed width item (such as an image) is in a box that is too small to hold it (because the user has made the window smaller) the image can overflow over the text. Liquid layout designs stretch and contract as the user increases or decreases the size of their browser window. They tend to use percentages. Because liquid layouts can stretch the entire width of the browser, resulting in long lines of text that are hard to read, some liquid layouts only let part of the page expand and contract. Other parts of the page have minimum and maximum widths. LAYOUT 382) A FIXED WIDTH LAYOUT 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). Here you can see several elements, each of which uses an idorclass attribute to indicate its purpose on the page In a book like this, the result of both the fixed and liquid layouts look similar. To get a real feel for them, you need to view them in your browser and see how they react when you adjust the size of the browser window. The fixed width layout will stay the same width no matter what size the browser window is, whereas the liquid layout will stretch (or shrink) to fill the screen. The HTML is the same for both the fixed width layout example on this page and the liquid layout example you see next. LAYOUT chapter-15/fixed-width-layout.html
Feature
Column One
Column Two
Column Three
© Copyright 2011
body { width: 960px; margin: O auto;} #content { overflow: auto; height: 100%; } d#nav, #feature, #footer { background-color: #efefef; padding: 10px; margin: 10px;} -columnl, .column2, .column3 { background-color: #efefef; width: 300px; float: left; margin: 10px;} li { display: inline; padding: 5px;} Logo Home Products Serviers About Contact Feature Column One Column Two © Copyright 2011 Cotumn Three The rule for the element is used to fix the width of the page at 960 pixels, and it is centered by setting the left and right margins to auto. The main boxes on the page have a margin of 10 pixels to create a gap between them. The navigation, feature, and footer panels stretch to the width of the containing element (which in this instance is the element), so we do not need to specify a width for them. The three columns are each 300 pixels wide and use the float property, which allows them to sit next to each other. Sometimes an extra HTML element is used to contain the page, rather than fixing the width of the . This allows the background of the browser window to have a different color than the background of the content. LAYOUT 384 385 A LIQUID The liquid layout uses percentages to specify the width of each box so that the design will stretch to fit the size of the screen. When trying this in your browser, remember to make the window smaller and larger. LAYOUT LAYOUT chapter-15/liquid-layout.html
Feature
Co n One
Co n Two
Co n Three
© Copyright 2011
body { width: 90%; margin: O auto;} #tcontent {overflow: auto;} #nav, #feature, #footer { margin: 1%;} -columnl, .column2, .column3 { width: 31.3%; float: left; margin: 1%;} -column3 {margin-right: 0%; } li f display: inline; padding: 0.5em; } #tnav, #footer { background-color: #efefef; padding: 0.5em 0;} ##feature, .article { height: 10em; margin-bottom: lem; background-color: #efefef; } Coluny One Cohuruy Tor Column Three ©Copyright 2011 There is a rule on the element to set the width of the page to 90% so that there is a small gap between the left and right-hand sides of the browser window and the main content. The three columns are all given a margin of 1% and a width of 31.3%. This adds up to 99.9% of the width of the element, so some browsers might not perfectly align the right-hand side of the third column with other elements on the page. The
elements that hold the navigation, feature, and footer will stretch to fill the width of the containing element. They are given a1% margin to help them align with the columns. If you imagine the browser window to be very wide or very narrow, you can see how lines of text could become very long or very short. This is where the min-width and max-width properties help create boundaries within which the layout can stretch (although Internet Explorer 7 was the first version of IE to support these properties). LAYOUT 386 LAYOUT GRIDS 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. On the right, you can see a set of thick vertical lines superimposed over the top of a newspaper website to show you how the page was designed according to a grid. This grid is called the 960 pixel grid and is widely used by web designers. 387 LAYOUT Grids set consistent proportions and spaces between items which helps to create a professional looking design. If you flick back through the pages of this book you will see that it, too, has been constructed according to a grid (comprising three columns). As you will see on pages 389- 390, it is possible to create many different layouts using this one versatile grid. While a grid might seem like a restriction, in actual fact it: ® Creates a continuity between different pages which may use different designs ® Helps users predict where to find information on various pages @ Makes it easier to add new content to the site ina consistent way ® Helps people collaborate on the design of a site ina consistent way EXAMPLE GRID Today's paper ~ Zeitgeist ~ Mobile site Signin Register A Textlarger - smaller Aboutus + guardian.co.uk Coture 3) Seat News Sport Comment Culture Business Money Life & style Trayel Environment TV Blogs Data Mobile Offers Jobs | Culture ) Art and design Books Film Music Stage Cuts blog Kids' books TV & radio Games Blogs Podcasts Video culture — Editors' picks Cannes 2011 Music Film Weekly from Cannes Come to our new band show! Podcast: Jason Solomons meets Cannes festival Rumer, Wretch 32 and Summer Camp share the bill at president Gilles Jacob, Palme d'Or juror Mahamat- New band of the day night for Guardian and Observer Saleh Haroun, electro-duo Air and our own Joe Comish readers ——— © Post your comment Alexis Petridis reviews Kate Bush's new album On this site Gi Video: Space milkshake anyone? Rihanna and the rise of raunch pop Tilda Swinton: ‘It's bloody having a child’ News: Fleetwood Mac to reunite in 2012 Art and design Diary: Will | ever leave Hotel Cannes-ifornia? Alexis Petridis interviews Donovan Art Full coverage: Cannes 2011 Architecture Books Photography Stage TV and radio Design 1 «ae Photography Your photographs Jonathan Jones on art Books Sci-fi is no place Ng Han Guan Pinter in a cell Last night's TV News for dabblers In pictures: Ng Han Video: Can you make Review: Inside the Reviews, ‘Write about what you Guan is a Singaporean five plays by Harold Human Body did more to love, rather than what you Photographer based in Pinter into a piece of make death less scary Books genres have contempt for, says Beijing. In this set of immersive theatre? than any theologian Books lain M Banks photographs he captures Andrew Dickson found © 21 comments Bog (166 neem onta ___Vaifious facets. of daily lif _ouf our next hay set ___ Eile —___ LAYOUT 388 POSSIBLE LAYOUTS: 960 PIXEL WIDE 12 COLUMN GRID 389 LAYOUT These two pages illustrate a 960 The page is 960 pixels wide and pixel wide, 12 column grid. They there are 12 equal sized columns demonstrate how it is possible (shown in gray), each of which is to create a wide range of column is 60 pixels wide. layouts using this one grid. Each column has a margin set to 10 pixels, which creates aa gap of 20 pixels between each column and 10 pixels to the left and right-hand sides of the page. LAYOUT 390 391 CSS FRAMEWORKS CSS frameworks aim to make your life easier by providing the code for common tasks, such as creating layout grids, styling forms, creating printer-friendly versions of pages and so on. You can include the CSS framework code in your projects rather than writing the CSS from scratch. ADVANTAGES ® They save you from repeatedly writing code for the same tasks. ® They will have been tested across different browser versions (which helps avoid browser bugs). INTRODUCING THE 960.GS CSS FRAMEWORK One of the most popular uses of CSS frameworks is in creating grids to layout pages. There are several grid frameworks out there, but the one we will be looking at over the next few pages is the 960 Grid System (available at www.960.gs). 960.gs provides a style sheet that you can include in your HTML pages. Once our page links to this style sheet, you can provide the appropriate classes to your HTML code and it will create multiple column layouts for you. The 960.gs website also provides templates you can LAYOUT DISADVANTAGES ® They often require that you use class names in your HTML code that only control the presentation of the page (rather than describe its content). download to help design your pages using a 12 column grid. (In addition, there is a variation on the grid that uses 16 columns.) To create a 12 column grid, an element that contains the entire page is givenaclass attibute whose value is container_12. This sets the content of the page to be 960 pixels wide and indicates that we are using a 12 column grid. There are different classes for blocks that take up 1, 2, 3, 4, and up to 12 columns of the grid. Each block uses class names ® Inorder to satisfy a wide variety of needs, they often contain more code than you need for your particular web page (commonly referred to as code “bloat”). such as grid_3 (for a block that stretches over three columns), grid_4 (for a block that stretches over 4 columns) and and so on through to grid_12 (for a box that is the full width of the page). These columns all float to the left, and there is a 10 pixel margin to the left and the right of each one. There are several other grid- based CSS frameworks available online, such as those at: blueprintcss.org lessframework.com developer.yahoo.com/yui/ grids/ USING THE 960.GS GRID Below you can see a sample layout of a page just like the fixed width page example. On the next page, we will recreate this using the 960.gs stylesheet. Instead of writing our own CSS to control layout, we will need to add classes to the HTML indicating how wide each section should be. LAYOUT 302 393 A GRID-BASED LAYOUT USING 960.GS$ Let's take a look at an HTML page and how it has been marked up to use the 960.gs grid system. You can see that we include the CSS for the grid using the
element inside the of the page. The styles we are writing ourselves are shown on the right hand page. The 960_12_col.css stylesheet contains all of the rules we need to control the grid layout. The HTML uses the class names: container_1l2toactasa container for the whole page and indicate that we are using a 12 column grid clearfix to ensure that browsers know the height of the containing box, because it only contains floated elements (this addresses the issue you met on pages 371-372) grid_12 to create a block that is twelve columns wide grid_4 to create a block that is four columns wide LAYOUT chapter-15/grid-layout.html
Grid Layout href="">Home1i> href="">Products1i> href="">Services1i> href="">About1i> href="">Contact1i>
Feature
Column One
Column Two
KEaiv>
Column Three
© Copyright 2011
-container_12 --> The 960.gs style sheet has taken care of the layout, creating the at correct width for the columns font-family: Arial, Verdana, sans-serif; and setting the spaces between color: #665544; them. Therefore, the only rules text-align: center; } we needed to add are shown on #fnav, #feature, .article, #footer { this page. These rules: background-color: #efefef; margin-top: 20px; padding: 10px Opx 5px Opx;} Control the font and the position of the text in the boxes #feature, .article { height: 100px;} ® Set the background colors for 17 < the boxes display: inline; padding: 5px;} Set the height of the feature and article boxes Add a margin to the top and | bottom of each box Logo Home Products Services Aboul Contact Feature Column One Column Two Coturnn Three © Copyright 2011 LAYOUT 394 395 gH TIS Oe |e te es lI SS) oa Us| ml BS @import Some web page authors split up their CSS style rules into separate style sheets. For example, they might use one style sheet to control the layout and another to control fonts, colors and so on. Some authors take an even more modular approach to stylesheets, creating separate stylesheets to control typography, layout, forms, tables, even different styles for each sub-section of a site. There are two ways to add multiple style sheets to a page: 1: Your HTML page can link to one style sheet and that stylesheet can use the @import rule to import other style sheets. 2: Inthe HTML you can use a separate <1ink> element for each style sheet. The example on this page uses one
element in the HTML to link to a style sheet called styles.css. This stylesheet then uses the @import rule to import the typography.css and tables.css files. If astyesheet uses the @import rule, it should appear before the other rules LAYOUT chapter-15/multiple-style-sheets-import.html
Multiple Style Sheets - Import chapter-15/styles.css css @import url("tables.css"); @import url("typography.css"); body { color: #666666; background-color: #f8f8f8; text-align: center; } page { width: 600px; text-align: left; margin-left: auto; Margin-right: auto; border: lpx solid #d6d6d6; padding: 20px;} h3 { color: #547ca0;} Me ee onl Yee Siete
Multiple Style Sheets Link chapter-15/multiple-style-sheets-link.html Central Park Bike Hire Rent a bicycle to ride around Central Park Per hour Per day Cruiser $9 $45 21 Speed $15 $50 WHERE AND WHEN Loeb Boathouse From April to November bicycles are available on first come first serve basis for riding in Central Park Cash or credit card A $200 deposit is required for the hire of any of our bicycles link On this page you can see the other technique for including multiple style sheets. Inside the element is a separate
element for each style sheet. The contents of site.css are identical to styles.css onthe left hand page, except the code does not contain @import rules. As with all style sheets, if two rules apply to the same element then rules that appear later ina document will take precedence over previous rules. In the example on this page, any rules in typography.css would take precedence over rules in site.css (because the typography rules are included after the other rules). In the example on the previous page, the rules in styles.css would take precedence over the rules in typography.css. This is because when the @import rule is used, that is the point at which the browser considers the rules live. LAYOUT 396 « Safari File Edit View History Bookmarks Develop Window Help Layout < + |@ http://www.htmlandessbook.com/code/chapter-15/example.htm! PEDAL FASTER. THE MODERN BICYCLE MAGAZINE ‘The velobeld combines minimalist design with super quality. Dewoid of excessive graphica and gear shift components, the velobeld product range detights us with its beauty and simplicity. The black and white (yin and yang?) bicycles feature a short wheelbase, a single gear and a narrow handlebar... All you need to explore the city streets. For those who want to create their bike themselves, the velahebd frames come in three sizes and two colours and are the perfect starting point. MacBook Pro 397 LAYOUT EXAMPLE LAYOUT a 4 Sun 12:20 This example demonstrates a modern magazine-style layout using the 960.gs grid. Using this style sheet saves us from having to create all of the CSS code ourselves. Several classes from the 960.gs style sheet have been added to the code to indicate how many columns of the grid each element should stretch across. As you saw in this chapter, the 960.gs stylesheet uses the float property to position the blocks next to each other. At the start of the page, the header uses fixed positioning (meaning that it does not move when the user scrolls down the page). The z-index property is added to the header to keep it on top of the remaining content as the user scrolls down the page. Both the header and footer are contained within
elements which stretch the entire width of the page. Inside those container elements sit other elements that use classes from the 960.gs style sheet to ensure that the items in the header and footer align with the rest of the content. The feature article takes up the entire width of the page. The push_7 and push_9 classes are part of the 960.gs style sheet and are used in the feature article to move the header and the content for this article over to the right. Under the main article you can see four blocks, each of which is 3 columns wide. These contain images followed by links to more articles. This example also uses background images to create a textured background for the page and header, and also to contain the images for the feature article. You will learn more about these in the next chapter. Please note: If you view this example in Internet Explorer 6, the transparent PNGs used in this design may have a gray background. To learn more about this issue, visit the website accompanying this book where you can find a simple JavaScript that fixes this problem. LAYOUT 398 EXAMPLE LAYOUT
Layout 16 APRIL 2011
The veloheld combines minimalist design with superb quality. Devoid of excessive graphics and gear shift components, the veloheld product range delights us with its beauty and simplicity ...
LAYOUT EXAMPLE LAYOUT
€/Givec! =<. smain-Stery =<2
LAYOUT 402 SUMMARY LAYOUT
elements are often used as containing elements to group together sections of a page. Browsers display pages in normal flow unless you specify relative, absolute, or fixed positioning. The float property moves content to the left or right of the page and can be used to create multi-column layouts. (Floated items require a defined width.) Pages can be fixed width or liquid (stretchy) layouts. Designers keep pages within 960-1000 pixels wide, and indicate what the site is about within the top 600 pixels (to demonstrate its relevance without scrolling). Grids help create professional and flexible designs. CSS Frameworks provide rules for common tasks. You can include multiple CSS files in one page. IMAGES > Controlling size of images in CSS > Aligning images in CSS >» Adding background images Controlling the size and alignment of your images using CSS keeps rules that affect the presentation of your page in the CSS and out of the HTML markup. You can also achieve several interesting effects using background images. In this chapter you will learn how to: ® Specify the size and alignment of an image using ® Add background images to boxes ® Create image rollovers in CSS \ POUDRE D'IRIS )) AMER LEON on @ ess 3 7 } IMAGES COR ORBING Ss (Zns ©, IMAGES IN CSS eee ete chapter-16/image-sizes.html height properties in CSS, just
Magnolia
Rather than using the
Magnolia stellata using the float property to align and Magnolia soulangeana , flower quite images. There are two ways that early in the spring before the leaves open...
this is commonly achieved: 1: The float property is added to the class that was created to css represent the size of the image img.align-left { (such as the smal] class in our float: left; example). margin-right: 10px;} img.align-right { 2: New classes are created with float: right; names such as align-left or margin-left: l0px;} align-right to align the images img.medium { to the left or right of the page. width: 250px; These class names are used in height: 250px;} addition to classes that indicate the size of the image. In this example you can see the j = j -pi Magnolia is a large genus that contains over 200 flowering plant of al ign ] eft and al TIP Tg) h t oo species. It is named after French botanist Pierre Magnol, and having evolved before bees appeared the flowers were developed ta classes used to align the image. Seine oiatente woe Some magnolias, such as / Magnolia stellata and Magnolia soulangeana, flower quite early in the spring before the leaves open. Others flower in late spring or early summer, such as Magnolia grandiflora. It is also common to adda margin to the image to ensure that the text does not touch their edges. 411 IMAGES CENTERING IMAGES USING CSS : : By default, images are inline chapter-16/centering-images.html elements. This means that they
Magnolia
block-level element, there are two common ways in which you can horizontally center an image: 1: On the containing element, you can use the text-align img.align-center { property with a value of center. display: block; margin: Opx auto;} 2: On the image itself, you can img.medium { use the use the margin property width: 250px; and set the values of the left and height: 250px;} right margins to auto. You can specify class names that allow any element to be centered, in the same way that you can for the dimensions or alignment of images. The techniques for specifying image size and alignment of images can also be used with the HTML5
element, which you met on page 119. Magnolia is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre Magnol and, having evolved before bees appeared, the flowers were developed to encourage pollination by beetle. IMAGES 412 413 BACKGROUND IMAGES background-image The background-image property allows you to place an image behind any HTML element. This could be the entire page or just part of the page. By default, a background image will repeat to fill the entire box. The path to the image follows the letters url, and it is put inside parentheses and quotes. Here is the image tile used in this example. In the first example, you can see a background image being applied to an entire page (because the CSS selector applies to the element). In the second example, the background image just applies to a paragraph. If you search online, you will find lots of resources that offer background textures that you can use on your pages. Background images are often the last thing on the page to load (which can make a website seem slow to load). As with any images you use online, if the size of the file is large it will take longer to download. IMAGES chapter-16/background-image-body.html body { background-image: url("images/pattern.gif") ;} Planting Guide Magnolia Magnolia grandiflora, commonly knowns Southern magnolia‘or bull bay, isa tree of the Tamily Magnoliaceag’na itheastern United States. froomcoastal a southdo cefttral Flor ng ro Te id Oklahon 27.5 m(90 ft) ght, its a large str re th large dar anddarge wh fant flowers. Widely cult ‘ound the World,« oultivars shay on bred and marketed commercially. The timberas hard und heavy, and chapter-16/background-image-element.html pf background-image: url("images/pattern.gif") ;} Planting Guide Magnolia Magnolia grandiflora, commonly known a the Southern magnolia op bull bay is a tree ofthe family Magnohaceae native to the southeastern United States, from Coustal Virginia soutt to central Florida, and west to eastern Texts aod OKlahoma Reaching’ 27.5 m (90 ft.in height, itis a large siriking evergreen tree with large dark-green leaves and large white fragrant flowers, Widely cultivated around the css css REPEATING IMAGES background-repeat background-attachment body { background-image: url("images/header.gif"); background-repeat: repeat-x; } RESULT Planting Guide Magnolia Magnolia grandiflora, commonly known as the Southern magnolia or bull bay, is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves and laree white fragrant flowers. Widelv cultivated around the world. over a hundred body { background-image: url("images/tulip.gif"); background-repeat: no-repeat; background-attachment: fixed; } Planting Guide Magnolia Magnolia grandiflora, commonly known as the Southern magnolia or bull bay, is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south to’ventral Florida, and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 ft) in height, it isa large striking evergreen tree with large dark green leaves and large white fragrant flowers. Widely cultivated around the world, over a hundred chapter-16/background-repeat.html chapter-16/background-attachment.html The background-repeat property can have four values: repeat The background image is repeated both horizontally and vertically (the default way it is shown if the background- repeat property isn't used). repeat-x The image is repeated horizontally only (as shown in the first example on the left). repeat-y The image is repeated vertically only. no-repeat The image is only shown once. The background-attachment property specifies whether a background image should stay in one position or move as the user scrolls up and down the page. It can have one of two values: fixed The background image stays in the same position on the page. Scroll The background image moves up and down as the user scrolls up and down the page. IMAGES 414 415 BACKGROUND POSITION background-position When an image is not being repeated, you can use the background-position property to specify where in the browser window the background image should be placed. This property usually has a pair of values. The first represents the horizontal position and the second represents the vertical. left top left center left bottom center top Ceneemmcenie: center bottom right top right center right bottom APIO eee If you only specify one value, the second value will default to Genie You can also use a pair of pixels or percentages. These represent the distance from the top left corner of the browser window (or containing box). The top left corner is equal to 0% 0%. The example shown, with values of 50% 50%, centers the image horizontally and vertically. IMAGES chapter-16/background-position.html css body { background-image: url("images/tulip.gif"); background-repeat: no-repeat; background-position: center top; } Planting Guide Magnolia Magnolia grandiflora, commonly known as the Southern magnolia or bull bay, is a tree of the family Magnoliaceae native tothe southeastern United States, from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 275 m (90 ft) in height, it is a large striking evergreen tree with large dark green leaves and large white fragrant flowers. Widely cultivated around the world, over a hundred chapter-16/background-position-percentage.html css body { background-image: url("images/tulip.gif"); background-repeat: no-repeat; background-position: 50% 50%; } Planting Guide Magnolia Magnolia grandiflora, commonly known as the Southern magnolia or bull bay, is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma. Reaching 27.5 m (90 fi) in height, it is a large striking evergreen tree with large dark green leaves and large white tragrant flowers, Widély culfiyated around the world, over a hundred cultivars have been bred and marketed commercially. The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer, SHORTHAND body { background: #ffffff url("images/tulip.gif") no-repeat top right;} Planting Guide Magnolia Magnolia grandiflora, commonly known as the Southern magnolia or bull bay, is a tree of the family Magnoliaceae native to the southeastern United States, from coastal Virginia south to central Florida, and west to eastern Texas and Oklahoma, Reaching 27.5 m (90 ft) in height, it is a large striking evergreen tree with large dark greem leaves and large white fragrant flowers, Widely cultivated around the world, over a hundred cultivars have been bred and marketed commercially. The timber is hard and heavy, and has been used commercially to make furniture, pallets, and veneer, Ranunculus Ranunculus asiaticus (Persian Buttercup) is a species of buttercup (Ranunculus) native to the eastem Mediterranean region in southwestern Asia, southeastern Europe (Crete, Karpathos and Rhodes), and northeastern Africa. It is a herbaceous perennial plant growing to 45 cm tall, with simple or branched stems. The basal leaves are three-lobed, with leaves higher on the stems more deeply divided; like the stems, they are downy or hairy. The flowers are 3-5 cm diameter, variably red to pink, yellow, or white, with one to several flowers on each stem. Tulip Tulipa gesneriana I.. or "Didier's tulip" is a plant belonging to the family of Liliaceae. This species has uncertain origins, possibly from Asia, and has become naturalised in south-west Europe. Most of the cultivated species, subspecies and cultivars of tulip are derived from Tulipa gesneriana. The flower and bulb can cause dermatitis through the allergen, tuliposide A, even though the bulbs may be consumed with little ill-effect. The sweet-scented bisexual flowers appear during April and May. Bulbs are extremely resistant to frost, and can tolerate temperatures well below freezing - a period of low temperature is necessary to induce proper growth and flowering, triggered by an increase in sensitivity to the phytohormone auxin. The bulbs may be dried and pulverised and added to cereals or flour. chapter-16/background-shorthand.html background The background property acts like a shorthand for all of the other background properties you have just seen, and also the background-color property. The properties must be specified in the following order, but you can miss any value if you do not want to specify it. 1: background-color 2: background-image 3: background-repeat 4: background-attachment 5: background-position CSS3 will also support the use of multiple background images by repeating the background shorthand. Because few browsers supported this property at the time of writing, it was not commonly used. div { background: url(example-l.jpg) top left no-repeat, url(example-2.jpg) bottom left no-repeat, url(example-3.jpg) centre top repeat-x;} The first image is shown on top, with the last one on the bottom. IMAGES 416 417 IMAGE ROLLOVERS & SPRITES Using CSS, it is possible to create a link or button that changes to a second style when a user moves their mouse over it (known as a rollover) and a third style when they click on it. This is achieved by setting a background image for the link or button that has three different styles of the same button (but only allows enough space to show one of them at a time). You can see the image we are using in this example on the right. It actually features two buttons on the one image. When the user moves their mouse over the element, or clicks on it, the position of the background image is moved to show the relevant image. When a single image is used for several different parts of an interface, it is known as a sprite. You can add the logo and other interface elements, as well as buttons to the image. The advantage of using sprites is that the web browser only needs to request one image rather than many images, which can make the web page load faster. IMAGES chapter-16/image-rollovers-and-sprites.html Add to basket Framing options a.button { height: 36px; css background-image: url("images/button-sprite. jpg"); text-indent: -9999px; display: inline-block; } a#tadd-to-basket { width: 174px; background-position: Opx Opx;} a#tframing-options { width: 210px; background-position: -175px Opx;} a#tadd-to-basket:hover { background-position: Opx -40px;} a#tframing-options:hover { background-position: -175px -40px;} a#tadd-to-basket:active { background-position: Opx -80px;} a#tframing-options:active { background-position: -175px -80px;} ADD TO BASKET () ADD TO BASKET (+) ADD TO BASKET G@) | ADD TO BASKET () FRAMING OPTIONS [| FRAMING OPTIONS |_| FRAMING OPTIONS [_] | FRAMING OPTIONS, |_| W In this example, you can see two links that look like buttons. Each of the buttons has three different states. These are all represented in a single image. Because the element is an inline element, we set the display property of these links to indicate that they should be inline-block elements. This allows us to specify the width and height of each element so that it matches the size of its corresponding button. The background-position property is used to move the image in order to show the button in the right state. When the user hovers over a link, the :hover pseudo-class has arule that moves the background-position of the image to show a different state for that button. Similarly, when the user clicks on the link, the :active pseudo- class has a rule to show the third state for that button. Touch screen devices will not change a link's state when the user hovers over it, as the screens do not yet have a way to tell when the user is hovering. However, they will change their appearance when the user activates them. IMAGES A18 CSS3: GRADIENTS background-image CSS3 is going to introduce the ability to specify a gradient for the background of a box. The gradient is created using the background-image property and, at the time of writing, different browsers required a different syntax. Since it is not supported by all browsers, it is possible to specify a background image for the box first (which would represent the gradient) and then provide the CSS alternatives for browsers that support gradients. On this page, we are focusing on linear gradients. You can see that in order to create a linear gradient, we need to specify two colors (that the gradient is between). Some browsers allow you to specify the angle of the gradient, or even different types of gradients (such as radial gradients), but support is not as widespread as that for linear gradients. IMAGES chapter-16/gradient.html dtgradient { /* fallback color */ background-color: #66cccc; /* fallback image */ background-image: url(images/fallback-image.png) ; /* Firefox 3.6+ */ background-image: -moz-linear-gradient (#336666, d#66cccc); /* Safari 4+, Chrome 1+ */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66cccc), to (#336666) ); /* Safari 5.1+, Chrome 10+ */ background-image: -webkit-linear-gradient (#336666, d#66cccc); /* Opera 11.10+ */ background-image: -o-linear-gradient (#336666, d##66cccc); height: 150px; width: 300px;} css RESULT CONTRAST OF BACKGROUND IMAGES If you want to overlay text on a background image, the image must be low contrast in order for the text to be legible. HIGH CONTRAST The majority of photographs have quite a high contrast, which means that they are not ideal for use as a background image. LOW CONTRAST A low contrast background image makes the text easier to read. Image editing applications such as Photoshop and GIMP have tools that allow you to manually adjust your images to have lower contrast. SCREEN Re tee A screen “ added to a high % contrast image makes the text easier to read. | To overlay text on an image with high contrast, you can place a semi-transparent background color (or "screen") behind the text to improve legibility. IMAGES 420 GARNIER:LAMOUREUXs C” CHART ¥ Su sseur (ee. — ~ Gul ’ 3 USO Lite CPiitn, / | fo Bi es L/ /é y) ~ y 7 > 5 fos AA Ye ss — SY aly Ail) GIRAUD-DUQUESNE @ Safari File Edit View History Bookmarks Develop Window Help Images |< a + | @ http: / /www.htmlandessbook.com/code/chapter-16/example.htm! Galerie Botanique Here is a selection of antique botanical prints held in our collection. © Helianthus ay, rs >a * Ae — e L ; cae MacBook Pro EXAMPLE IMAGES This example demonstrates how to use CSS to create a simple image gallery layout. A background texture is applied to the whole page by repeating an image with the texture behind the element. A repeating background image is sometimes referred to as wallpaper. The content of the page is put inside a element whose class is wrapper. This is used to fix the width of the page to 720 pixels. Its left and right margins are set to auto to center it in the middle of the screen. The images sit inside an HTML5
element, and their captions are provided in the
