1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS advice needed

Discussion in 'CSS' started by Liminal, Sep 6, 2005.

  1. #1
    Hey all,
    SEMrush
    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
     
    Liminal, Sep 6, 2005 IP
    SEMrush
  2. tresman

    tresman Well-Known Member

    Messages:
    235
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    138
    #2
    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.
     
    tresman, Sep 7, 2005 IP
  3. Liminal

    Liminal Peon

    Messages:
    1,279
    Likes Received:
    63
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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?
     
    Liminal, Sep 7, 2005 IP
  4. tresman

    tresman Well-Known Member

    Messages:
    235
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    138
    #4
    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.
     
    tresman, Sep 7, 2005 IP
    Liminal likes this.
  5. Liminal

    Liminal Peon

    Messages:
    1,279
    Likes Received:
    63
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks man

    I'll try this sometime soon (hopefully today)

    Best,
    James
     
    Liminal, Sep 7, 2005 IP
  6. mikmik

    mikmik Guest

    Messages:
    356
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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, Sep 10, 2005 IP
  7. Liminal

    Liminal Peon

    Messages:
    1,279
    Likes Received:
    63
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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
     
    Liminal, Sep 12, 2005 IP
  8. tresman

    tresman Well-Known Member

    Messages:
    235
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    138
    #8
    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, Sep 13, 2005 IP
    Liminal likes this.
  9. Liminal

    Liminal Peon

    Messages:
    1,279
    Likes Received:
    63
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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
     
    Liminal, Sep 20, 2005 IP