CODEWITHSUNDEEP
jquerycssposition
Chris J
Chris J

Reputation: 562

Keeping an element position fixed while applying a border

I'm trying to create an online picture framing example. I have an image that can then be customised to show different border, mount and frame sizes. These are illustrated by adding a border to the corresponding elements that surround the image. The user can change these values and this will be shown in the preview.

Ideally, I want to keep the image centered within the containing #preview div and have the borders applied around it. Can this be done with CSS alone or will it require JS/jQuery?

Here's an example: http://www.peaknature.co.uk/test.php

I've tried fixing the position of the image to begin with but that leads to the containing divs all being broken.

Here's some code:

Layout:

<div id="preview">
<span id="frame-preview">
    <span id="mount-preview">
        <span id="border-preview">
            <span id="image-preview" class="id-number" ><img src="image.jpg" /></span>
        </span>
    </span>
</span>

CSS:

#preview {
    width:70%;
    min-height:300px;
    padding:20px 0;
    margin:0 auto;
    text-align: center;
}
#frame-preview {
    outline:0px solid pink;
    display:inline-block;
    position:absolute;
    top:60px;
}
#mount-preview {
    outline:0px solid green;
    display:inline-block;
}
#border-preview {
    outline:0px solid blue;
    display:inline-block;
}
#image-preview {
    display:inline-block;
}
#image-preview img {
}

JS:

        $('#border_size').change(function(event) {
            var value = $('#border_size').val();
            //alert(value);
            $("#border-preview").css({ outlineWidth: value });
        });

        $('#mount_size').change(function(event) {
            var value = $('#mount_size').val();
            //alert(value);
            $("#mount-preview").css({ outlineWidth: value });
        });

        $('#frame_size').change(function(event) {
            var value = $('#frame_size').val();
            //alert(value);
            $("#frame-preview").css({ outlineWidth: value });
        });

Thanks.

Upvotes: 0

Views: 86

Answers (2)

user2999210
user2999210

Reputation: 1

#preview { width:70%; min-height:300px; padding:5px; margin:5px auto; text-align: center; border:1px solid #000; }

#frame-preview { border:0px solid pink; display:inline-block; position:relative; top:0px; margin:20px auto;}

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10896

try something like this

 #frame-preview {
   border: 0 solid #FFC0CB;
   display: block;
   margin: 0 auto;
}

Upvotes: 1

Related Questions