move links down

[eddietheeagle]

Hi all,
a couple of questions about http://tinyurl.com/57yk5w:
1.I am trying to move the home | contact us | sitemap | donate links down to the bottom of their div called block3 presently it doesn't have anything in it {}. How do I move it down to sit above the navigation please?

2.I am thinking of moving the search input and the links above into another navigation bar ul above the present one. how can I add that div in so that is stays up against the navigation?
http://tinyurl.com/5n695m

3. I tried to add different colors into the div block2 p but I had to use an image in the end as all my attempts didn't work. I tried to make a class on the p but it all messed up. How can I make the individual lines of text (commented out at the moment ) different colors? Thank you!!


#block2 p { align: center; margin:0; padding:0 0 15px 0; color:red; font:

80% tahoma, arial, sans-serif; font-weight: bold;}


<div id="block2">
<p><img alt="mysite" src="images/toprighttext.gif" width="368" height="89"
/>
<!--Do you?<br/>
Do you know?<br/>
Perhaps you employ?<br/>
If any of these apply to you, please take the time to check out this
site.<br/>-->
Search:<input type="text" /> </p></div>


</div>

[Reli4nt]

1 you could just set a margin for the top of the ul if the header area is a static size

2 jsut droppign a div above the current nav one should be fine so long as the margin is 0. if the elements you put in it have margins they will create a gap if they expend past this new area though so take care if you set a height to it

3 sounds like you wnat span tags


<span class="line1">Do you?</span><br/>
<span class="line2">Do you know?</span><br/>
<span class="line3">Perhaps you employ?</span><br/>
<span class="line4">If any of these apply to you, please take the time to check out this
<span class="line5">site.</span><br/>-->

[Centauri]

First you need to move #block3 to after #block2 in the html, and then set a top margin of 120px on #block3. Also remove the bottom padding from #header.

[eddietheeagle]

Thank you centauri and reliant really appreciated. I had a stab at it myself with a new design and really cleaned shortened the css(the link css sheet doesn't have anything to do with this design):
http://tinyurl.com/5w4b2g

what I am trying to do -and I don't know if there is a tutorial or something on this- is put a curve (gif I imagine) on the left hand side of the first nav, then have an li that covers the search text and input. I'm thinking that actually it would be look a lot better if I get rid of the background images on the h tabs and merge then into one. The idea would be to have the first navigation algined right but if I do that the order of the links reverses!

What can I do or where can I look to sort out this new design for the naviagtion? Thank you

[Centauri]

Which navigation are you talking about here? - the tabs or the dropdown? Not real sure what layout you are after here - where is the dropdown menu supposed to be, as at the moment it is halfway up the header area and pushed off to the side and hidden? (probably a float clearing issue but not sure). I am also not sure why div #block1 or the <h1> exists - neither are required, nor is #block2 and the <p> inside. The <h1> and <p> are not correct anyway as there is no text in them. Also note that if you are going to write xhtml strict, you cannot use uppercase tags - all must be lower case.

[eddietheeagle]

The first navigation is the one I'm talking about the blue one with the search box the home-contact us one.

What browser are you using it's checked on IE6 and 7 and the latest firefox and works fine the drop downs drop off the red second naviagtion fine. I'll got rid of the div and xhtml strict validated.

what should I do

[Centauri]

I'm using Firefox 2.0 - this (http://img228.imageshack.us/my.php?image=screengrabtx1.jpg) is what it looks like for me. This is due mainly to the floats in #header not being cleared.

I see about 4 divs too many here still. Also, you cannot have an input within an <li> without a form and fieldset as well, and you definitely cannot have those within an <a>. You would also have to extend the tabs background graphic a bit to cater for the width of the search box (plus a go/submit button which would be needed).

It's very late here now - will have a play with this tomorrow if you are still having problems.

[eddietheeagle]

Thanks I sorted out the clearing and downloaded firefox 2 which rightly had that problem it is now sorted out. I changed the search as well as discussed. I'll carry on working on it. Thanks again centauri and reliant