Printable Version of Topic

Click here to view this topic in its original format

bfarber.com _ HTML, XHTML, and CSS _ triple image for maintitle area

Posted by: Nightfox PC Asst Feb 4 2005, 06:39 AM

I will be posting up tutorial on how to create a left, center, right image for the maintitle areas of Invision Power Boards 2.0.+ versions soon...

Stay tuned...

biggrin.gif

Posted by: PSyMastR Feb 4 2005, 05:04 PM

Just around the image tags in the global board header put:

CODE
<center>Title image here</center>
<right>Title image here</right>
<left>Title image here</left>

Simple as that.

Posted by: Nightfox PC Asst Feb 4 2005, 09:52 PM

Okay I will give that a try, but I have found another method that works too...

Thanks for the suggestion, much appriciated.

biggrin.gif

Posted by: mflintjer Feb 5 2005, 12:17 AM

@PSy, I think you need to make sure that each of the pics are equal in length and height too!! Otherwise you could end up with a really funky looking header!! tongue.gif

Posted by: bfarber Feb 5 2005, 09:43 AM

<left> and <right> are not valid html tags. huh.gif Not sure how that would work....

Generally you do it through tables.

Posted by: mflintjer Feb 5 2005, 11:24 AM

PSy, now that BF says that about the tags, I think these are the proper tag inserts

CODE
<img src="file path" align="left">
<img src="file path" align="center">
<img src="file path" align="right">


If this is wrong brandon, let me know. thumbsup2.gif

Posted by: PSyMastR Feb 5 2005, 10:33 PM

Oh... I was talking about placement of the images...
In the html things on IPB, that works. <right> and <left> do work. I totally missed the point of this topic dealing with 3 images. Sorry.

Posted by: bfarber Feb 6 2005, 09:28 AM

It's cool...just trying to clarify. Waiting to see what NF posts.

Posted by: Widescreen Feb 6 2005, 03:05 PM

so am i tongue.gif

Posted by: sz1 Feb 7 2005, 03:22 AM

This is how I made it. Add this to logo part of forum code:

CODE
<table>
    <tr>
 <td>
     <img src="left.gif">
 </td>
 <td width="100%" style="background-image:url(middle.gif);background-repeat:repeat-x;background-position:top left;padding:0px;margin:0px;">
     <! middle part that is tiled />
 </td>
 <td>
     <img src="right.gif">
 </td>
    </tr>
</table>


http://bfarber.com/index.php?showtopic=7408&view=getnewpost

Posted by: Ruler Feb 7 2005, 08:32 AM

Just leave it to sz1 to clarify everything. laugh.gif

Posted by: PSyMastR Feb 11 2005, 10:36 PM

QUOTE(sz1 @ Feb 7 2005, 03:22 AM)
This is how I made it. Add this to logo part of forum code:

CODE
<table>
    <tr>
 <td>
     <img src="left.gif">
 </td>
 <td width="100%" style="background-image:url(middle.gif);background-repeat:repeat-x;background-position:top left;padding:0px;margin:0px;">
     <! middle part that is tiled />
 </td>
 <td>
     <img src="right.gif">
 </td>
    </tr>
</table>


http://bfarber.com/index.php?showtopic=7408&view=getnewpost
*


That glitches up, and doesn't work...

Posted by: bfarber Feb 13 2005, 08:45 AM

Yes, I'm trying to use the code and it isn't tiling the middle image it seems. unsure.gif I will play with it a bit and see what's up.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)