CODEWITHSUNDEEP
htmlcssformsinputstyles
kairocks2002
kairocks2002

Reputation: 446

I can't get my form to position right, probably an issue with CSS

OK, so I'll start by saying that this is the first time I have ever used an HTML form, so I think I've researched them pretty well, and still haven't found anyone with this issue.

That being said, I'm also a amateur at HTML in general, so this is probably just another annoying please-check-my-code question.

I have a webpage with the following code:

body {

	margin: 0px;

}

.main-header {

	margin-top: 0px;

}

.wrapper {

	margin: 0px;
	width: 100%;
	height: 1000px;

}

.header {


	background-color: #0FADD1;
	width: 100%;
	height: 200px;

}

.description {

	position: absolute;
	margin: auto;
	width: 100%;
	height: 100%;
	background-color: #0FADD1;

}

h1, h2, h3, h4, p {

	font-family: Arial, sans-serif;

}

h1 {

	font-size: 4em;
}

.save-heading, .save-paragraph, .save-heading-two{

	text-align: center;
	color: white;

}

.save-heading-two {

	margin-top: 100px;
	margin-bottom: 0px;

}

.save-paragraph {

	margin-top: 100px;

}

.calculator {

	background-color: #0E9CC0;
	height: 500px;

}

.calc {

	background-color: white;

}
<!DOCTYPE html>

	<html>

		<head>

			<title>Helyos Co.</title>

			<!-- Fonts -->
			<link href='https://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>

			<link rel='stylesheet' type='text/css' href='css/jquery-ui.css'/>
			<link rel='stylesheet' type='text/css' href='css/stylesheet.css'>
			

		</head>

		<body>
			
			<div class='wrapper'>

				<div class='header'>
					
					<!-- TODO: Stuff here? -->

				</div>

				<div class='description'>

					<h1 class='save-heading'>You could save ##$ a year <br> by switching one bulb.</h1>
					<p class='save-paragraph'>Now multiply that times the average<br>number of lightbulbs in a home.<br>And remember, air conditioning makes a
					<br> difference. Also, how many kilowatts do you use?<br>You know what?</p>
					<h2 class='save-heading-two'>Just use our Handy Dandy Calculator to do it for you</p>

				</div>

				<div class='calculator'>

					<form class='calc-form'>
						
						<input type='number' class='calc' name='watt-hours' placeholder='Enter a number'/>

					</form>

				</div>

			</div>

			<script type='text/javascript' charset='UTF-8' src='js/jquery-ui.js'></script>
			<script type='text/javascript' charset='UTF-8' src='js/jquery-2.2.0.js'></script>
			<script type='text/javascript' src='js/script.js'></script>

		</body>

	</html>

Before I add my CSS, it looks like this:

enter image description here

which has the form in the right spot. But if you run my code, you'll see that the form migrates to the upper left-hand corner of the screen and becomes invisible except for the arrow buttons. I know this has something to do with my CSS, but I'm not sure what.

EDIT--------------------------------------------------

JS-Fiddle here

EDIT 2------------------------------------------------

As you can see, the form is above all other elements.

Upvotes: 1

Views: 225

Answers (1)

darrylivan
darrylivan

Reputation: 354

First, thanks for giving lots of information and putting up a fiddle - helps a ton to help you. Having said that, I am not certain of the what the problem is, but it looks like some content is getting covered. I have a good guess at what is messing you up. You are making your .description class position:absolute which is makes a major change in the rendering. You can think of absolute positioning as removing that element from the normal flow of the webpage and pasting it on top of the page at the location you specify. In other words, if you place it over something else on the page, that other item will be hidden. It is very useful for modals and pop-ups and things that are supposed to cover other content. for a normal web flow, you would typically not use absolute (lots of exceptions of course).

when i changed your position:absolute to position:relative , i could see your form, etc. if you are trying to accomplish something that requires absolute, maybe you can specify that goal in your question.

Upvotes: 1

Related Questions