CSS Layout Problem + CSS Sliding Doors & Lists!

Dev Shed Forums Sponsor:

October 26th, 2003, 03:08 AM

raydenx

Contributing User

Join Date: Feb 2001

Location: Singapore

Posts: 53

Time spent in forums: 21 m 49 sec
Reputation Power: 9

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

October 26th, 2003, 05:30 AM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,622

Time spent in forums: 3 Weeks 6 Days 2 h 18 m 25 sec
Reputation Power: 548

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;}

October 26th, 2003, 06:01 AM

raydenx

Contributing User

Join Date: Feb 2001

Location: Singapore

Posts: 53

Time spent in forums: 21 m 49 sec
Reputation Power: 9

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!

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: