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.2, Problem 3QC
Program Plan Intro
To create a style rule to expand all grid rows(proposed under class name container) around their floating columns.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Create an interactive sign-up sheet.● Make the sign-up sheet interactive for the user.● Add a selection element to ask the user for their gender. Add the options “Male,” “Female,” and “Prefer not to mention.”● Use onblur and onfocus to add red borders to the input elements when the user leaves without any input, and a green border if a value is typed and the user is done with the input element.● Upon submission of the form, print all the information that the user has provided on a div or p tag at the bottom of the page.● Use fieldset and legend tag to separate the input part from the output part of the form.● Include a reset button to clear users input and also the information displayed at the bottom of the page.● Feel free also to design your own version and add other features.
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:…
<style>// selecting required elementconst element = document.querySelector(".pagination ul");let totalPages = 10;let page = 2;
//calling function with passing parameters and adding inside element which is ul tagelement.innerHTML = createPagination(totalPages, page);function createPagination(totalPages, page){ let liTag = ''; let active; let beforePage = page - 1; let afterPage = page + 1; if(page > 1){ //show the next button if the page value is greater than 1 liTag += `<li class="btn prev" onclick="createPagination(totalPages, ${page - 1})"><span><i class="fas fa-angle-left"></i> Prev</span></li>`; }
// how many pages or li show before the current li if (page == totalPages) { beforePage = beforePage - 2; } else if (page == totalPages - 1) { beforePage = beforePage - 1; } // how many pages or li show after the current li if (page == 1) { afterPage = afterPage + 2; } else if (page == 2) { afterPage = afterPage +…
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
- change below code to the example photo page. the photo is just example but the layout should be like that @extends('base') @section('main') <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg"> <div class="row"> <div class="col-sm-12"> @if(session()->get('success')) <div class="alert alert-success text-center"> {{ session()->get('success') }} </div> @endif </div> <div class="col-sm-12"> <br /> <h3 class="display-5 text-center">Room List</h3> <table class="table table-striped">…arrow_forwardTask Instructions Add the Category field to the Rows area of the PivotTable Fields pane. 4:44 PM 3/25/2020arrow_forwardMake sure that the heading that starts with “Children’s Lessons” does not float to the right of the image by clearing the float at that element. In the ski.html file, add the following attribute/value pair to the opening tag that marks the Children’s Lessons heading: class="clearfloat"arrow_forward
- Your completed assignment should contain all of the following: ■ Your color scheme's name should be set as the table's header. It should have one or more font styles applied to it to differentiate it from other text in the table. ▪ You should list each color name, with each cell having its color set as its background color. ■ Include cells that give each color's hex value. ■ Include cells that give each color's rgb value. ▪ Include cells that give each color's hsl value. ▪ Your HTML table should be logically and properly constructed.arrow_forwardCreate a form having number of elements (textboxes, Radio button, Checkboxes, and so on)Write javascript code to count the number of elements in a form.arrow_forwardIt allows to change the appearance of elements in order to rotate,skew...etc as desired. transform animate keyframe transitionarrow_forward
- Q2: Create 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 IVv | Period V |Science Computer | Math Math English |Computer | English Computer | Science English Computer | 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 III 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_forwardFinally, 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_forwardAssuming there is a class that uses JavaFX to build a GUI, write the header for the method that acts as the entry point for the class. Assume that the default stage is named primaryStage. (Note: this is not the main class.) (Do not include the opening brace for the class.) Use proper spacing per the course style guide. Do not include additional spaces at the beginning or end.arrow_forward
- For the equation >y =2x+1 1. Createx vector 0 to 10 with colon operator for each 1 point. 2. Create y vector with formula 3.Plot xy graphic. Graphic must be dotted and magenta. 4. Add title, xlabel, y label and gridarrow_forwardImagine that an xhtml document contains the following hyperlink tag I am Seven. When the link text (Seven) is clicked, the servlet with the URL pattern /process is called. Rewrite the code to instead use a form that submits to the same servlet to produce the exact same response using hidden form elements for any form parameters. The form should contain a submit button with the button text Seven. The form method should be get (case sensitive answer).arrow_forwardI need help with this, please. Thanks Develop an Expand/Collapse application using JQUERYIn this exercise, you’ll develop an application that displays the first paragraph of text for three topics and then lets the user click a link to expand or collapse the text for each topic.2. Review the HTML. Note that each topic consists of two div elements followed by an <a> element. Also, note that a class named “hide” is assigned to the second div element of each topic. Then, review the style rule for this class.3. In the JavaScript file, add an event handler for the ready() event method.4. Within the ready() event method, code an event handler for the click() event method of the <a> elements. This event handler should start by preventing the default action of the link and storing the clicked link in a constant. Then, it should use the toggleClass() method to add or remove the “hide” class from the div element above the link element that’s clicked depending on whether that class is…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