Question

In: Computer Science

(Dimension the following html application describe positioning, dimensions of and color of all of the section...

(Dimension the following html application describe positioning, dimensions of and color of all of the section elements. ( ONLY DESCRIBE THE SECTION ELEMENTS IN DETAIL)

For A) Everything as given in the HTML and CSS with section height 675 excluded ( commented out as given)

  1. With the section height of 675 uncommented ( included)

<html>

  <head>

    <meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="square12.css">

  <title>Squarespace layout</title>

  </head>

  <body>

    <nav></nav>

    <header></header>

    <section>

      <!-- main paragraph -->

      <p></p>

      <!-- Two column-type things -->

      <div id="flex-container">

        <div class="col"></div>

        <div class="col"></div>

        <div class="col"></div>

        <div class="col"></div>

      </div>

    </section>

    <footer></footer>

  </body>

</html>

                               Square12.css

body {

  margin: 0;

}

nav {

  background-color: royalblue;

  height: 75px;

}

header {

  background-color: lightskyblue;

  height: 400px;

}

section {

  background-color: orange;

  margin: 75px 100px;

/* height:675px; */

  

}

footer {

  background-color: black;

  height: 100px;

}

p {

  background-color: khaki;

  height: 275px;

  margin-bottom: 75px;

}


div.col { background-color: tomato;

  border: 2px solid black;

  height:50px;}

#flex-container{ height:300px;

background-color:green;}


Solutions

Expert Solution

The height of nav element is 75px.

The height of the header element is 400px.

The height of the section element is not mentioned, but when we mentioned the height of the section element then the height of the section element is changing i.e change the height of section element to 1000px then you can see the extra space is added to the bottom of background color orange.

The height of the footer element is 100px.

The height of p tag is 275px.

The height of all the div with class col is 50px.

and the height of the main div with class flex container is 300px.

So the summary is as you change the height of the pixel from one value to another you see some difference.

You can see it by simply changing the height of one element at a time, and then see the output.

Below I am adding the image of the output when I change the height of the section element to 1000px.

If youneed more help then please comment below so that I can help you more.

Thank you...

venereology answered 1 year ago
Next > < Previous

Related Solutions

Computer science!: (Dimension the following html application and describe positioning, dimensions of, and color of all...
Computer science!: (Dimension the following html application and describe positioning, dimensions of, and color of all of the section elements. (DESCRIBE ONLY THE SECTION ELEMENTS IN DETAIL) For A) Everything as given in the HTML and CSS with section height 700 excluded ( commented out as given) With a section height of 750   included <html> <head>     <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="square12.css"> <title>Squarespace layout</title> </head>      <body>     <nav></nav>     <header></header>     <section>       <!-- main paragraph -->      ...
q: Given the following HTML for a table, put all these questions into one application (use...
q: Given the following HTML for a table, put all these questions into one application (use css) a)   Modify the html to create another column called Assessment, and then modify the html to extend the data in the rows ( you may use arbitrary numbers for the data items in the td elements) b)   Make all table text elements blue using either css or html modification c)   Make the background color of the columns alternate between pink and yellow, <!DOCTYPE...
Identify and describe the Eight Dimensions of Organizational Capacity for Change (OCC). For each Dimension, discuss...
Identify and describe the Eight Dimensions of Organizational Capacity for Change (OCC). For each Dimension, discuss its significance to the organization and whether or not you believe it is essential to OCC. Support your positions with examples. please a diffrent answer other than what's already in here
Identify and describe the Eight Dimensions of Organizational Capacity for Change (OCC). For each Dimension, discuss...
Identify and describe the Eight Dimensions of Organizational Capacity for Change (OCC). For each Dimension, discuss its significance to the organization and whether or not you believe it is essential to OCC. Support your positions with examples.
QUALITY MANAGEMENT Describe in detail the application of service quality dimensions (Parasuraman, Zeithamel, and Berry) :...
QUALITY MANAGEMENT Describe in detail the application of service quality dimensions (Parasuraman, Zeithamel, and Berry) : i. in providing high-quality services ii. in meeting/exceeding customer expectations (through service quality gap)
Given the html below, create css to produce the following illustrated color page output: Red for...
Given the html below, create css to produce the following illustrated color page output: Red for outer paragraph and outer list Green and italic for first inner div paragraph, green for second div paragraph, blue for inner list HTML File <html> <head>       <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body>              <p>     I'm a paragraph, what color am I ?      </p>    <ul>      <li id = "fix"> I'm a list item;what color am I? </li>        </ul> <div class = "central1"> <p class ="above">   I'm...
Section 28.4 Describe the three key characteristics shared by all the major groups of mollusks. Describe...
Section 28.4 Describe the three key characteristics shared by all the major groups of mollusks. Describe the following classes of mollusks. Give examples of each. Bivalves: Gastropods: Cephalopods: How do cephalopods differ from other mollusks in terms of their nervous system, reproduction, locomotion, and mode of obtaining food? Describe the defining characteristics of annelids and distinguish between the two classes of annelids. Provide examples of each.
Write all application functional specification for the following application, just the functional specification thanks. Develop a...
Write all application functional specification for the following application, just the functional specification thanks. Develop a shopping cart application (think of a simplified version of amazon.com). When the application begins, it shows a login window. Depending who logs in, a customer or the seller, the application performs different functions. Minimal Functional Specification: Here is a draft version of a minimal functional specification. Students have to adapt it, extend it, and make it their own: A customer logs in with a...
Find the dimensions of the following linear spaces. (a) The space of all 3×4 matrices (b)...
Find the dimensions of the following linear spaces. (a) The space of all 3×4 matrices (b) The space of all upper triangular 5×5 matrices (c) The space of all diagonal 6×6 matrices
Which of the following is the target AND application of fluoroquinolones? (select all that apply) They...
Which of the following is the target AND application of fluoroquinolones? (select all that apply) They are antiviral compounds inhibiting reverse transcriptase They are inhibitors of bacterial topoisomerase, thus used against bacteria They inhibit transpeptidase enzymes, they are used as antibacterials They are inhibitors of kinases and used against cancer
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT