#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Location
    Barcelona
    Posts
    334
    Rep Power
    81

    Help in CSS complex table


    I wish to set up a table but do not know how to go a step further.

    What I have done up to now is...
    Code:
    <html>
      <head>
    		<style type="text/css">
    			.container {
    				width: 500px;
    				height: 300px;	
    			}
    			.colLeft {
    				width: 30px;
    				height: 400px;
    				float: left;
    				background-color: beige;
    			}
    			.barTop {
    				width: 400px;
    				height: 30px;
    				float: left;
    				background-color: LightBlue
    			}
    			.colRight {
    				width: 30px;
    				height: 400px;
    				float: left;
    				background-color: LightGreen;
    			}
        </style>
      </head>
      
    	<body>
    		<div class="container">
      		<div class="colLeft">cl</div>
      		<div class="barTop">bt</div>
      		<div class="colRight">cr</div>
    		</div>
      </body>
    		
    </html>
    But what I need to get is...


    Can you help me?

    Thanks!
    Pere
    www.casti2001.com
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    938
    Rep Power
    281
    I would use a divide and conquer strategy. You are either going to have to use nested divs or nested tables to get that.

    start with your wrapper, then, split that into your 3 main columns leftCol, middleCol, rightCol.
    then, split middleCol into mainRows, then, split the Rows into inner Cols (as needed) and soforth until you have all the DIVs nested properly. then, start CSS'n.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    938
    Rep Power
    281
    here is a shorthand of the layout scheme I would probably use

    Code:
    #wrapper
    	#colLeft 
    	#colMiddle
    		#Row1(or topBar) 
    		#Row2
    			#r2leftCol 
    			#r2midCol 
    				#r2midColtopbar 
    				#r2midColcontent
    			#r2rightCol
    		#Row3(or midBar)
    		#Row4
    			#r4Left
    			#r4Right
    		#Row5
    			#r5colLeft
    				#r5colLeftTop
    				#r5colLeftBottom
    			#r5colMiddle
    			#r5colRight
    				#r5colRightTop
    				#r5colRightBottom
    		#Row6(or bottomBar)
    	#colRight
    like this
    html Code:
     
    <div id="wrapper">
    	<div id="colLeft">
    	</div><!--end colLeft-->
    	<div id="colMiddle">
    		<div id="Row1(or topBar)">
    		</div><!--end Row1-->
    		<div id="Row2">
    			<div id="r2leftCol">
    			</div><!--end r2leftCol-->
    			<div id="r2midCol"> 
    				<div id="r2midColtopbar">
    				</div><!--end r2midColtopbar-->
    				<div id="r2midColcontent">
    				</div><!--end r2midColcontent-->
    			</div><!--end r2midCol-->
    			<div id="r2rightCol">
    			</div><!--end r2rightCol-->
    		<div id="Row3(or midBar)">
    		</div><!--end Row3-->
    		<div id="Row4">
    			<div id="r4Left">
    			</div><!--end r4Left-->
    			<div id="r4Right">
    			</div><!--end r4Right-->
    		</div><!--end Row4-->
    		<div id="Row5">
    			<div id="r5colLeft">
    				<div id="r5colLeftTop">
    				</div><!--end r5colLeftTop-->
    				<div id="r5colLeftBottom">
    				</div><!--end r5colLeftBottom-->
    			</div><!--end r5colLeft-->
    			<div id="r5colMiddle">
    			</div><!--end r5colMiddle-->
    			<div id="r5colRight">
    				<div id="r5colRightTop">
    				</div><!--end r5colRightTop-->
    				<div id="r5colRightBottom">
    				</div><!--end r5colRightBottom-->
    			</div><!--end r5colRight-->
    		</div><!--end Row5-->
    		<div id="Row6(or bottomBar)">
    		</div><!--end Row6-->
    	</div><!--end colMiddle-->
    	<div id="colRight">
    	</div><!--end colRight-->
    </div><!--end wrapper-->


    I'm sure there is a much cleaner way to do this like using CSS frameworks (YUI and blueprint and YAML come to mind), but, this is what I came up with off the top of my head.

    Good luck with the CSS on that.

IMN logo majestic logo threadwatch logo seochat tools logo