PDA

View Full Version : Help-positioning a form over a background image



json2001
Aug 30th, 2007, 08:31 AM
Hello I posted in another thread about using one image for my navigation bar - i got that working now i am having a terrible time getting the search text field positioned consistently across pages and browsers. Absolute positioning and sizing of the text input field over the search box of the image seems to not be so absolute - i wrapped a div around the <form><input> elements and i can get it just perfect on the front page but then when you goto another page the form is thrown off. does absolute not mean "absolute"? Thats all in firefox and opera but throw in IE and what seems to be perfect alignment of the input box on one FF is off by 10px or so in IE.

HTML:


<div id="navigation">
<ul id="navUL">
<li class = "navLI" id = "home"> <a href = "index.php" class = "mylink"></a></li>
<li class = "navLI" id = "mycrate"><a href = "crates.php" class = "mylink"></a></li>
<li class = "navLI" id = "newcrate"><a href = "crates.php" class = "mylink"></a></li>
<li class = "navLI" id = "search"><div id = "searchdiv"><form action="search.php" method="post"><input id = "navsearch" name="search" type="text"/>
</form></div>
</li>

</ul>
</div>

CSS Specific to the navigation bar


@charset "utf-8";
/* CSS Document */
#navigation
{


}
#navUL
{
list-style-type: none;
height: 40px;
width: 900px;
/*margin-left: -41px;*/
}
.navLI
{
float: left;
text-align: center;
}
a.mylink
{
width:auto;
height:40px;
display:block;
}

#home
{
height: 40px;
width: 107px;
}

#mycrate
{
height: 40px;
width: 136px;
}
#newcrate
{
height: 40px;
width: 134px;
}
#search
{
height:40px;
width:523px;
}

#navigation li {
background-image:url(images/globalNav.png);
background-repeat:no-repeat;
}
#navigation li#home
{
background-position:0px 0px;
}
#navigation li#mycrate
{
background-position:-107px 0pt;

}
#navigation li#newcrate
{
background-position:-243px 0pt;

}
#navigation li#search
{
background-position:-377px 0pt;
}
#navigation li#home:hover
{
background-position:0pt -43px;
}
#navigation li#mycrate:hover
{
background-position:-107px -43px;

}
#navigation li#newcrate:hover
{
background-position:-243px -43px;

}
#navigation li#home-sel
{
background-position:0px -86px;
}
#navigation li#mycrate-sel
{
background-position:-107px -86pt;

}
#navigation li#newcrate-sel
{
background-position:-243px -86pt;

}
input#navsearch {
border-style:none;

}
div#searchdiv
{
height:18px;
left:1155px;
position:absolute;
top:124px;
width:156px;
}


General CSS for the whole site:


/*
General formatting: default text family/size
Formatting for each of the div sections: header, navigation, left column, right column
footer


*/
* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;

}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
height: 60px;
background-color: #CCCCCC;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
background-repeat: repeat-x;
}
#header h1
{
text-decoration: none;
font-size: 32px;
margin-top: 16px;
text-indent: 0px;
color:#333;
}
h2 {
font-size: 15px;
}

#header img{
float:left;
}
#navigation{

width: 900px;
float:left;
clear:left;
height:20px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding-bottom:15px;
padding-top:10px;



}
#navigation form{
float:right;
margin-right: 55px;


}
div.contactmsg
{

width: 500px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
padding: 10px;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 121.5px;

}
div.contactmsg p
{
margin-top:25px;
}
h2.error{
font-size: 14px;
color: #CC0000;
width: 500px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
padding: 10px;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 121.5px;
}


#leftcolumn {
color: #333;
border: 1px solid #666666;
margin: 0px 5px 5px 0px;
padding: 10px;
min-height: 600px;
width: 753px;
float: left;
background-color: #FFFFFF;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 600px;
width: 120px;
display: inline;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #666666;
margin: 0px 0px 10px 0px;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: center;
}

/*
Controls for the upper left login form as well as the navigation menu
*/
#menu li {
display:inline;

}
#menu li a
{
line-height:40px;
color:#000;
text-decoration:none;
float:left;
background-color: #CCCCCC;
font-weight: bold;
font-size:16px;
padding-top: 0px;
padding-right: 3px;
padding-bottom: 0px;
padding-left: 3px;
height: 40px;
margin-right: 10px;
margin-top: -10px;
letter-spacing: 1px;

}



#menu li a:hover
{
color: #F4F4F4;
}
#menu li#active a{
background-color:#B7B7B7;
height: 40px;


}
#login {
float:right;
display:inline;
}

NavigationBar
http://csscreator.com/files/navigation.png

Thanks for any help!

effpeetee
Aug 30th, 2007, 08:58 AM
Have you tried this url.

http://www.positioniseverything.net/

Frank

rmedek
Aug 30th, 2007, 11:10 AM
An absolutely positioned element is positioned relative to its relatively-declared container. In other words, with HTML like this…


<div id="relative">
<div id="absolute">
<p>here it is</p>
</div>
</div>

…and CSS like this…


#absolute {
position: absolute;
left: 10px;
top: 10px;
}

…#absolute is going to be 10px from the left and top of the browser window, unless this happens…


#relative {
position: relative;
}

…and now #absolute will be 10px from the left and top of wherever #relative gets placed. Make sense?

This all means that in your scenario you'll probably need to declare #navUL relative to position the absolutely positioned form within it.

json2001
Aug 30th, 2007, 05:26 PM
Thanks for the replies!
rmedek:Once again thank you - a simple position:relative fixed it...in firefox and opera - I now understand how absolute positioning works.

frank:thanks for that resource - looks like its time for me to start reading :)


As far as IE though - what do people do about IE? because in so many cases - this one included it just doesnt do what the other browsers do. In this case I have given the <input> the style of having border:none and a specified height and width that works in FF and Opera but IE seems to just ignore this part of the css file and stick a bordered, default size text box in there.

here is the updated input and search div css:


input#navsearch {
border-style:none;
height:18px;
width:156px;

}
div#searchdiv {

left:705px;
position:absolute;
top:9px;;

}

rmedek
Aug 30th, 2007, 07:45 PM
Oh, er, I don't think it can be done in IE 6. Take a look at this: http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/

I'd just come up with a visual workaround for IE 6, and feed it those styles via a conditional comment.

json2001
Sep 4th, 2007, 09:44 PM
That link was greatly helpful! Thanks....makes me hate IE even more!