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 id="navbar1">
<button id="b1"><a href="https://www.google.com/"
id="h1">Google</a></button>
<a href="#news" id="h2">News</a></img>
<a href="#news" id="h3">News</a>
<a href="#news" id="h3">Amazon</a>
</div>
</div>
<img src="dog-647528__340.webp.jpg" id="il"></img>
</body>
</html>
Homework Answers
There are multiple errors in your source code. Let's look over them one by one:
1. You have used id attribute under <img> tag but in css you did mistake in creating id selector for i1:
Your code:
Correct Code:
You forgot to write "#" before id. Here I've used two properties margin-left and margin-right which will keep the image in center. You can remove them according to your requirements.
2. The image name extension in your code is wrong. It should either be webp or be jpg but cant be both. Kindly rename your image or use another image.
Your code:
Correct code:
Write an image name with the correct extension.
3. Id attribute under <img> is "il" which is incorrect as you have written "i1" while creating id selector in stylesheet.
Your Code:
Correct Code:
For better understanding, I'm writing the whole corrected source code here.
<!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:500px;
height:500px;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<div id="navbar1">
<button id="b1"><a href="https://www.google.com/"
id="h1">Google</a></button>
<a href="#news" id="h2">News</a></img>
<a href="#news" id="h3">News</a>
<a href="#news" id="h3">Amazon</a>
</div>
</div>
<img src="1.jpg" id="i1"></img>
</body>
</html>
Image:
After all these modifications, the page will look like this:
Add Answer to:
HTML css
When i refresh the page, the picture doesnt move at all
for #i1 i...
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;...
<!-- 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()...
How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE...
How do I get my HTML and CSS to look similar to this mockup?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>nitro
site</title>
<link href="css/main.css"
rel="stylesheet"/>
</head>
<body>
<header class="header">
<section class="navlist">
<img
class="logo" src="assets/logobeans.png"/>
<h2
class="headertitle">nitro</h2>
<nav>
<ul>
<li><a
href="index.html"
target="_parent">About</a></li>
<li><a
href="/html/menu.html"
target="_blank">Menu</a></li>
<li><a
href="/html/menu.html">Shop Now</a></li>
</ul>
</nav>
</section>
<section
class="headerContainer">
<h1
class="heading">Nitro Coffee</h1>
<p
class="productDesc">Coffee is a brewed drink prepared from
roasted coffee beans, the seeds of berries from certain Coffea
species.</p>...
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, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to...
Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to have my text in the body, white. All text and the picture centered but how do I have margins on the left and right side?. I have a figcaption and I dont know have to place it under the picture but I am having a hard time. Can you help me? Thank you! HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...
<!-- 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, 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> <a href=”yurt.html”> Yurt </a> <a href=”activities.html”> Activities</a> <a href=”reservation.html”> Reservation </a> </ul> </b> <div> <img src="images/yurts.jpg" alt="Yurt" height="250"...
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...
I have never created an external style before. This is the main Html that I am...
I have never created an external style before. This is the main Html that I am using. <!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...
How do I get my HTML and CSS to look similar to this mockup?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>nitro
site</title>
<link href="css/main.css"
rel="stylesheet"/>
</head>
<body>
<header class="header">
<section class="navlist">
<img
class="logo" src="assets/logobeans.png"/>
<h2
class="headertitle">nitro</h2>
<nav>
<ul>
<li><a
href="index.html"
target="_parent">About</a></li>
<li><a
href="/html/menu.html"
target="_blank">Menu</a></li>
<li><a
href="/html/menu.html">Shop Now</a></li>
</ul>
</nav>
</section>
<section
class="headerContainer">
<h1
class="heading">Nitro Coffee</h1>
<p
class="productDesc">Coffee is a brewed drink prepared from
roasted coffee beans, the seeds of berries from certain Coffea
species.</p>...
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;}...
Most questions answered within 3 hours.
-
Where is the error in this code sequence?
String s1 = "Hello";
String s2 = "ello";...
asked 10 months ago -
Financial data for Joel de Paris, Inc., for last year
follow:
Joel de Paris, Inc.
Balance...
asked 10 months ago -
Consider this reaction:
Al2(SO4)3 (aq)+ BaCl3
(aq) Al2Cl6 (aq)- +
3BaSO4(s) . What is the...
asked 10 months ago -
Suppose that Savneet is considering increasing her
recent random sample from 20 car rentals to 40...
asked 10 months ago -
Trucks arrive at an unloading terminal at an average rate of 120
per hour.
Trucks arrive...
asked 10 months ago -
Why are methanol and ethanol completely soluble in water while
octanol is not very little soluble....
asked 10 months ago -
A facilities manager at a university reads in a research report
that the mean amount of...
asked 10 months ago -
When the CuSO4 is rehydrated by adding water to the anhydrous
compound, is this an endothermic...
asked 10 months ago -
A ray of sunlight is passing from diamond into crown glass; the
angle of incidence is...
asked 10 months ago -
A block of mass 0.249 kg is placed on top of a light, vertical
spring of...
asked 10 months ago -
how do the kidneys compensate in the presences of acidosis
a) trigger hyperventilate
b) reserve acid...
asked 10 months ago -
Question 501 pts
The rental rate of capital to the firm increases. Which of the
following...
asked 10 months ago