silurius
01-22-2006, 03:37 PM
I set up a background image by entering the following into "Main CSS"->Body->Background:
#000000 url(images/misc/bkg_dialog6.jpg); background-repeat: no-repeat;Is it possible to create an image map, save it to an html file in the same directory as the image, and refer to it in the Main CSS? I've been struggling and struggling and cannot figure this one out.
silurius
01-22-2006, 07:20 PM
Darn, turns out I cannot imagemap a background image. :(
I tried dropping code into my header template and the imagemap was OK, but the allignment is out of whack. I'm guessing I'll need to whip up some CSS code for the Body's "Extra CSS Attributes" instead?
silurius
01-23-2006, 06:19 PM
So to recap: the designer (who knows very little about designing for the web) has a very specific requirement to have the vBulletin content framed on only two sides by an image, which I guess means she thinks I can place the vBulletin on top of the image. This took me a while to figure out but I got it working. I just can't place the nav links where she wants me to place them. See attached screenshot for reference.
Anyone have tips for how to get this working in Main CSS? I assume I could utilize CSS or javascript to give coordinates on the page, but I could seriously use some guidance on the syntax (an example would be great).
silurius
01-25-2006, 10:40 AM
Okay, I've retained my Main CSS body value, and worked out some DIV syntax to address this in another way. The DIV should place the links wherever I want them to appear, and the background operates independently.
My current challenge is determining which vBulletin template to place this code. I got it working in a standard html test, but in vB the links don't appear in the right places, and they overlap with one another. So far I've dropped the code into the header or headinclude templates with identical results.
Anyone have pointers?
(The following text links will be removed after verifying correct placement).
<!-- DIV NAVBAR TEST -->
<body>
<div
style="
top: 283;
left: 712;
width: 33;
height: 17;
position: absolute;
z-index: 4;
visibility: visible;">
<a href="../dev2"><font color="#800080">about</font></a>
</div>
<div
style="
top: 283;
left: 760;
width: 33;
height: 17;
position: absolute;
z-index: 4;
visibility: visible;">
<a href="../signin.html"><font color="#800080">signin</font></a>
</div>
<div
style="
top: 283;
left: 814;
width: 33;
height: 17;
position: absolute;
z-index: 3;
visibility: visible;">
<a href="../collaborate.html"><font color="#800080">collab</font></a>
</div>
<div
style="
top: 283;
left: 884;
width: 33;
height: 17;
position: absolute;
z-index: 2;
visibility: visible;">
<a href="../testvb2"><font color="#800080">dialog</font></a>
</div>
<div
style="
top: 283;
left: 936;
width: 33;
height: 17;
position: absolute;
z-index: 1;
visibility: visible;">
<a href="../video.html"><font color="#800080">video</font></a>
</div>
<!--/DIV NAVBAR TEST -->
silurius
01-26-2006, 11:56 AM
I got it, please see this vB.org thread (http://www.vbulletin.org/forum/showthread.php?t=106386) if you have a similar requirement.