Image positioning question

[0x00x0]

I have a question about positioning images using PHP.

I am trying to make a logo/banner/header which consists of 3 small images, the composite of which makes it look like one large image. So far I am able to accomplish this with the code below. However, it only looks right in 1280 screen resolution.

What I would like to happen is: when a visitor comes to the site using a computer whos resolution is set below 1280 x 800, the center image will remain fixed in the center, on top of the other 2 images. The other two images will shift from their normal spot to partially hide under the center one.

The left image will shift slightly to the right, and the right image will shift slightly to the left.

I have done this before using CSS but I forgot how to do it.

Please look at my code and explain how I can accomplish what I want to do, either using pure PHP by modifying my code, or by somehow defining these images in CSS and doing it that way.

I am new to PHP and CSS so please explain what and why, if you don't mind.

Thanks in advance..

The code:

echo '
</td>
<td align="left" class="catbg">
<img src="', $settings['images_url'], '/smflogoleft.gif" style="float:left" alt="" />

			<td align="center" class="catbg">
				<img src="', $settings['images_url'], '/smflogocenter.gif" style="float:center" alt="" />

		<td align="right" class="catbg">
				<img src="', $settings['images_url'], '/smflogoright.gif" style="float:right" alt="" />

			</td>
		</tr>
	</table>';[/QUOTE]

[alfoxy]

Does the center image have to be the one on top?
If you can live with the left and right images being on top and the center image being behind them then you could just use html and tables.

Split the cell into two columns.
Divide your center image into 2.
Make the left piece of the center image the background image of the left cell and the right bit of the center image the backround image of the right cell.
Then put your main left image in the left cell and align it to the left and put the main right image in the right cell and align it right.

Thats how i'd do it but it depends on your images being suitable.

[0x00x0]

Hi,

Thanks for the help. Unfortunately the way it is designed I would need the center one on top of the others.. If there isn't any way to accomplish that I will fall back to redesigning it and go this way..

Again, thanks..

[NogDog]

Untested, but I believe this would work:

HTML:

<div id="id_1">
  <div id="id_2">
    <img src="center_img.jpg" alt="" />
  </div>
</div>

CSS:

#id_1 {
   padding: 0;
   max-width: 1280px;
   background: white url(left_img.jpg) no-repeat 0 0;
}
#id_2 {
   margin: 0;
   padding: 0;
   background: transparent url(right_img.jpg) no-repeat 100% 0;
}
#id_2 img {
   display: block;
   margin: 0 auto;  /* centers it */
}

[0x00x0]

I am kind of lost, should I make a separate section for each of the 3 images?

like this:

<div id="id_1">
<img src="left_img.jpg" alt="" />
</div>
</div>

<div id="id_2">
<img src="center_img.jpg" alt="" />
</div>
</div>

<div id="id_3">
<img src="right_img.jpg" alt="" />
</div>
</div>

Then use those declared id's in the CSS stylesheet to position the images?

Thank you so much for your assistance and patience.. I am pretty new to all of this..

[NogDog]

No, assuming I'm correctly guessing what you want, it would be just as I typed it above: only the center image is in an <img> tag, the left and right images are background images for the two divs, the inner div containing the center image. So theoretically you'd end up with:

+--id_1------------------------------------------------------------------+
|+---id_2---------------------------------------------------------------+|
||                   +--<img>-----------------------+                   ||
||                   |                              |                   ||
||  left_img.jpg     |                              |  right_img.jpg    ||
||  (background)     |       center_img.jpg         |   (background)    ||
||                   |                              |                   ||
||                   |                              |                   ||
||                   |                              |                   ||
||                   +------------------------------+                   ||
|+----------------------------------------------------------------------+|
+------------------------------------------------------------------------+

One thing I omitted is that in the CSS you should specify the width for the #id2 img selector to be the same as that of the image (in pixels), in order to make sure the centering works correctly.

[0x00x0]

Ah, now it becomes clear!! Thanks so much. I will go and implement this at once.. I will let you know how it goes 🙂

[0x00x0]

To be clear, i should replace the code in my original post with the code you gave me:

<div id="id_1">
<div id="id_2">
<img src="center_img.jpg" alt="" />
</div>
</div>

correct?

[NogDog]

0x00x0;10887759 wrote:

To be clear, i should replace the code in my original post with the code you gave me:

correct?

Yes, changing the image file path/name to whatever the actual name is. (And you can change the <div> ID values to whatever you prefer, as long as they match up with the names used in your CSS style sheet/block.

[0x00x0]

Well, this did not work, I got error as soon as I changed the PHP:

Parse error: syntax error, unexpected '<' in .../Themes/default/index.template.php on line 193

184: <span style="font-family: Verdana, sans-serif; font-size: 140%; ">', $context['forum_name'], '</span>';
185: else
186: echo '
187: <img src="', $settings['header_logo_url'], '" style="margin: 4px;" alt="', $context['forum_name'], '" />';
188:
189: // display banner logo
190:
191:
192:

193: <div id="id_1">

194: <div id="id_2">
195: <img src="/images/smclogocenter.gif" alt="" />
196: </div>
197: </div>

Tried putting echo back in, nothing. I finally just changed everything back to original until I can get this solved...

[igorlopez]

Parse error: syntax error, unexpected '<' in .../Themes/default/index.template.php on line 193
...
193: <div id="id_1">

194: <div id="id_2">
195: <img src="/images/smclogocenter.gif" alt="" />
196: </div>
197: </div>

is because you cant put plain html into the php but you also write that you

tried putting echo back in

and it did not work.
Did you do it like this?

echo '
<div id="id_1">
  <div id="id_2">
     <img src="/images/smclogocenter.gif" alt="" />
  </div>
</div> ';

[0x00x0]

hmm, no I did not put the semicolon at the end of the code.. lemme try it again.. :o

As I said, I am totally new to php..

[0x00x0]

Ok, I did that, but what happened was, the images all went away, and the background of the site went completely black. . .

The parse error did go away though..

[igorlopez]

Edit: Problem solved!
I tested again on a plain web page and it worked flawlessly so the reason i could not get the left image to show up earlier must have been something in my overall css setup.

Ok, so you are one step closer.
I don't know why the images went away on your page.
I did put in NogDog's css design bits in my css file and added the HTML code he provided, i.e

#id_1 {
   padding: 0;
   max-width: 1280px;
   background: white url(left_img.jpg) no-repeat 0 0;
}
#id_2 {
   margin: 0;
   padding: 0;
   background: transparent url(right_img.jpg) no-repeat 100% 0;
}
#id_2 img {
   display: block;
   width: 250px;
   margin: 0 auto;  /* centers it */
}

in my CS file, and

<div id="id_1">
  <div id="id_2">
    <img src="center_img.jpg" alt="" /img>
  </div>
</div>

in the HTML output (It was created from php as in my prev post)
I did put the center image in the same folder as the html output (or rather where the php file producing the page is located) and the left/right images did i put in the same location as where the CSS file is.
My problem is that I only see the center and the right image but this is probably more to do with my overall design.
I guess than that you need to adapt the image paths for both the CSS and the HTML.

EDIT: Forgot NogDog's comment regarding the id_2 img tag for specifying width but it did not help me. I guess I suffer from css above the location where i put the images.