...

View Full Version : grow and shrink



orit_v2003
12-17-2006, 12:50 PM
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

1212jtraceur
12-17-2006, 07:22 PM
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



@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 */
}

orit_v2003
12-18-2006, 05:49 PM
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.



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


did i build the site all wrong?

Help.

1212jtraceur
12-19-2006, 04:16 AM
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.

orit_v2003
12-20-2006, 02:20 PM
this is what i mean that happened to the menu.
http://www.bterezin.org.il/test/index18_firefox.jpg

codingmasta
12-20-2006, 07:18 PM
Textbox or Textarea



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum