Centrare verticalmente

[Valeria75_bis]

Scusate avevo già postato, ho provato a seguire il link consigliato ma senza successo

come posso centrare verticalmente questa pagina??




<div id="wrapper_home">
<div id="logo_home">
</div>
<div id="top_home">
<div id="menu_home">
<ul>
[*]aaa
[*]nnn
[*]vvv
[/list]
</div>
<div id="indirizzi_home">
fdgfdgdf
</div>
</div>
<div id="middle_home">
[img]images/immagine_bbb.jpg[/img]
</div>
<div id="bottom_home">
<div id="concept_home">


dfgdgdfdgd</p>
</div>
</div>
</div>

body {
    background:url(sf_aaa.gif) repeat-x #e07120;
    font-family:Verdana;
    font-size:8pt;
    color:#32150c;
    margin:0px;
    padding:0px;
    text-align:center;
    margin:140px 0 0 0;
}


#wrapper_home {
    position:relative;
    margin:65px 0 0 0;
    width:1025px;
    height:380px;
    margin:0 auto;
    text-align:left;
}
#top_home {
    height:120px;
    border-bottom:4px solid #ebe2dc;
    border-top:4px solid #ebe2dc;
    border-left:8px solid #ebe2dc;
    border-right:8px solid #ebe2dc;
    background:url(sf_home.gif) repeat-x;
}
#middle_home {
    background:url(sf_aaa.gif) bottom repeat-x;
    height:236px;
}
#logo_home {
    position:absolute;
    top:-16px;
    left:46px;
    background:url(Alcacciatore_logohome.jpg);
    width:293px;
    height:144px;
}

#indirizzi_home {
    float:left;
    margin:0 0 0 0px;
    width:245px;
    height:98px;
    color:#ebe2dc;
    padding:22px 0 0 14px;
    border-left:3px solid #ebe2dc; 
}
#menu_home {
    float:left;
    height:33px;
    width:415px;
    margin:79px 0 0 318px;
    border-bottom:8px solid #31140b;
    
}
#menu_home ul {
    position:relative;
    margin:0 0 0 10px;
    padding:0px;
}
#menu_home ul li {
    position:relative;
    list-style-type:none;
    display:inline;
    height:33px;
    margin:0px;
    padding:0px;
}
#menu_home ul li a {
    font-family:Verdana;
    font-size:11pt;
    color:#3b1c0f;
    text-decoration:none;
    padding-right:15px;
    padding-left:15px;
    height:23px;
    display:block;
    float:left;
    background:url(sf_li_aa.gif) center right no-repeat;
    padding-top:10px;
}
#indirizzi_home a:link,#indirizzi_home a:visited,#indirizzi_home a:hover {
    font-family:Verdana;
    font-size:8pt;
    color:#ebe2dc;
}
#concept_home {
    font-size:9px;
    text-align:right;
    float: right;
    margin:5px 15px 0 0;
    width:300px;
    color: #ebe2dc;
}

#concept_home p{
    margin:0;
    padding:0;
} 

Grazie mille!!

[Gufo]

http://forum.html.it/forum/showthrea...readid=1295256

[Valeria75_bis]

Scusate ho letto il post ma non capisco come applicare quelle soluzioni alla mia pagina

[Gufo]

Originariamente inviato da Valeria75_bis
Scusate ho letto il post ma non capisco come applicare quelle soluzioni alla mia pagina

è abbastanza semplice basta che copi il codice dell'esempio che ho postato io e cambi le misure a tuo piacimento, rispettando la logica del codice

[Valeria75_bis]

Intendi questo

<div id="centrato">
Io sono un contenitore
centrato orrizzontalmente
e verticalmente

</div>

<style type="text/css">
<!--
#centrato {
color:#FFFFFF;
padding: 20px;
background-color: #FF0000;
height: 300px;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}
-->
</style>


ma dopo aver impostato height e width della mia area (la mia pagina praticamente), cosa indica 150 e -150 .....nel mio caso in base a cosa dovrei modificarlo??

Grazie ancora!

[Gufo]

Originariamente inviato da Valeria75_bis
Intendi questo

<div id="centrato">
Io sono un contenitore
centrato orrizzontalmente
e verticalmente

</div>

<style type="text/css">
<!--
#centrato {
color:#FFFFFF;
padding: 20px;
background-color: #FF0000;
height: 300px;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}
-->
</style>


ma dopo aver impostato height e width della mia area (la mia pagina praticamente), cosa indica 150 e -150 .....nel mio caso in base a cosa dovrei modificarlo??

Grazie ancora!

Ma cacchio, è abbastanza semplice no! Solo un po di attenzione a valutare il codice noteresti subito che margin: -150px 0 0 -150px; non è altro che un margine negatico della meta di Height: 300px; e width:300px, quindi devi mettere in negativo i margini della metà della tua larghezza e della tua altezza