ZuoTi.Pro
Question

Write the CSS rules that produce the page in the following figure. The layout is fixed with width 500px and centered.

The HTML body is already given to you

Write the CSS rules that produce the page in the following figure. The layout is fixed with width 500px and centered. The HTM

HTML document

<!DOCTYPE html>

<html>

<head>

<title>IT404</title>

</head>

<body>

<div id="wrapper">

<div id="header"><h1>IT404 Final Exam</div>

<div id="main">Today is Monday 23/12/2019.<br> Final exam day.</div>

<div id="extras"> Quiz #1<br>Quiz #2</div>

<div id="footer">Saudi Electronic University 2018</div>

</div>

</body>

</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Answer:-

<!DOCTYPE html>

<html>

<head>

<title>IT404</title>

<style type="text/css">

#wrapper{

width:500px;

}

#header{

background-color:gray;

font-family:Times New roman;

height:50px;

}

  

#main{

width:60%;

background-color:yellow;

height:150px;

font-family:Times New roman;

float:left;

margin-top:10px;}

  

#extras{

width:35%;

background-color:pink;

height:150px;

font-family :Times New roman;

float:left;

margin-left:10px;

margin-top:10px;

}

  

#footer{

height:50px;

background-color:gray;

font-family:Times New roman;}

</style>

</head>

<body>

<div id="wrapper">

<div id="header"><h1>IT404 Final Exam</div>

<div id="main">Today is Monday 23/12/2019.<br> Final exam day.</div>

<div id="extras"> Quiz #1<br>Quiz #2</div>

<div id="footer">Saudi Electronic University 2018</div>

</div>

</body>

</html>

0 0
Add a comment
Know the answer?
Add Answer to:
Write the CSS rules that produce the page in the following figure. The layout is fixed...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • HTML css When i refresh the page, the picture doesnt move at all for #i1 i...

    HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...

  • I cant seem to get the CSS at the bottom of this HTML to work. <!doctype...

    I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...

  • HTML and css using notepad++ WHen you run the code, you will see a horizontal menue...

    HTML and css using notepad++ WHen you run the code, you will see a horizontal menue with several options. I want a small horizontal line between each option. I also want that done using div inside a div. Thank you <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px;...

  • finished the web page ********************************************************* .js // I've added a span with the id "count" which...

    finished the web page ********************************************************* .js // I've added a span with the id "count" which you can use to modify // the number of clicks on the page // you can do this by getting the value; incrementing it and then // modifying the value of the span function changeColor(){     const colors = ['red', 'green', 'blue', 'cyan', 'yellow', 'black', 'silver', 'tan'];     // Choose a random float from [0, 1) the multiply by length to get random index     // Math.floor()...

  • Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...

    Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html> <head> <title>TABLE with STYLE SHEET</title> <meta charset="utf-8" /> <meta name="description" content="Godaddy Webpage original" /> <link rel = "stylesheet" href="GoDaddy_assignment_1.css"> <body> <img src= "GoDaddy.png"/> <p>Welcome to:<strong>webhamster.com</strong></br> This web page is parked<strong>Free</strong>courtesy of <a class="aclass1" href ="https://www.godaddy.com">GoDaddy.com</a></p> <h1>Want to buy<span class ="span2">webmaster.com ?</span></h1> <div class ="div1"> <a class ="aclass2" href="https://www.godaddy.com">Learn How</a> </div> </hr> <button>Search Ads</button> </body> </html> “ QUESTION continued Given the corresponding css file .aclass1{color:purple;}...

  • Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we ...

    Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we talked about fluid and fixed layouts. If I was given the below code. Does that fluid or fixed layouts, and how did you indicate that? Explain your answer <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Mount Olympus News</title> <style type="text/css"> #wrapper {             width: 960px;             outline: #ff7900 2px dashed; } #main {             float: left;             width: 650px;             margin: 0 20px;            ...

  • Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we...

    Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we talked about fluid and fixed layouts. If I was given the below code. Does that fluid or fixed layouts, and how did you indicate that? Explain your answer <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Mount Olympus News</title> <style type="text/css"> #wrapper {             width: 960px;             outline: #ff7900 2px dashed; } #main {             float: left;            ...

  • 1. Predict the Result.Draw and write a brief description of the Web page that will becreated...

    1. Predict the Result.Draw and write a brief description of the Web page that will becreated with the following XHTML code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>CircleSoft Designs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body { background-color: #FFFFCC;color: #330000;font-family Arial,Helvetica,sans-serif; }.content { width: 750px; }</style></head>Apply Your Knowledge<body><div class="content"><h1>CircleSoft Design</h1><div><strong>CircleSoft Designs will </strong><ul><li>work with you to create a Web presence that fits yourcompany</li><li>listen to you and answer your questions</li><li>utilize the most appropriate technology for your sites:JavaScript, Java, PHP, databases,...

  • I have to make a pixel art maker using javascript. HTML and CSS were already provided....

    I have to make a pixel art maker using javascript. HTML and CSS were already provided. I only had to do the JavaScript part. Every time I run the HTML folder nothing happens when I choose the width, height, and color. This is my code: (ONLY JS IS SUPPOSED TO BE FIXED). JS: // Select color input // Select size input const colorPicker = document.getElementsById('colorPicker'); const rowNum = document.getElementsById('inputHeight'); const cellNum = document.getElementById('inputWidth'); const pixelCanvas = document.getElementById('pixelCanvas'); const form =...

  • To do list - Javascript Javascript(only)  needs to be added in order to do the following:...

    To do list - Javascript Javascript(only)  needs to be added in order to do the following: Add a new todo item to the list, complete with trash icon Remove the item when the trash icon is clicked Clear the input when the user clicks back into it to add another item. This is already in place in the JS window: (codepen)     (function(){     })(); HTML: <div class="card">     <div class="card-body">         <h3 class="card-title">Today's To Do List</h3>         <form id="todo-form">             <div class="form-group">                 <input type="text" class="form-control"...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT