New Perspectives on HTML and CSS: Brief
6th Edition
ISBN: 9781133387268
Author: Patrick M. Carey
Publisher: Cengage Learning US
expand_more
expand_more
format_list_bulleted
Question
Chapter 3.2, Problem 5QC
Program Plan Intro
To write a CSS style rule to set the width of columns to 25% of the row width that is belonging to the span-4 class.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook 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:…
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…
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 3 Solutions
New Perspectives on HTML and CSS: Brief
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_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_forwardWhen you set the margin left and margin right values to auto, then the element will be positioned at the bottom O right left centerarrow_forward
- Look 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_forwardTask Instructions Add the Category field to the Rows area of the PivotTable Fields pane. 4:44 PM 3/25/2020arrow_forwardWrite a style rule to display all <blockquote> elements belonging to the “reviews” class in italic and indented 3em:arrow_forward
- "As per Bartleby rules, we can answer first 3 MCQ" there are 3 questions ,please answer all thanks !arrow_forwardFor the <p> element, set text-align to center. p { }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_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_forwardAdd the table body section and within the table body, create the layout of the crossword puzzle subject to the following conditions: The table will contain 9 rows and 8 columns. Within each row will be a number of table data cells. If the cell is a blank cell shown in Figure 6–49, assign it the class name blank. If a blank cell covers multiple rows and/or columns, make that cell a spanning cell and adjust the number of cells in subsequent rows and columns accordingly to preserve the table layout. Several cells contain numbers that will be used as crossword puzzle clues. Number the appropriate cells from 1 up to 26 to match the layout in Figure 6–49.arrow_forwardGlobal Variable Go to the jpf_hitori.js file in your editor. Directly below the comment section, declare the global allCells variable, which you will use to store an array of the puzzle cells in the Hitori table. Do not define a value for the variable yet. JavaScript Functions Insert a command to run the startUp() function when the page is loaded by the browser. Add the startUp() function, which displays the contents of Puzzle 1 after the page is loaded and sets up the initial event handlers. Within the function, add the following commands: Change the inner HTML of the element with the ID, “puzzleTitle” to the text “Puzzle 1”. Call the drawHitori() function using the hitori1Numbers, hitori1Blocks, and hitori1Rating variables as parameter values and store the HTML code returned by the function in the inner HTML of the page element with the ID “puzzle”. Declare a variable named puzzleButtons referencing the page elements with the class name “puzzles”. Loop through the puzzleButtons…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:CengageCOMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L
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
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L