CODEWITHSUNDEEP
javascripthtml
Samantha Hayes
Samantha Hayes

Reputation: 47

Why picture showing up sideways in HTML?

I am working on adding a picture to my webpage for an example on the page. The picture is showing up sideways and I am not sure what to do to flip it. Any suggestions on how to flip it. I have included the HTML and the JavaScript that I am using to provide as much information as possible. 

$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle();
    });
});
<!DOCTYPE HTML>
<html lang="en">

<title>Homeroom GPA Calculatiion: Step 1</title>
<meta charset="utf-8">
<head>
    <link rel="stylesheet" href="hayes_java_project.css">
	<script src="gpa_calculation.js"></script>
	<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
		<!-- Nav -->
			<nav>
				<ul class="links">
					<li><a href="hayes_java_project.html">Home: GPA Calculation Tutorial</a></li>
					<li><a href="project_why.html"> Why Calculate your GPA?</a></li>
					<li><a href="project_step_1.html">Step 1: Document Your Grades</a></li>
					<li><a href="project_step_2.html">Step 2: Convert Grade Percentages to GPA Points</a></li>
					<li><a href="project_step_3.html">Step 3: Average GPA Point Total to Get GPA</a></li>
                    <li><a href="project_step_4.html">Step 4: Submit GPA for Teachers</a></li>
				</ul>
			</nav>

	
	<h1>HHHS Homeroom GPA Calculation: Step 1</h1>
	<h2>Document Your Grades</h2>
	<p>For this step, you will need your paper and writing utensil. Go to HomeAccess through the CPS portal and write down your 7 classes (not including homeroom) with the percentage of your current grade. See example below. </p>
	
	
	<body>
		
	<button>Examples of Step 1 Here.</button>

		<p>Write down all classes. <img src="example1.png" alt="Write Down all of your current classes on paper" height="400" width="300" class="center"></p>
		<p>Document percentage points for each. <img src="example1.png" alt="Write Down all of your current classes on paper" height="400" width="300" class="center"></p>
	
	</body>
	
							
    <footer><small><i>Page created by Samantha Hayes.<br>
        Copyright &copy; 2018 <br>
        Please <a href="mailto:[email protected]">e-mail</a> me with any questions.<br>
        Last updated on December 2018. </i></small>
        </footer>
    <p>
   
</html>

Upvotes: 1

Views: 46

Answers (1)

Mav
Mav

Reputation: 1190

I'd rotate the actual image in an editor, but if you must do it using JavaScript or CSS, this will work.

$('.the-flipped-image').css('transform', 'rotate(90deg)')

or

.the-flipped-image{
    transform: rotate(90deg);
}

You can change the value depending on how much it needs to be flipped. Keep in mind that it can be a negative value too.

Upvotes: 1

Related Questions