Member Avatar for rouse

I am trying to write a practice slider file and in doing the layout I have two problems with CSS.
I would like to align the DIV that holds the controls exactly under the slide show box with out using the left margin in the CSS style if possible and secondly move the right arrow to the right side of the control DIV.
I am hoping someone can take the time to show me how to do this.
The code follows:

<!DOCTYPE html>
<html>
    <head>
        <title>Practice jQuery slider and gallery</title>
        <style>
            html, body{
                width: 100%;
                height: 100%;
                margin: 0 auto;
                font-family: 'PT Sans Narrow', Arial, sans-serif;
                font-size:12px;
                background-color: #DEDEDE;
                color: red;
            }

            #header{
                margin: 0 auto;
                width: 860px;
                height: 95px;
                background-color: #FAF6FA;
                background: #ffffff;
            }

            #container{
                position: absolute;
                top: 0px;
                left: 80px;
                /*    margin: 0 auto; */
                width: 885px;
                height: 970px;
                background-color: #EFEFEF;
                border-style:solid;
                border-width:1px;
                border-color: silver;
            }

            #slideShowBox{
                position: relative;
                width: 640px;
                height: 500px;
                margin: 150px auto 0;
                background-color: #F5F5F5;
                border:1px solid #FFFFFF;

                -moz-box-shadow:0 0 22px #111;
                -webkit-box-shadow:0 0 22px #111;
                box-shadow:0 0 22px #111;
            }
            #slideShowBoxControlls{
                position: relative;
                width: 640px;
                height: 34px;
                margin: 0 0 0 120px;
                border: 1px solid red;
            }

            #arrowLeft{
                background: url('cssimages/arrowLeft.png') no-repeat;
                width: 32px;
                height: 32px;
                border: 1px solid green;
                display: inline-block;
            }

            #arrowRight{
                background: url('cssimages/arrowRight.png') no-repeat;
                width: 32px;
                height: 32px;
                border: 1px solid green;
                display: inline-block;
            }
            h1{
                font: 30px "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
                text-align: center;
                padding-top: 10px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>Practice jQuery Slider and Gallery</h1>
            </div>
            <div id="slideShowBox">

            </div>
            <div id="slideShowBoxControlls">
                <div id="arrowLeft"></div>
                <div id="arrowRight"></div>
            </div>
        </div>
    </body>
</html>
  • 2 Contributors
  • 3 Replies
  • 84 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by rouse

Dani AI

Generated

Short answer: avoid a hardcoded left offset by making the controls a child of the slideshow and letting the parent position the controls, or by centering the controls element itself with an automatic centering method. is right that floats can place the arrows; is also right that margins/padding/position are how things move — but a more robust pattern is to position the controls relative to the slide and use Flexbox (or absolute left/right) to push the right arrow to the far edge.

Example approaches (both are safe and easy to apply):

  1. Controls inside the slideshow (exactly aligned, can sit inside or just below). Make the slideshow the positioning context and stretch the controls horizontally; use Flexbox to space arrows to left/right.
/* HTML structure: .slider contains slides + .controls */
.slider { position: relative; max-width: 640px; margin: 0 auto; }
.controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;         /* set to 0 to sit on top of slides */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}
.controls .arrow { width: 32px; height: 32px; }
  1. Controls outside but aligned under the slideshow. Give the controls the same max-width and center them with margin: 0 auto; or use left: 50% + transform: translateX(-50%) if using absolute positioning.

Troubleshooting tips: add box-sizing: border-box so borders/padding do not change widths; check z-index if controls disappear under shadows; use outline: 1px dashed temporarily to debug alignment; if supporting very old browsers, use the absolute-left/right trick instead of Flexbox. For Flexbox basics and positioning details see the MDN guides on Flexbox and on CSS position (Flexbox guide, position).

Recommended Answers

All 3 Replies

Member Avatar for rouse

I found float right and float left works well for the arrow boxes, but what is the best way to align the whole controll boxes without margins?

Member Avatar for ko ko

Not clear for without margins. What mean without margin ? You've no way to move the layer without using margin, padding, or top, right, bottom, left with position (absolute or relative). You might be involved with those method to align the layer.

Anyway, I don't know exactly what you're meaning. Need more brief explain.

Member Avatar for rouse

Visually, I want slideShowBoxControlls to be either inside slideShowBox at the bottom, or sitting exactly below slideShowBox. Right now I positioned slideShowBoxControlls out side slideShowBox and used left margin to adjust the position, but it seems to be a few pixels off. I was hoping to find a better way to do this.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.