How do I make a flexible banner in NOF8?

  ade.h 21:07 20 Jan 06
Locked

I would really like to make a flexible banner that dynamically resizes to fit different browser windows. I know this can be done, because I have seen sites that have it, but I don't know how it's done. I would like it to cover the whole width of the page or very close to it.

I think it uses a table, so I've been experimenting with a table click here
to see what I have so far. Basically, it doesn't work, because I don't know what settings I need to use or what size/shape it should be. The NOF8 user manual is useless. I think it may involve alignment or sizing or something.... I just don't know. Do I need to do anything with the layout region or master border to allow it to work?

Please bear in mind that I have no coding knowledge, so any advice needs to be based on NOF8's table properties and anything else that affects it.

  beynac 17:51 25 Jan 06

What you have done seems to work. The black header covers the whole top of the page. Are you trying to get "Title here" to be central? If so you just need to change the text alignment of that paragraph to "center".

Sorry if I've misunderstood what you're trying to achieve!

  beynac 17:53 25 Jan 06

You have got three nested tables. There is one (the inner one)that is set at a width of '440'. You need to change this to '100%'.

  ade.h 18:24 25 Jan 06

Hi Beynac.

I'm happy with the title's current position, but when I try to work this out, I don't get it to shrink with the window.

When I open my own link, the banner does not fill the window and does not shrink to fit either. This is the case in all my browsers.

It's the same with the site project from which I took this banner. When I try to preview the site in any browser, the banner doesn't work right.

********************

You mentioned changing the middle cell to 100%; could you give a run-down of how each cell should be set please? Or if you know of a good online guide, that would be fine too. I don't know enough about the alignment, position or size of each cell to know what I'm supposed to do.

Many thanks for your help.

  PurplePenny 20:25 25 Jan 06

You don't need all those nested tables. You can do it with one table, one table row and two cells. Make the background for the whole table black. Align the text cell to the left and the image cell to the right and everything in between will be coloured in black.

At the moment it isn't resizing because you've tied the size down. The very first table cell, the one that contains everything else, has a width of 1009 pixels. Get rid of that and then make the first table 100%. I've just tried it in Firefox and it works. That will fill the screen resizing upwards but because you have an inner table fixed at 440 px and an image which is 565px it still doesn't resize downwards very far.

  beynac 20:46 25 Jan 06

As PurplePenny says, you only need one table. If you want an example look here: click here

I have deliberately left your style settings unchanged, apart from adding 'text-align: center;' The html code for this page is:

<html>
<head>
<title>Home</title>
</head>
<body>
<table width=100% border=0 cellspacing=0 cellpadding=0>
<tr>
<td style="background-color: rgb(0,0,0);">
<p style="font-family: 'Book Antiqua', 'Times New Roman', Times, Serif, serif; font-size: 36pt; color: rgb(255,255,255); font-weight: bold; font-style: italic; text-align: center;">Title here</p>
</td>
</tr>
</table>
</body>
</html>

I don't know how this is achieved in NOF8, but hopefully someone can give you some help with this.

  beynac 21:12 25 Jan 06

The link works but I put an extra '/' in. Should be: click here

  PurplePenny 21:48 25 Jan 06

"Great minds" and all that...

I too attempted to put a page online for you ade.h to see; two pages in fact, one with your code modified and one with a single table.

Sadly my ISP chose today for FTP problems (though their web site claims that the problems were solved a few days ago).

  ade.h 22:14 25 Jan 06

I'm not sure what you mean by having more than one table, because I only created one! Maybe you're talking about the cells... Anyway, I created a table with 1 row and two columns of cells; the right cell needs the image in it - that has to stay because it's part of the theme. The left cell has the text box for what will become the page title. The table has a black fill, of course.

I'm also a bit surprised by what you say about sizes of cells, because I left them on auto and made the table width 100% of the page.

I had some success tonight when working on a different project; I happened to have a table with only one cell and a stretched image to fill it. Setting this table and the cell at 100% had the desired effect, but nothing was really gained because other objects and cells in the table above it could not be made to behave the same way. Arghh!

If I knew how, I'd happily have a go at hard coding, but for now, it's all got to be done WYSIWYG style.

Beynac's banner certainly works, but I would need an extra cell for the image, and that might muck it up. I'll have go at playing around with the code to see if I can learn how this works.

Thank you very much to you both for your help with this.

  beynac 22:26 25 Jan 06

I couldn't see any image on your page (the right cell). If you could explain what you want with regard to the image, I will try to help. PurplePenny mentions an image cell - I can't see this. Must be me! Is it in the stylesheet?

  ade.h 22:29 25 Jan 06

It's on the right side. It's a sort of dark red pattern that fades to black towards the left edge. Right click the area and try to save it.

This thread is now locked and can not be replied to.

Nintendo Switch review: Hands-on with the intuitive modular console and its disappointing games…

1995-2015: How technology has changed the world in 20 years

This abstract video touches on division in our technologic world

Best alternatives to iTunes for Mac | Best music players for macOS: Free your music from the…