http://en.wikipedia...._Lounge_Lizards
Anyone 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 by DJM, 12 December 2010 - 10:41 AM.
| |
|
Welcome to KnowledgeSutra - Dear Guest 
, Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply
w/o Sign-Up!
| |
1
8 replies to this topic
#1
-
- Kontributors
-
- 25 posts
Newbie [Level 2]
Posted 12 December 2010 - 10:40 AM
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://en.wikipedia...._Lounge_Lizards
Anyone 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.
http://en.wikipedia...._Lounge_Lizards
Anyone 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.
#2
-
- Kontributors
-
- 414 posts
Super Member
- Gender:Male
- myCENT:98.30
Posted 12 December 2010 - 11:46 AM
you should do it with css, very easy just look at the code below :
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.
<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.
#3
-
- Kontributors
-
- 25 posts
Newbie [Level 2]
Posted 13 December 2010 - 12:03 AM
Iniyila, on 12 December 2010 - 11:46 AM, said:
you should do it with css, very easy just look at the code below.
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 by DJM, 13 December 2010 - 12:38 AM.
#4
-
- Kontributors
-
- 25 posts
Newbie [Level 2]
Posted 13 December 2010 - 12:11 AM
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:
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 by DJM, 13 December 2010 - 12:38 AM.
#5
-
- Kontributors
-
- 414 posts
Super Member
- Gender:Male
- myCENT:98.30
Posted 13 December 2010 - 09:55 AM
@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 :
@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 :
@your third question : just add the padding property to the div.desc css like this :
<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;
}
#6
-
- Kontributors
-
- 25 posts
Newbie [Level 2]
Posted 13 December 2010 - 10:22 AM
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.
Iniyila, on 13 December 2010 - 09:55 AM, said:
@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;
}
#7
-
- Kontributors
-
- 414 posts
Super Member
- Gender:Male
- myCENT:98.30
Posted 13 December 2010 - 03:19 PM
DJM, on 13 December 2010 - 10:22 AM, said:
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.
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.
#8
-
- Kontributors
-
- 25 posts
Newbie [Level 2]
Posted 13 December 2010 - 11:36 PM
Iniyila, on 13 December 2010 - 03:19 PM, said:
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.
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.
#9
-
- Kontributors
-
- 3 posts
Newbie
Posted 14 December 2010 - 09:43 AM
DJM, on 13 December 2010 - 11:36 PM, said:
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:
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.
Reply to this topic
1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users
