CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Joshua Ohana
Joshua Ohana

Reputation: 6121

Getting two images to show side by side, with some complications

For my navigation I'm using previous/next buttons. For reasons, these are images, whose CSS sets their background image/height/etc. I am using these throughout my site and they work perfectly, when aligning center.

Now I have these two images but I need them to show up side by side! (with some spacing in between, and the whole shebang centered on the page)

I've tried messing around but whatever I do either makes the images look messed up (eg: trying to use bootstrap columns), or does not get them side by side (eg: traditional inline or whatever). I am okay with having to wrap these in a few divs to get it working, but cannot change the essence of the image's css.

JSFiddle: https://jsfiddle.net/wgrLfxg3/1/

HTML

<div class="container-fluid">
  <div class="row">
    <img class="the-button center-block" />
    <img class="the-button center-block" />
  </div>
</div>

CSS

.the-button {
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;

    background-image: url(http://placehold.it/122x42);
    width: 122px;
    padding-left: 122px;
    height: 42px;

    margin-bottom: 1em;
}

Upvotes: 1

Views: 105

Answers (4)

crank123
crank123

Reputation: 251

The easiest way I know of is to just use JavaScript to draw the image over a transparent canvas. So, doing it that way, you will be able to see stuff under it, and you will be able to adjust how big they are, they space between them, where they are, etc.

See these links:

W3

html5canvastutorials 

canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;
document.body.appendChild(canvas);

ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'gray';
ctx.fillRect(5, 5, 310, 470);
ctx.fillRect(320, 5,315, 470);

https://jsfiddle.net/v4errq9r/

It uses rectangles instead of images, but I think it gets thr point across.

Upvotes: 0

Kamikaza
Kamikaza

Reputation: 635

You need to edit the padding to center it add margin: 0 auto; and to display them side by side just display inline block.

Here is the code to fix the side by side:

.the-button {
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(http://placehold.it/122x42);
    width: 122px;    
    height: 42px;    
    margin-bottom: 1em;  
}

See an example here

https://jsfiddle.net/wgrLfxg3/3/

Do you need to center the buttons in some other div too?

Upvotes: 1

Tim Hallyburton
Tim Hallyburton

Reputation: 2929

<div class="container-fluid">
  <div class="row">
      <table>
       <tr> 
           <td><img class="the-button center-block" /></td>
           <td><img class="the-button center-block" /></td>
        </tr>
      </table>
   </div>
</div>

Try wrapping them into a table. This might just solve your problem.
It is also easy to modify their spacing that way.
https://jsfiddle.net/wgrLfxg3/1/

Upvotes: 1

plushyObject
plushyObject

Reputation: 1131

Use:

display: inline-block;

Should work.

Here is fiddle. https://jsfiddle.net/plushyObject/wgrLfxg3/2/

Upvotes: 2

Related Questions