New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN: 9781305503922
Author: Patrick M. Carey
Publisher: Cengage Learning
expand_more
expand_more
format_list_bulleted
Question
Chapter 3, Problem 6CP1
Program Plan Intro
To create a style rule to expand the element to cover floating content within the element.
Expert Solution & Answer
Trending nowThis is a popular solution!
Students have asked these similar questions
I am having an issue I am not sure what error I have with this code when I execute it.
Here are the instructions for the code:
Column Styles
Next, you’ll format the grid columns. Go to the Column Styles section. Create a style rule to float all div elements whose class value starts with “col-” on the left margin. Set the padding around all such elements to 2%. Finally, apply the Border Box Sizing model to the content of those elements.(Note: Remember to use web extensions to provide support for older browsers.)
In the same section, create style rules for div elements with class names .col-1-1, .col-1-2, .col-1-3, .col-2-3, .col-1-4, and .col-3-4 to set their widths to 100%, 50%, 33.33%, 66.67%, 25%, and 75% respectively.
Here is my code:
div[class^="col-"]{
float:left;
padding: 2%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.col-1-1 {width: 100%;}
div.col-1-2 {width: 50%;}
div.col-1-3 {width: 33.33%;}
div.col-2-3 {width:…
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.
QUESTION:
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…
Chapter 3 Solutions
New Perspectives on HTML5, CSS3, and JavaScript
Ch. 3.1 - Prob. 1QCCh. 3.1 - Prob. 2QCCh. 3.1 - Prob. 3QCCh. 3.1 - Prob. 4QCCh. 3.1 - Prob. 5QCCh. 3.1 - Prob. 6QCCh. 3.1 - Prob. 7QCCh. 3.1 - Prob. 8QCCh. 3.1 - Prob. 9QCCh. 3.2 - Prob. 1QC
Ch. 3.2 - Prob. 2QCCh. 3.2 - Prob. 3QCCh. 3.2 - Prob. 4QCCh. 3.2 - Prob. 5QCCh. 3.2 - Prob. 6QCCh. 3.2 - Prob. 7QCCh. 3.2 - Prob. 8QCCh. 3.2 - Prob. 9QCCh. 3.3 - Prob. 1QCCh. 3.3 - Prob. 2QCCh. 3.3 - Prob. 3QCCh. 3.3 - Prob. 4QCCh. 3.3 - Prob. 5QCCh. 3.3 - Prob. 6QCCh. 3.3 - Prob. 7QCCh. 3 - Prob. 1RACh. 3 - Prob. 2RACh. 3 - Prob. 3RACh. 3 - Prob. 4RACh. 3 - Prob. 5RACh. 3 - Prob. 6RACh. 3 - Prob. 7RACh. 3 - Prob. 8RACh. 3 - Prob. 9RACh. 3 - Prob. 10RACh. 3 - Prob. 11RACh. 3 - Prob. 12RACh. 3 - Prob. 13RACh. 3 - Prob. 14RACh. 3 - Prob. 15RACh. 3 - Prob. 16RACh. 3 - Prob. 1CP1Ch. 3 - Prob. 2CP1Ch. 3 - Prob. 3CP1Ch. 3 - Prob. 4CP1Ch. 3 - Prob. 5CP1Ch. 3 - Prob. 6CP1Ch. 3 - Prob. 7CP1Ch. 3 - Prob. 8CP1Ch. 3 - Prob. 9CP1Ch. 3 - Prob. 10CP1Ch. 3 - Prob. 11CP1Ch. 3 - Prob. 12CP1Ch. 3 - Prob. 13CP1Ch. 3 - Prob. 14CP1Ch. 3 - Prob. 15CP1Ch. 3 - Prob. 16CP1Ch. 3 - Prob. 17CP1Ch. 3 - Prob. 18CP1Ch. 3 - Prob. 19CP1Ch. 3 - Prob. 20CP1Ch. 3 - Prob. 1CP2Ch. 3 - Prob. 2CP2Ch. 3 - Prob. 3CP2Ch. 3 - Prob. 4CP2Ch. 3 - Prob. 5CP2Ch. 3 - Prob. 6CP2Ch. 3 - Prob. 7CP2Ch. 3 - Prob. 8CP2Ch. 3 - Prob. 9CP2Ch. 3 - Prob. 10CP2Ch. 3 - Prob. 11CP2Ch. 3 - Prob. 12CP2Ch. 3 - Prob. 13CP2Ch. 3 - Prob. 14CP2Ch. 3 - Prob. 15CP2Ch. 3 - Prob. 16CP2Ch. 3 - Prob. 17CP2Ch. 3 - Prob. 18CP2Ch. 3 - Prob. 19CP2Ch. 3 - Prob. 20CP2Ch. 3 - Prob. 1CP3Ch. 3 - Prob. 2CP3Ch. 3 - Prob. 3CP3Ch. 3 - Prob. 4CP3Ch. 3 - Prob. 5CP3Ch. 3 - Prob. 6CP3Ch. 3 - Prob. 7CP3Ch. 3 - Prob. 8CP3Ch. 3 - Prob. 9CP3Ch. 3 - Prob. 10CP3Ch. 3 - Prob. 11CP3Ch. 3 - Prob. 12CP3Ch. 3 - Prob. 13CP3Ch. 3 - Prob. 14CP3Ch. 3 - Prob. 1CP4Ch. 3 - Prob. 2CP4Ch. 3 - Prob. 3CP4Ch. 3 - Prob. 4CP4Ch. 3 - Prob. 5CP4Ch. 3 - Prob. 6CP4
Knowledge Booster
Similar questions
- QUESTION: 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_forwardCreate 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.arrow_forwardHelp me complete this task. Add the following style rules for the form elements. Create a style rule for the fieldset and input elements that sets the bottom margin to 2%. Create a style rule for the fieldset legend that sets the font-size to 1.25em and makes the font bold. Create a style rule for the label that sets the display to block and sets padding-top to 3%. Create a style rule for the btn class selector that removes the border, sets the top and bottom margin to zero and the left and right margin to auto, sets the display to a block, sets the padding to 5%, sets the background-color to 003399, sets the font-size to 1.25em, sets the border-radius to 10px, and sets the color to white (fff). --my css /* Style for body specifies a background color */ body { background: linear-gradient(to top right, #fff 0%, #6699ff 100%) no-repeat fixed center; font-family: Geneva, Arial, sans-serif; } /* Style for the container element */ #container { width: 90%; margin: 0 auto; }…arrow_forward
- Display the section element as a flexbox. Set the flow of items within the flexbox to go in row order with reverse wrapping so that the first item (Facebook) appears in the bottom-left corner and the last item (E-mail) appears in the top-right corner. Complete this task in conjunction with the following task: "Apply flex layout styles to card class's div elements".arrow_forwardIn the contact.html file, remove the text, Phone Number:, from the first paragraph element within the main div element. Wrap the phone number within an anchor element that links to the phone number. Add a class attribute with the value tel-link to the parent paragraph element that contains the phone number link. Add a class attribute with the value email-link to the anchor element that links to the email address within the main element.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
- Finally, within the form, add a div element containing a submit button displaying the text Begin Building your Order. (Hint: To code a submit button, use the input element and set its type attribute to "submit". You can also add a value attribute and set its value to the text you want to show on the button. Example: <input type="submit" value="This is text shown on the button">)arrow_forwardCLL question 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.arrow_forwardTablet 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_forward
- Add 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_forwardCreate table as below and shading the first row. Insert an Octagon and write your name in the center Day / Sunday Monday Tuesday Wednesday | Computer | Science Friday Period I Period II | Period IV | Period V |Computer English |Computer | Science English Computer| Math Science |English Computer | Math Math Science English Math Math Science |English > Create margin at the top & bottom 1.1 inch and right & left 1.5 inch > Create landscape orientation & A4 paper size > Insert Period II column after Period II > Insert Thursday row bellow Wednesday row > Insert page number center align and Arial font > Insert watermark "Hello world" > Table font "Times new roman" and 13 sizearrow_forwardLook at the code given in table1, Write style rules for displaying the flexboxitems in the order shown in Figure 1. Where thewidth and height of each flexbox item is 50px and40px respectively. Each item has a 1px solid black color border and for the background color, the valueof the color is #4682B4,arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
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