PDA

Click to See Complete Forum and Search --> : Having a issue with the position of a form with-in a DIV

jeromebrill
10-14-2007, 06:56 PM
Here is the site: http://www.geocities.com/jeromebrill/linkbox/test.html

I'm learning as I go here. I can't get the ".search" div to position were I want it. I have another div ".containerhead" with the same attributes and it works.

For clarification: I have two separate div for the same area because if I add the search form code to the div ".containerhead" it for some reason doesn't display in-line, it goes below the email buttons. If anyone could help that would great, thanks

Here is my code:

<html>
<head>
<title>test</title>

<style type="text/css">
body {
background-image: url(http://www.geocities.com/jeromebrill/myspace/background.jpg);
}

.maincontainer {
position: absolute;
left: 50%;
top:200px;
width:600px;
Height:300px
z-index:1;
margin-left: -300px;
}

.containerhead {
position: absolute;
left: 50%;
top:15px;
width:700px;
height:50;
z-index:2;
margin-left: -285;}

.search {
position: abolute;
left: 50%;
top:8px;
width:500px;
height:50;
z-index:2;
margin-left: -165;}

</style>
</head>

<body>

<div class="maincontainer">
<table style="width: 600px;
height: 300px;
cellpadding: 0px;
cellspacing: 0px;
<tr><td valign="top">
<img src="http://www.geocities.com/jeromebrill/linkbox/linkboxtop.png">
</div>

<div class="containerhead">
<a href="http://us.f604.mail.yahoo.com/ym/login?.rand=2iubhhuh8b6cv"><img border="0" src="http://www.geocities.com/jeromebrill/linkbox/ymail2.gif" width="22" height="16"></a>
<a href="http://by114w.bay114.mail.live.com/mail/TodayLight.aspx?n=439013830"><img border="0" src="http://www.geocities.com/jeromebrill/linkbox/hmail2.gif" width="22" height="16"></a>
<a href="http://mail.google.com/mail/?tab=wm"><img border="0" src="http://www.geocities.com/jeromebrill/linkbox/gmail2.gif" width="22" height="16"></a>
</div>

<div class="search">
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="50" maxlength="200" value="" />
&nbsp;&nbsp;<input type="image" name="submit" src="http://www.geocities.com/jeromebrill/linkbox/searchbutton.png" border="0" />
</form>
</div>

</body>
</html>
Centauri
10-14-2007, 09:25 PM
The form positioning problem is only one of MANY problems with your code at present.

The first major issue is the lack of a doctype. You will not have any chance of getting uniform cross-browser display without a valid and complete doctype, as browsers will be in quirks mode. I suggest the most appropriate doctype to be html 4.01 strict.

Absolute positioning is your worst enemy here - the only time absolute positioning is needed is for special effects such as overlapping one element over top of another. The default of static positioning, in conjunction with margins, paddings and floats should serve most of your positioning needs. Once the doctype is present, horizontal centering is easily done with auto side margins.

The main container should be just that - a container, with everything else inside it, and the image applied as a background. The table is also not needed.

The mail links should be a list of text links for accessibilty, and can be styled to display the images, hide the text, and sit beside each other in the css. Floating this list to the left will then allow the form to be floated beside it.

A form must not directly contain inline elements, and usually these elements would be contained within a fieldset. However, a fieldset also needs a legend, and as you visually require neither, hiding these cross-browser requires additional styling. Enclosing the inputs within a div instead requires no extra styling and satisfies the form validation.

Try this coding :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-image: url(../myspace/background.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

.maincontainer {
width:600px;
height:300px;
margin: 15% auto 0;
background-image: url(linkboxtop.png);
}
#maillinks {
float: left;
padding: 15px 0 0 15px;
}
#maillinks li {
list-style: none;
float: left;
padding-right: 4px;
}
#maillinks a {
float: left;
width: 22px;
height: 20px;
font-size: 1px;
color: #2B3ABA;
background-repeat: no-repeat;
background-position: center;
}
#maillinks .ymail {
background-image: url(ymail2.gif);
}
#maillinks .hmail {
background-image: url(hmail2.gif);
}
#maillinks .gmail {
background-image: url(gmail2.gif);
}


.search {
float: left;
padding: 15px 0 0 26px;
}
.search input {
margin: 0 10px 0 0;
vertical-align: top;
}
</style>

</head>

<body>

<div class="maincontainer">

<ul id="maillinks">
<li><a href="http://us.f604.mail.yahoo.com/ym/login?.rand=2iubhhuh8b6cv" class="ymail" title="yahoo mail">yahoo mail</a></li>
<li><a href="http://by114w.bay114.mail.live.com/mail/TodayLight.aspx?n=439013830" class="hmail" title="hotmail">hotmail</a></li>
<li><a href="http://mail.google.com/mail/?tab=wm" class="gmail" title="google mail">google mail</a></li>
</ul>

<form method="get" action="http://www.google.com/search" class="search">
<div>
<input type="text" name="q" size="50" maxlength="200" value="">
<input type="image" name="submit" src="searchbutton.png">
</div>
</form>

</div>
</body>
</html>

I would also suggest not using Geocities as a host provider - the server adds a lot of garbage code which invalidates the site.
jeromebrill
10-14-2007, 10:15 PM
Thanks for the help. I like Geocities actually. Ive used them for 7 years now and I'm grandfathered into one of there plans and it would be stupid to pay three times as much for the same anywere else. They do add some scripting but as long as it works in all browsers I dont care. Having them just for host for your files works well. As for what I was coding, the introduction of div for me what doing overlays with myspace. With that you have to absolute positioning and layer things to make it work. This was my bases of what I was doing. I did want to learn the correct code for an actual website so thank you. Works fine in IE7,FF2.0,NS9 Again thanks