SitePoint Sponsor

User Tag List

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

    Put the center align not only horizentally but also vertacally in two column layout

    I am using two column layout

    using two column layout, I like to put the text "middle & center" into the right center of the main <div> vertically, horizentally.

    The following is one of my trials but it seems not to work correctly.

    Code:
    <style> 
    
    body {
    padding:0;
    margin:0;
    background: #eeeeee; 
    font-size:17px 
    }
    
    
    
    #outer{
     height:100%;
     margin-left:160px;
     background: white;
     border-left:1px solid #000; 
     margin-bottom:-30px; 
    }
    #head{
     background: #ccccff;
     border-bottom:1px solid #000; 
     margin-left:-160px;  
     position:relative; 
     padding: 5px;
     height:1px;  
    }
    #menu {
        position:relative; 
        width:160px;
        float:left;
        margin-left:-159px;
        padding:5px;
        line-height:140%; 
    }
    #main {
     margin-bottom:29px; 
     padding:5px}
    
    #foot { 
     height:29px;
     border-top:1px solid #000;
     background-color: #ccccff; 
     text-align:center;
     position:relative;
     padding:5px
    }
    
    </style> 
    
    
    <body>
    
      <div id="outer"> 
    
        <div id="head"></div> 
    
    
        <div id="menu"></div> 
    
        
        <div id="main">
    
    
    
    <center>
    <table width=70% height=70%>
       <tr>
          <td align=center>
    
    
    
    <table cellpadding="0" cellspacing="0" border="0">
      <tr>
         <td> <b>middle & center</b></td>
      </tr>
    </table>
    
    
    
         </td>
       </tr>
    </table>
    </center>
    
    
        </div>
      
      </div>
    
      <div id="foot"></div>
    
    </body>

    Thanks in Advance
    Last edited by dotJoon; Nov 12, 2004 at 04:00.

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

    You can centre something n a table like this:
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash mac hack  \*/ 
    html, body{height:100%; padding:0;margin:0} 
    /* end hack */ 
    body {
     height:100%;
     padding:0;
     margin:0
    }
    table {
     height:100%;
     width:100%;
     border:1px solid #000;
     text-align:center;
    }
    td {border:1px solid red;vertical-align:middle;}
    }
    </style>
    </head>
    <body>
    <table cellspacing="0" cellpadding="0">
      <tr> 
    	<td>Hello</td>
      </tr>
    </table>
    </body>
    </html>
    Although not that IE likes quirks mode to give the table:100% height. Quirks mode has been forced by using the xml prologue above the doctype.

    Paul

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,211
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I lik the vertically & horizontally centered in main <div> area, not full screen area.

    The following code is the applying your code.
    Code:
    <style> 
    
    body {
    padding:0;
    margin:0;
    background: #eeeeee; 
    font-size:17px 
    }
    
    
    
    #outer{
     height:100%;
     margin-left:160px;
     background: white;
     border-left:1px solid #000; 
     margin-bottom:-30px; 
    }
    #head{
     background: #ccccff;
     border-bottom:1px solid #000; 
     margin-left:-160px;  
     position:relative; 
     padding: 5px;
     height:1px;  
    }
    #menu {
        position:relative; 
        width:160px;
        float:left;
        margin-left:-159px;
        padding:5px;
        line-height:140%; 
    }
    #main {
     margin-bottom:29px; 
     padding:5px}
    
    #foot { 
     height:29px;
     border-top:1px solid #000;
     background-color: #ccccff; 
     text-align:center;
     position:relative;
     padding:5px
    }
    
    
    table {
     height:100%;
     width:100%;
     border:1px solid #000;
     text-align:center;
    }
    td {border:1px solid red;vertical-align:middle;}
    }
    
    
    
    </style> 
    
    
    
    
    
    <body>
    
      <div id="outer"> 
    
        <div id="head"></div> 
    
        <div id="menu"></div> 
       
        <div id="main">
    
           <table cellspacing="0" cellpadding="0" border="0">
             <tr> 
               <td>Hello</td>
             </tr>
            </table>
    
        </div>
      
      </div>
    
    
      <div id="foot"></div>
    
    </body>
    But the above code generates vertical scroll bar and horizontal scroll bar.

    How can I remove the scroll bars?

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

    Well as you are using a table anyway you may as well do the whole thing in a table.

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash mac hack \*/ 
    html, body{height:100%; padding:0;margin:0} 
    /* end hack */ 
    table {
    height:100%;
    width:100%;
    }
    td {border:1px solid red}
    #header, #footer{height:50px;background:green}
    #left {
    width:160px;
    background:blue;
    }
    .centre {text-align:center}
    </style>
    </head>
    <body>
    <table cellspacing="0" cellpadding="0">
    <tr> 
    	<td id="header" colspan="2">&nbsp;</td>
    </tr>
    <tr> 
    	<td id="left">&nbsp;</td>
    	<td class="centre">hello</td>
    </tr>
    <tr> 
    	<td id="footer" colspan="2">&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>
    Hope that helps.

    Paul

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,211
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Well as you are using a table anyway you may as well do the whole thing in a table.

    I like the flexible layout of style.

    I have 4 area in the layout.

    (1) head <div> - top
    (2) menu <div> - left
    (3) main <div> - right
    (4) foot <div> - bottom


    All <div>s, especially "head," are very flexible because it uses style <div>.
    "Flexible" means here that the area can be extended by input the contents into the area.


    I like to keep the flexible layout, and put the "hello" in the center of the main <div> area whatever it uses table or not.

    Is there any way to keep the flexible layout and put the "hello" in the center of the main <div> area ?

    Code:
    <style> 
    
    body {
    padding:0;
    margin:0;
    background: #eeeeee; 
    font-size:17px 
    }
    
    
    
    #outer{
     height:100%;
     margin-left:160px;
     background: white;
     border-left:1px solid #000; 
     margin-bottom:-30px; 
    }
    #head{
     background: #ccccff;
     border-bottom:1px solid #000; 
     margin-left:-160px;  
     position:relative; 
     padding: 5px;
     height:1px;  
    }
    #menu {
        position:relative; 
        width:160px;
        float:left;
        margin-left:-159px;
        padding:5px;
        line-height:140%; 
    }
    #main {
     margin-bottom:29px; 
     padding:5px}
    
    #foot { 
     height:29px;
     border-top:1px solid #000;
     background-color: #ccccff; 
     text-align:center;
     position:relative;
     padding:5px
    }
    
    
    table {
     height:100%;
     width:100%;
     border:1px solid #000;
     text-align:center;
    }
    td {border:1px solid red;vertical-align:middle;}
    }
    
    
    
    </style> 
    
    
    
    
    
    <body>
    
      <div id="outer"> 
    
        <div id="head"></div> 
    
        <div id="menu"></div> 
       
        <div id="main">
     
               "hello"        
    
        </div>
      
      </div>
    
    
      <div id="foot"></div>
    
    </body>
    Horizental center is not difficult one.
    Problem is how to make it centered vertically.

    Thank you very much in Advance
    Last edited by dotJoon; Nov 14, 2004 at 01:25.

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

    valign:center in two column layout

    Code:
    <style> 
    
    body {
    padding:0;
    margin:0;
    background: #eeeeee; 
    font-size:17px 
    }
    
    
    
    #outer{
     height:100%;
     margin-left:160px;
     background: white;
     border-left:1px solid #000; 
     margin-bottom:-30px; 
    }
    #head{
     background: #ccccff;
     border-bottom:1px solid #000; 
     margin-left:-160px;  
     position:relative; 
     padding: 5px;
     height:1px;  
    }
    #menu {
        position:relative; 
        width:160px;
        float:left;
        margin-left:-159px;
        padding:5px;
        line-height:140%;
        
    }
    #main {
     margin-bottom:29px; 
     padding:5px;
     valign : center;
    }
    
    #foot { 
     height:29px;
     border-top:1px solid #000;
     background-color: #ccccff; 
     text-align:center;
     position:relative;
     padding:5px
    }
    
    
    
    
    </style> 
    
    
    
    
    
    <body>
    
      <div id="outer"> 
    
        <div id="head"></div> 
    
    
        <div id="menu"></div> 
    
        
        <div id="main">
    
          <center>
            Hello
          </center>
    
        </div>
      
      </div>
    
      <div id="foot"></div>
    
    </body>
    How can I make the red colored code to work?

  7. #7
    3MTA3
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    1,016
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try:
    vertical-align: middle;

  8. #8
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,211
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <style> 
    
    body {
    padding:0;
    margin:0;
    background: #eeeeee; 
    font-size:17px 
    }
    
    
    
    #outer{
     height:100%;
     margin-left:160px;
     background: white;
     border-left:1px solid #000; 
     margin-bottom:-30px; 
    }
    #head{
     background: #ccccff;
     border-bottom:1px solid #000; 
     margin-left:-160px;  
     position:relative; 
     padding: 5px;
     height:1px;  
    }
    #menu {
        position:relative; 
        width:160px;
        float:left;
        margin-left:-159px;
        padding:5px;    
    }
    #main {
     margin-bottom:29px; 
     padding:5px;
     vertical-align: middle;  
    }
    
    
    #foot { 
     height:29px;
     border-top:1px solid #000;
     background-color: #ccccff; 
     text-align:center;
     position:relative;
     padding:5px
    }
    
    
    </style> 
    
    
    
    
    
    <body>
    
      <div id="outer"> 
    
        <div id="head"></div> 
    
    
        <div id="menu"></div> 
    
        
        <div id="main">
    
    
    Hello
    
    
        </div>
      
      </div>
    
    
      <div id="foot"></div>
    
    </body>
    Although I put vertical-align: middle; in the main <div>,
    "Hello" in the main <div> is not vertically middle aligned when it is browsed.

    Is there any way for making "Hello" verticaly middle aligned?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I think you'll have to resort to nested tables to do this exactly.

    I could do it with fixed headers and footers then the height can be accounted for (would still need a table though).

    The nearest solution is the table one I posted above which will be flexible in ie but needs nore work for mozilla.

    I will have a look tomorrow and see if I can think of anything else but I'm busy for the rest of today

    Paul

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Joon,

    Please do not duplicate post especially when I have spent so much time trying to answer your questions in the other thread. Its very bad manners and it also means other members are now wasting their time going over similar ground .

    Please keep your replies to the original thread and anone else who wants to help can refer to that thread to see whats already been discussed.

    http://www.sitepoint.com/forums/showthread.php?t=209355

    For you information vertical-align only aligns inline elements within a single line (or table cell) and not within block level elements.

    Where the height of the element is not known then it is very difficult to vertically centre in css which is why I suggested and gave examples of a table layout which worked as you wanted in IE.

    Paul

  11. #11
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,211
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Please do not duplicate post especially when I have spent so much time trying to answer your questions in the other thread.
    l
    I have nothing but saying sorry for bothering you.


    Quote Originally Posted by Paul O'B
    Where the height of the element is not known then it is very difficult to vertically centre in css
    Yes, it is truly difficult because the height is not fixed.

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

    Threads merged

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Edit:


    Thanks Vinnie


    Quote Originally Posted by joon
    I have nothing but saying sorry for bothering you.
    Thats OK - I don't mind being bothered it was just the duplication that was bad etiquette

    There was a thread here:

    http://www.sitepoint.com/forums/show...align+solution

    Which offers a method for vertical centering with css but I haven't had time to look at whether it will work in your case or not.

    You might want to try for yourself as I'm probably too busy today to look

    It might help Otherwise your stuck with tables I'm afraid.

    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
  •