Vertical Positioning[SOLVED]

[gdinfo]

Hi,
Im newbie with CMS (and CSS) and I'm having a little problem with CSS and DIV.  After having designed with Dreamweaver the layout, I have copied it into a new template (listed below) with a css linked. The content layout is fixed on 950 x 600 px and I would like it centered both horizontal and vertical.

I haven't realized which is the way to center vertically the content layout.  With my release below, I have created a fixed area in the topmost of the content layout but there is a behaviour difference between IE7 anf FF1.5 (with this the fixed area doesn't appears).
Please, could anyone give me the correct CSS to obtain:

1.  vertical centering
2.  same behaviour IE & FF

Thanks (sorry for my bad english)
Roberto. 



/////////////////   TEMPLATE




{sitename} - {title}
{metadata}
{stylesheet}





 
 
   
   
        {title}
   
 
 
        {menu template='cssmenu.tpl' collapse='1'}
 
 
    {content}
    "SOME RANDOM GRAPHICHS"
 
 
 
  "my company address"
 
 







////////////////// CSS   

body, td, th, li, ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
             font-style: normal;
color: #000;
}
body {
background-color: #D60026;
margin: 0;
padding: 0;
             scrollbar-base-color: #d60026;
}
a {
font-size: 10px;
color: #d60026;
}
a:visited {
color: #999999;
}


#container {
width: 960px;
height: 600px;
position: relative;
left: 0%;
top: 10%;
}

#logo {
background: #fff url(images/cms/xxxxx.gif) no-repeat  50px 10px;
width: 200px;
height: 75px;
color: #000;
padding: 2px;
border-bottom: 1px #d60026 solid;
position: absolute;
left: 0px;
top: 0px;
}

#header {
background-color: #fff;
width: 750px;
height: 75px;
color: #000;
padding: 2px;
border-bottom: 1px #d60026 solid;
position: absolute;
left: 200px;
top: 0px;
             text-align:left;
}

#navbar {
background-color: #fff;
width: 195px;
height: 406px;
color: #000;
padding: 2px;
border-right: 1px #d60026 solid;
position: absolute;
left: 0px;
top: 80px;
             z-index: 1;
}
#header #top {
height: 40px;
}
#header #title {
height: 35px;
             font-size: 20px;
             font-weight: bold;
color: #d60026;
}

#content {
background-color: #fff;
width: 750px;
height: 406px;
padding: 2px;
color: #000000;
position: absolute;
left: 200px;
top: 80px;
             text-align:left;
}
#content #cont-left {
width: 57%;
float:left;
overflow-y: auto;
height: 400px;
             z-index: 2;
}

#content #cont-right {
width: 40%;
float:left;
height: 400px;
             margin-left: 5px;
}

#footer {
background-color: #fff;
height: 35px;
color: #000;
width: 950px;
padding: 2px;
border-top: 1px #d60026 solid;
position: absolute;
left: 0px;
top: 490px;
}

/* Classes */

.formbuilderform textarea {
   width: 390px;
   height: 15em;
}

.formbuilderform input {
   width: 390px;
}

.formbuilderform fbsubmit {
   width: 80px;
}

[reidjazz]

You might try looking at http://www.jakpsatweb.cz/css/css-vertical-center-solution.html...he seems to have found a solution for this.

reidjazz

[gdinfo]

Thanks, reidjazz

it seems to present the same problem...

I have created a new template copying exactly the example linked. 




  Universal vertical center with CSS
 
    .greenBorder {border: 1px solid green;} /* just borders to see it */
 



 
   
     
        any text
        any height
        any content, for example generated from DB
        everything is vertically centered
     
   
 




when saved and viewed, despite a warning, the text block is correctly positioned about in the half of the screen but if you resize the browser, the block remains in the same position.

What I need is an automatic repositioning depending on the browser resolution (as the tag in horizontal).

Thanks.

[RonnyK]

http://www.w3.org/Style/Examples/007/ce ... l#vertical

tells the trick. I didn't test it though.....

Another link, check source for the trick:

http://milov.nl/code/css/verticalcenter.html


Ronny

[gdinfo]

Another link, check source for the trick:

http://milov.nl/code/css/verticalcenter.html


Ronny

THANKS RONNY, THIS IS THE SOLUTION!  CLEAR AND SIMPLE.
THANKS A LOT.

[heatherfeuer]

http://milov.nl/code/css/verticalcenter.html

Ronny, that has to be one of the most interesting sites I've seen in a long time.  Be sure to check out his experiments!