CODEWITHSUNDEEP
htmlcssimagetext
davidev
davidev

Reputation: 314

CSS Image and text on the right

I need to put a text near the images.. This is the CSS code generated to show the images:

CSS:

#showbox {
list-style: none;
padding: 0;
width: 973;
height: 46px;
background: white repeat;
z-index: 12;
position: relative;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
    }
#showbox span {
display: none;
position: absolute;
}
#showbox a {
width: 100%;
display: inline;
text-indent: -900%;
position: absolute;
outline: none;
  }
  #showbox a:hover {
background-position: left bottom;
  }
   #showbox a:hover span{
display: inline;
  }
  #showbox .one {
width: 46px;
height: 46px;
top: 0px;
left: 0px;
background: url(images/cerchio1.png) no-repeat;
   }
   #showbox .two {
width: 46px;
height: 46px;
top: 0;
left: 240px;
background: url(images/cerchio2.png) no-repeat;
  }
    #showbox .three {
width: 46px;
height: 46px;
top: 0px;
left: 480px;
margin-right: 12px;
background: url(images/cerchio3.png) no-repeat;
    }
    #showbox .four {
width: 46px;
height: 46px;
top: 0px;
left: 720px;
margin-right: 12px;
background: url(images/cerchio4.png) no-repeat;
    }

HTML:

<div id="showbox">
<a class="one"></a>
<a class="two"></a>
<a class="three"></a>
<a class="four"></a>
</div>

What I have to do if i want the text on the right of the images? I have to create another box for the text ? This code for the images is ok or is possible to remove some parts of code? thanks

Upvotes: 0

Views: 6988

Answers (1)

EscalatedQuickly
EscalatedQuickly

Reputation: 402

Your code looks pretty strange to me. I assume that you want to use the images for links, yes? In that case, I'd suggest changing your HTML to this:

<div id="showbox">
    <div class="one"><a><img src="images/img1.jpg"></a></div>
    <div class="two"><a><img src="images/img2.jpg"></a></div>
    <div class="three"><a><img src="images/img3.jpg"></a></div>
    <div class="four"><a><img src="images/img4.jpg"></a></div>
</div>

To add text to the immediate left of the images, we simply write it out:

<div id="showbox">
    <div class="one"><a><img src="images/img1.jpg"></a>Text</div>
    <div class="two"><a><img src="images/img2.jpg"></a>Text</div>
    <div class="three"><a><img src="images/img3.jpg"></a>Text</div>
    <div class="four"><a><img src="images/img4.jpg"></a>Text</div>
</div>

Doing this, you should be able to get the desired result with this CSS:

#showbox {
    padding: 0;
    width: 973;
    height: 46px;
    z-index: 12;
    position: relative;
}
#showbox .one {
    position:absolute;
    width: auto;
    height: 46px;
    top: 0px;
    left: 0px;
}
#showbox .two {
    position:absolute;
    width: auto;
    height: 46px;
    top: 0;
    left: 240px;
}
#showbox a, img {
    float:left;
}

I to demonstrate, I created this JSFiddle. I hope this helps!

EDIT:

To position the text in the middle of the image vertically, we need to tinker a bit; vertical aligning isn't HTML's strongest side. But it is possible.

Fistly, you need to edit the CSS a bit. For each class .one, .two, .three, .four you need to add

display:table-cell;
vertical-align:middle;

The display:table-cell; vertical-align:middle; makes sure to position elements within the box in the vertical middle, so to speak. Unfortunately, this isn't enough (did I mention that vertical aligning isn't HTML's strongest side?). We also need to add

#showbox p{
    position:relative;
    float:right;
}

to the CSS. We also add margin-right:5px; to the #showbox img,a clause in the CSS:

#showbox a, img {
    float:left;
    margin-right:5px;
}

This is to make sure that all HTML and text to the right of the image or link is moved 5px away from the image or link.

And, finally, in the HTML we simply put the text within <p> tags, like so:

<div id="showbox">
    <div class="one">
        <a><img src="images/img1.jpg"></a>
        <p>Text</p>
    </div>
    <div class="two">
        <a><img src="images/img2.jpg"></a>
        <p>Text</p>
    </div>
    <div class="three">
        <a><img src="images/img3.jpg"></a>
        <p>Text</p>
    </div>
    <div class="four">
        <a><img src="images/img4.jpg"></a>
        <p>Text</p>
    </div>
</div>

To demonstrate, I've updated the JSFiddle.

Upvotes: 1

Related Questions