SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Sydney
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Help converting table layout to CSS

    Can someone please help me, I am fairly new to web design, I have been reading about CSS being the better way of web design than using tables.

    I have got the hang of creating layout, columns, etc. But can someone please help me with the code below. I am trying to convert this so it appears in the centre of the page

    Code:
    <TABLE WIDTH=766 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
    	<TR>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=23 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=6 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=7 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=24 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=16 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=75 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=110 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=115 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=12 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=88 HEIGHT=1 ALT=""></TD>
    		<TD><IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=13 ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_02.gif" WIDTH=91 HEIGHT=32 ALT=""></TD>
    		<TD COLSPAN=9 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=5 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_04.gif" WIDTH=92 HEIGHT=45 ALT=""></TD>
    		<TD COLSPAN=8 ROWSPAN=2 ALIGN=left VALIGN=top><img src="images/index_05.gif" name="service" width="145" height="45" border="0"></TD>
    		<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_06.gif" WIDTH=91 HEIGHT=45 ALT=""></TD>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_07.gif" WIDTH=110 HEIGHT=45 ALT=""></TD>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_08.gif" WIDTH=115 HEIGHT=45 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_09.gif" WIDTH=112 HEIGHT=23 ALT=""></TD>
    		<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_11.gif" WIDTH=38 HEIGHT=22 ALT=""></TD>
    		<TD COLSPAN=4 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=6 ALIGN=left VALIGN=top><IMG SRC="images/index_13.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=4 ALIGN=left VALIGN=top><img src="images/index_14.gif" name="news" width="72" height="40" border="0"></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_15.gif" WIDTH=38 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_16.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_17.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_18.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_19.gif" WIDTH=83 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_22.gif" WIDTH=66 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_23.gif" name="quote" width="84" height="41" border="0"></TD>
    		<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_24.gif" WIDTH=69 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_25.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_26.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_27.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_28.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_30.gif" WIDTH=23 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=6 ALIGN=left VALIGN=top><img src="images/index_31.gif" name="about" width="117" height="40" border="0"></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_32.gif" WIDTH=79 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_33.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_34.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_35.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_36.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_38.gif" WIDTH=37 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_39.gif" name="specials" width="103" height="41" border="0"></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_40.gif" WIDTH=79 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_41.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_42.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_43.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_44.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=9 ALIGN=left VALIGN=top><img src="images/index_46.gif" name="hosting" width="157" height="40" border="0"></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_47.gif" WIDTH=62 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_48.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_49.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_50.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_51.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_53.gif" WIDTH=72 HEIGHT=44 ALT=""></TD>
    		<TD COLSPAN=7 ALIGN=left VALIGN=top><img src="images/index_54.gif" name="contact" width="130" height="44" border="0"></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_55.gif" WIDTH=17 HEIGHT=44 ALT=""></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_56.gif" WIDTH=109 HEIGHT=44 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_57.gif" WIDTH=110 HEIGHT=44 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_58.gif" WIDTH=115 HEIGHT=44 ALT=""></TD>
    		<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_59.gif" WIDTH=112 HEIGHT=44 ALT=""></TD>
    		<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_60.gif" WIDTH=101 HEIGHT=44 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_64.gif" WIDTH=75 HEIGHT=21 ALT=""></TD>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_65.gif" WIDTH=110 HEIGHT=35 ALT=""></TD>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_66.gif" WIDTH=115 HEIGHT=35 ALT=""></TD>
    		<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=3 ROWSPAN=4 ALIGN=left VALIGN=top background="images/index_68.gif"><table width="85%"  border="0" align="center">
              <tr>
                <td><form action="" method="post" name="form1">
                  Login <br>
                  <input name="login" type="text" id="login" size="12" maxlength="6">
                  <br>
                  Password:</span><br>
                  <input name="pass" type="password" id="pass" size="12">
                  <br>
                  <input type="submit" name="Submit" value="Submit">
                            </form></td>
              </tr>
            </table></TD>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD ALIGN=left VALIGN=top><IMG SRC="images/index_70.gif" WIDTH=75 HEIGHT=14 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=16 ROWSPAN=3 ALIGN=left VALIGN=top>	<IMG SRC="images/index_71.gif" WIDTH=438 HEIGHT=77 ALT=""></TD>
    		<TD ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top></TD>
    		<TD ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    		<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    		<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_80.gif" WIDTH=129 HEIGHT=14 ALT=""></TD>
    	</TR>
    	<TR>
    		<TD COLSPAN=24 ALIGN=left VALIGN=top></TD>
    	</TR>
    </TABLE>
    Any help please???

  2. #2
    SitePoint Zealot
    Join Date
    May 2003
    Location
    London
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not exactly what you are asking here. Do you want to centre the whole thing using CSS? if you do you could try the techniques described here.

    http://dorward.me.uk/www/centre/

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Do you mean you just want to centre the table using css or do you want the whole table converted into a css layout (without tables)?

    If its the latter then we'd need to see the page in action to see what it looks like as obviously all those images (and millions of spacer gifs) don't show up and its hard to tell what's going on.

    Or do you just want an outer element that is the same size as the table and horizontally centred?

    More infromation (and ideally a link to the page) will result in better responses to your question and hopefully some constructive advice

    Paul

  4. #4
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Sydney
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, basicaly, I have created an image slice in Photoshop then placed these images in a table all to form 1 large images.

    The table each slice is placed in is then located in another table which is centred on the page, so if you resize the window, the table stays in the centre.

    I just can't work out how to create the same using CSS.

  5. #5
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Sydney
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Do you mean you just want to centre the table using css or do you want the whole table converted into a css layout (without tables)?
    ...

    More infromation (and ideally a link to the page) will result in better responses to your question and hopefully some constructive advice
    Thank you Paul I didn't explain myself very well. It is the latter I am after, the whole table converted to a css layout but still centered in the page.

    here is a link to the page: http://solutiongraphics.com.au/version_2/

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well the best thing to do is to stitch all your sliced images back up into one graphice and place it in the background.

    As this is obviously a splash type page with little content then you can absolutely place the text elements (and images) in the required places.

    To centre the page you need to do something like this.
    Code:
    body {
     margin:0;
     padding:0;
     text-align:center;/* centre for ie5 */
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #CCCCCC;
     background-color: #CC6600;
    min-width:766px;/* for mozilla */
    }
    #wrapper {
     width:766px;
     margin:auto;/* centre for compliant browsers */
     position:relative;/* gain stacking context */
     background:#CC6600 url(images/somelogo.jpg) no-repeat center top;
     height:500px;
    }
    This will give you a centred page that is 766p x 500px.

    You can then place your elements using absolute positioning and they will be placed relative to the top lefty corner of the parent div because it has a position:relative set which gains the stacking context.

    Usually I don't recommend absolutely placing a lot of elements as it stops the flow of the document but as this is a splash type page with no content it should be ok.

    Heres is a very quick (very rough and ready) example that shows some of the techniques needed.

    http://www.pmob.co.uk/temp/somelogo.htm

    Hope that's given you food for thought

    Paul

  7. #7
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Sydney
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul


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
  •