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 11 of 11

Thread: CSS "Tables"

  1. #1
    New Coder
    Join Date
    Dec 2003
    Location
    On your monitor
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS "Tables"

    I am trying to switch from conventional HTML tables to creating tables using CSS DIVs. I am having some problems though .

    How would the CSS style be for the following table?

    x represents one cell

    xx
    x

    Pretty simple, but just want to know how to place two cells in one row, I am having a problem with that.

    Thank you,

    - ZYPHER

  • #2
    New Coder
    Join Date
    Dec 2003
    Location
    On your monitor
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also, the first cell in the first row is 80%, thus making the second cell 20%. The cell in the second row is, lets say, 50%.

    - ZYPHER

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why are you trying to re-create tables with CSS? If you're talking about the layout of your website, then sure, I can help you with layout issues. But if you want a table, then use a table. CSS isn't supposed to replace the correct usage of tables, instead CSS is about creating layouts.

    Which is it that you're trying to accomplish?

  • #4
    New Coder
    Join Date
    Dec 2003
    Location
    On your monitor
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have a layout that currently uses tables. I want to make the same layout without tables, and with CSS DIVs.

    PS. How is your site coming along? Movable Type still broken?

    - ZYPHER

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, it's still broken. My web host is really beginning to irk me. Thanks for asking

    If you want to start designing with XHTML+CSS, you need to completely change your thinking about how layout is done. You need to stop thinking about this cell and that cell, and start looking at your site as blocks of information.

    Instead of starting with "this is how I want it to look", you should think "what type of infformation is this?" You can take your raw HTML/XHTML, and looking only at the content, break it up into header, menu, content, footer... or something of that nature.

    Once you figure out how you've organized your content, you wrap those sections of content into divs. From there, you use CSS... first to position, then to work into the finer details. It is also recommended by many knowledgable web designers to design your site in the most compliant web browser, then make changes for the less compliant ones. Normally, this is Mozilla, then Opera, then Internet Explorer. When you do it this way, you start to notice just how flaky IE's CSS support really is.

    If you post a link to what you've got for a website, I wouldn't mind breaking it apart into logical groups of XHTML and styling it into CSS... just so that you can learn how to do it yourself.

    I've got a bit of information in the Web Resources section of my website. There are some articles and tutorials there that may help you learn quite a bit...

  • #6
    New Coder
    Join Date
    Dec 2003
    Location
    On your monitor
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Does your email work? I emailed you with a link to my site about a week ago without a response .

    - ZYPHER

  • #7
    New Coder
    Join Date
    Dec 2003
    Location
    On your monitor
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Guess not

  • #8
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts
    here is what I am using

    CSS

    ----------------------
    Code:
    html
    {
    	width:100%;
    	height:100%;
    	overflow:hidden;
    	margin:	0px;
    	padding:0px;
    	border:0px;
    }
    body 
    {	
    	width:100%;
    	height:100%;
    	overflow:hidden;
    	margin:	0px;
    	padding:0px;
    	border:0px;
    
    	font-family:Verdana,arial;
    	font-size:10px;
    	font-style:normal;
    	font-weight:400;
    	background:#1C516E; 
    	color:#F6F7EB;
    	
    	scrollbar-face-color:#1C516E; 
    	scrollbar-shadow-color:#1C516E; 
    	scrollbar-highlight-color:#1C516E; 
    	scrollbar-3dlight-color:#1C516E; 
    	scrollbar-darkshadow-color:#1C516E; 
    	scrollbar-track-color:#1C516E;
    	scrollbar-arrow-color:#F6F7EB;   
    }
    #MainForm
    {
    	width:100%;
    	height:100%;
    	overflow:hidden;
    	margin:	0px;
    	padding:0px;
    	border:0px;
    	text-align:center;
    	vertical-align:top;
    }
    #Header
    {
    	height:6%;
    	width:100%;
    	margin:0px;
    	padding:0px;
    	border:0px;
    	overflow:hidden;
    
    	background-color:#1C516E;
    	color:#F6F7EB;
    	text-align:center;
    	vertical-align:middle;
    }
    #MenuG
    {	
    	height:810%;	
    	width:10%;
    	position:absolute;	
    	left:0px;
    	margin:0px;
    	padding:0px;
    	border:0px;
    	overflow:hidden;
    
    	text-align:center;
    	vertical-align:top;
    	color:#F6F7EB;
    	background-color:#1C516E;
    }
    #Content
    {
    	height:810%;
    	width:80%;
    	position:absolute;	
    	left:10%;
    	margin:0px;
    	padding:0px;
    	border:0px;
    	overflow:auto;
    
    	text-align:center;
    	vertical-align:top;
    	background-color:tan;
    	color:#1C516E;
    }
    #MenuD
    {
    	width:10%;
    	height:810%;
    	position:absolute;
    	right:0px;
    	margin:0px;
    	padding:0px;
    	border:0px;
    	overflow:hidden;
    
    	text-align:center;
    	vertical-align:top;
    	background-color:#1C516E;
    	color:#F6F7EB;
    }
    #Footer
    {
    	width:100%;
    	height:6%;
    	position:absolute;	
    	left:0px;
    	bottom:0px;
    	margin:0px;
    	padding:0px;
    	border:0px;
    
    	font-size:8px;
    	letter-spacing:0.1em;
    	background-color:#1C516E;
    	color:#F6F7EB;
    }
    -----------------------

    XHTML

    -------------------------
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    <title> sans frameset </title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <style type="text/css" media="all">@import "H_Mg_Md_F.css";@import "menu.css";</style>
    </head>
    <body>
    <form id="MainForm">
    	<div id="Header">
    		<table  class="Menu">
    		<tr class="MenuItem">
    			<td><a href="?link=1">1</a></td>
    			<td><a href="?link=2">2</a></td>
    			<td><a href="?link=3">3</a></td>
    		</tr>
    		</table>
    	</div>
    	<div id="MenuG">
    		menu g
    	</div>
    	<div id="Content">
    		 content content content
    	</div>
    	<div id="MenuD">
    		menu d  menu d
    	</div>
    	<div id="Footer">here footer</div>
    </form>
    </body>
    </html>
    -------------------------

    [edit:] Added code tags and reduced scrolling (mhtml).
    Last edited by Mhtml; 12-27-2003 at 12:32 AM.

  • #9
    New Coder
    Join Date
    Dec 2003
    Location
    On your monitor
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks angiras

  • #10
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Use code tags please! (I've done it for you )

    [code] you code here [/code]
    Omnis mico antequam dominus Spookster!

  • #11
    Regular Coder
    Join Date
    Dec 2002
    Location
    France
    Posts
    522
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry ! I shall do it next time :-))


  •  

    Posting Permissions

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