float image over the header of forum [Archive]

View Full Version : float image over the header of forum

PuntoPower

09-05-2005, 01:09 PM

i was wondering is it possible to "float" an image over the header for a forum. the image i want to float is some banners from phpads. see attached forum header

KTBleeding

09-05-2005, 01:44 PM

Is the header image set as a background?

PuntoPower

09-05-2005, 01:56 PM

no, its called in "header". its called like this.....

<div id="logostrip"><img src="$stylevar[imgdir_misc]/logostrip.gif" alt="" /></div>

KTBleeding

09-05-2005, 02:12 PM

Hm. Well, the only way you can float it is if it's a background.. which would honestly be the way I would do it. You may also acheive this with a "layer" but I have never had good luck with those.

Is that image chopped up for the html document, or is it the entire header itself?

PuntoPower

09-05-2005, 02:33 PM

its the entire header itself alright. i was thinking that i may have to go down the route of chopping it all up and inserting the banner as one of the sections.

if i chop them up, what the best way to put them back together....tables or ????

KTBleeding

09-05-2005, 02:47 PM

Well, I'm one of those guys who tries to avoid using tables as much as possible.

I will usually split a header image up into three images horizontally.. just so slower connections won't have too big of an issue with it. However, in this case I would use divs.

Something like:

<div style="background: #000 url(path_to/images/misc/logostrip.gif) no-repeat; height: 120px;">
<div style="float: right; margin: 10px; border: 1px solid #000;"><img src="path_to/images/banner.gif" alt="" /></div>
</div>

This is just a quick example thrown together, but should be what you're looking for. If you want to, you can also create two different classes with those settings and then call them in the code intead.

Of course you'll want to change what's marked in bold tags to suite your site / preferences.

PuntoPower

09-05-2005, 03:33 PM

the banner is in js as below, so wud the above work?

<script language='JavaScript' type='text/javascript' src='http://website.com/phpAdsNew/adx.js'></script>
<script language='JavaScript' type='text/javascript'>

</script><noscript><a href='http://website.com/phpAdsNew/adclick.php?n=af4aa6e8' target='_blank'><img src='http://website.com/phpAdsNew/adview.php?what=zone:3&n=af4aa6e8' border='0' alt=''></a></noscript>

KTBleeding

09-05-2005, 03:41 PM

<div style="background: #000 url(path_to/images/misc/logostrip.gif) no-repeat; height: 120px;">
<div style="float: right; margin: 10px; border: 1px solid #000;">
<script language="JavaScript" type="text/javascript" src="http://website.com/phpAdsNew/adx.js"></script>
<script language="JavaScript" type="text/javascript">

</script>

<a href="http://website.com/phpAdsNew/adclick.php?n=af4aa6e8" target="_blank"><img src="http://website.com/phpAdsNew/adview.php?what=zone:3&n=af4aa6e8" border="0" alt="" /></a>

</div>
</div>

That should work out fine. You will still want to change the necessary tags to fit your site though.

PuntoPower

09-05-2005, 03:46 PM

ill give it a go. thanks for your time

KTBleeding

09-05-2005, 04:04 PM

No problem. Good luck with it.

PuntoPower

09-05-2005, 04:32 PM

it works, well kinda, there is another image file which is only a few pixels wide but it repeats for the width of the forum depending on the resolution of the users screen. this goes on the right straight after the header. how do i add this to the code?

thanks again

KTBleeding

09-05-2005, 05:01 PM

If you still want to eliminate tables, I would wrap it inside another div with the logostrip_bg information. For example:

<div style="background: #000 url(path_to/images/misc/logostrip_bg.gif);">
<div style="background: #000 url(path_to/images/misc/logostrip.gif) no-repeat; height: 120px;">
<div style="float: right; margin: 10px; border: 1px solid #000;">
<script language="JavaScript" type="text/javascript" src="http://website.com/phpAdsNew/adx.js"></script>
<script language="JavaScript" type="text/javascript">

</script>

<a href="http://website.com/phpAdsNew/adclick.php?n=af4aa6e8" target="_blank"><img src="http://website.com/phpAdsNew/adview.php?what=zone:3&n=af4aa6e8" border="0" alt="" /></a>

</div>
</div>
</div>

PuntoPower

09-06-2005, 07:21 AM

that didnt work :ermm:

the logostrip_bg wont show up after the first gif (logostrip.gif)

here is the code at the moment.....

<div style="background: #ffffff url(http://www.abc.com/forum/images/aesthetic/misc/logostrip_bg.gif) repeat-x; height: 201px;">

<div style="background: #ffffff url(http://www.abc.com/forum/images/aesthetic/misc/logostrip.gif) no-repeat; height: 201px;">

<div style="float: right; margin: 20px; border: 0px solid #ffffff;">

<script language='JavaScript' type='text/javascript' src='http://abc.com/phpAdsNew/adx.js'></script>
<script language='JavaScript' type='text/javascript'>

if (!document.phpAds_used) document.phpAds_used = ',';
phpAds_random = new String (Math.random()); phpAds_random = phpAds_random.substring(2,11);

document.write ("<" + "script language='JavaScript' type='text/javascript' src='");
document.write ("http://abc.com/phpAdsNew/adjs.php?n=" + phpAds_random);
document.write ("&what=zone:3");
document.write ("&exclude=" + document.phpAds_used);
if (document.referrer)
document.write ("&referer=" + escape(document.referrer));
document.write ("'><" + "/script>");

</script><noscript><a href='http://abc.com/phpAdsNew/adclick.php?n=af4aa6e8' target='_blank'><img src='http://abc.com/phpAdsNew/adview.php?what=zone:3&n=af4aa6e8' border='0' alt=''></a></noscript>

</div>
</div>
</div>

PuntoPower

09-20-2005, 09:37 AM

bump.............

LEAD_WEIGHT

09-21-2005, 09:29 AM

go here for some help as well then if you get the answer you can post it in both places. :)

http://www.dynamicdrive.com/forums/