Form won't sit right

My form keeps dropping off the header bar I have designed for it.

Page 1 of 1

2 Replies - 957 Views - Last Post: 30 April 2009 - 12:15 AM

#1 GenDeathRaiser  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 50
  • Joined: 01-April 09

Form won't sit right

Posted 29 April 2009 - 05:56 PM

Posted Image

Here is what my current CSS and code displays.

I need that form to get the hell up on the Bar with the home link, I can't seem to make it happen.

I apologize for my code because It's a mess with all I've been trying to do to get this friggin bar up top.

the html

<html>
	<head>
		<title>Name.com</title>
	<link rel=stylesheet type="text/css" href="formatting.css">
	</head>
	<body bgcolor=#dfdfdf>
	<div class="headbar">
		<div class="headcontent">
			<div class="headleft">
			<a href=""><img src="page/home.gif" border=0>Home</a>
			</div>
			<div class="formdiv">
					<form action="locator.php" method="GET">
					<input class="text" value="Image Locator" name="idnum">
					<input name="Submit" type="submit" value="Upload image">
				</form>
			</div>
			
		</div>
	</div>
	
	<div class="body">
	<p>
	<center>




the css

* {
	margin: 0;
	padding: 0;
}
.headbar {
	margin: 0;
	padding: 0;
	width: 100%;
	height:25px;
	position: fixed;
	background-image: url('page/headbar.jpg');
	background-repeat: repeat;
	text-align: middle-text;
	float: middle;
	z-index: 1;
} 

.headcontent {
	width: 800px;
	text-align: middle-text;
	margin: 0 auto;
	z-index: 1;
}

.headleft {
	position: relative;
	width: 500px;
	text-align: middle-text;
	z-index: 1;
}

.formdiv {
	margin: 0 auto;
	padding: 0;
	text-align: right;
	font-size: 10pt;
	z-index: 1;
}	

.body {
	position: relative;
	top: 25;
	text-align: middle;
	width: 800px;
	margin: 0 auto;
}




Thanks in advance for any help. I'm going crazy.

Is This A Good Question/Topic? 0
  • +

Replies To: Form won't sit right

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4333
  • View blog
  • Posts: 12,128
  • Joined: 18-April 07

Re: Form won't sit right

Posted 29 April 2009 - 10:34 PM

Well that is because you have the headleft div right before the div with the form in it. These are block elements meaning that it is going to break right after the first div and the other div will then be right below it. Try floating your headleft div to the left, this will cause the div that is following it to then roll up on the right, moving your form up with it.

To help you out, try adding borders to your divs to see where your divs start and end and how they are interacting with one another. It is a useful guide to give you visible output of the real problem.

:)
Was This Post Helpful? 1
  • +
  • -

#3 GenDeathRaiser  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 50
  • Joined: 01-April 09

Re: Form won't sit right

Posted 30 April 2009 - 12:15 AM

That's a fantastic idea to work them with borders. Thanks so much for the help.

View PostMartyr2, on 29 Apr, 2009 - 09:34 PM, said:

Well that is because you have the headleft div right before the div with the form in it. These are block elements meaning that it is going to break right after the first div and the other div will then be right below it. Try floating your headleft div to the left, this will cause the div that is following it to then roll up on the right, moving your form up with it.

To help you out, try adding borders to your divs to see where your divs start and end and how they are interacting with one another. It is a useful guide to give you visible output of the real problem.

:)

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1