The way I want my page to be is like this graphic (ok obviously not exactly because it is really rough but I hope at least the the idea is there) [url]http://tinyurl.com/6kckk8[/url]
Here is the page [url]http://tinyurl.com/5w4b2g[/url], as you can see I am getting there, How do I merge the h tabs together and make the search look the same as the others? Thank you?
@CentauriAug 15.2008 — #First you need the correct construct for the search area - you need a form and a fieldset, also a label - no need for a div :[CODE]<div id="tabsH"> <ul> <li><a title="" href=""><span>home</span></a> </li> <li><a title="" href=""><span>contact us</span></a></li> <li><a title="" href=""><span>sitemap</span></a> </li> <li><a title="" href=""><span>donate</span></a> </li></ul> <form id="searchform" action=""> <fieldset> <label for "searchtext">Search:</label> <input type="text" id="searchtext"> <input value="go" type="submit"> </fieldset> </form> </div>[/CODE] Then you can float the form and apply the tab backgrounds to the form and fieldset :[CODE]#searchform { padding: 0 0 0 4px; background: url(images/nav/tableftl.gif) no-repeat left top; float: left; margin: 0px; text-decoration: none } #searchform fieldset { border: 0; padding: 2px 15px 2px 0; margin: 0; background: url(images/nav/tabrightl.gif) no-repeat right top; }[/CODE] The tabrightl.gif image will need to be extended to cater for the width.
Right I did all those changes and made a new image that I saved as tabsearch.gif instead not to complicate things. Things are looking great in Firefox, however, as you can see the results are a bit strange in IE6:
Then I tried to get the navigation to move to the right http://tinyurl.com/6kckk8 so I added float right to the navcontainer id but this didn't work as expected.
Basically I want the navigation under the righthand big image(images/toprighttext.gif) and the site logo image to be up against the red navigation as you can see in this updated graphic:
Also for SEO work I think I will have to put in a div for the text in the site logo image eventually (the text that I put a black border around on the image).
How do I do this please? thanks again for all your help
@CentauriAug 15.2008 — #To get the tabs to the right, first move the <form> code to [B]before[/B] the <ul> code in the html, and float the form, #tabsH div, and <ul> to the right. You can also remove the width from #tabsH, and all the padding from the <ul>.
@CentauriAug 15.2008 — #Did you want the search box on the right or left? If you want it on the far right, then float the form right. Looks like IE does in fact need the 100% width on #tabsH, so put that back (IE treats other floats as boundaries when expanding a float of undefined width). IE also has a problem with block elements of undefined width (the fieldset) inside floats (the form), pushing them wide - fix is to float the fieldset left as well.
@eddietheeagleauthorAug 15.2008 — #That is looking good-I just have a small issue with IE6 where there is a space between the bottom of the tabs and the red navigation but I imagine that will be sorted out when I add some size to the font in the fieldset.
@CentauriAug 15.2008 — #Cross-browser rendering of form controls is a little shakey. Rather than sizing the tabs and form using padding, it may be better playing around with height and line-height in em units instead.
@eddietheeagleauthorAug 20.2008 — #thanks you centauri my head hurt from looking at it so long and I took a couple of days break, but I will get there eventually it seems a good solution, thanks again