skippence
-
Posts
4 -
Joined
-
Last visited
Never
skippence's Achievements
Newbie (1/5)
0
Reputation
-
Have you tried height: auto; ?
-
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.
-
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.
-
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!