CODEWITHSUNDEEP
htmlcsshoverdivide
Twanofzo
Twanofzo

Reputation: 15

Making these image dividers horizontal

I'm trying to make a simple homepage with clickable images as buttons, no problem, I can do that. But I'm stuck at this part: I have these 4 images in dividers with on hover shadow. Now these images are vertical under each other. I want them horizontal next to each other.

EDIT: Got it, now I need it to center it horizontal and vertical.

Code:

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
.imgBox 
{ 
width: 300px;
height: 600px;
display: inline-block
}

.imgBox:hover
{
display: inline-block
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; } 
</style>
    </head>
    <body background="back.jpg">
    <center>
    <div align="left">
    <div class="imgBox">
      <a target="_blank" href="IntensityBanner.png">
        <img src="IntensityBanner.png" alt="Trolltunga Norway" width="300" height="600">
      </a>
    </div>

    <div class="imgBox">
      <a target="_blank" href="EarningsBanner.png">
        <img src="EarningsBanner.png" alt="Forest" width="300" height="600">
      </a>
    </div>

    <div class="imgBox">
      <a target="_blank" href="img_lights.jpg">
        <img src="DesignBanner.png" alt="Northern Lights" width="300" height="600">
      </a>
    </div>

    <div class="imgBox">
      <a target="_blank" href="img_mountains.jpg">
        <img src="SpaarGamesBanner.png" alt="Mountains" width="300" height="600">
      </a>
    </div>
    </center>
    </div>
    </body>
    </html>

Live demo: http://twanofzo.nl/test/

Upvotes: 0

Views: 51

Answers (1)

DROPKICK
DROPKICK

Reputation: 189

First, make sure you close that first imgBox div (line 12) or it'll give you trouble.

Next, to make them display horizontally, you should just be able to either add display: inline-block or float: left to your css for .imgBox

Upvotes: 1

Related Questions