Results 1 to 4 of 4

Thread: Fixed Header and footers

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    123
    Vote Rating
    0
      0  

    Default Fixed Header and footers

    hi,
    I am trying to build a master page. This page has a fixed header, content area and footer.
    Now in the header i have some menu items, when i click on this items the content area gets loaded with some controls and data specific to that menu item.
    i am having problems with the content area part, its overlapping the header.
    following is my css for this
    Code:
    .pageContainer {
    	width:100%;
    	height:100%;
    	padding:0px;
    	margin:0px;
    	overflow:hidden;
    }
    .pageContainer .fixedHeader {
    	position: absolute;
    	top: 0px;
    	background-color:#1C4B8D ;
    	background-image: url("../images/header-bar.gif");
    	border:solid 1px #6593cf;
    	height:10%;
    	width:100%;
    	overflow:hidden;
    }
    .pageContainer .mainContainer {
    	position: absolute;
    	overflow:auto;
    	background-color:Gray;
    	border-left:solid 1px #6593cf;
    	border-right:solid 1px #6593cf;
    	height:85%;
    	width:100%;
    	margin-top:10%;
    	margin-bottom:5%;
    	
    }
    .pageContainer .fixedFooter {
    	position: absolute;
    	bottom: 0px;
    	padding: 10px;
    	background-image: url("../images/gradient-bg.gif");
    	border:solid 1px #6593cf;
    	height:5%;
    	width:100%;
    	overflow:hidden;
    }
    #mainlogo {
    	margin-left:10px;
    	margin-top:3px;
    }
    #bmmainmenubar {
        visibility: visible;
        margin:0px 0px 0px 0px;
    }
    .loading-indicator {
    	font-size:8pt;
    	background-image: url("../images/wait.gif");
    	background-repeat: no-repeat;
    	background-position: left;
    	padding-left:20px;
    }

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    All of your container elements have borders which are going to throw everything off. Because of the flawed W3c standard, the sizes you specify are of the content dimensions and don't include border or padding.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    123
    Vote Rating
    0
      0  

    Default

    Is there a work around for this?

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    Don't put borders or padding on your layout elements, put it on your content elements instead. Basically, nest everything.

    The other solution is to use JS to layout everything. That's what I do.

Similar Threads

  1. how to fixed the column like excel .. ?
    By dave0224 in forum Community Discussion
    Replies: 5
    Last Post: 2 Apr 2007, 7:42 AM
  2. only bug was fixed in alpha3 rev 4?
    By franklt69 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 14 Mar 2007, 6:06 PM
  3. Pop up a DIV tag over the Select tag is finally fixed in IE7
    By mdissel in forum Community Discussion
    Replies: 5
    Last Post: 9 Feb 2007, 9:24 AM
  4. BasicDialog with fixed position
    By khnle in forum Ext 1.x: Bugs
    Replies: 1
    Last Post: 8 Feb 2007, 11:31 AM
  5. fixed width layouts
    By jf26028 in forum Community Discussion
    Replies: 4
    Last Post: 7 Nov 2006, 8:01 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •