#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    2
    Rep Power
    0

    sidebar layout/css question, code review...


    Hi, I have made myself some ugly css code (just got started so this is my first try) that gives me a floating sidebar on my right side. This sort of works for IE6 (that most of my friends use) and I don't even dare to think about the look of it in another browser... So I would greatly appreciate some advice regarding improvements of the following code...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"> 
    <html>
    <head>
    
      <style type="text/css">
        <!--
          @media screen {
            html {overflow:hidden;}
            body {height:100%; overflow:auto;  margin:0; padding:0; color: white;
                  background-color: #333;}
    
            #container {position:fixed; margin-top:30px; margin-right:auto;
                        margin-bottom:30px; margin-left:auto; width: 1000px;
                        padding:10px; background-color: black; border: 1px solid
                        white;}
    
            #header {position:fixed; margin-top: 0px; margin-right: 99px;
                     margin-bottom: 10px; margin-left: 99px; height:60px;
                     padding:0px; background-color:red; border: 1px solid white;}
    
            #sidebar {position:relative; width:178px; height:150px; left:10px;
                      top:0px; padding:5px; background-color:blue; border: 1px
                      solid white;} 
    
            #intro {float:left; margin-top: 0px; margin-right: 0px; margin-bottom:
                    0px; margin-left: 0px; height:150px; width:788px; padding:5px;
                    background-color:green; border: 1px solid white;} 
    
            #content {margin-top: 10px; margin-right: 200px; margin-bottom: 10px;
                      margin-left: 0px; padding:5px; background-color:green; border:
                      1px solid white;}
    
            #navbar {margin-top: 0px; margin-right: 99px; margin-bottom: 0px;
                     margin-left: 99px; height:75px; padding:0px; background-color:
                     red; border: 1px solid white;} 
          }
        //-->
      </style>
    
    </head>
    <body>
    <div id="container">
    <div id="header">A NICE HEADER</div>
    <div id="intro">A USEFUL AREA FOR SECTION INTRODUCTION </div>
    <div id="sidebar">TEST1<br>TEST2<br>TEST3</div>
    <div id="content"><b>lot's of nasty things...</b>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <div id="navbar">MY GLORIOUS NAVIGATION BAR</div>
    </div>
    </body>
    regards
    /twinkle
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    If you view in IE at less than 1024x768 it fails. In a compliant browser, such as Moz/NS or Opera, it fails miserably.

    I have looked at, but not studied the IE position: fixed hack and found it not worth the effort. My own approach has been to design so that a fixed element in Moz/NS/Opera does not break the layout when it scrolls in IE. Your own page would not suffer if the fixed element scrolled. Go ahead and code for complying browsers and tell your friends to get a modern browser

    BTW: close the html tag.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Location
    Bay Area California
    Posts
    371
    Rep Power
    14
    I made a few minor adjustments to your code to get the format of your CSS "blocks" to work in Apple's Safari Web browser, Netscape 7.1 for Mac and Windows, and still keep it working in IE for Windows. Note this will display garbage on IE for Mac (since it has extremely spotty support for CSS and no support of the @media screen element, but since it has been discontinued - finally - for Mac, you don't need to worry about that train wreck). Here is my modified code:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"

    <
    html>
    <
    head>

      <
    style type="text/css">
        @
    media screen {
          
    body {
              
    margin0
              
    colorwhite;
              
    background-color#333;
          
    }
          
    #container {
              
    margin30px 0px 30px 0px
              
    padding10px
              
    background-colorblack
              
    border1px solid white;
          }
          
    #sidebar {
              
    positionabsolute
              
    width178px
              
    height150px
              
    right10px;
              
    top113px
              
    padding5px 5px 5px 5px
              
    background-colorblue
              
    border1px solid white;
          }
          
    #header {
              
    margin0px 100px 10px 100px;
            
    height60px;
            
    background-colorred
            
    border1px solid white;
          }
          
    #intro {
              
    margin0px 250px 0px 0px;
              
    height150px
              
    padding5px;
              
    background-colorgreen
              
    border1px solid white;
          } 
          
    #content {
              
    margin10px 250px 10px 0px;
              
    padding5px;
              
    background-colorgreen;
              
    border1px solid white;
          }
          
    #navbar {
              
    margin0px 99px 0px 99px;
              
    height75px;
              
    background-color:red;
              
    border1px solid white;
          } 
        }
      </
    style>

    </
    head>
    <
    body>
    <
    div id="container">
    <
    div id="sidebar">TEST1<br>TEST2<br>TEST3</div>
    <
    div id="header">A NICE HEADER</div>
    <
    div id="intro">A USEFUL AREA FOR SECTION INTRODUCTION </div>
    <
    div id="content"><b>lot's of nasty things...</b>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <div id="navbar">MY GLORIOUS NAVIGATION BAR</div>
    </div>
    </body> 
    Note that the order in which the <div>'s are coded in the HTML is important to the proper display of a complicated page like this. Also the float and overflow settings cause a lot of cross-platform incompatabilities. Float was ignored by Safari and Netscape, so I removed it an opted for absolute positioning of your sidebar. IE is the only browser that allows the sidebar to actually "float" and stay in the same place, even when scrolling; but as you cannot get this effect with any other browser (without using special tricks like layers or javascript), I left that out completely.

    IE is notoriously bad at calculating the overall size of a page (for dealing with margins) when using absolute positioning and 100% width of elements. It often does not account for the scrollbar which causes all kinds of sizing issues. So I still stick to using some tables in my layout for simple elements (like your INTRO and CONTENT would be simpler in a table as part of CONTAINER).

    Good luck!
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956

    ?


    IE is the only browser that allows the sidebar to actually "float" and stay in the same place, even when scrolling; but as you cannot get this effect with any other browser (without using special tricks like layers or javascript),
    Actually, any modern CSS2 compliant browser, such as the Moz/Gecko family or Opera7 allow that just fine, thank you. The rule is "position: fixed;" In the fixed case, the containing reference is the viewport. A position fixed with reference to the viewport does not move. It is this behavior that the IE position:fixed hack is trying to emulate. IE recognizes the fixed position only in the background-attachment property.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    2
    Rep Power
    0
    Thanks a lot for your replies; this was my first small tryout at actually doing some css layout as I decided a couple of weeks ago to place a little website on the net. So my current reading is the css 2.1 working draft...

    Anyway, thanks again...
    /twinkle

IMN logo majestic logo threadwatch logo seochat tools logo