PDA

Click to See Complete Forum and Search --> : Form positioning

purplerhian
08-02-2007, 06:44 AM
I have a page with a header that has a logo floated right and a search form floated left (in its own div). The form element always drops down and leaves a huge margin above it, which I can't seem to see how to change. I would appreciate any help on controlling the position of form elements.

Many thanks! :)
foxbeefly
08-02-2007, 07:08 AM
code or address pls...

the form div most likely needs to be positioned absolutely over/in relation to the header div...
blakeelias
08-02-2007, 07:18 AM
It would help if we could see some code. However, foxbeefly is probably right. You probably want to use position:absolute in CSS to move it a certain distance from the top, left, bottom and/or right.
foxbeefly
08-02-2007, 07:30 AM
This nasty barebones code should start you off - let me know how it goes!!

<html>
<head>
<title>Test!</title>
<style>
<!--
#header {background-color: #FFFFFF;
width: 800px;
height: 165px;
}
img#logo {float: right; }
body { background-color: #C0C0C0 }
form {width:200px; background-color:#FFCC66}
-->
</style>
</head>
<body>
<div id="header">
<img id="logo" src="your_logo.gif" /><form method="POST" action="process.php">
<p><input type="text" name="T1" size="20"></p>
<p><input type="submit" value="SEARCH" name="B1"></p>
</form>
</div>
<p>This is the actual content of the page...</p>
</body>
</html>
purplerhian
08-02-2007, 09:05 AM
Thanks so much - that seems to have worked! I have the form in its own div within the header div before - which seems to have been the difference. Can anyone tell me why?
foxbeefly
08-02-2007, 11:02 AM
Divs are containers that you can define within the main container: your browser. The divs take up space, and usually they will fall next to or below one another. But you can place a div within a div (nesting), and you can also poistion div's so that they overlap each other.
The code I sent places the form inside the header div, and by default it aligns to the left. The logo is also in the header div - but I told it to float on the right - more correctly: float to the right of the content of the div - the difference being, if I ALIGNED the log to the right, it would be to the right, but BELOW the other content it is sharing the div with.

The stuff outside - below the header div - naturally falls below the div.
purplerhian
08-02-2007, 11:54 AM
Thanks so much - I realise what was going on now!

Thanks Again!