ZuoTi.Pro
Question

Hi, can someone explain to me why my image is not in the middle but all...

Hi, can someone explain to me why my image is not in the middle but all the way to the top of the page?

<!DOCTYPE html>
<html lang=”en”>
<head>
<title> Pacific Trails Resort :: Yurts </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="pacific.css">
<div id="yurthero"></div>
</head>
<body>
<div id="wrapper"></div>
<header>
<h1 id="hh"> Pacific Trails Resort </h1>
</header>
<div id=”navbar”></div>

<b><a href=”index.html”> Home </a>&nbsp;
<a href=”yurt.html”> Yurt </a>&nbsp;
<a href=”activities.html”> Activities</a>&nbsp;
<a href=”reservation.html”> Reservation </a>&nbsp;
</ul>
</b>
<div>
<img src="images/yurts.jpg" alt="Yurt" height="250" width="1024"/>
<h2> The Yurts at Pacific Trails </h2>
<dt><b>What is a yurt?</b></dt>
<dd>Our luxury yurts are permanent structures four feet off the ground.
<br> Each yurt has canvas walls, a wooden floor, and a roof dome that<br>
can be opened.<br></dd>
<dt><b>How are the yurts furnished?</b></dt>
<dd> Each yurt is furnished with a queen-size bed with down quilt and gas-fired stove. Your luxury camping experience includes electricity and a sink with hot and cold running water. Shower and restroom facilities are located in the lodge.
</dd>
</dt>
<dt><b>What should I bring?</b></dt>
<dd> Most guests pack comfortable walking shoes and plan to dress for changing weather with light layers of clothing. It’s also helpful to bring a flashlight and a sense of adventure!
</dd>
</div>
<div id=”footer”>
<br>
</body>
</html>

This is my pacific.css file

body{
background-image: url('background.jpg');
background-color: #FFFFFF;
color: #666666;
font-family: 'Verdana';}

#wrapper{
background-color: #ffffff;
min-width: 700px;
max-width: 1024px;
box-shadow:10px 10px 5px blue;}

h1{
line-height : 200%;
background-image: url('sunset.jpg');
background-repeat: no-repeat;
padding-left: 20px;
height: 72px;
margin-bottom: 0;}

h3{
color: #000033;}

main{padding-left: 20px;
padding-right: 20px;
display: block; }

#homehero{height: 300px;
background-image: url('coast.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;}

#yurthero{
height: 300px;
background-image: url('yurt.jpg');
background-size: 100% 100%;
background-repeat: no-repeat; }

#trailhero{
height: 300px;
background-image: url('trail.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;}

nav {
text-decoration: none; }

#links, #first, #sec, #third, #fourth

{display : inline;
background-color: #90C7E3; }

#Footer{
font-style: italic;
Font-size : 0.7em;
padding: 10px; }

#hh{background-color: black;
line-height : 200%;
color: white;
}


#mydivision{font-weight: bold;
color: black;}

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

Homework Answers

Answer #1

If you want the image to be in center, you just have to add <center> tag to image tag:

  • At line 23, just change the <img> tag from " <img src="images/yurts.jpg" height="250" width="1024"/> " to " <center><img src="images/yurts.jpg" height="250" width="1024"/></center> "
  • This will bring the image to the center of the window.
  • The code after updation is:

HTML file. There is no need to modify CSS file.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title> Pacific Trails Resort :: Yurts </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="pacific.css">
<div id="yurthero"></div>
</head>
<body>
<div id="wrapper"></div>
<header>
<h1 id="hh"> Pacific Trails Resort </h1>
</header>
<div id=”navbar”></div>

<b><a href=”index.html”> Home </a>&nbsp;
<a href=”yurt.html”> Yurt </a>&nbsp;
<a href=”activities.html”> Activities</a>&nbsp;
<a href=”reservation.html”> Reservation </a>&nbsp;
</ul>
</b>
<div>

<center>

<img src="images/yurts.jpg" height="250" width="1024"/>

</center>

<h2> The Yurts at Pacific Trails </h2>
<dt><b>What is a yurt?</b></dt>
<dd>Our luxury yurts are permanent structures four feet off the ground.
<br> Each yurt has canvas walls, a wooden floor, and a roof dome that<br>
can be opened.<br></dd>
<dt><b>How are the yurts furnished?</b></dt>
<dd> Each yurt is furnished with a queen-size bed with down quilt and gas-fired stove. Your luxury camping experience includes electricity and a sink with hot and cold running water. Shower and restroom facilities are located in the lodge.
</dd>
</dt>
<dt><b>What should I bring?</b></dt>
<dd> Most guests pack comfortable walking shoes and plan to dress for changing weather with light layers of clothing. It’s also helpful to bring a flashlight and a sense of adventure!
</dd>
</div>
<div id=”footer”>
<br>
</body>
</html>

0 0
Add a comment
Know the answer?
Add Answer to:
Hi, can someone explain to me why my image is not in the middle but all...
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...

  • 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;...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

  • I'm need help in the Pacific Trails section of the assignment. I posted my chapter 2...

    I'm need help in the Pacific Trails section of the assignment. I posted my chapter 2 assignment on the bottom of the picture. I'm using Notepad++. This was the previous assignment: CHAPTER 2 ASSIGMENT paste the first content to index.html file and second to yurts.html. First: (index.html contents are below) <!DOCTYPE html> <head> <title>Pacific Trails Resorts</title> </head> <style> a{    padding-right:14px; /* padding anchor tage to right 15px for nav menu */ } </style> <body> <header> <h1>Pacific Trails Resort</h1>   ...

  • <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head...

    <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head tag -->    <head>                 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Personal Webpage</title>    </head>    <!-- body tag -->     <body>             <style>        .sidenav {            height: 100%;             width: 160px;            position: fixed;            z-index: 1;             top: 0;            left: 0;           ...

  • How do i make my html show 10 results per page, and how do i make...

    How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...

  • <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head...

    <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head tag -->    <head>                 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Social</title>    </head>    <!-- body tag --> <body>                 <style>        .sidenav {            height: 100%;             width: 160px;            position: fixed;            z-index: 1;             top: 0;            left: 0;            background-color:...

  • Hi, trying to arrange the fourth photo under media tab for a mock web page. I'm...

    Hi, trying to arrange the fourth photo under media tab for a mock web page. I'm trying to figure out how to get the 'planned stadium' photo to be shifted to the right and parallel to the 'Ground View 2018' picture. Below is the attached code and thanks for your help: <!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"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta name="author" content="Ian Kusnadi" /> <title>Tottenham Spurs Fan Page</title> </head> <style type="text/css"> a:link...

  • Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /*...

    Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /* Date:           Today's Date --> September 22, 2019 /* Description:   Lab Number --> Lab04 /*doctype css*/ @import url(fonts/chuckfive.css); @import url(fonts/merriweather.css); body    { background-color: rgb(199,201,191);        } div { border: 1px solid black;        padding: 100px 100px 100px 100px;        background-color: gray; } nav { text-align: center;    color: rgb( 7,20,138); } header, footer   { background-color: rgb(199,201,199);        color:...

  • 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...

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