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
  • 73 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by rouse
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.