SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  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)

    making 3 columns which is bordered tabless

    The code below at http://dot.kr/x-test/tablessLayout02.php has no border in the title line which is red backgrounded of the page.
    Code:
    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title>layOut</title>
    <style type="text/css">
    * { margin:0; padding:0;}
    .contentWrapper{
    float: left;
    width: 100%;
    }
    .bolor{
    background-color:#ffff88;
    }
    .folor{
    color:#000;
    }
    #center3liquid{
    margin: 0 200px 0 200px; 
    background-color:#777;
    }
    #centerFix3liquid{
    margin: 0 220px 0 220px; 
    background-color:#ff88cc;
    }
    #left3column{
    float: left;
    width: 200px; 
    margin-left: -100%;
    background: #bbb;
    }
    #leftFix3column{
    float: left;
    width: 220px; 
    margin-left: -100%;
    background: #88ffcc;
    }
    #right3column{
    float: left;
    width: 200px;
    margin-left: -200px; 
    background: #bbb;
    }
    #rightFix3column{
    float: left;
    width: 220px;
    margin-left: -220px; 
    background: #88ffff;
    }
    #screen { 
    width:400px;
    background-color:#bbb;
    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: 230px; 
     margin-left: -230px; 
     background: #aaffff;
    }
    .wFull{width:100%}
    .w10{width:10px}
    .w200{width:200px}
    .w300{width:300px}
    .w400{width:400px}
    .h5 {height:5px}
    .h10 {height:10px}
    .h30 {height:30px}
    .h50 {height:50px}
    .m5 {margin:5px;}
    .m-t5 {margin-top:5px;}
    .m-t10 {margin-top:10px;}
    .m-l5 {margin-left:5px;}
    .m-r5 {margin-right:5px;}
    .m-b5 {margin-bottom:5px;}
    .p2{padding:2px} 
    .p3{padding:3px} 
    .p-t5{padding-top:5px;}
    .p-l5{padding-left:5px;}
    .p-r5{padding-right: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}
    .guest-login {
     float:left;
     width:180px;
     background: #bbb ;
     padding:0px 0px 3px 50px;
    }
    .guest-login p{margin:0}
    .guest-login span, .guest-login strong {
     border:1px solid #555;
     background:#ffff88;
     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: #ffff88;
     padding:2px;
     margin:4px 0px;
    }
    .hr hr {
     position:absolute;
     left:-999em;
    }
    .guest-login div { clear:both }
    </style>
    
    </head>
    
    <body>
    
    <div class="contentWrapper">
    <div id="left2liquid">
     <a href="">my domain</a>
    </div></div>
    
    <div id="sideBar">
    <div class="guest-login" >
      <div class="top folor">
        <p><span>00</span><strong>Guest</strong> </p>
      </div>
      <div class="hr"><hr></div>
      <div>
        <p class="folor"><span>00</span> <strong>Login</strong></p>
      </div>
    </div>
    </div>
    
    <form>
    <div class="clearBoth h30 alignCenter p-t5 b1_555 bolor">
    <a href="" class="w10 b1_555 p-l5 p-r5 bColorWhite">+</a>
    <input type="text" class="w300">
    <input type="submit" value="search">
    </div>
    </form>
    
    <div class="clearBoth h30 m-t5 p-t5 b1_555 bolor">
       <div class="w400 alignCenter p2 b1_555 marginAuto bColorWhite"> (navigator)  sun > earth > asia (ancestors of Korea) </div>
    </div>
    
    <div class="h5 clearBoth"></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><a href="index.php?bone=ffff88">bone=ffff88</a></p>
            </div>  
    
    <div class="h30 bolor folor b1_555 alignCenter m5 p5"> footer</div>  
      </div>
    </div>
    
    <div id="left3column">
    <div class="m5">
    <p>brothers and sisters of Korea</p>
    <p>China</p>
    <p>Japan</p>
    <p>India</p>
    <p><a href="index.php?left=150">left=150</a></p>
    </div>
    
    <div class="h30 bolor folor b1_555 alignCenter m-t5 m-r5 m-b5 p5"> brothers and sisters</div>  
    </div>
    <div id="right3column">
    <div class="m5">
    <p>kids of Korea</p>
    <p>Seoul</p>
    <p>Pusan</p>
    <p>Daejeon</p>
    <p><a href="index.php?right=150">right=150</a></p>
    </div>
    <div class="h30 bolor folor b1_555 alignCenter m-t5 m-l5 m-b5 p5"> kids</div>  
    </div>
    
    </body>
    </html>
    I like to make a border of the title line as a whole and the border of the left fixed width and the border of right fixed width each.
    I modified the code above like the below for what I like to make.
    Code:
    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title>layOut</title>
    <style type="text/css">
    * { margin:0; padding:0;}
    .contentWrapper{
    float: left;
    width: 100%;
    }
    .bolor{
    background-color:#ffff88;
    }
    .folor{
    color:#000;
    }
    #center3liquid{
    margin: 0 200px 0 200px; 
    background-color:#777;
    }
    #centerFix3liquid{
    margin: 0 220px 0 220px; 
    background-color:#ff88cc;
    }
    #left3column{
    float: left;
    width: 200px; 
    margin-left: -100%;
    background: #bbb;
    }
    #leftFix3column{
    float: left;
    width: 220px; 
    margin-left: -100%;
    background: #88ffcc;
    }
    #right3column{
    float: left;
    width: 200px;
    margin-left: -200px; 
    background: #bbb;
    }
    #rightFix3column{
    float: left;
    width: 220px;
    margin-left: -220px; 
    background: #88ffff;
    }
    #screen { 
    width:400px;
    background-color:#bbb;
    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: 230px; 
     margin-left: -230px; 
     background: #aaffff;
    }
    .wFull{width:100%}
    .w10{width:10px}
    .w200{width:200px}
    .w300{width:300px}
    .w400{width:400px}
    .h5 {height:5px}
    .h10 {height:10px}
    .h30 {height:30px}
    .h50 {height:50px}
    .m5 {margin:5px;}
    .m-t5 {margin-top:5px;}
    .m-t10 {margin-top:10px;}
    .m-l5 {margin-left:5px;}
    .m-r5 {margin-right:5px;}
    .m-b5 {margin-bottom:5px;}
    .p2{padding:2px} 
    .p3{padding:3px} 
    .p-t5{padding-top:5px;}
    .p-l5{padding-left:5px;}
    .p-r5{padding-right: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}
    .guest-login {
     float:left;
     width:180px;
     background: #bbb ;
     padding:0px 0px 3px 50px;
    }
    .guest-login p{margin:0}
    .guest-login span, .guest-login strong {
     border:1px solid #555;
     background:#ffff88;
     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: #ffff88;
     padding:2px;
     margin:4px 0px;
    }
    
    .hr hr {
     position:absolute;
     left:-999em;
    }
    .guest-login div { clear:both }
    </style>
    </head>
    <body>
    <div class="contentWrapper">
    <div id="left2liquid">
     <a href="">my domain</a>
    </div></div>
    
    <div id="sideBar">
    <div class="guest-login" >
      <div class="top folor">
        <p><span>00</span><strong>Guest</strong> </p>
      </div>
      <div class="hr"><hr></div>
      <div>
        <p class="folor"><span>00</span> <strong>Login</strong></p>
      </div>
    </div>
    </div>
    
    <form>
    <div class="clearBoth h30 alignCenter p-t5 b1_555 bolor">
    <a href="" class="w10 b1_555 p-l5 p-r5 bColorWhite">+</a>
    <input type="text" class="w300">
    <input type="submit" value="search">
    </div>
    </form>
    
    <div class="clearBoth h30 m-t5 p-t5 b1_555 bolor">
       <div class="w400 alignCenter p2 b1_555 marginAuto bColorWhite"> (navigator)  sun > earth > asia (ancestors of Korea) </div>
    </div>
    
    <div class="h5 clearBoth"></div>
    <div class="clearBoth h30 b1_555 bolor p-t5">
    <table class="wFull">
      <tr>
       <td class="w200 b1_555 alignCenter bColorWhite">left (fixed width)</td>
       <td class="alignCenter folor">title (Korea : a kid of Asia)</td>
       <td class="w200 b1_555 alignCenter bColorWhite">right (fixed width)</td>
      </tr>
    </table>
    </div>
    
    <div class="h5 clearBoth"></div>
    <div class="contentWrapper">
      <div id="center3liquid">
            <div id="screen">
    <p><a href="index.php?screen=200">screen=200</a></p>
            </div>  
    
    <div class="h30 bolor folor b1_555 alignCenter m5 p5"> footer</div>  
      </div>
    </div>
    
    <div id="left3column">
    <div class="m5">
    <p>brothers and sisters of Korea</p>
    <p>China</p>
    <p>Japan</p>
    <p>India</p>
    <p><a href="index.php?left=300">left=300</a></p>
    </div>
    <div class="h30 bolor folor b1_555 alignCenter m-t5 m-r5 m-b5 p5"> brothers and sisters</div>  
    </div>
    
    <div id="right3column">
    <div class="m5">
    <p>kids of Korea</p>
    <p>Seoul</p>
    <p>Pusan</p>
    <p>Daejeon</p>
    <p><a href="index.php?right=150">right=150</a></p>
    </div>
    <div class="h30 bolor folor b1_555 alignCenter m-t5 m-l5 m-b5 p5"> kids</div>  
    </div>
    
    </body>
    </html>
    But the code above has a table.
    How can I make it tabless with the result at http://dot.kr/x-test/tablessLayout03.php of the code above?

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

    I'm not sure if this is what you are going for:

    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">
    p { margin:0 0 1em; }
    .wrap {
    	border:1px solid #000;
    	clear:both;
    	overflow:hidden;
    	text-align:center;
    	min-width:500px;
    }
    .inner {
    	background:red;
    	border-right:221px solid green;
    	border-left:200px solid green;
    	padding:1px 0;
    }
    .left, .right {
    	margin:0 0 0 -220px;
    	position:relative;
    	zoom:1.0;
    	float:left;
    	width:220px;
    }
    .right {
    	margin:0 -220px 0 0;
    	float:right
    }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<div class="inner">
    				<div class="left">left (fixed-width)</div>
    				<div class="right">left (fixed-width)</div>
    				<p>rest of content</p>
    		</div>
    </div>
    </body>
    </html>
    Is this page just for testing?

    If its a real page then you would seldom build one like that as you should start with some real content and then build with the content in mind. Forcing your content into a pre-defined layout is not the best idea as they both need to work together.


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
  •