Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Relative-problem

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #247990
    Ayala
    Participant

    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

    #248014
    Paulie_D
    Member

    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.

    #248016
    Shikkediel
    Participant

    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.

    #248053
    Ayala
    Participant

    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.

    #248054
    Shikkediel
    Participant

    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.

    #248055
    Ayala
    Participant

    Thank you!

    #248056
    Ayala
    Participant

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

    #248057
    Shikkediel
    Participant

    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;
    }
    
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.