PDA

View Full Version : so, I am going to whip up a header for my forum...


DavidL
11-15-2005, 09:33 PM
As the title says,
Of course I can whip out a PSD the way I want it, Slice it up and then Code. OUCH! Did I say code? Ok, I can code a little bit. But something I have been stuck thinking on is the top right is where I want to place phpAdsNew code for multiple 468x60 adverts.
Is there a quick tutorial for this type of thing? A recent board I use to own that I had designed for me has this example www.linuxboards.org Notice how the advert sets on top of the header. Er background image?
Am I explaining this right? Probably not lol...I thought I would ask here first.
Dont :armed: me if this has been asked here before :D

-Dave

Tyler
11-15-2005, 10:10 PM
That would be a great tutorial, but there are none of my knowledge. You would want to code the header, then just use it as a background-image (CSS), and float: right;, and that should do it.

adb22791
11-15-2005, 11:09 PM
That guy Jamesc might know.

Scott
11-16-2005, 04:25 AM
Looking at that site, they've used tables to create this effect. The table has 3 columns, the first (from the left) has their banner, the other 2 contain the ads. It uses CSS (background-image) to make sure the ads are on top of the background. Personally, I don't like the tables (I would change it to divs). If you like, I'll write up a small tut for this, using phpAdsNew code.

SoftWareRevue
11-16-2005, 10:29 AM
. . . If you like, I'll write up a small tut for this, using phpAdsNew code.Get ta writin!' :whip:



:flirt:

Scott
11-16-2005, 02:39 PM
Alright, this is pretty much what I think you're after. Using some images for example, obviously you'd change as needed. Let me know if I need to explain things a little better.

First of all, we're starting with the banner which we want to use: Banner (http://vulture.killanet.net/1.gif)

We're going to split this up into 2 images which we'll use in the header:
1 - http://vulture.killanet.net/2a.gif
2 - http://vulture.killanet.net/2b.gif
I think you can appreciate where they come from. Now its time for some code :D Lets look at the HTML first before we do the CSS.
<div id="top">
<p class="left">
<!--This is the logo image (#1 above)-->
<img src="2a.gif" alt="header" />
</p>
<p>
<!--phpAdsNew Invocation code goes here (Remote JS)-->
</p>
</div>
Nothing too complicated here. We've created a division with id "top", inside that we've put 2 paragraphs (they simplify things...could have used another div). The first paragraph we've assigned the class "left". Inside this paragraph is the the logo of our site, inside the second is our remote javascript code from phpAdsNew.

Now to make it looks the way we want...we need CSS. This should either go inside the <style> tag or in a remote CSS file - depending on what you use.
#top {
background: url('2b.gif') repeat-x;
border: 0;
margin: 0;
height: 65px;
}
#top p {
background: transparent;
margin: 0;
padding: 8px;
text-align: right;
}
#top p.left {
margin: 0;
border: 0;
float: left; Looks ugly, don't worry. First we take the div with id "top" and give it a background (image #2 above). We also give it a height which you can change if needed. Border and margin are set a 0 so that we don't get some unwanted space.

The second bit of code is defining what should happen to all paragraphs in div "top". We tell it to make sure the background is transparent (so we can see the gradient) then add some padding to keep it away from the edges. More importantly we tell everything to go to the right hand side.

The last code bit is dealing with all paragraphs in div "top" which have class "left". As above we're making sure border and margin stay out of the way. The final line tells everything in this div to float over to the left.

Hopefully you'll be able to see how it has all build up. You should be able to get something like this (http://vulture.killanet.net/top.html) if its working correctly. The part of the right is coming from phpads (refresh and it'll change). I know its not the same size as what you intend on using, but shouldn't make much of a difference.

Let me know if you run into problems, and good luck :greenthum

DavidL
11-16-2005, 05:46 PM
Wow! I finally understand how CSS works. Great tut and will give this a whack tonight when I get settled in for the day. Thank you for the time you took to write this up. It looks a little confuzzled at first but after reading what each line does and how it calls from the CSS makes it seem really simple.
One question though,
That CSS code, Can I just add that through my custom template forms through the vB admin panel?
Again, Thank you very much! :)

-Dave

Scott
11-16-2005, 05:53 PM
Can't say I've much experience with vB's CSS, however im assuming that the CSS form comes up with similar stuff...probably starting with body {...
If that's the case, putting it in there will work fine. :)

DavidL
11-19-2005, 10:36 PM
Ok, uh.....So I am finally messing around with this just to get an idea and so far so good. The only thing I cant get is the banner to align right or float right. Any suggestions?
So far I have this code in my header template

<div id="toph">
<p class="left">
<!--This is the logo image (#1 above)-->
<br />
&nbsp;&nbsp;&nbsp;<img src="images/dax/logo.gif" alt="header" />
<!-- google code -->
</div>
</p>

And this in my css

#toph {
background: url('images/dax/bg-h.gif') repeat-x;
border: 0;
margin: 0;
height: 100px;
}
#toph p {
background: transparent;
margin: 0;
padding: 0px;
text-align: right;
}
#toph p.left {
margin: 0;
border: 0;
float: left;
}
#topr {
border: 0;
margin: 0;
float: right;
}

I had to change the top to toph as it collides with another entry from vB.

Thanks....

-Dave

DavidL
11-19-2005, 11:54 PM
Looks like I got it. But went a completely different route.
I went into the header template and changed this
----EDIT----
Woops, I forgot I am not suppose to post vB code or html
----EDIT----
From this :pullhair: to this :bclap:
Thanks for your help folks :)

SoftWareRevue
11-20-2005, 12:38 AM
. . .
Woops, I forgot I am not suppose to post vB code or html. . . .:crazy: :buck: :nuts:

You must know something I don't.


Not like that's a challenge. :blush:

DavidL
11-20-2005, 12:41 AM
:crazy: :buck: :nuts:

You must know something I don't.


Not like that's a challenge. :blush:
Maybe Floris can clear this up? I thought nobody was allowed to post licensed vB code in public view.