SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    changing some part of table code to tabless in div layout

    Code:
    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title>layOut</title>
    <style type="text/css">
    * { margin:0; padding:0;}
    .contentWrapper{
    float: left;
    width: 100%;
    }
    .boneColor{
    background-color:#ffff88;
    }
    #center3liquid{
    margin: 0 250px 0 120px; 
    background-color:#ff88ff;
    }
    #centerFix3liquid{
    margin: 0 220px 0 220px; 
    background-color:#ff88ff;
    }
    #left3column{
    float: left;
    width: 120px; 
    margin-left: -100%;
    background: #88ffff;
    }
    #leftFix3column{
    float: left;
    width: 220px; 
    margin-left: -100%;
    background: #88ffff;
    }
    #right3column{
    float: left;
    width: 250px;
    margin-left: -250px; 
    background: #88ffff;
    }
    #rightFix3column{
    float: left;
    width: 220px;
    margin-left: -220px; 
    background: #88ffff;
    }
    
    #screen { 
    width:500px;
    background-color:#ffaaff;
    margin:auto;
    padding:5px;
    }
    #title { 
    background-color:#ffaaaa;
    margin:auto;
    padding:5px;
    }
    #left2liquid{
    margin-right: 200px;
    margin-top:15px;
    }
    #right2column{
    float: left;
    width: 200px;
    margin-left: -200px; 
    background: #ff88ff;
    }
    
    #sideBar {
     float: left;
     width: 200px; 
     margin-left: -200px; 
     background: #aaffff;
    }
    
    .wFull{width:100%}
    .w10{width:10px}
    .w300{width:300px}
    .h5 {height:5px}
    .h10 {height:10px}
    .h30 {height:30px}
    .m5 {margin:5px;}
    .m-t5 {margin-top:5px;}
    .m-t10 {margin-top:10px;}
    .p2{padding:2px} 
    .p3{padding:3px} 
    .p-t5{padding-top:5px;}
    .b1_555 { border:1px solid #555}
    .alignLeft{text-align:left}
    .alignCenter{text-align:center}
    .alignRight{text-align:right}
    .bColorWhite{background-color:#ffffff}
    .marginAuto{margin:auto}
    .clearBoth{clear:both}
    </style>
    </head>
    
    <body>
    <div class="contentWrapper">
    <div id="left2liquid">
     <a href="">my domain</a>
    </div></div>
    
    <div id="sideBar">
    <table>
      <tr>                                                                                        
        <td colspan="2" class="wFull alignCenter boneColor b1_555">guest</td>
        <td class="w10"></td>
        <td class="boneColor b1_555 p2">00</td>
      </tr>  
      <tr>
        <td colspan="4" class="wFull h5 boneColor b1_555"></td>
      </tr>
    </table>
    <table>
      <tr>
        <td class="boneColor p2 b1_555">00</td>
        <td class="w10"></td>
        <td colspan="2" class="wFull boneColor b1_555 alignCenter">logIn</td>
      </tr>
    </table>
    </div>
    
    <form>
    <div class="clearBoth h30 alignCenter p-t5 b1_555 boneColor">
    <a href="">+</a>
    <input type="text" class="w300">
    <input type="submit" value="search">
    </div>
    </form>
    
    <div class="clearBoth h30 m-t5 p-t5 b1_555 boneColor">
       <div class="w300 alignCenter p2 b1_555 marginAuto bColorWhite"> (navigator )  sun > earth > asia </div>
    </div>
    
    <div class="h5"></div>
    <div class="contentWrapper">
      <div id="centerFix3liquid" class="h30 alignCenter">
          <p>title (liguid width)</p>
      </div>
    </div>
    
    <div id="leftFix3column">
    <div class="alignCenter">
     <p class="m5"> left (fixed width)</p></div>
    </div>
    
    <div id="rightFix3column">
    <div class="m5 alignCenter"><p> right (fixed width) </p></div>
    </div>
    
    <div class="h5 clearBoth"></div>
    <div class="contentWrapper">
      <div id="center3liquid">
            <div id="screen">
    <p>flexible width by the contents-variable. 
    The left and right side of this center contents are the liquid space</p>
            </div>    
      </div>
    </div>
    <div id="left3column">
    <div class="m5">
    <p>flexible width by the left-variable</p>
    </div>
    </div>
    
    <div id="right3column">
    <div class="m5">
    <p>flexible width by the right-variable</p>
    </div></div>
    </body>
    </html>
    How can I make the table code in the code above at http://dot.kr/x-test/tablessLayout01.php tabless with the same result of display?

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

    Are you just talking about #sidebar?

    There doesn't seem to be anything more awkward with that than what you have done for the rest of the page.

    It looks four floats with appropriate widths would do what you want . Unless of course you want full equalising table behaviour and then you could use the display:table properties but are only available from ie8+.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Are you just talking about #sidebar?
    I am just talking about removing the table in the page.
    Quote Originally Posted by Paul O'B View Post
    There doesn't seem to be anything more awkward with that than what you have done for the rest of the page.
    I am afraid that I don't understand what you mean.
    Quote Originally Posted by Paul O'B View Post
    It looks four floats with appropriate widths would do what you want.
    Do you mean that I need four columns for removing the table code of the page?
    Quote Originally Posted by Paul O'B View Post
    Unless of course you want full equalising table behaviour and then you could use the display:table properties but are only available from ie8+.
    I don't want table code. I want compatible code.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dotJoon View Post
    I am just talking about removing the table in the page.
    Which is what Paul was talking about.
    I am afraid that I don't understand what you mean.
    To be blunt, you have coded your page poorly.
    Do you mean that I need four columns for removing the table code of the page?
    To replace the table you basically just need 4 of these
    <div style="float:left;width:24.5%"></div>.

    For each instance of that, put each a <td> in each separate div example. That's basically what Paul is trying to get you to do (but make those styles on a class, not inline, like my example)
    I don't want table code. I want compatible code.
    I'm assuming English isn't your first language because your response isn't really...a valid response. Paul wasn't talkin about table code. He was talking about using code that give table like BEHAVIOR, minus the actual code for tables. It's compatible in IE8+, and all the other main browsers.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    This is just rough but you could do it like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .guest-login {
    	float:left;
    	width:196px;
    	background: #aff;
    	padding:2px;
    }
    .guest-login p{margin:0}
    .guest-login span, .guest-login strong {
    	border:1px solid #555;
    	background:#ff8;
    	padding:2px;
    	overflow:hidden;
    	display:block;
    	text-align:center;
    }
    .guest-login span {
    	float:left;
    	margin:0 3px 0 0;
    }
    .top span {
    	float:right;
    	margin:0 0 0 3px;
    }
    .hr {
    	clear:both;
    	border:1px solid #555;
    	background:#ff8;
    	padding:1px;
    	margin:2px 0;
    }
    .hr hr {
    	position:absolute;
    	left:-999em;
    }
    .guest-login div { clear:both }
    </style>
    </head>
    
    <body>
    <div class="guest-login" >
    		<div class="top">
    				<p><span>00</span><strong>Guest</strong> </p>
    		</div>
    		<div class="hr"><hr></div>
    		<div>
    				<p><span>00</span> <strong>Login</strong></p>
    		</div>
    </div>
    </body>
    </html>


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
  •