SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict raydenx's Avatar
    Join Date
    Jun 2003
    Location
    Singapore
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb 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.

    this the page's code:
    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">
    </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">asf safsf as fasfaf as fsaf</div>
     <div id="content_right">asf safsf as fasfaf as fsaf</div>
     
    </div>
    <!-- CONTENT - END -->
    <!-- RIGHT EDGE - START -->
    <div id="right_edge">&nbsp;</div>
    <!-- RIGHT EDGE - END -->
    </body>
    </html>
    the css code:
    Code:
    /* DEFAULT LINKS */
    a:link {color: #1C3B5B; text-decoration: none;}
    a:visited {color: #660066; text-decoration: none;}
    a:active {color: #1C3B5B; text-decoration: underline;}
    a:hover {color: #1C3B5B; text-decoration: underline;}
    /* BLACK VERDANA FONT */
    .black_13 {font-family: verdana; font-size: 13px; color: #252525}
    .black_12 {font-family: verdana; font-size: 12px; color: #252525}
    .black_11 {font-family: verdana; font-size: 11px; color: #252525}
    .black_10 {font-family: verdana; font-size: 10px; color: #252525}
    /* GRAY VERDANA FONT */
    .gray_10 {font-family: verdana; font-size: 10px; color: #525152}
    .gray_11 {font-family: verdana; font-size: 11px; color: #525152}
    .gray_13 {font-family: verdana; font-size: 13px; color: #525152}
    /* WHITE VERDANA FONT */
    .white_10 {font-family: verdana; font-size: 10px; color: #FFFFFF}
    .white_11 {font-family: verdana; font-size: 11px; color: #FFFFFF}
    .white_12 {font-family: verdana; font-size: 12px; color: #FFFFFF}
    .white_13 {font-family: verdana; font-size: 13px; color: #FFFFFF}
    /* RED VERDANA FONT */
    .red_11 {font-family: verdana; font-size: 11px; color: #FF0000}
    /* FORM ELEMENTS */
    .formbutton {font-family: verdana; font-size: 11px; font-weight: bold; color: #252525;}
    .formelements {font-family: verdana; font-size: 11px; color: #252525;}
    /* HTML EDITOR */
    .content_box {background: #FFFFFF; border-left:inset #CCCCCC 2px; border-top:inset #CCCCCC 2px; width: 500px; border-right:inset #CCCCCC 1px; border-bottom:inset #CCCCCC 1px; height: 300px;  padding: 3px; font-family: arial; font-size: 12px; overflow:auto;}
    .button_normal {width: 23px; height:24px; BORDER-RIGHT: #848284 1px solid; BORDER-TOP: #FFFFFF 1px solid; BORDER-LEFT: #FFFFFF 1px solid; BORDER-BOTTOM: #848284 1px solid;}
    .button_pressed {width: 23px; height:24px; BORDER-RIGHT: #FFFFFF 1px solid; BORDER-TOP: #C9C7C7 1px solid; BORDER-LEFT: #C9C7C7 1px solid; BORDER-BOTTOM: #FFFFFF 1px solid; background-color: #F8F7F7;}
    .button {WIDTH: 23px; HEIGHT: 24px}
    table.color_chooser {cursor:hand}
    /* BODY DEFAULT VALUES */ 
    body
    {
     padding: 0px;
     margin: 0px;
     background: #5286BA;
    }
    /* HEADER - GRADIENT BACKGROUND AT THE TOP */
    #header_bg
    {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 86px;
     background: url(header_bg.gif) repeat-x;
    }
    /* HEADER - OASIS FANATIC LOGO AT THE TOP LEFT */
    #header_logo
    {
     position: absolute;
     top: 14px;
     left: 18px;
     width: 200;
     height: 50px;
    }
    /* HEADER - USER MANAGEMENT LINKS SUCH AS EDIT PROFILE / PASSWORD / PREFERENCES / LOGOUT AT THE TOP RIGHT */
    #header_user_management
    {
     position: absolute;
     top: 0px;
     right: 0px;
     padding-top: 5px;
     padding-right: 10px;
     padding-left: 10px;
     padding-bottom: 5px;
     background: url(tab_bg_user_mngt.gif);
    }
    /* HEADER - USER MANAGEMENT LINKS */
    #header_user_management a:link {font-family: verdana; font-size: 10px; color: #FFFFFF; text-decoration: none;}
    #header_user_management a:visited {font-family: verdana; font-size: 10px; color: #FFFFFF; text-decoration: none;}
    #header_user_management a:active {font-family: verdana; font-size: 10px; color: gold; text-decoration: none;}
    #header_user_management a:hover {font-family: verdana; font-size: 10px; color: gold; text-decoration: none;}
    /* HEADER - SECTIONS TABS CONTAINER */
    #header_tabs
    {
     position: absolute;
     top: 63px;
     left: 0px;
     width: 100%;
     background: url(tab_bg_off.gif); /* CREATES THE BLACK LINE THAT CREATES THE ILLUSION OF SEPARATION FROM THE HEADER MENU */
     background-repeat : repeat-x;
     background-position : bottom;
     font-family: Verdana;
     font-size: 11px;
     line-height: normal; 
    }
    /* HEADER - POSITION OF ALL THE TABS IN SECTIONS TABS CONTAINER */
    #header_tabs ul
    {
     padding-top: 0px;
     padding-right: 15px; /* 15 PX FROM THE LEFT OF THE SCREEN */
     padding-left: 15px;   /* 15 PX FROM THE RIGHT OF THE SCREEN */
     padding-bottom: 0px;
     margin: 0px;
     list-style-type: none;
    }
    /* HEADER - POSITION OF LEFT SIDE OF THE "OFF" TABS */
    #header_tabs li
    {
     padding-top: 0px;
     padding-bottom: 0px;
     padding-right:  3px; /*CHANGE THIS TO INCREASE / DECREASE THE DISTANCE TO THE RIGHT OF TABS */
     padding-left: 9px;
     margin: 0px;
     background: url(tab_left_off.gif) no-repeat left top;
     float: left;
    }
    /* HEADER - POSITION OF LEFT SIDE OF THE "OFF" TABS */
    #header_tabs a
    {
     padding-top: 7px;
     padding-bottom: 6px;
     padding-right: 9px;
     padding-left: 1px;
     display: block;
      font-weight: bold;
     background: url(tab_right_off.gif) no-repeat right top;
     float: left;
     color: #FFFFFF;
     text-decoration: none;
    }
    /* HEADER - SECTIONS TABS - LINKS */
    #header_tabs a { float: none; }
    #header_tabs a:hover { color: gold; }
    /* HEADER - SECTIONS CURRENT TAB */
    #header_tabs #current
    {
     background-image: url(tab_left_on.gif);
    }
    /* HEADER - SECTIONS CURRENT TAB - LINKS */
    #header_tabs #current a
    {
     background-image: url(tab_right_on.gif);
     padding-bottom: 7px; /*THIS VALUE MUST BE 1 PX GREATER THAN THE VALUE OF "#header_tabs a padding-bottom" */
     color: #FFFFFF;
    }
    /* HEADER - MENU CONTAINER */
    #header_menu
    {
     position: absolute;
     top: 90px;
     padding-top: 6px;
     padding-bottom: 5px;
     padding-right: 15px;
     padding-left: 12px;
     background-color: #5286BA;
    }
    /* HEADER - POSITION OF ALL THE SUB SECTIONS IN SECTIONS MENU CONTAINER */
    #header_menu ul
    {
     display: inline;
     margin-left: 0;
     padding-left: 0;
    }
    /* HEADER - POSITION OF "FAKE" PIPE CHARACTERS "|" TO SEPARATE THE CHOICES */
    #header_menu ul li
    {
     display: inline;
     margin-left: 0;
     padding: 1px 5px;
     border-left: 1px solid #FFFFFF;
     list-style: none;
    }
    /* HEADER - REMOVES "FAKE" PIPE CHARACTERS "|" FOR THE FIRST CHOICE */
    #header_menu ul li.first
    {
     margin-left: 0;
     border-left: none;
     list-style: none;
     display: inline;
    }
    /* HEADER - REMOVES "FAKE" PIPE CHARACTERS "|" AND BOLD THE FIRST CHOICE */
    #header_menu ul li.first_current_sub_section
    {
     margin-left: 0;
     border-left: none;
     list-style: none;
     display: inline;
     font-weight:bold;
    }
    /* HEADER - BOLD THE CURRENT SUB SECTION CHOICE */
    #header_menu ul li.current_sub_section
    {
     font-weight:bold;
    }
    /* HEADER - MENU LINKS */
    #header_menu a:link {font-family: verdana; font-size: 11px; color: #FFFFFF; text-decoration: none;}
    #header_menu a:visited {font-family: verdana; font-size: 11px; color: #FFFFFF; text-decoration: none;}
    #header_menu a:active {font-family: verdana; font-size: 11px; color: #1C3B5B; text-decoration: none;}
    #header_menu a:hover {font-family: verdana; font-size: 11px; color: #1C3B5B; text-decoration: none;}
    /* LEFT AND RIGHT EDGES COMMON PROPERTIES */
    #left_edge, #right_edge
    {
     position: absolute;
     top: 115px;
     width: 15px;
     padding: 0;
     background-color: #5286BA;
    }
    /* LEFT EDGE */
    #left_edge
    {
     left: 0;
     border-right: 1px solid #000000;
    }
    /* RIGHT EDGE */
    #right_edge
    {
     right: 0;
     border-left: 1px solid #000000;
    }
    /* CONTENT */
    #content
    {
     padding: 0;
     margin: 115px 15px 0px 15px;
     background-color: #000000;
    }
    /* CONTENT - LEFT */
    #content_left
    {
     float: left;
     padding: 0;
     margin-top: 10px;
     margin-bottom: 10px;
     margin-left: 10px;
     margin-right: 10px;
     background-color: #000000;
    }
    /* CONTENT - RIGHT */
    #content_right
    {
     width: 226px;
     padding: 0;
     margin-top: 10px;
     margin-bottom: 10px;
     margin-left: 0px;
     margin-right: 10px;
     background-color: #FFFFFF;
    }
    /* SUB HEADER */
    #sub_header
    {
     padding: 4px 5px 4px 5px;
     margin: 0;
     background-color: #E6E6E6;
     border-top: 1px solid #000000;
     border-bottom: 2px solid #ADAEAD;
    }
    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!!
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    SitePoint Addict raydenx's Avatar
    Join Date
    Jun 2003
    Location
    Singapore
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    strange... where did the ulpoads go?

  3. #3
    SitePoint Addict raydenx's Avatar
    Join Date
    Jun 2003
    Location
    Singapore
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's the link to download it:
    http://www.oasisfanatic.com/docs/css.zip

  4. #4
    Bah, I'll just hack it DoobyWho's Avatar
    Join Date
    Jul 2002
    Posts
    476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you ever get this figured out?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Do you still need help with this or have you worked it out yet ?

    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
  •