Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: grow and shrink

  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    grow and shrink

    Hi!

    I have been working on this page and with your help I have managed to learn and do a lot (I learned a lot through-out other people questions).


    Here is the site:
    http://www.bterezin.org.il/test/index17.htm

    Here is the link to the css page:
    http://www.bterezin.org.il/test/design17.css

    My problem:
    I want #textbox height to grow and shrink according to the windows size.

    and then the green line will always be pushed to the bottom with a little margin.

    I want my site to fill all the window height.

    Now the #textbox height is 400 px.

    How can I do this?

    Thanx

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The trick to scale anything to the browser content area is 'position: fixed;'. So, I started by applying that to div.main. To make it fill the browser content area height, I applied 'top: 0; bottom: 0;' (I'm afraid I couldn't center it, as you originally had, because to do that I must know the width of the browser, and 'auto' for left or right didn't do it...).

    Now, you want div#content_main to be below div#navcontainer and div#header_img. I used Firefox's Web Developer extension to find the y-position of it in your page. It was about 225px, so I applied 'position: absolute; top: 225px; bottom: 0;' to div#content_main (If the user significantly increases the font size, div#navcontainer will go behind div#content_main. You may be able ot fix this by wrapping those 2 in another div with 'position: relative' and positioning div#content_main 2 or so em from the top.).

    Now we are concerned with div#textbox and div#line. You want div#textbox to be below both div#tittle and div#textbox_pointers but above div#line. So I do a similiar process, but this time, I define a font-size of 2em for h1, so I can accurately position div#textbox (I guess a height of 4em for the title and textbox pointers combined). Since it is removed from document flow upon 'position: absolute; top: 4em; bottom: 0;', I have to tell div#line where to go. I do this with 'position:absolute; bottom: 0;'. Because I did this, I need to push the bottome edge of div#textbox up about 20px ('bottom: 20px;'). I also applied 'overflow: auto;'
    Again, should the user increase font size so that div#navcontainer has 3 rows of list items, it will partially dissappear behind div#textbox. This may be solved in the manner described 1 paragraph back.)

    I think that is all! I wrapped my changes to the coming css with comments, so that you may see and learn from them.

    1212jtraceur

    Code:
    @charset "iso-8859-1";
    /* CSS Document */
    
    html{
    	height:100%;
    /*	overflow: hidden; */
    }
    
    body{
    	background-color:#CCCCCC;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:0.7em;
    	color:#330066;
    	font-weight: lighter;
    	margin: 0;
    	padding: 0;
    	height:100%;
    }
    
    p{line-height:130%;}
    ol{line-height:130%;}
    
    
    #main{
    	width:750px;
    	background-color:#FFFFFF;
    	margin:0 auto;
    	padding:1px; 
    	margin-top:0px;
    	margin-bottom:0px;
    	/* changes by 1212jtraceur of codingforums.com */
    	position: fixed;
    	top: 0;
    	bottom: 0;
    	/* end 1212jtraceur's changes */
    }
    	
    	
    #header_img{
    	background-color:#33ffCC;
    	width: 740px;
    	height: 150px;
    	margin:5px;	
    }
    
    
    /*///////////////////////////////*/
    /*          starting             */
    /*         menu style            */
    /*///////////////////////////////*/
    
    div#navcontainer
    {
    background-color: #8B0000;
    /* border-top: solid 1px #F8FFFF;
    border-bottom: solid 1px #FFFFFF; */
    }
    
    div#navcontainer ul
    {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size:10px;
    color: white;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 5px;
    padding-top: 5px;
    line-height: 25px;
    }
    
    
    /*answare to my problem*/
    div#navcontainer ul {
    /* border: 1px solid blue; */
    padding-left: 0;
    }
    /*end of answare to my problem*/
    
    
    div#navcontainer ul li
    {
    	display: inline;
    	margin-left: -4px;
    }
    
    div#navcontainer ul li a
    {
    	padding: 5px 10px 5px 10px;
    	color: white;
    	text-decoration: none;
    	border-right: 1px solid #FFFFFF;
    	border-right-style: groove;
    }
    
    div#navcontainer ul li a:hover
    {
    background-color: #FF9900;
    color: white;
    	/*border-bottom:3px;
    	border-bottom-color:#FFFFFF;
    	border-bottom-style: solid;
    	border-right: 0px;
    	border-right-style:none;
    	border-left: 0px;
    	border-left-style:none; */
    }
    
    #active a {
    	border-left: 1px solid #FFFFFF;
    	border-left-style: groove;
    }
    
    /*///////////////////////////////*/
    /*           ending              */
    /*         menu style            */
    /*///////////////////////////////*/
    
    
    
    #contain_main{
    	background-color:#FFFFFF;
    	width: 730px;
    	margin:5px;
    	padding-left:5px;
    	padding-right:5px;
    	border:1px;
    	border-color:#CCCCCC;
    	border-style: solid;
    	/*overflow: auto; */
    	/* changes by 1212jtraceur of codingforums.com */
    	position: absolute;
    	top: 225px;
    	bottom: 0;
    	/* end 1212jtraceur's changes */
    }
    
    #tittle{
    	border:0px; 
    	width: 730px;
    	border-color:#00CCCC;
    	border-style: solid;
    }
    
    /*///////////////////////////////*/
    /*          starting             */
    /*       sub menu style          */
    /*///////////////////////////////*/
    
    #textbox_pointers{
    	width: 730px;
    	border-top-color:#CC0000;
    	border-top-style:solid;
    	border-top-width:2px;
    	/*border-bottom-color: #33FF00;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;*/
    	/*background-color: #CCCCCC;*/ 
    }
    
    div#textbox_pointers ul{
    	padding-left: 0px;
    	margin-left: 0px;
    	margin-top:1px;
    	margin-bottom:1px;
    }
    
    div#textbox_pointers ul li{
    	display: inline;
    	padding: 0px 10px 0px 0px;
    }
    
    div#textbox_pointers ul li a{
    	text-decoration: none;
    	color:#CCCCCC;
    }
    
    div#textbox_pointers ul li a:hover{
    	/*background-color: #FF9900;*/
    	color: #666666;
    	border-top-color: #990000;
    	border-top-width: 4px;
    	border-top-style: solid;
    }
    
    /*///////////////////////////////*/
    /*           ending              */
    /*       sub menu style          */
    /*///////////////////////////////*/
    
    #textbox{
    /*	padding-left:5px; */
    	border:0px; 
    	width: 730px;
    	border-color:#00CCCC;
    	border-style: solid;
    	overflow: auto;
    	/* changes by 1212jtraceur of codingforums.com */
    	position: absolute;
    	bottom: 20px;
    	top: 4em;
    	/* end 1212jtraceur's changes */
    	}
    
    #line{
    	background-color:#00FF00;
    	width:740px;
    	height:15px;
    	margin:5px;
    	/* changes by 1212jtraceur of codingforums.com */
    	position: absolute;
    	bottom: 0;
    	/* end 1212jtraceur's changes */
    }
    
    h1{
    	display: inline;
    	/* changes by 1212jtraceur of codingforums.com */
    	font-size: 2em;
    	/* end 1212jtraceur's changes */
    }

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you for your answare but it didn't work on explorer at all.

    http://www.bterezin.org.il/test/index18.htm
    http://www.bterezin.org.il/test/design18.css
    On firefox it worked well.


    1. Is there no way to center this site?
    2. Why after the change is the menu aligned down in the red box
    3. How can it work on explorer?


    did i build the site all wrong?

    Help.

  • #4
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    1. I don't know of a way, you could provide a percent or em margin (but that's still not centering. You could also use javascript to set the margins based on the window width.

    2. What exactly do you mean?

    3. Internet Explorer sucks, it's as simple as that. I'm not sure, but I think IE7 supports fixed positioning, unlike previous versions. Again, you could use javascript to set the height of div#main to the window height.
    Last edited by 1212jtraceur; 12-19-2006 at 03:37 AM.

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is what i mean that happened to the menu.
    http://www.bterezin.org.il/test/index18_firefox.jpg

  • #6
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Textbox or Textarea
    ALWAYS remember to validate your code


  •  

    Posting Permissions

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