How did they do this?

[briangumble]

On this forum http://forums.thebattlefields.com/

See how they have a logo image on the top left, and on the right of the image they have a red bar to match the logo image. How did they create that red bar without having it as a image?

Also, what size would a logo have to be in order to span the width of the forum?

[Floris]

You create two images, one logo.gif image and one background.gif image.
The logo has text on it, the background doesn't have text on it.

Then you create a table with 1 row and 1 column.
In the cell you align the image to the left, and valign it to the top (set border to 0).
The <table> you set to 100% and the <td> you add the background to.
<td style="background-image: url(background.gif);">

[briangumble]

You create two images, one logo.gif image and one background.gif image.
The logo has text on it, the background doesn't have text on it.

Then you create a table with 1 row and 1 column.
In the cell you align the image to the left, and valign it to the top (set border to 0).
The <table> you set to 100% and the <td> you add the background to.
<td style="background-image: url(background.gif);">

So doing this will make the area to the right of the logo, not a image right?

[briangumble]

Ok, nevermind i'll just have the logo itself span the width of the forums. How many pixels do I set it at so it will be the same size as the width of the forums?

[SVTBlackLight01]

So doing this will make the area to the right of the logo, not a image right?

The area to the right of their logo is a background image. See here:

Ok, nevermind i'll just have the logo itself span the width of the forums. How many pixels do I set it at so it will be the same size as the width of the forums?

That will depend on what you have the width of your forums set as, and would only work with a fixed width.

[briangumble]

The area to the right of their logo is a background image. See here:





That will depend on what you have the width of your forums set as, and would only work with a fixed width.

oh, ok thanks. So how would I have my logo be the same width as my forums? Do I just do what floris said above?

[Dennis Olson]

Get a book called Web Design in a Nutshell from Amazon.com. Knowledge is a Good Thing...

[TheMusicMan]

Hi briangumble

If you display your logo at the same width as the width of your forums, you risk having a very distorted logo image being displayed. You need to understand a few things before you get your logo and header sorted.

A logo will be of specific dimensions: say 200px wide by 80px high for example (though it can be any size you want it to be). So, if you then display this logo at the same width of your forums - and your forums are say 760 pixels wide - then your image will be stretched to 760 pixels wide... and will be significantly distorted which is clearly not the best effect.

So, your would need to either do;

1 - as Floris suggests which is to have 1 cell in a table where you display the image (left aligned) and set it so that the cell background is made of the image you want repeated throughought the width of the remainder of the cell (ie as above)

2 - have a clear background...

I am happy to help explain further if required - just shout and be patient.. I will reply.

[briangumble]

Hi briangumble

If you display your logo at the same width as the width of your forums, you risk having a very distorted logo image being displayed. You need to understand a few things before you get your logo and header sorted.

A logo will be of specific dimensions: say 200px wide by 80px high for example (though it can be any size you want it to be). So, if you then display this logo at the same width of your forums - and your forums are say 760 pixels wide - then your image will be stretched to 760 pixels wide... and will be significantly distorted which is clearly not the best effect.

So, your would need to either do;

1 - as Floris suggests which is to have 1 cell in a table where you display the image (left aligned) and set it so that the cell background is made of the image you want repeated throughought the width of the remainder of the cell (ie as above)

2 - have a clear background...

I am happy to help explain further if required - just shout and be patient.. I will reply.

I can recreate the logo to be in any dimensions, so the distorting problem is not a problem. Here is a screenshot of how it would look if I put my logo up right now:

http://img.photobucket.com/albums/v392/twbrkzzk1/BFC.jpg

I want the blue bar to extend to the width of the forums, whats the best way to do this? The only ways I can think of would be to recreate the logo with a larger width, but I don't know how many pixels to set it at. Or create another image with just the blue bar and do what floris said above. But im not sure how to do what floris said above.

[briangumble]

You create two images, one logo.gif image and one background.gif image.
The logo has text on it, the background doesn't have text on it.

Then you create a table with 1 row and 1 column.
In the cell you align the image to the left, and valign it to the top (set border to 0).
The <table> you set to 100% and the <td> you add the background to.
<td style="background-image: url(background.gif);">

The best way to have my logo span the width of my forums would probably be to do what you said. So floris how exactly do you do that floris?

[briangumble]

Well anybody, how do you do what floris said?

[Zachery]

Just like he said.

its really simple html.

www.w3schools.com

[briangumble]

You create two images, one logo.gif image and one background.gif image.
The logo has text on it, the background doesn't have text on it.

I can do this.

Then you create a table with 1 row and 1 column.
In the cell you align the image to the left, and valign it to the top (set border to 0).
The <table> you set to 100% and the <td> you add the background to.
<td style="background-image: url(background.gif);">

I don't know how to do this. I know a little HTML, but I don't know how to create tables and setting the sizes, etc.

[briangumble]

I created a table with frontpage and edited the HTML. So would this be the tag I insert into the header template?

<table border="0" width="100%">
	<tr>
	 <td style="background-image: url('background.gif');"&gt; width="100%" align="right" valign="top">&nbsp;</td>
	</tr>
</table>
 

edit: I just inserted that html code into that message thing in the header and it didn't work. What did I do wrong?

[briangumble]

100 tries later and I still can't get it. I give up for tonight.