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

    Join Date
    Feb 2001
    Location
    Singapore
    Posts
    53
    Rep Power
    15

    CSS Layout Problem + CSS Sliding Doors & Lists!


    hello everyone!

    i just read 2 amazing articles on a list apart:

    Sliding Doors of CSS
    CSS Design: Taming Lists

    after reading them.. i decided to implement them on my own content manager to get rid of the useless tables!!!

    i've included 2 pictures...

    1 of them is the intended outcome(admin layout.gif) and the other is the one under construction (untitled.gif). feel free to download my source code in the zip file.





    here's the link to download the source code:
    http://www.oasisfanatic.com/docs/css.zip

    this the page's code:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <
    head>
      <
    title>oasis fanatic admin header</title>
      <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <
    link rel="stylesheet" type="text/css" href="raydenx_admin.css">
      <
    script src="x.js" type="text/javascript"></script>
      <script type="text/javascript">  
        /*function adjustLayout()  
        {  
            // GET NATURAL HEIGHTS
            var content_height = xHeight("content");  
            var content_left_height = xHeight("content_left");  
            var content_right_height = xHeight("content_right");  
            
            // FIND THE MAXIMUM HEIGHT  
            var max_height = Math.max(content_height, Math.max(content_left_height, content_right_height));  
            
            // ASSIGN MAXIMUM HEIGHT TO ALL COLUMNS  
            xHeight("content", max_height);  
            xHeight("content_left", max_height);  
            xHeight("content_left", max_height);  
            
            // Show the footer  
            //xShow("footer");  
        }
        
        window.onload = function()  
        {  
            xAddEventListener(window, "resize",  
            adjustLayout, false);  
            adjustLayout();  
        }  */
        </script>


    </head>

    <body>

    <!-- HEADER - START -->
    <div id="header_bg">

        <!-- HEADER LOGO - START -->
        <div id="header_logo"><a href="#"><img src="spacer.gif" width="154" height="34" alt="Oasis Fanatic" border="0" /></a></div>
        <!-- HEADER LOGO - END -->
        
        <!-- HEADER USER MANAGEMENT - START -->
        <div id="header_user_management" class="white_10"><a href="#">edit profile</a> | <a href="#"">edit password</a> | <a href="#">edit preferences</a> | <a href="#">logout</a></div>
        <!-- HEADER USER MANAGEMENT - END -->
            
        <!-- HEADER TABS - START -->
        <div id="header_tabs">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Band</a></li>
            <li><a href="#">Discography</a></li>
            <li><a href="#">Fansites</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Gigography</a></li>
            <li><a href="#">About</a></li>
            <li id="current"><a href="#">Members</a></li>
            <li><a href="#">Awards</a></li>
            <li><a href="#">Emails</a></li>
            <li><a href="#">Settings</a></li>
        </ul>
        </div>
        <!-- HEADER TABS - END -->

        <!-- HEADER MENU - START-->
        <div id="header_menu" class="white_11">
            
            <!-- SECTION LINKS - START -->
            <ul>
                <li class="first"><A HREF="#">item 1</A></li><li><A HREF="#">item 2</A></li><li><A HREF="#">item 3</A></li><li><A HREF="#">item 4</A></li><li><A HREF="#">item 5</A></li><li class="current_sub_section"><A HREF="#">item 6</A></li>
            </ul>
            <!-- SECTION LINKS - END -->
            
        </div>
        <!-- HEADER MENU - END -->
        
    </div>
    <!-- HEADER - END -->

    <!-- LEFT EDGE - START -->
    <div id="left_edge">&nbsp;</div>
    <!-- LEFT EDGE - END -->

    <!-- CONTENT - START -->
    <div id="content">

        <!-- SUB HEADER - START -->
        <div id="sub_header" class="black_13"><b>Sub Section</b></div></div>
        <!-- SUB HEADER - END -->

        <div id="content_left" class="black_11">content left<br><br></div>
        <div id="content_right" class="black_11">content right<br></div>
        
    </div>
    <!-- CONTENT - END -->

    <!-- RIGHT EDGE - START -->
    <div id="right_edge">&nbsp;</div>
    <!-- RIGHT EDGE - END -->

    </body>
    </html> 
    ok... now for my problem. this is the first time i'm doing css layout. i can get the tabs and everything at top of my page right. its the content that got my stuck.

    one thing that is bothering my is the "content" div. i can't seem to get it to display.

    within the "content" div there are 2 more divs, content_left and content_right. I have soem challenges getting them to fit right.

    i suspect is its something to do with the absolute positioning and floats. but i am not too sure.

    thanks in advance for your help!

    this CSS Sliding Doors is a life saver!! Gotta check it out! make a whole list of tabs with the <UL> <LI> tags!!
    My Sites: OasisFanatic.com, My Blog
    My Ad Networks: Casale , NetAudioAds , AdSense, Clicksor , AdBrite
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    Code:
    <!-- SUB HEADER - START -->
    
        <div id="sub_header" class="black_13"><b>Sub Section</b></div></div> 
    
        <!-- SUB HEADER - END -->
    you got a closing div-tag to many,
    probably why you have problem with the content-div

    by the way you need to close every tag,
    use <br /> not <br> (best of all use css, as you use them to controll the layout )

    and you need to remove border="0" from the logo image, not allowed in xhtml strict. again use css.
    ie,
    #header_logo img{ border:0;}
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Location
    Singapore
    Posts
    53
    Rep Power
    15
    thanks for the reply.

    i've got the extra </div> out of the way.

    do u know why the div content does not show even though there are 3 divs in it?

    here's a scaled down code:

    <div id=content>

    <div id=sub header>
    </div>

    <div=content_left></div>
    <div=content_right></div>

    </div>

    *********************

    content right is a fixed width of 226px. how do i make content_left take up all the space that is to the left of content_right.

    here's a little illustration to what i am trying to say.

    ====================
    sub_header
    ====================
    content_left |content_right
    |
    |
    |
    |
    |
    |
    |
    |
    ====================

    all this is nested in the div content.

    thanks a lot guys!
    My Sites: OasisFanatic.com, My Blog
    My Ad Networks: Casale , NetAudioAds , AdSense, Clicksor , AdBrite

IMN logo majestic logo threadwatch logo seochat tools logo