New Perspectives On Html5, Css3, And Javascript, Loose-leaf Version
6th Edition
ISBN: 9781337685764
Author: Patrick M. Carey
Publisher: Cengage Learning
expand_more
expand_more
format_list_bulleted
Question
Chapter 5, Problem 17RA
Program Plan Intro
To create a media query for tablet screen devices with maximum width of 481 pixels with contents of horizontal navigation list at the top of the page displayed in columns. Add a style rule to the media query that sets height of ul elements to 160 pixels.
Expert Solution & Answer
Trending nowThis is a popular solution!
Students have asked these similar questions
Go to the Horizontal Navigation List Styles section. Karen has added a second navigation list that she wants to display horizontally. For all list items within the horizontal navigation list, create a style rule that displays the items as blocks with a width of 12.5% floated on the left margin.
Step 2
Below the tablet media query, add a new comment with the text, Media Query for Desktop Viewport. Below the comment, add a new media query that targets a screen with a minimum width of 769px and print.
Within the desktop media query, add a new comment with the text, Desktop Viewport: Style rule for header. Below the comment, add a style rule for the header selector that sets the padding to 2%.
Within the desktop media query, below the header style rule, add a new comment with the text, Desktop Viewport: Style rules for nav area. Below the comment, add a style rule for the nav li a selector that sets the padding to 0.5em on the top and bottom and 1.5em on the left and right.
Add another style rule for the nav li a selector that uses the hover pseudo-class and sets the color to #373684 and the background-color to #e5e9fc.
2
Within the desktop media query, below the nav area style rules, add a new comment with the text, Desktop Viewport: Style rules…
Create a style rule for the section element with the id "sub" that displays that element as a grid consisting of three columns of equal width by repeating the column width 1fr three times.
Chapter 5 Solutions
New Perspectives On Html5, Css3, And Javascript, Loose-leaf Version
Ch. 5.2 - Prob. 8QCCh. 5.2 - Prob. 9QCCh. 5.3 - Prob. 8QCCh. 5.3 - Prob. 9QCCh. 5 - Prob. 1RACh. 5 - Prob. 2RACh. 5 - Prob. 3RACh. 5 - Prob. 4RACh. 5 - Prob. 5RACh. 5 - Prob. 6RA
Ch. 5 - Prob. 7RACh. 5 - Prob. 8RACh. 5 - Prob. 9RACh. 5 - Prob. 10RACh. 5 - Prob. 11RACh. 5 - Prob. 12RACh. 5 - Prob. 13RACh. 5 - Prob. 14RACh. 5 - Prob. 15RACh. 5 - Prob. 16RACh. 5 - Prob. 17RACh. 5 - Prob. 18RACh. 5 - Prob. 19RACh. 5 - Prob. 20RACh. 5 - Prob. 21RACh. 5 - Prob. 22RACh. 5 - Prob. 23RACh. 5 - Prob. 24RACh. 5 - Prob. 25RACh. 5 - Prob. 26RACh. 5 - Prob. 1CP1Ch. 5 - Prob. 2CP1Ch. 5 - Prob. 3CP1Ch. 5 - Prob. 4CP1Ch. 5 - Prob. 5CP1Ch. 5 - Prob. 6CP1Ch. 5 - Prob. 7CP1Ch. 5 - Prob. 8CP1Ch. 5 - Prob. 9CP1Ch. 5 - Prob. 10CP1Ch. 5 - Prob. 11CP1Ch. 5 - Prob. 12CP1Ch. 5 - Prob. 13CP1Ch. 5 - Prob. 14CP1Ch. 5 - Prob. 15CP1Ch. 5 - Prob. 16CP1Ch. 5 - Prob. 17CP1Ch. 5 - Prob. 18CP1Ch. 5 - Prob. 19CP1Ch. 5 - Prob. 1CP2Ch. 5 - Prob. 2CP2Ch. 5 - Prob. 3CP2Ch. 5 - Prob. 4CP2Ch. 5 - Prob. 5CP2Ch. 5 - Prob. 6CP2Ch. 5 - Prob. 7CP2Ch. 5 - Prob. 8CP2Ch. 5 - Prob. 9CP2Ch. 5 - Prob. 10CP2Ch. 5 - Prob. 11CP2Ch. 5 - Prob. 12CP2Ch. 5 - Prob. 13CP2Ch. 5 - Prob. 14CP2Ch. 5 - Prob. 15CP2Ch. 5 - Prob. 16CP2Ch. 5 - Prob. 17CP2Ch. 5 - Prob. 18CP2Ch. 5 - Prob. 19CP2Ch. 5 - Prob. 20CP2Ch. 5 - Prob. 21CP2Ch. 5 - Prob. 1CP3Ch. 5 - Prob. 2CP3Ch. 5 - Prob. 3CP3Ch. 5 - Prob. 4CP3Ch. 5 - Prob. 5CP3Ch. 5 - Prob. 6CP3Ch. 5 - Prob. 9CP3Ch. 5 - Prob. 2CP4
Knowledge Booster
Similar questions
- Step 20: Mobile Styles When the user views the page on a mobile device, we don't want the label elements to appear to the left of the input elements because that takes up too much horizontal space. We need to adjust our layout to be more vertical. Create a media query for screens with a maximum width of 767 pixels. Inside the media query, add a rule for any label elements inside the form element with the id registration that removes the float, sets the width to 100%, and aligns the text to the left. Add a rule inside the media query for any input element inside the form element with the id registration that removes the float and sets the width to 100%. Because we set specific widths for the input elements that appear on a single row, we need to override those settings in the mobile view. Add a rule inside the media query for the input elements with the ids city, state, and zip inside the form element with the id registration that sets the maximum width to 100%. Add a rule…arrow_forwardDelivery Info Next within the form, create a field set with the ID deliveryInfo. Within this field set, add the following: A legend containing the text Delivery Options. A text area box with the ID addressBox and field name of delAddress containing the placeholder text Enter delivery address. A label containing the text Delivery Time (leave blank for earliest delivery) associated with the delBox control. Add an input element with the ID delBox and field name delTime for storing delivery time values. Use a data type of “time” for the control. Pickup Info Next within the web form, create a field set with the ID pickupInfo containing the following information for pickup orders: A legend containing the text Pickup Options. A label containing the text Pickup Time (leave blank for earliest pickup) associated with pickupBox control. Add an input element with the ID pickupBox and field name pickupTime for storing time values. Add the disabled attribute to the tag to disable this control…arrow_forwardAdd the following comments to the tablet media query: Tablet Viewport: Show tab-desk class, hide mobile class Tablet Viewport: Style rules for nav area Add the following style rules below the "Show tab-desk class, hide mobile class" comment: Style rule for the tab-desk class selector that sets the display to a block. Style rule for the mobile class selector that sets the display to none.arrow_forward
- Tablet Media Query Next, you’ll define the layout for tablet and desktop devices. Create a media query for screen devices whose width is 481 pixels or greater. Within this media query, display the page body as a flexbox in row orientation with wrapping. Sofia doesn’t want the links paragraph displayed for tablet and desktop devices. Complete the media query for tablet and desktop devices by hiding this paragraph. Tablet Element Styles The page body has four children: the header, the footer, the article element, and the aside element. The article and aside elements will share a row with more space given to the article element. Set the growth, shrink, and basis values of the article element to 2, 1, and 400 pixels. Set those same values for the aside element to 1, 2, and 200 pixels. Tablet Navigation Lists For tablet and desktop devices, the top navigation list should be displayed as a horizontal row with no wrapping. Enter a style rule to display the top navigation list ul as a flexbox…arrow_forwardGo to the Outline Styles section. In this section, you’ll format the course outline that appears on the page’s left column. The navigation list in this outline has the ID outline. Create a style rule for this navigation list that sets the text color to rgb(51, 51, 51) and the font size to 0.8em.arrow_forwardSwitch the ClientEntry form to Design view, and expand the Form Footer section to about 75" tall. Add a text box to the top right corner of the Footer section, and enter the formula =Count([ClientID]) as its control source. Enter Total Clients as the label name. (Hint: if necessary, change the width of the label so that the full text is visible). Add another text box directly below the one you just added, and enter the formula =SUM([MonthlyFee]) as the control source and Total Fees as its label name. Modify the Total Fees text box to use Currency format, then switch the ClientEntry form to Form view and confirm it matches Figure 3 below. Save the form. In the italic bold section that is the part I am having trouble with. For some reason the property sheet does not have the Currency Format in there at all. So, I am not sure if I did something wrong or what. Can you help. I am provind an image of the project. In the Total Fees text box is where I am stumped.arrow_forward
- Go to the Navigation Tabs List Styles section. Amy has created a navigation list with the class name tabs that appears at the top of the page with the body header. Create a style rule for the body > header nav.tabs selector that changes the background to the image files f_back1.png with no-repeat, centered horizontally and vertically within the element and sized to cover the entire navigation list. (Hint: to cover the entire navigation list use property: background-size: cover; )arrow_forwardQUESTION: Row & Page Header Styles Go to the Row Styles section. Karen has placed all elements that should be treated as grid rows in the row class. For every element of the row class, create a style rule that expands the element to cover any floating content within the element. (Hint: Use the technique shown in the tutorial that employs the after pseudo-element.) Go to the Page Header Styles section. In this section, you will create styles for the content of the body header. Create a style rule for the logo image within the body header that displays the image as a block with a width of 70% of the header, floated on the left margin. The header also contains a navigation list that Karen wants to display vertically. Create a style rule for the nav element within the body header that: floats the navigation list on the left, sets the size of the left and right padding to 2%, sets the width of the navigation list to 30% of the width of the header. The hypertext links in the…arrow_forwardQUESTION: Row & Page Header Styles Go to the Row Styles section. Karen has placed all elements that should be treated as grid rows in the row class. For every element of the row class, create a style rule that expands the element to cover any floating content within the element. (Hint: Use the technique shown in the tutorial that employs the after pseudo-element.) Go to the Page Header Styles section. In this section, you will create styles for the content of the body header. Create a style rule for the logo image within the body header that displays the image as a block with a width of 70% of the header, floated on the left margin. The header also contains a navigation list that Karen wants to display vertically. Create a style rule for the nav element within the body header that: floats the navigation list on the left, sets the size of the left and right padding to 2%, sets the width of the navigation list to 30% of the width of the header. The hypertext links in the…arrow_forward
arrow_back_ios
arrow_forward_ios
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
Np Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:Cengage
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage