PDA

View Full Version : I have tried several codes trying to move my search box.

mjs
Oct-21-2009, 09:47 PM
I would like to move my search box to the right and down a bit. I have found several threads pertaining to this and have copied and pasted the code but nothing seems to work, which I guess may mean some other code I have is preventing it as it seemed to work for others. I want the end of the search box to line up with the right edge of my slide show frame and sitting underneath the information button on my nav bar. Thx.
mjs
Oct-22-2009, 04:57 AM
I would like to move my search box to the right and down a bit. I have found several threads pertaining to this and have copied and pasted the code but nothing seems to work, which I guess may mean some other code I have is preventing it as it seemed to work for others. I want the end of the search box to line up with the right edge of my slide show frame and sitting underneath the information button on my nav bar. Thx.

bump
Allen
Oct-22-2009, 06:21 AM
I would like to move my search box to the right and down a bit. I have found several threads pertaining to this and have copied and pasted the code but nothing seems to work, which I guess may mean some other code I have is preventing it as it seemed to work for others. I want the end of the search box to line up with the right edge of my slide show frame and sitting underneath the information button on my nav bar. Thx. First let's clean up some stuff in your CSS

Comments tags are /* */ you have the first one reversed a couple places in your CSS

*/======Search Box======*/
*/======Disabled Banner======*/

should be like this

/*======Search Box======*/
/*======Disabled Banner======*/


change this part of your header

<div id="my_banner"> </div>

<div class="menu">
<ul> </ul>
</div>
<div id="mysearch">
<form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('Search','searchWords','')">
<input name="searchWords" id="searchWords" value="Search" onclick="checkInput('Search', 'searchWords', '')" onblur="checkInput('', 'searchWords', 'Search')" type="text">
<input name="searchType" value="InUser" type="hidden"><input name="NickName" value="mjsaba" type="hidden">&nbsp;
<input src="http://msabatini.com/img/spacer.gif" alt="Submit Search" title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'Search') {document.searchBox.searchWords.value = ' ';}" type="image">
</form>
</div>
<!--[if IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
to this

<div id="my_banner"> </div>

<div id="mysearch">
<form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('Search','searchWords','')">
<input name="searchWords" id="searchWords" value="Search" onclick="checkInput('Search', 'searchWords', '')" onblur="checkInput('', 'searchWords', 'Search')" type="text">
<input name="searchType" value="InUser" type="hidden">
<input name="NickName" value="mjsaba" type="hidden">
<input src="http://msabatini.com/img/spacer.gif" alt="Submit Search" title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'Search') {document.searchBox.searchWords.value = ' ';}" type="image">
</form>
</div>
Change this in your CSS

*/======Search Box======*/

#mysearch {
text-align: right;
}

*/======Disabled Banner======*/
my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://msabatini.com/photos/688420634_4Eo3i-X3.png) no-repeat;
}
like this (also enables your new banner)

/*======Search Box======*/

#mysearch {
position: relative;
margin: 0 auto 10px;
width: 200px;
left: 280px;
}

#customLogo {display: none;}

/*======enabled Banner======*/
#my_banner {
position: relative;
left: -240px;
width: 450px;
height: 80px;
margin: -30px auto 0;
background: url(/photos/688420634_4Eo3i-X3.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/688420634_4Eo3i-X3.png');
}

#customNavContainer {margin-top: 25px;}
mjs
Oct-22-2009, 06:36 AM
First let's clean up some stuff in your CSS

Comments tags are /* */ you have the first one reversed a couple places in your CSS

*/======Search Box======*/
*/======Disabled Banner======*/

should be like this

/*======Search Box======*/
/*======Disabled Banner======*/


change this part of your header

<div id="my_banner"> </div>

<div class="menu">
<ul> </ul>
</div>
<div id="mysearch">
<form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('Search','searchWords','')">
<input name="searchWords" id="searchWords" value="Search" onclick="checkInput('Search', 'searchWords', '')" onblur="checkInput('', 'searchWords', 'Search')" type="text">
<input name="searchType" value="InUser" type="hidden"><input name="NickName" value="mjsaba" type="hidden">&nbsp;
<input src="http://msabatini.com/img/spacer.gif" alt="Submit Search" title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'Search') {document.searchBox.searchWords.value = ' ';}" type="image">
</form>
</div>
<!--[if IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
to this

<div id="my_banner"> </div>

<div id="mysearch">
<form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('Search','searchWords','')">
<input name="searchWords" id="searchWords" value="Search" onclick="checkInput('Search', 'searchWords', '')" onblur="checkInput('', 'searchWords', 'Search')" type="text">
<input name="searchType" value="InUser" type="hidden">
<input name="NickName" value="mjsaba" type="hidden">
<input src="http://msabatini.com/img/spacer.gif" alt="Submit Search" title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'Search') {document.searchBox.searchWords.value = ' ';}" type="image">
</form>
</div>
Change this in your CSS

*/======Search Box======*/

#mysearch {
text-align: right;
}

*/======Disabled Banner======*/
my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://msabatini.com/photos/688420634_4Eo3i-X3.png) no-repeat;
}
like this (also enables your new banner)

/*======Search Box======*/

#mysearch {
position: relative;
margin: 0 auto 10px;
width: 200px;
left: 280px;
}

#customLogo {display: none;}

/*======enabled Banner======*/
#my_banner {
position: relative;
left: -240px;
width: 450px;
height: 80px;
margin: -30px auto 0;
background: url(/photos/688420634_4Eo3i-X3.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/688420634_4Eo3i-X3.png');
}

#customNavContainer {margin-top: 25px;}



Thanks very much. I can't believe how many hrs I spent trying to change this. Can you help me with another issue? My slide show is working fine in FF but not IE7. Thinking it might be my flash player I reinstalled but no luck. Any suggestions? Thx again for the search bar help.
mjs
Oct-22-2009, 06:46 AM
Thanks very much. I can't believe how many hrs I spent trying to change this. Can you help me with another issue? My slide show is working fine in FF but not IE7. Thinking it might be my flash player I reinstalled but no luck. Any suggestions? Thx again for the search bar help.

Having looked in IE7 at the new set up it is very much different than what I see in FF. How do I make IE& match FF?
Allen
Oct-22-2009, 07:34 AM
Having looked in IE7 at the new set up it is very much different than what I see in FF. How do I make IE& match FF?
Change the width so the whole banner shows.

/*======enabled Banner======*/
#my_banner {
position: relative;
left: -240px;
width: 560px;
height: 90px;
margin: -30px auto 0;
background: url(/689051297_Fejwg-X3.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/689051297_Fejwg-X3.png');
}
In IE8 it looks the same. Can you describe what you're seeing? Maybe an IE7 screen shot?
mjs
Oct-22-2009, 07:49 AM
Change the width so the whole banner shows.

/*======enabled Banner======*/
#my_banner {
position: relative;
left: -240px;
width: 560px;
height: 90px;
margin: -30px auto 0;
background: url(/689051297_Fejwg-X3.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/689051297_Fejwg-X3.png');
} In IE8 it looks the same. Can you describe what you're seeing? Maybe an IE7 screen shot?
The banner isn't an issue as I'm testing different things, but the alignment is much different.


http://msabatini.com/photos/689078269_JWjud-X3.jpg

file:///C:/DOCUME%7E1/Mike/LOCALS%7E1/Temp/moz-screenshot.png
Allen
Oct-22-2009, 07:57 AM
The banner isn't an issue as I'm testing different things, but the alignment is much different.

file:///C:/DOCUME%7E1/Mike/LOCALS%7E1/Temp/moz-screenshot.png
Crop your banner to remove all the blank space, top and bottom, then it
would be easier to fit and align.
mjs
Oct-22-2009, 08:06 AM
Crop your banner to remove all the blank space, top and bottom, then it
would be easier to fit and align.
LOL. Now FF and IE have switched. Looks OK on IE7 and out of whack in FF.
Allen
Oct-22-2009, 08:14 AM
LOL. Now FF and IE have switched. Looks OK on IE7 and out of whack in FF.
Because of the extra top blank space you had in your banner I used neg
margin to raise it. Now that it is cropped out change the margin as below.
And adjust the left and height.


/*======enabled Banner======*/
#my_banner {
position: relative;
left: -170px;
width: 450px;
height: 50px;
margin: 0 auto;
background: url(/photos/689090073_8aRFE-X3.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/689090073_8aRFE-X3.png');
}

Your banner, nav and search are in a static position on the page relative to each other.
Each has a width assigned and the R/L margin auto centers each. Then "left: XXpx" is
used to position them.
mjs
Oct-22-2009, 08:25 AM
Because of the extra top blank space you had in your banner I used neg
margin to raise it. Now that it is cropped out change the margin as below.
And adjust the left and height.


/*======enabled Banner======*/
#my_banner {
position: relative;
left: -170px;
width: 450px;
height: 50px;
margin: 0 auto;
background: url(/photos/689090073_8aRFE-X3.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/689090073_8aRFE-X3.png');
}
Your banner, nav and search are in a static position on the page relative to each other.
Each has a width assigned and the R/L margin auto centers each. Then "left: XXpx" is
used to position them.

lol. FF is great but now IE& is back to how the screen print looks.
mjs
Oct-22-2009, 09:45 AM
lol. FF is great but now IE& is back to how the screen print looks.
bump.

I'm getting closer but I don't know how else to change the code to get my banner and nav bar aligned the same in FF and IE7.The nav bar is ok in IE7 now it's just the banner. Can somebody put the finishing touches on it? Thx