Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Member
    Join Date
    Sep 2006
    Posts
    77
    Member #
    14004
    Please can anyone tell me:
    How can I stabilise the position of a table with links that it is not verticaly changing each time on a new page? I tried to put my links' table in a "div" tag with css, choosing an absolute value of 50px from the top. It works great, but only in Internet Explorer :cry:
    In Fox and NN the table is keeping the horizontal position, but still jumping up and down when choosing other page…
    Thank you very much

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    It's best to give us a link so we can try it out ourselves.

    We need to see your CSS and HTML.


  4. #3
    Member
    Join Date
    Sep 2006
    Posts
    77
    Member #
    14004
    Quote Originally Posted by mlseim
    It's best to give us a link so we can try it out ourselves.

    We need to see your CSS and HTML.

    The link to a sample of what is driving me mad....
    http://www.sample332uk-00027-hp.com/

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    The whole point of using CSS is to eliminate tables.

    See the example below.
    Since Netfirms inserts the banner (with tables), you can't do anything
    about that, but note how the whole side uses <div>'s.

    You should actually put all of the CSS in it's own .css file, but I left it
    in your page just for the example, so it's all in one file.

    Here is a working test: http://www.catpin.com/test.htm


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        background-color: #996666;
        font-family: Tacoma, arial, sans-serif;
        font-size: 10px;
        margin: 0px auto;
        width: 100%;
        text-align: center;
      }
    a:link,a:active,a:visited {
    background-color: transparent;
    color: #fff;
    text-decoration: none;
    font-family: Tacoma, "MS Sans Serif", Geneva, sans-serif;
    font-weight: bold;
    font-size: 12pt;
    }
    a:hover {
    background-color: transparent;
    color: #fff;
    text-decoration: underline;
    font-family: Tacoma, "MS Sans Serif", Geneva, sans-serif;
    font-weight: bold;
    font-size: 12pt;
    }
    #banner {
    background-color: transparent; 
    margin: 0px auto;
    clear: both;
    padding: 0px 0px 0px 0px;
    height: 150px;
    text-align: center;
    }
    #content {
    background-color: transparent; 
    margin: 0px auto;
    clear: both;
    padding: 0px 0px 0px 0px;
    text-align: center;
    }
    #wrapper {
    background-color: transparent; 
    text-align: center;   
    }
    #nav{
    width: 150px;
    float: left;
    text-align: right;
    }
    #center{
    font-family: Tacoma, sans-serif;
    font-size: 12pt;
    margin: 0px auto;
    width: 60%;
    padding: 0px 20px 0px 40px;
    text-align: left;
    color: #fff;
    float: left;
    }
    #content_bottom {
    background-color: transparent;
    margin: 0px auto;
    font-family: Tacoma, sans-serif;
    font-size: 10pt;
    padding: 10px 0px 5px 0px;
    color: #fff;
    width: 100%;
    clear: both;
    text-align: center;
    }
    
    </style>
    </head>
    
    <body>
    <div id="content">
    <div id="banner"></div>
    <div id="wrapper">
    <div id="nav">
    <a href="index.html" class="links">Home</a><br />
    <a href="service.html" class="links">Service</a><br />
    <a href="about.html" class="links">About Us (3) </a><br />
    <a href="contact.html" class="links">Contact (4) </a><br />
    </div>
    <div id="center">
    <p>SERVICE. <br />
    <br />
    On this page table with links is fixed up with css tag (link_table).  Its position will remain intact in Internet Explorer. However, in NN it will move horizontally. If I remove css tag (page 3,4) the table with links will jump depending on the size of the page - longer page, bigger down jump. </p>
    <p>On this page table with links is fixed up with css tag (link_table). Its position will remain intact in Internet Explorer. However, in NN it will move horizontaly. <br />
    <br />
    If I remove css tag (page 3,4) the table with links will jump depending on the size of the page - longer page, bigger down jump. </p>
    <br />
    <br />
    <br />
    </div>
    </div>
    <div id="content_bottom">
    Copyright, Mysite.com - All Rights Reserved
    </div>
    </div>
    </body>
    </html>


  6. #5
    Member
    Join Date
    Sep 2006
    Posts
    77
    Member #
    14004
    Thank you very, very much for your answer. I see only now what is the real css use, but I don’t know much about. I was using it only to define text (font, colour, padding, etc). With div tag replacing the whole table it is becomes complicated…
    Please could you tell me where I can learn about design using div tags in css (without tables)?
    Once more thank you very much, I really appreciate your help.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    It's best to use Google .... search for: CSS tutorial

    =============

    With tables, you have: <table><tr><td> content </td></tr></table>

    With CSS, the same thing is: <div id="center"> content </div>

    But you define the ID in your CSS <style> section.

    ============

    You think it's complicated, but it's really much easier than tables.

    Look at the example with your site (tables to CSS) ... it's about 1/3 the size,
    and you can add to the <div> sections without using <td>'s each time to
    position things.

    Tables are great for tabular data, such as listing created from a database.
    But as time goes on, you will find the need to control content on your page
    using a scripting language, such as PHP. CSS is a tool that allows you total
    control over the look and layout of your content. With some practice, you
    can whip out pages that work on every browser (even IE, which is sucky).

    Continue learning HTML, because you must know it. And learn CSS, as a tool
    to use with HTML. Then, you'll want to get into PHP, MySQL, and Javascripting.

    Keep at it, even if you're frustrated at first. The "light bulb" will turn on soon.


  8. #7
    Member
    Join Date
    Sep 2006
    Posts
    77
    Member #
    14004
    Mlseim, one more i wanted to thank you for help, great tips and so much explanation. If anything like relpies rating existed here I would give 10 out of 10!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:15 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com