Relative-problem

[Ayala]

Hi,

I want to put this two buttons next to the images.
But the images must be position: relative, because they should be on each other.

Any idea?

http://codepen.io/Ayalann/pen/qqRWrK

[Paulie_D]

It’s not clear what you are trying to do.

I’m guessing that this is some kind of slideshow.

You indicate that the “images” should be position:relative but they aren’t in your code.

Also, your “buttons” div is using both absolute positioning AND float which is just not logical.

[Shikkediel]

From what I understand (after looking twice), I think it would come down to this:

codepen.io/anon/pen/GNrRmj

Assuming relative positioning for the images is a misunderstanding and absolute was meant. Which will give the issue of not being able to position the buttons to the right of the slider because it then has no width (or height). But not all the images need to be absolutely positioned, I think. Leave the first one relative and the slider will have outer dimensions to adapt the position of the buttons to.

Edit – I suppose the images will get a z-index assigned as some point, otherwise the first image doesn’t even need any positioning at all.

[Ayala]

Thank you for the answers.

I am sorry I wasn’t clear enough.
But you understood what I wanted:)

Yes, actually this is an absoulte-problem, not relative.

Yes, Shikkediel, I wanted this. The only thing I don’t understand is why the .buttons has 40px padding-left. This isn’t in your code. I would like no space between the images and the buttons.

[Shikkediel]

Those look like browser default values, I usually do a reset at the start:

* {
  padding: 0;
  margin: 0;
}

But it’ll also work on the ul element alone of course.

[Ayala]

Thank you!

[Ayala]

The height of slider is bigger by 4,5 pixels that the image. Why?

[Shikkediel]

Inline elements inside a block level element will add an empty line. Or something like that, there’s probably a better description. Anyway, you can use this to get rid of it (giving absolute position already adds it automatically for the others):

.image:first-of-type {
  position: relative;
  display: block;
}

[Author]

Posts