CSS advice needed

Hey all,

Given the page at devbistro.com/jobs, how do I make the div "narrow-search-box" appear lower within the html (after the job listings) but at the same place where it is now when the HTML is rendered?

Thanks for any advice
James

 

Do yo know anything absolute positioning?

position: absolute
top: ??px
left: ??

And you have the code at any part of your html code but the box/div/paragraph/whatever at a definited position.

 

Thanks tresman

I know little about that. The site's width is curently defined in percentages for usability reasons. I assume for the absolute width to work I'd have to have to make the site's width fixed?

 

No, you do not.

I have been looking at at the code and css and in fact I found it pretty easy to do, cause what really matters in this case is the height and not the width.

Let's see:

First: put a DIV around everything from 1-100 (the paginate) and the end of the google link ads. Give it a unique ID like #mydiv--table, does not matter.

Now take the code of div with the search box and move it under this div. At this stage, you have your code the way wanted.

Then, on your css put this (among the other defs you have):

.narrow-search { // I think this was the name of the search box right?
position:absolute;
top:250px;	
}
and on then create 

#mydiv--table {
position:absolute;
top: 340px;
}

Code (css):

These values are just approx. and I had only a quick look to your site, but this should work. Of course, you will have to play with the values untill you find the appropiattes.

This roughly what I would do on your case, but probably needs some testing.

I hope this helps. Do some local tests and let me know if it works. I am going for a coffee but will be back soon.

 

Thanks man

I'll try this sometime soon (hopefully today)

Best,
James

 

Hi, Liminal.

I just had a look, not sure where you are at. I did notice your xml declaration at the top:

<?xml version="1.0" encoding="utf-8"?>

Code (markup):

I always take that out. It's been a while, but IE6.0 used to revert to quirks mode with that part in the DTD. I find(found?, LOL) better consistency without it, and it still validates fine.

As for your search form, you could always nest a table in there as well. I think it looks pretty good now, though!

 

mikmik, good point. I'll revisit the pages to remove (or move down) the xml decl.

tresman, I finally managed to try it out . Looks good except for the content within #mydiv--table (it pushes down through the footer). I guess, I'll need use "clear" somewhere to remedy this?

Best,
James

 

Sure, but it will take a little bit more of work. Get a paper and draw the boxes (div's) and you will see it more clear.

I'll try to explain it:

Put a div around the google ad box, the search box and the results (the list above the search results). Now, instead of absolute use relative and change the values of top & left. Do not worry about the % you have been using for the layout, as the google adv's do not use %.

For the search box the top value will be cero (or a little bit more), and the left values wil be a little bit than the width of the google ads.

For the "Results" it will similar to the above. Left will have the same value or around and the top value will be a little more than the height of the box.

After that, I do not think you will need any thing else to do.

However, it would be nice if you can post a URL wit the test page so I can see clearly what you have done.


On the other hand, in case that having a little more of blank space after the results do not matter to you, just try to calculate what's the max height you need for the results and use position: absolute for that div.

 

tresman,

Thanks for the tips again

I have not been able to give the layout another try. Hopefully sometime this week I'll come back to it and will post the results and the test page.

Thanks man