Image Placement, Text within Images

[skippence]

Hello, I have an image that I want to place multiple times on a page, arranged more or less in a circle. I have successfully done this with the following code:

 

#container {
margin: 0 auto;
width: 1000px;
text-align: left;
}

#center { position: absolute; left: 450px; top: 200px; }

#left { position: absolute; left: 280px; top: 215px; }

#right { position: absolute; left: 640px; top: 215px; }

#bottom { position: absolute; left: 465px; top: 375px; }

#top { position: absolute; left: 465px; top: 50px; }

#tleft { position: absolute; left: 330px; top: 90px; }

#tright { position: absolute; left: 595px; top: 90px; }

#bright { position: absolute; left: 595px; top: 335px; }

#bleft { position: absolute; left: 330px; top: 335px; }

 

As you can see, I have created nine positions for my image, including the center image, and if you were to view this they would be more or less arranged in a circle. There may be no more efficient way to do this, but I would like to find one if there is.

 

Ultimately, I'm going to want to place more images outside of the image circle created so far, and in order to do this I basically have to guess and check with the pixel numbers. This is tedious, and is never exact as I'm just eyeballing the results to see if they look 'ok'. I do like this method because when I resize the browser the images stay fixed, with relative positioning they all move together and even on top of each other.

 

My other problem is that I am trying to place text inside the images, ideally the text would be centered within the image. I achieved that like this:

 

<div id="left">
<a href="link here">
<img src="circ2.jpg" border="0" /> 
</a>
<span style="position: relative; top: -50px; left: -95px;"><z>text here</z></span>
</div>

 

This results in a few issues, first is that I can only fit so much text inside of my image, however wide the image is. Oftentimes I need to fit more.

 

My other issue is that when I resize the browser the text disappears completely, though the images remain fixed. Do I have to use absolute positioning for the text too? That seems like an awful lot of guess and check work..

 

Any help or ideas would be greatly appreciated. Thanks in advance!

 

 

[Ken2k7]

Wow! That is crazy! Does that look fine in both Firefox and IE?

 

I would wrap the images in a DIV or something, then put the text in there.

[skippence]

I knew there must be a more efficient way to do it.. I am pretty new to working with CSS. It does look identical in Firefox and IE..

 

What are you referring to when you say to wrap the images in a DIV. Will this help me to place the images, or will it help with text placement.. or both? I thought I did put the images in a DIV because that is how I referred to them in the html body code.

 

<div id="left">
<a href="link here">
<img src="circ2.jpg" border="0" />
</a>
<span style="position: relative; top: -50px; left: -95px;"><z>text here</z></span>
</div>

 

If you could point me in the right direction I would greatly appreciate it.

 

Thanks.

[Ken2k7]

It should help both ways.

 

Also, why do you use negative numbers? That's just tacky and desperate.

[stewart]

First of all do you have a public view-able page that you're doing this on ? Might give a better idea of an overall solution.

 

And..

<span style="position: relative; top: -50px; left: -95px;"><z>text here</z></span>

 

I think you could easily change this to..

<span style="display: block; margin: -50px 0 -95px 0;"><z>text here</z></span>

Because a span is already relatively positioned (?) and top,left,right are usually traditionally used for absolutely positioned elements.

 

For the most part, yes you should try to not HAVE to use negative margin's, because you will start to run into problems when working with IE6 and below.

 

But from reading your original post.. it would definitely be nice to get a page to look at with this on it , because you very well could probably do your boxes in a totally different way. Give us a link

 

 

[skippence]

I don't have a live version anywhere but I would be happy to email the html and image files to anyone who would like to take a look.

 

Alternatively you can get the basic idea with the following code:

 

<html>
<head>
<style>

body {
text-align: center;
}

#container {
margin: 0 auto;
width: 1000px;
text-align: left;
}

#center { position: absolute; left: 450px; top: 200px; }

#left { position: absolute; left: 280px; top: 215px; }

#right { position: absolute; left: 640px; top: 215px; }

#top { position: absolute; left: 465px; top: 375px; }

#bottom { position: absolute; left: 465px; top: 50px; }

#tright { position: absolute; left: 330px; top: 90px; }

#tleft { position: absolute; left: 595px; top: 90px; }

#bright { position: absolute; left: 595px; top: 335px; }

#bleft { position: absolute; left: 330px; top: 335px; }

z {color: #FFFFFF}

</style>
</head>

<div id="center">

<img src="circ2.gif" border="0" /> 
</a>
<span style="position: relative; top: -60px; left: -105px;"><z>Bubbles 2.0<z/></span>
</div>

<div id="left">
<img src="circ2.gif" border="0" /> 
</div>

<div id="right">
<img src="circ2.gif" /> 
</div>

<div id="top">
<img src="circ2.gif" /> 
</div>

<div id="bottom">
<img src="circ2.gif" /> 
</div>

<div id="tright">
<img src="circ2.gif" /> 
</div>

<div id="tleft">
<img src="circ2.gif" /> 
</div>

<div id="bleft">
<img src="circ2.gif" /> 
</div>

<div id="bright">
<img src="circ2.gif" /> 
</div>

</html>

 

Using the following image:

 

http://home-ed.info/maths/images/round-image24.gif

 

However, you would need to rename the image circ2.gif.

 

Sorry for the late reply, long weekend off from work. Thanks in advance for any help! It is greatly appreciated.