Results 1 to 8 of 8

Thread: Moving to CSS

  1. #1
    3 Star Lounger
    Join Date
    Sep 2001
    Location
    Stuck at work..., Missouri, USA
    Posts
    248
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Moving to CSS

    I have the following in pure HTML and it looks like I want it to. <pre><table width="700" border="2" cellpadding="0" cellspacing="1"
    bgcolor="#C0C0C0" bordercolor="#808080">
    <tr>
    <td align="center"><hr width="99%"><font face="verdana,arial">
    ------------ :: Welcome To My Website :: ------------</font><hr width="99%"></td>
    </tr>
    </table></pre>


    I want to move to CSS but can not figure out how to make it look right.

    I have the following css file <pre>/* Body Sets the Width 720 that the table used to */
    body {
    width: 720px;
    margin: 0px;
    padding: 0px;


    }

    /* Defines the header width and location */

    div#header {
    width: 720px;
    height: 70px;
    background: rgb(192,192,192);
    font-size: 160%;
    text-align: center;
    vertical-align: middle;
    }</pre>

    and the following html <pre><html>
    <head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="tableless.css" type="text/css">
    </head>
    <body>


    <div id="main">
    <div id="header">
    ------------ :: Welcome To My Website :: ------------
    </div>

    </div>

    </body>
    </html></pre>



    What am I doing wrong?
    <font face="Comic Sans MS">Morgan Erickson</font face=comic>
    morgan.erickson@sprint.com
    <img src=/S/flags/USA.gif border=0 alt=USA width=30 height=18>-From <img src=/S/flags/Colorado.gif border=0 alt=Colorado width=30 height=18> but living in <img src=/S/flags/Missouri.gif border=0 alt=Missouri width=30 height=18>...and working in Kansas.

  2. #2
    Uranium Lounger
    Join Date
    Jan 2001
    Location
    Cincinnati, Ohio, USA
    Posts
    7,089
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving to CSS

    You're using the DIV tag in the source to replace the HTML code for a table. CSS can't and will never do this; you still need to define the table and other elements using standard HTML. Using CSS will allow you to define the appearance of the table, but not substitute the actual code used to create it.

    Thus, your code should look like this:
    <code><table class="header">
    <tr>
    <td>
    <hr width="99%">
    ------------ :: Welcome To My Website :: ------------
    <hr width="99%">
    </td>
    </tr>
    </table></code>

    and your CSS would look like this:

    <code>.header {
    background: #C0C0C0;
    border: #808080;
    border-width: 2px;
    font-size: 160%;
    height: 70px;
    margin: 1px;
    padding: 0px;
    text-align: center;
    vertical-align: middle;
    width: 720px;
    }</code>

    If you want to work with CSS, then you should consider using TopStyle to make your life easier. I use the pro version, but the free version may do all you need.

    Try the code above and see if it works for you.
    -Mark

  3. #3
    Uranium Lounger
    Join Date
    Jan 2001
    Location
    Cincinnati, Ohio, USA
    Posts
    7,089
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving to CSS

    You're not incorrect in your understanding - just in the execution. I wasn't clear on what you were trying to do. Do you have a live link to your code so that we can see how it renders in the browser?
    -Mark

  4. #4
    3 Star Lounger
    Join Date
    Sep 2001
    Location
    Stuck at work..., Missouri, USA
    Posts
    248
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving to CSS

    (Edited by Leif to make link live - see the quick guide and/or <!help=19>Help 19<!/help> - it's really not that difficult and is very helpful to others!)

    http://www.teamtj.net/test/

    table.html is using table tags DFindex.html is my attempt at CSS.
    <font face="Comic Sans MS">Morgan Erickson</font face=comic>
    morgan.erickson@sprint.com
    <img src=/S/flags/USA.gif border=0 alt=USA width=30 height=18>-From <img src=/S/flags/Colorado.gif border=0 alt=Colorado width=30 height=18> but living in <img src=/S/flags/Missouri.gif border=0 alt=Missouri width=30 height=18>...and working in Kansas.

  5. #5
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Moving to CSS

    <P ID="edit" class=small>(Edited by jscher2000 on 19-Dec-05 12:33. )</P>Here, you do not need a table because you are simply using the table to create a box. You can create a box using the <div> element and then style that box, and its contents, using CSS. Check out the attached example.

    Added: I just checked in IE and the heights are not quite a match. You might have to tweak the style properties for the <hr> element some more.
    Attached Files Attached Files

  6. #6
    3 Star Lounger
    Join Date
    Sep 2001
    Location
    Stuck at work..., Missouri, USA
    Posts
    248
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving to CSS

    <P ID="edit" class=small>(Edited by WyllyWylly on 19-Dec-05 15:33. Added URL code to make link active.)</P>Am I incorrect, then, in my understanding that it is possible to entirely replace tables with css?

    I am working from http://www.keithjbrown.co.uk/vworks/...design_2.shtml which says you can, I just can't get it to work right...

    Is it just my choice of layout that won't work?
    <font face="Comic Sans MS">Morgan Erickson</font face=comic>
    morgan.erickson@sprint.com
    <img src=/S/flags/USA.gif border=0 alt=USA width=30 height=18>-From <img src=/S/flags/Colorado.gif border=0 alt=Colorado width=30 height=18> but living in <img src=/S/flags/Missouri.gif border=0 alt=Missouri width=30 height=18>...and working in Kansas.

  7. #7
    3 Star Lounger
    Join Date
    Sep 2001
    Location
    Stuck at work..., Missouri, USA
    Posts
    248
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Moving to CSS

    That's pretty close to perfect, thank you!
    <font face="Comic Sans MS">Morgan Erickson</font face=comic>
    morgan.erickson@sprint.com
    <img src=/S/flags/USA.gif border=0 alt=USA width=30 height=18>-From <img src=/S/flags/Colorado.gif border=0 alt=Colorado width=30 height=18> but living in <img src=/S/flags/Missouri.gif border=0 alt=Missouri width=30 height=18>...and working in Kansas.

  8. #8
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Moving to CSS

    Upon further thought, the <hr> elements are being used to create top and bottom borders on the paragraph, so you could try using border properties instead, as per the attached. Again, the rendering in IE is strange, so if you need beveled edges, you will have to experiment around.
    Attached Files Attached Files

Posting Permissions

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