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 2 years 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.
Create 6 tags with text inside them (in a valid HTML page,) color each differently. All...
Create 6 tags with text inside them (in a valid HTML page,) color each differently. All show up on the page at this point... it's better to try to have everything upfront and in the open 1st and later have them hide, hover, or whatever interaction they will do. See the video for the text, don't bother matching the colors in the video. Validate the HTML. Bugs multiply as you make the page more complex; a CSS problem could actually...
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...
Describe three major concepts in each of the TranscationalLeadership Style. (Major Concepts) Include an application section...
Describe three major concepts in each of the TranscationalLeadership Style. (Major Concepts) Include an application section for the leadership style. In this section describe how you would apply these major concepts in your practice. Address issues of diversity and include other stakeholders, if applicable, in your discussion. (From Theory to Practice)
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 a simple PHP script. In your script use all of the following: HTML, Javascript, and...
Write a simple PHP script. In your script use all of the following: HTML, Javascript, and PHP.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT