SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Location
    Denver, CO
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Redoing site with CSS positioning - need suggestions/help

    Currently my site, www.maximumgamer.com is done (badly) with tables, the old fashioned way. Looks fine in IE 5.x and Mozilla, but older Netscape/Mac has problems.

    Anyway, I am working on changing it over to layer positioning via css. Basically, I'd like the same layout:

    Banner that stretches across top of site. I sliced it up into tables so it would auto-resize based on resolution/browser size.

    Nav bar (DHTML) under banner

    Fixed width, fixed height left column

    Center area with three sections - top for news headlines and such, middle for featured items, and the largest underneath for news updates and such.

    The trick for the center area is I want it to auto-resize as well, just like the logo does.

    Fixed width, fixed height right column

    Footer area that runs across bottom of page.

    How you see the site now is pretty much how I want it to look - the center area re-sizes along with the logo and footer depending on browser size/resolution, the left and right columns are fixed. The trouble I am having doing this with <div> et. all in CSS is I can't figure out how to have a layer for the logo, footer, and center areas that resizes - I can only get them to work fixed-width. I've looked at the excellent examples on glish.com among others but this eludes me. Anyone have any ideas? Or even suggestions if I am going about this the completely wrong way?

    Thanks!

    Ixian
    Ixian.

  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2001
    Posts
    439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Location
    Denver, CO
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that got me started!

    Here's something interesting - when I validate my test page with the WSC, CSS comes out clean but I get one error:

    Error: there is no attribute "BACKGROUND" for this element (in this HTML version)

    For the code in question:

    <td background="http://ix.maximumgamer.com/images/lftline.gif" rowspan="3" width="33%"></td>


    That's part of my header, by doing it that way I get the logo across the top of the entire page. It DISPLAYS just fine in Mozilla and IE, it just comes up as an error via the W3C's html validation service.

    It also give me an "error" on this line:

    <a class="menuside" href="http://www.maximumgamer.com/downloads/pafiledb.php?action=category&id=3">Demos</a><br>

    Which as you can see is just your plain vanilla hyperlink. The error given is:

    Error: unknown entity "id"

    In other words, it's actually tripping on a character in the url link, which is weird. Of course, the link WORKS fine, but as with the above I'm being super-anal with my new layout and am wondering how the hell I am supposed to avoid this.

    So the questions are:

    How should I correctly use an image as a background for a table/row?

    How should I structure my links so dynamic URL's aren't grabbed as invalid characters?

    Again, any pointers much appreciated.

    Ixian

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the background image problem, use this instead:
    Code:
    <td rowspan="3" style="background-image: 
    url(http://ix.maximumgamer.com/images/lftline.gif); width: 33%;">
    Note: Above code contains a hard line break on purpose to preserve formatting of forum pages.

    For the link validation error, use this instead:
    Code:
    href="http://www.maximumgamer.com/downloads/pafiledb.php?action=category&amp;id=3"
    Last edited by mattjacob; Jun 15, 2002 at 02:00.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Location
    Denver, CO
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by mattjacob
    For the background image problem, use this instead:
    Code:
    <td rowspan="3" style="background-image: 
    url(http://ix.maximumgamer.com/images/lftline.gif); width: 33%;">
    Note: Above code contains a hard line break on purpose to preserve formatting of forum pages.

    For the link validation error, use this instead:
    Code:
    href="http://www.maximumgamer.com/downloads/pafiledb.php?action=category&amp;id=3"
    Thanks! Although I think your last suggestion about the link got cut off - there's no change from what I am using now?

    Ixian

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Location
    Denver, CO
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Figured out the link issue by looking up the correct escape codes. Man, W3C is anal - but I guess they have to be, right?

    For anyone looking for the same answer, it's:
    Code:
    &amp;
    Instead of just &.

    Edit - I think I just figured out why Matt's suggestion appeared the same to me and why the "&" look the same above -vb's "code" insertion still parses the escaped characters Just go to the page below to see the actual example.

    There's a nice set of escape codes at this site:

    http://www.davesite.com/webstation/html/chap06.shtml

    Now my test layout validates as 4.01 transitional and CSS 1&2 with no errors. Hurrah for me

    Need to put the finishing touches on now, have one final question:

    Can one of you wizards give me an example or tell me how to convert the table below to css positioning? It's my top logo, divided into 5 images: A left and right back ground that stretch depending on browser size/screen resolution, a top middle static jpg, another static jpg under it (says Maximumgamer in the example, I have it change depending on the page) and a final bottom background that also stretches with page width. You can see the current version in action at my site.

    Here's how it's set on my test layout:

    Code:
    <div>
    <center>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr> 
        <td rowspan="3" style="background-image: url(http://ix.maximumgamer.com/images/lftline.gif); width: 33%;"></td>
        <td width="33%"><img src="http://ix.maximumgamer.com/images/MGtop.jpg" alt="mg" width="751" height="106"></td>
        <td rowspan="3" style="background-image: url(http://ix.maximumgamer.com/images/rgtline.gif); width: 33%;"></td>
      </tr>
      <tr> 
        <td width="33%"><img src="http://ix.maximumgamer.com/images/maximumgamer.jpg" alt="mg" width="751" height="14"></td>
      </tr>
      <tr> 
        <td width="33%" style="background-image: url(http://ix.maximumgamer.com/images/mglower.gif); height: 35px;">
    </td>
      </tr>
      </table>
    </center>
    
    </div>
    I can't seem to manage the same effect doing stuff like:

    Code:
    <div id="Layer2" style="position: absolute; left: 228px; top: 0px; width: 751px; height: 106px; z-index: 2">
    <img src="http://ix.maximumgamer.com/images/MGtop.jpg" alt="mg" width="751" height="106"></div>
    etc, etc. Can anyone help?

    Thanks again!

    Ixian
    Last edited by ixian; Jun 15, 2002 at 11:50.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ixian, how did you make your banner? I really like it and I was wondering what tools/programs you used because I don't know how to do graphics very well and I need to make a banner for my web site.


Bookmarks

Posting Permissions

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