CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

sidebar layout/css question, code review...

Discuss sidebar layout/css question, code review... in the CSS Help forum on Dev Shed.
sidebar layout/css question, code review... Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old February 22nd, 2004, 04:11 AM
twinkle twinkle is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 2 twinkle User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation 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
Reply With Quote
  #2  
Old February 22nd, 2004, 12:31 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,588 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 17 h 2 m 32 sec
Reputation Power: 662
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.
Reply With Quote
  #3  
Old February 22nd, 2004, 12:55 PM
jkoerber's Avatar
jkoerber jkoerber is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2002
Location: Bay Area California
Posts: 329 jkoerber User rank is Corporal (100 - 500 Reputation Level)jkoerber User rank is Corporal (100 - 500 Reputation Level)jkoerber User rank is Corporal (100 - 500 Reputation Level)jkoerber User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 1 Day 1 h 7 m 24 sec
Reputation Power: 8
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 {
          margin: 0; 
          color: white;
          background-color: #333;
      }
      #container {
          margin: 30px 0px 30px 0px; 
          padding: 10px; 
          background-color: black; 
          border: 1px solid white;
      }
      #sidebar {
          position: absolute; 
          width: 178px; 
          height: 150px; 
          right: 10px;
          top: 113px; 
          padding: 5px 5px 5px 5px; 
          background-color: blue; 
          border: 1px solid white;
      }
      #header {
          margin: 0px 100px 10px 100px;
        height: 60px;
        background-color: red; 
        border: 1px solid white;
      }
      #intro {
          margin: 0px 250px 0px 0px;
          height: 150px; 
          padding: 5px;
          background-color: green; 
          border: 1px solid white;
      } 
      #content {
          margin: 10px 250px 10px 0px;
          padding: 5px;
          background-color: green;
          border: 1px solid white;
      }
      #navbar {
          margin: 0px 99px 0px 99px;
          height: 75px;
          background-color:red;
          border: 1px 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!
Reply With Quote
  #4  
Old February 22nd, 2004, 01:19 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,588 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 17 h 2 m 32 sec
Reputation Power: 662
?
Quote:
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
Reply With Quote
  #5  
Old February 22nd, 2004, 05:28 PM
twinkle twinkle is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 2 twinkle User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation 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
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > sidebar layout/css question, code review...

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway. 
Stay green...Green IT