Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Fixed widths + percentage widths

    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?

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Donít use tables for layout. Hereís an example 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 and your page is missing a document type declaration.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Burr View Post
    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 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.

    Quote Originally Posted by Burr View Post
    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 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 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:
    Code:
    <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 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:

    Code:
    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 and CSS to make sure your code doesnít contain any errors.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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 !!!!
    Last edited by Burr; 12-30-2006 at 03:40 PM.

  • #7
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <?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.
    Code:
    <?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'); ?>

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Burr View Post
    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.

    Quote Originally Posted by Burr View Post
    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:

    Code:
    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.

    Quote Originally Posted by Burr View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Burr,
    If you add
    Code:
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Good idea. I also had to move the [a]'s around the whole [li] instead of just the text for it to work.

  • #12
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Well... that fixed it for Firefox anyway. It's really messed in IE now.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •