css help PLEASE! :)

Hi Group,

I need some css help from the gurus.

In my html, I have a horizontal menu.

Next, I call a slider. However, with the slider, I have in my css a position: absolute; followed by a top: 0px;

This basically moves the slider right to the top of the screen and puts my menu within the slider, an effect I am going for.

But there is a side effect as a result that I don't know how to fix. My next bit of html is placed right under the menu and I want it under the slider. How do I fix this?

Edit: I discovered I can fix this if I put a margin-bottom: 500px; on my horizontal menu, but I think that is probably an ugly solution??

Further edit: It gets real nasty when I resize the screen

 

What effect are you aiming for by placing a horizontal menu within a slider? If you do this, and the window is resized small enough, the horizontal menu will wrap and it'll probably break the effect you're trying to accomplish.

Actually, using margin-bottom is probably what you'd want to do in this case. The real problem here is probably caused by using position:absolute for the slider. Generally speaking, it's best to stay away from absolute positioning unless you really need to use it. As you noticed, using this will cause things to break when the browser is resized and it will probably look a little different across different browsers.

Would it be possible to provide a screenshot or something?

 

I think I just solved it by using position relative instead of absolute. Then, I used negative margin to bring the top of the slider right to the edge. Thanks for replying.

 

if you wanted to fix position then must use for header or link button or short cut link button which is fix respective side (left, right, top, bottom)

 

I'd have to see the content and the actual code you are trying to use, but given the massive sizes of what you've shown, it reeks of trying to absolue position content, something that you should NEVER be doing in the first place.

Those image filenames also raise the hackles on my hackles... common sense tingling as it were as images for text is a BAD thing; that's just a wild guess, but combined with the ungodly size (600x700) it's a good one.

 

What I figured out was using position: relative; was what I needed to do instead of absolute.

With relative, the next element to load is placed in the proper position below.