8 replies [Last post]
Hailen
Offline
newbie
Last seen: 16 years 36 weeks ago
Joined: 2004-03-22
Posts: 5
Points: 0

I am currently working on this site: www.dialtonedesign.com/trim

Im fairly happy with how it looks, but several of the color bars that run across the middle of it are %100 to ensure that the site looks smooth. I've never done anything like this before, preferring to use tables with sliced images.

The problem Im having 2-fold:

1. If you resize your browser smaller than one of the images on the page, the top tab for example, you are left with room on the right where the 100% table no longer covers.

2. Netscape refuses to aknowledge that some tables should be placed "left:75%."

Any ideas?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Elements with fixed sizes engaging <Table width = 100%&gt

Hi

Nice site Smile

I suspect (without looking at the code) that you haven't spotted the difference between a table at 100% width and a div at 100% width.

The table will be 100% of the viewport, whereas the div will be 100% of the screen size.

So, to make a table 100% of the screen width, put it in a div which is 100% wide.

I think.

For netscape, try using min-width (not used by IE).

Trevor

Hailen
Offline
newbie
Last seen: 16 years 36 weeks ago
Joined: 2004-03-22
Posts: 5
Points: 0

Div 100% didnt work

I wasn't completely sure what you meant by a div being 100% wide, so I tried a couple of options:

<DIV style="width:100%;height:480px;background-color:#ffffff;">
</DIV>

(This gave me a block of white that was the same width as the browser window...same as a 100% table)

<DIV style="width:100%;">
<TABLE width=100%><TR><TD></TD></TR></TABLE>
</DIV>

(This gave me the same as a 100% table)

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Elements with fixed sizes engaging &lt;Table width = 100%&gt

Hi

mmm. You did what I suggested. And that didn't work. The table still re-sized to the window.

So, you forced me to actually THINK.

What you need to do is work out the smallest width you can accept for the page.

Then, in the body style, set that width. It looks to me about 900-910 pixels.

I haven't looked at the css, but hopefully the whole page is in a container div. Set the width of this also to the same width. (IE and Safari use the body width, Mozilla and Opera use the container width).

Trevor

Hailen
Offline
newbie
Last seen: 16 years 36 weeks ago
Joined: 2004-03-22
Posts: 5
Points: 0

container div

Could you explain the Container div concept?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Elements with fixed sizes engaging &lt;Table width = 100%&gt

Hi

Yeh, just make a div called pagecontainer (can be any name)

then:

<body>
<div id="pagecontainer>
page code here
</div>
</body>
</html>

then in the style sheet:

body {
width:910px;
}
#pagecontainer{
min-width:910px;
}

Trevor

Hailen
Offline
newbie
Last seen: 16 years 36 weeks ago
Joined: 2004-03-22
Posts: 5
Points: 0

Elements with fixed sizes engaging &lt;Table width = 100%&gt

This solution is workable, but I don't think it achieves my original goal. What I want to do is create a site that allows me to extend the "lines" (colored tables) extend as far as the browser window goes.

Its almost like I want to tell the table:

Be as wide as you can be, but dont be smaller than 910px.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Elements with fixed sizes engaging &lt;Table width = 100%&gt

Hi

The problem is that for tables all browsers will treat a width instruction as fixed, and percentage is just that.

IE doesn't support min-width, so you are scuppered.

Trevor

Hailen
Offline
newbie
Last seen: 16 years 36 weeks ago
Joined: 2004-03-22
Posts: 5
Points: 0

Elements with fixed sizes engaging &lt;Table width = 100%&gt

I guess this raises some more questions for me...

Is the design I'm discussing even possible? I want to create something that is static, but has elements that extend as far as possible. I thought 100% tables would work, but doesn't anyone else have a better plan?