...

View Full Version : Fixed widths + percentage widths



Burr
12-29-2006, 07:00 AM
So this is my original design I came up with for my site: http://www.snubella.com/

I decided that I was going to have issues with such a narrow content space, and wanted do my page using percentage widths. It would accommodate to more screen resolutions.

So here's the problem I'm having. I want to combine fixed and percentage widths within my table, but it seems to ignore everything after my "100%" value.

Example:
<td width="142"></td>
<td width="1" bgcolor="000000"><br /></td>
<td width="100%" bgcolor="CCCCCC">content here</td>
<td width="1" bgcolor="000000"><br /></td>
<td width="26" bgcolor="232D35"><br /></td>

The 142 width is a sidebar that I want to remain at that size.
The 1 pixel TD creates a verticle black line for me.
The 100% is what I have been putting to make the content fill whatever portion of the screen remains.
Again, a 1 pixel TD to make my verticle line.
And the 26 pixel portion I can't get to show up..

Here's the page I'm working with:
http://www.snubella.com/test/

You can see my goal is to add a 26 pixel fixed width TD to the very right so that my content lines up with the image overhead. That page is filled with tables nested into each other, so I made a page with just my problem on it so you can look at it easier:
http://www.snubella.com/test/test.html

Could you tell me the proper way to make something fill "100%" of the remaining space?????

EDIT: I also noticed that I had a similar problem earlier in the page. You'll notice the header bar I have over my 'content area' doesn't align properly. And I'm not entirely comfortable working with CSS. So is there a way to do this with tables like I am attempting?

Arbitrator
12-29-2006, 11:55 AM
Donít use tables for layout. Hereís an example (http://jsg.byethost4.com/demos/DIC%2022227%20Demo.html) showing you how to do what you describe with CSS. HTML and CSS go hand in hand. You canít design properly in HTML without CSS.

And a width is 100 percent of the width of the parent element. A table cellís parent is its row, which in turn has the table as a parent. Thus a 100 percent width is equal to 100 percent of the width of the table, not ďwhatever portion of the screen remainsĒ. If the table had a width of 500 pixels and no borders or padding, then the table you described would have a cell with a width of 500 pixels. Since the table will choose to contain all of its cells rather than honor its specified width, youíll end up with a table 670 pixels wide; conversely, the cell will (or should) not be 500−170=330 pixels wide.

Also, hexidecimal color values start with a number sign (#). Thus ď000000Ē should be #000000, or, more conveniently, black. You have other various HTML errors that are demonstrated by the W3C Validator (http://validator.w3.org/) and your page is missing a document type declaration (http://www.w3.org/QA/2002/04/valid-dtd-list.html).

Burr
12-30-2006, 11:28 AM
Alright, so I started using CSS. I'm not really sure what I'm doing as far as placing stuff on the page, but I was able to edit the example page you sent me.

FROM: http://jsg.byethost4.com/demos/DIC%2022227%20Demo.html
TO: http://www.snubella.com/test/secondtest.html

I got pretty lost when I tried to add my banner heading, so I just stopped for now. I'm just not really understanding how to show the equivalence of what a TR would be for tables. In the BODY now, I see like 10 different DIVs and I'm not really seeing what separates them onto different lines. Luckily your example page used what I would normally consider "3 TDs in a TR", so I just edited what they had since my page needs a left, middle, and right area. My banner area is only "2 TDs across", so I couldn't really just grab the example page code. I hope I'm not being difficult to understand.

Second problem. I noticed that my page displays exactly to my liking in Firefox but gets messed up pretty bad in IE.

Any chance you can point me in the right direction for either of these problems?

Arbitrator
12-30-2006, 12:20 PM
In the BODY now, I see like 10 different DIVs and I'm not really seeing what separates them onto different lines.Regarding the ďrowsĒ, div elements line‐break automatically. So if you put two side‐by‐side in the code, the second will flow onto a new line. If youíre asking about columns, the key there is the CSS float property. The float model is pretty complex, but this should help (http://www.complexspiral.com/publications/containing-floats/) you understand it. Once you read that, read the next paragraph.

Whatís happening is the left column is floated left and the right column is floated right. The middle column naturally takes up not only the middle, but the area under the left and right columns (since floats are removed from normal document flow); the left and right columns are essentially floating on top of the middle column. Since I know the widths of those two columns, I can set a left and right margin on the middle column (equal to those widths) that goes behind the (floating) side columns so that they donít overlap the middle column.


Second problem. I noticed that my page displays exactly to my liking in Firefox but gets messed up pretty bad in IE.Put the document type declaration (http://www.w3.org/QA/2002/04/valid-dtd-list.html) back so that your page displays in standards‐compliance mode (in both browsers). Remove the optional XML declaration above the doctype declaration though since it will throw your page back into quirks mode (http://hsivonen.iki.fi/doctype/) in Internet Explorer 6 (which doesnít understand proper XHTML); the XML declaration bug is not present in Internet Explorer 7.

You also need to correct these:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="Author" content="Patrick Garies"/>For the first one, you didnít save your document as UTF‐8 (international encoding) so you should not tell the browser that thatís the encoding youíre using. Youíre probably using the English encoding of ISO-8859-1. For the second, I didnít author your page, so change or remove the second meta element.

Your navigation list should also be displayed in an unordered list (http://www.w3schools.com/html/html_lists.asp) element, not a table. Lists are better for what would otherwise be a one‐column table because tables are less flexible and require more code. You would style the list using CSS instead of out‐dated HTML attributes. You can also replace onmouseover with the :hover pseudo‐class of CSS. For example:


a:hover { background-color: tan; }
li:hover { background-color: pink; }

Note that the :hover pseudo‐class is broken on anything besides anchor (a) elements in Internet Explorer 6 (but not 7).

Finally, validate your HTML (http://validator.w3.org/) and CSS (http://jigsaw.w3.org/css-validator/) to make sure your code doesnít contain any errors.

Burr
12-30-2006, 01:40 PM
Thanks alot!!

I fixed a bunch of errors, and there's only a few of them I am unsure of what to do with. Anyhow, it seems to have fixed the problem I was having when viewing my page with IE. Oh, and I just noticed on the far left hand portion of the screen, the page's background color slightly changes where the sidebar begins.

I'm going to mess around with trying to make an unordered list like you suggested.

Burr
12-30-2006, 02:56 PM
I finished the links list.

1) I'm still getting that weird background color change on the far left side though.
2) I did the UL / LI tags with IDs instead of a CLASS. The validator told me I can only use an ID once. But when I tried changing the id="side" to class="side" and replace the #'s with .'s in the CSS, the page gets messed up though.

http://www.snubella.com/test/fourthtest.html




Thanks again !!!! :)

Burr
12-30-2006, 09:10 PM
I still havn't fixed the validation errors in the post above, but here's my newest situation. In the past I have used one or two lines of PHP (includes), so I can have everything in one file instead of 10 HTML files - and can thus edit the layout much easier without disturbing anything. The whole thing is basically HTML though - I'll show you what I mean.

http://www.snubella.com/test/text.php (WORKS)
This page is entirely HTML.. I just snuck this code in the content area for a news management system.. Most importantly, the links it generates are working on this page.


<?PHP
include("cutenews/show_news.php");
?>


http://www.snubella.com/test/index.php (DOESN'T WORK)
Everything above my content area I stuck in top.inc, and everything below it i stuck in bottom.inc. The news actually displays fine on my main page.. the problem is that when I click a link such as 'Comments' or 'Read More', it just goes blank. It was working in the other page.


<?php

include('top.inc');

if(!$_SERVER['QUERY_STRING']) {

include("cutenews/show_news.php");

} elseif ($_SERVER['QUERY_STRING'] == "2") { ?>



<? } elseif ($_SERVER['QUERY_STRING'] == "3") { ?>



<? } elseif ($_SERVER['QUERY_STRING'] == "4") { ?>



<? } elseif ($_SERVER['QUERY_STRING'] == "5") { ?>



<? } elseif ($_SERVER['QUERY_STRING'] == "6") { ?>



<? } elseif ($_SERVER['QUERY_STRING'] == "7") { ?>



<? } elseif ($_SERVER['QUERY_STRING'] == "8") { ?>



<? } elseif ($_SERVER['QUERY_STRING'] == "9") { ?>



<? } elseif ($_SERVER['QUERY_STRING'] == "10") { ?>



<? } elseif ($_SERVER['QUERY_STRING'] == "11") { ?>



<? }
include('bottom.inc'); ?>

Arbitrator
12-31-2006, 07:20 AM
1) I'm still getting that weird background color change on the far left side though.I donít see it in Firefox 2 or IE6/7.


2) I did the UL / LI tags with IDs instead of a CLASS. The validator told me I can only use an ID once. But when I tried changing the id="side" to class="side" and replace the #'s with .'s in the CSS, the page gets messed up though.Thatís right. IDs may only be only be used once per page; it defines one, and only one, element for each page. Classes define groups of related elements. Instead of changing all of the IDs to classes though, itís probably easier to simply remove the IDs and reference the li elements with a descendent selector (a space) to select them all at once. Itís more efficient because you use less code to get the same thing done. Example:


ul#popo li { declarations }
li#sidebottom { declarations }
/* the second rule will override the previous rule as necessary
since it is more specific (it has greater specificity) */

As for why the classes didnít work, Iím not sure. There was probably made a mistake made somewhere.


The news actually displays fine on my main page.. the problem is that when I click a link such as 'Comments' or 'Read More', it just goes blank. It was working in the other page.Afraid I canít help you here. Iím not very familiar with PHP.

By the way, looking at your pages I see that much of your CSS is inline (i.e., inside the body element). CSS should either be inside an embedded style sheet (inside a style element in the head element) or in an external style sheet (in a *.css file). The reason for this is to (A) keep your (X)HTML and CSS clean and separate, to (B) allow you greater flexibility, and (C) decrease file size and load times. (A) is clear enough; putting all your CSS in one place makes things easier to read, maintain, and troubleshoot. You get greater flexibility as per (B) by having your CSS in an external file; when you alter the external file, you should be able to make site‐wide design changes without touching the (X)HTML. Regarding (C), an external file is also used so that CSS is only specified once instead of over and over again for each page.

Burr
12-31-2006, 10:56 PM
The inline stuff was generated by that PHP news script. I've been tinkering with that a lot lately, trying to fix things. I think I'll change that while I'm doing all this CSS stuff.

I did figure out my original problem from the other day as to why tables didn't work for my layout. If I would have just left it as <table> without even specifying a width as 100%, it would do like my DIVs have been doing and filling the rest up since everything else is specified in that TR. I think I'll stick with the CSS though, as it seems to be the more professional thing to do.

Excavator
12-31-2006, 11:47 PM
Hello Burr,
If you add


ul#popo {
list-style-type: none;
background-color: #000000;
}
#popo li a{
display: block;
}

li#side, li#sidebottom {
font-family: Arial;
font-size: 11px;
background-color: #323f4a;
color: #000000;
text-align:to your CSS the whole button will be a link instead of just the text.

Weird how you lose the mouse pointer when you go over the divs in your content... inline styles make it hard to de-bug and very difficult to update.

Burr
01-01-2007, 12:38 AM
Good idea. I also had to move the [a]'s around the whole [li] instead of just the text for it to work.

Burr
01-01-2007, 04:06 AM
Well... that fixed it for Firefox anyway. It's really messed in IE now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum