making website 100%

[souvik das]

I have made a site, there in the header part just logo & login part exists.In between two parts the whole area is empty. Now I want to add some graphics in side that empty part.
The site is 100%.How is it possible to keep that graphics as it is in 1024 & 800*600 resolution??

The site is www.visitlab.com

Plz suggest me.
Thanks-------

[MuNKyonline]

Dont really understand what you mean. I can see the white space. Putting the site in a table with a fixed width will stop it changing size. If you did that then you would want to make it about 750ish pixels wide so it's optimised for 800x600.

[ADAM Web Design]

You mean like this?

http://www.kastlefireplace.com
http://216.89.218.233/spp

Make a tiled background image and have it repeat. That's the only consistent way I've seen to do this.

It's real easy in CSS. Give your table or div a unique ID attribute (e.g. "top") and put the following into your CSS stylesheet:

#top {
width: 100%;
height: (height of your image);
overflow: hidden; ?* this keeps the background from repeating funny */
background: URL(images/your_background_file.jpg) top left repeat-x;
}

And away you go.

[MuNKyonline]

You can do that with html too and just have one of the table cells repeat the image as a background.

[DrTandem1]

You're stacking your tables on top of each other. Create a table and nest the other table(s) within it. You can then control table cells better and your layout as well.

[slideri812]

Hi,

I see waht your asking. I use a combonation of tables and CSS to create this type of effect.

Like Dr said. Create a table in your header (left cell) and name it with an id. Then break it up into two cells (give these classes). Place your logo in the left most cell. Place your other main graphic in the right cell. You need to decide if your repeating bg image works on both sides of your main graphic or not.

If it will then center your main graphic. If not align left or right. Then the table will float out to the right and fit any screen size.

Use the css to apply the repeating bg to the table or cell as need for your purposes.

FYI:
I would create a graphic that is fully visible for the space available when viewed at 800. Then the repeating bg picks up all the slack for larger viewing areas.

good luck, you have a great looking start.

[ChrisRC]

Originally Posted by DrTandem1

You're stacking your tables on top of each other. Create a table and nest the other table(s) within it. You can then control table cells better and your layout as well.

I'm curious: what advantage do you see in nesting the tables on this page? I get the disadvantages inherent in nested tables, and I know there are times when it helps, but I don't see a reason to do it here.



(See how I'm not even mentioning the fact that tables aren't meant for layout? I think I've grown.)

[DrTandem1]

Originally Posted by ChrisRC

I'm curious: what advantage do you see in nesting the tables on this page? I get the disadvantages inherent in nested tables, and I know there are times when it helps, but I don't see a reason to do it here.



(See how I'm not even mentioning the fact that tables aren't meant for layout? I think I've grown.)

No, he doesn't need to nest the tables, however, he is asking how to add an image to the "open" space on the page. This suggests to be that he doesn't fully grasp how tables work. I think, if he tried nesting them to confine their widths to a main table, he would understand the concept of cells better. Thus, he would be able to design a layout. Make sense?

[ChrisRC]

Originally Posted by DrTandem1

No, he doesn't need to nest the tables, however, he is asking how to add an image to the "open" space on the page. This suggests to be that he doesn't fully grasp how tables work. I think, if he tried nesting them to confine their widths to a main table, he would understand the concept of cells better. Thus, he would be able to design a layout. Make sense?

But, apparently he doesn't want to confine the widths or I imagine he would have set the individual tables to a width other than 100% - which would be simpler than adding a container table, faster loading, and just as effective.

[DrTandem1]

Originally Posted by ChrisRC

But, apparently he doesn't want to confine the widths or I imagine he would have set the individual tables to a width other than 100% - which would be simpler than adding a container table, faster loading, and just as effective.

Well, his question is somewhat vague, but he seems to confuse the 100% with the resolution. So, that's another point that was made by someone in an earlier post to have him set the width to about 750 pixels.

I think he should probably just start out with one table at a fixed width and add cells and rows to it. this will allow him to grasp the concept of column spans.

The problem he is experiencing is that he is just adding table after table for each portion and he is trying to add two or more tables side-by-side. If he wants to do that, he needs to nest them or simply use a single table and manipulate the rows, columns and cells.

[ChrisRC]

Originally Posted by DrTandem1

Well, his question is somewhat vague

Hey, this we agree on:)

but he seems to confuse the 100% with the resolution.

No, that I think I get. Because he has the site set to display at 100% width, people browsing with their window opened wider will see a bigger "empty part" in the cell containing the logo. Of course people with higher resolution have the potential to open thier client windows wider. NOTE: This isn't a bug, as they say, it's a feature. It gives the person using the site more control over how they use it. I'm just not clear on what exactly he wants to do in that empty part.

I think he should probably just start out with one table at a fixed width and add cells and rows to it. this will allow him to grasp the concept of column spans.

He's using rowspan - I don't see any reason to assume he doesn't grasp colspan. Using a fixed layout does avoid the complications of using a liquid layout - but it also sacrifices the advantages.

The problem he is experiencing is that he is just adding table after table for each portion and he is trying to add two or more tables side-by-side.

I think that's where you're losing me. I don't see where you get that idea.

[slideri812]

Yeah,

I only suggested the nested table as a way to add a secondary bg option. Not to mention that the logo graphic is not full height for the cell and thus using a single bg image to match a center piece graphic placed in the same cell could have unexpected and undesired results.

For a single bg adding the cell and placing the bg image there via CSS and adding the image in the cell should do it. Simple as that.

To get the center cell to float out set it 100% and give the left most cell a defined width (i.e. 200px or 10% via CSS)

If you'll notice, in the head mask area there is live text next to the logo in the same cell.

Another option is to create a bg image that includes the center piece offset so that when placed as a bg image it clears the logo and or text if needed. If you make the image say 1300 px wide the overage will be hidden like any other bg image. No need to to "hide" the run over. Also there is no need to adjust the current layout configuration. This is a good time to use a .png file except that IE doesn't support them so I use a .jpg.

[brian.mark]

Originally Posted by slideri812

...If you make the image say 1300 px wide the overage will be hidden like any other bg image...

That works just fine until someone at 1600x1200 comes along, or 3840x1024 like we see at our site on a regular basis. It really needs to repeat or you can't say it'll work for everyone.

Brian.

[DrTandem1]

Originally Posted by brian.mark

That works just fine until someone at 1600x1200 comes along, or 3840x1024 like we see at our site on a regular basis. It really needs to repeat or you can't say it'll work for everyone.

Brian.

The percentage of visitors using something other than 800x600 and 1024x768 is insignificant

The point I'm trying to make is that the original question Souvik Sas asked was how to put a graphic in the "empty part." The reason he is having trouble is he doesn't seem to realize that the graphic needs to be a part of one of the existing tables. He is attempting to align a graphic image to the left of one of the tables.

[ChrisRC]

Originally Posted by brian.mark

3840x1024 like we see at our site on a regular basis.

I'm curious, are you actually checking innerWidth/clientwidth to see if they have the browser maximized at that resolution? I know there are some people who do that - but even on my "little" 21" 1024x768 display, I can't imagine doing it myself.

Originally Posted by DrTandem1

the original question Souvik Sas asked was how to put a graphic in the "empty part." The reason he is having trouble is he doesn't seem to realize that the graphic needs to be a part of one of the existing tables.

I think I'm going to go with, "Souvik Sas could you please revisit your thread to clarify?" I read "empty part" as the visually empty part of the cell containing the logo or maybe an additional cell between the logo and the form, not somwhere to float something to the left of the table.

[slideri812]

brian.mark wrote:
That works just fine until someone at 1600x1200 comes along, or 3840x1024 like we see at our site on a regular basis. It really needs to repeat or you can't say it'll work for everyone.

A graphic artist worth their salt should have no trouble creating a 1300 px graphic that can repeat seamlessly if needed. Mute point.

[ADAM Web Design]

Originally Posted by slideri812

Another option is to create a bg image that includes the center piece offset so that when placed as a bg image it clears the logo and or text if needed. If you make the image say 1300 px wide the overage will be hidden like any other bg image. No need to to "hide" the run over. Also there is no need to adjust the current layout configuration. This is a good time to use a .png file except that IE doesn't support them so I use a .jpg.

That's not accurate. IE will support a PNG background if there's no transparency. And there are cases where doing so is more advantageous from a file size standpoint than a JPG, but this really depends on the situation.

Also, there is a proprietary filter you can use to get PNGs to display alpha transparency in IE. It's obviously not the ideal situation, but it does work and you can still code something that will work for FireFox too.