How To Display A Box With Image And Text Within? I would like to know how to do this, anyone?

DJM · December 12, 2010

I have been trying to find out how to display an image on my page with a box around it which can also hold text. Here is an example of what I'd like to do, go down the page a little bit where it says game play, and has ("Lefty's Bar", the opening scene of the game) written in the box with the image.http://forums.xisto.com/no_longer_exists/ know how to do this? Keeping in mind, if you know how you might have to explain in some detail as I am not overly knowledgeable with all this stuff, thanks.

Edited December 12, 2010 by DJM (see edit history)

Iniyila · December 12, 2010

you should do it with css, very easy just look at the code below :

<html><head><style type="text/css">div.img  {  margin:2px;  border:2px solid #0000ff;  height:auto;  width:auto;  float:left;  }div.img img  {  display:inline;  margin:3px;  border:1px solid #ffffff;  }div.img a:hover img  {  border:1px solid #0000ff;  }div.desc  {  text-align:center;  font-weight:normal;  width:120px;  margin:2px;  }</style></head><body><div class="img">  <a target="_blank" href="address of the page which opens when someone clicks on your image">  <img src="url of the image" alt="some description" width="width of your image in pixels" height="height of your image in pixels" />  </a>  <div class="desc">here you can add the captions you want under your image</div></div></body></html>

i have written every thing you should change in the code. if you are using a theme which has css you can add the text between <style type="text/css"> and </style> to your css file and add the code between body tags to the body of your page.

DJM · December 13, 2010

you should do it with css, very easy just look at the code below.

Awesome, that's works great thanks you! I just have one question if I may. I tried changing the font properties so the font matches the rest of my font on my page. I assume I have to change some of the following:

text-align:justify;font-weight:normal;width:190px;margin:1px;}

I tried changing the font-weight from normal to "light" or "lighter", also I added a number amount like 100. All of those did nothing. I then tried adding the line:

font-family: Arial, Helvetica, sans-serif;

Which is in my normal css stylesheet but it also made no change. Any ideas besides those on how to change the font in the box? Other than that it is perfect!
Edited December 13, 2010 by DJM (see edit history)

DJM · December 13, 2010

Ah, I have two more little problems. In the <head> part, it says "float:left;". As I want to have a few images on the same page that have different positions how do I get around that? I normally position my images with align="right" for instance, is there a way to do this?

Also, the text on the page outside the box touches the border of the box which is unattractive. I normally use:

style="border-right:10px solid #2F2C2C;"

with an image to create a border, is there a way to do this with the box that can be customizable to every one on the page? I tried doing it but it made the particular side of the box disappear altogether.
Edited December 13, 2010 by DJM (see edit history)

Iniyila · December 13, 2010

@your first question : adding font-family should do the job but maybe there is a problem with your css i suggest you to change the width property and see if it affects the description width, you can try to put the first name which is arial in double quotations like "arial". there is also another way which is not very nice to do but it will do the job, look at the code below :

<div class="desc" style="font-family: arial;">here you can add the captions you want under your image</div>

@your second question : i think what you are saying is a div or table property, am i right ? because the head tag doesn't have such property. if so then you can set the float property for each div tag. just clean the float: left; from div.img section in css file and set every float property yourself. like :
for the first picture :

<div class="img" style="float: left;">  <a target="_blank" href="address of the page which opens when someone clicks on your image">  <img src="url of the image" alt="some description" width="width of your image in pixels" height="height of your image in pixels" />  </a>  <div class="desc">here you can add the captions you want under your image</div></div>

for second picture :

<div class="img" style="float: right;">  <a target="_blank" href="address of the page which opens when someone clicks on your image">  <img src="url of the image" alt="some description" width="width of your image in pixels" height="height of your image in pixels" />  </a>  <div class="desc">here you can add the captions you want under your image</div></div>

@your third question : just add the padding property to the div.desc css like this :

div.desc  {  text-align:center;  font-weight:normal;  width:120px;  margin:2px;  padding:2px 5px;  }

DJM · December 13, 2010

Thanks you! All that worked except for the third one:

@your third question: just add the padding property to the div.desc css like this:
div.desc  {  text-align:center;  font-weight:normal;  width:120px;  margin:2px;  padding:2px 5px;  }

By adding the padding, that did add a space, but inside the border. Therefore, the text on the rest of the page is still touching the border, if you know what I mean.

Iniyila · December 13, 2010

Thanks you! All that worked except for the third one:
By adding the padding, that did add a space, but inside the border. Therefore, the text on the rest of the page is still touching the border, if you know what I mean.

you want to increase the space outside of the border ? if so then you should increase the margin pixels in the div.img section increase it to something like 10px and see if it is working. i hope i understood you correctly.

DJM · December 13, 2010

you want to increase the space outside of the border? If so then you should increase the margin pixels in the div.img section, increase it to something like 10px and see if it is working. I hope I understood you correctly.

Hey, yes you understood exactly what I was after. I increased what you said to 10px and it increased the size outside the box like I wanted, but to ALL sides of the box. Remembering what you said in another post helped me though. I got rid of the margin:10px; from below the div.img part in the <head></head> section altogether. Then I added style="margin-right:10px;" to the <div class="img"> which was down near the image itself, and it worked! Although you didn't tell me exactly what to do, you told me what to do from a couple of different posts that I put together to make it work.

So the code altogether for where the image is looks like this:

<div class="img" style="float: left;" style="margin-right:10px;"><img src="images/screenshots_dos/larry1.jpg" alt="Lefty's Bar" width="200" height="130" /><div class="desc">Outside of Lefty's Bar, where it all begins.</div></div>

EDIT: Ah crap lol. It works in IE but not Mozzila, damn it! Oh well, I give up. Thank you so much for ALL your help, I appreciate it very much. If it doesn't work in Mozilla though, then I'll just leave it I guess.

20qs · December 14, 2010

Hey, yes you understood exactly what I was after. I increased what you said to 10px and it increased the size outside the box like I wanted, but to ALL sides of the box. Remembering what you said in another post helped me though. I got rid of the margin:10px; from below the div.img part in the <head></head> section altogether. Then I added style="margin-right:10px;" to the <div class="img"> which was down near the image itself, and it worked! Although you didn't tell me exactly what to do, you told me what to do from a couple of different posts that I put together to make it work.

So the code altogether for where the image is looks like this:
<div class="img" style="float: left;" style="margin-right:10px;"><img src="images/screenshots_dos/larry1.jpg" alt="Lefty's Bar" width="200" height="130" /><div class="desc">Outside of Lefty's Bar, where it all begins.</div></div>
EDIT: Ah crap lol. It works in IE but not Mozzila, damn it! Oh well, I give up. Thank you so much for ALL your help, I appreciate it very much. If it doesn't work in Mozilla though, then I'll just leave it I guess.

Sometimes if it doesent work in Mozzila but works in Microsoft you can work around it by nesting the divs in layers this though is not W3 Standard. So to be W3 standard you would have to write a subroutine for your page that filters the browser and uses either div or layer accordingly... when all else fails check the page that you are looking at in as many browsers as you can. Because what works in one may not work in all... Also remember to check in opera and other off brand browsers that are niether mozzila or microsoft.

Sign In

How To Display A Box With Image And Text Within? I would like to know how to do this, anyone?

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information