Posizionamento elementi

**Pierhagi** · 04-11-2007, 19:56

Ciao a tutti

mi date una mano?

Ho un problemone su questa pagina:

http://www.mpwebsites.it/pamparino/prova1.asp

non riesco a posizionare il "footer" in modo sia sotto la colonna. In pratica primo deve essere sotto la colonna ho il resto della pagina secondo deve seguire il contenuto della colonna o della pagina, secondo chi è più lungo, e quindi abbassarsi!

Mi aiutate....disperato e nervoso è dir poco!!!

Pier

**thomas_anderson** · 04-11-2007, 20:21

ciao!
da quello che vedo (dovresti comunque postare sempre il codice CSS relativo alla parte del layout in questione) hai usato il posizionamento assoluto. tu vuoi che il footer vada sotto la colonna. se (e solo se) la colonna viene immediatamente prima del footer nel sorgente, allora puoi posizionare il footer in modo assoluto usando la dichiarazione 'top: auto'. in questo modo il footer si comporterà come un elemento statico (vedi CSS 2.1 sezione 9, 10).

**Pierhagi** · 04-11-2007, 20:38

Ciao

allora di posto il codice del css e della pagina:

----------------------------------------------------
/* INIZIO CSS */
/*stili per il layout fisso*/
html,body{margin: 0;padding:0}

body{
font-family: arial,sans-serif;
font-size: 76%;
text-align: center;
background-image:url(../img/sfondo_1x800.jpg);
background-repeat:repeat-x;
padding-top:10px;
padding-bottom:10px;
}

div#container{
width: 754px;
margin: 0 auto;
text-align: left;
background-color:;
}
div#container1{
width: px;
margin: 0 auto;
text-align: left;
background-color:;
}

div#content{
padding: 1em 0em 1em 0em;/*QUESTO PADDING PERMETTE DI FAR ACCAVALLARE IL FOOTER SULLA COLONNA DI SX*/

/* COLONNA DI SINISTRA*/
/* HO INSERITO L'IMMAGINE DELLA COLONNA DI SINISTRA NEL "CONTENT" PER POTER FAR ALLUNGARE LA COLONNA SECONDO IL CONTENUTO DELLA PAGINA.
PER POTER DIMENSIONARE LA COLONNA DOVE VISUALIZZEREMO L'IMMAGINE SI DOVRA' CREARE UNO STILE AL DI FUORI DEL "CONTENT" DOVE DIMENSIONEREMO LA COLONNA*/
/* IMG - no-repeat - colore di SFONDO DEL BODY - ETC */
background: url(../img/1/colonna_sx.png) no-repeat #FF0000 top left;
/* COLORE DI SFONDO ALL'INTERNO DEL ""BODY"" */
}

div#colonna_sx{

/*METTERE SEMPRE SOTTO IL "background-position" RISPETTO AL "background" SE NO NON VA */
width:200px;
/* y_top / x_right / y_bottom / x_left */
margin: 184px 0px 10px 0px;
padding:0px 0px 0px 0px;/*IL PADDING SERVE PER SPOSTARE GLI ELEMENTI DENTRO LA TABELLA*/
padding-left:10px;
position: absolute;
z-index:20;
float:;
}

div#colonna_sx_inc{
height:auto;
/*METTERE SEMPRE SOTTO IL "background-position" RISPETTO AL "background" SE NO NON VA */
width:200px;
/* y_top / x_right / y_bottom / x_left */
margin: 0px 0px 5px 0px;
padding:0px 0px 0px 0px;/*IL PADDING SERVE PER SPOSTARE GLI ELEMENTI DENTRO LA TABELLA*/
padding-left:10px;
position: absolute;
z-index:auto;
float:left;
background: url(../img/1/colonna_sx.png) no-repeat #FFFFFF top left;
}

div#extra{
background-color:;
position:relative;
z-index:10;
top

x;
left: 0;
width: 200px;
\width:200px;
w\idth:200px;
padding: 1em 5px;

background:;
height:auto;
}

/*-----------------------------------------------------------------------------------------*/
/*/TRANSPARENZA/ ESEMPIO ORIGINALE/*/
/* Per utilizzarlo togliere solo i commenti con le le 3 stelline: /*** e ***/

/***.trans_box2 {
font-family:verdana;
font-weight:bold;
padding:40px;
margin:30px;
border:solid 1px #555;***/
/* Mozilla ignores crazy MS image filters, so it will skip the following */
/*** filter

rogid

XImageTransform.Microsoft.AlphaImageLoader(enabled =true, sizingMethod=scale, src='/75p_honey.png');
}***/
/* IE ignores styles with [attributes], so it will skip the following. */
/***.trans_box2[class] {
background-image:url(/75p_honey.png);
}***/

/*-----------------------------------------------------------------------------------------*/

/*** STILI PER TABELLE RECORD E CELLE ***/
div#table {
background-color:#01A5D8;

/* y_top / x_right / y_bottom / x_left */
margin: 0px 5px 0px 205px;/*NON DIAMO PADDING IN VERTICALE XCHE' ALCUNI BROWSER VISUALIZZANO NELLO SPAZIO DEL PADDING IL COLORE DI SFONDO DELLA PAGINA E NON QUELLO DEL CONTENT*/
padding:0px 5px 0px 5px;/*IL PADDING SERVE PER SPOSTARE GLI ELEMENTI DENTRO LA TABELLA*/
table-layout:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color: #FFFF00;
position:;
z-index:;
border: 0 ;
border-collapse:2px;
border-spacing:4px;
}

div#footer{
/* NON METTERE L'ALTEZZA AL FOOTER PERCHE' NE RISENTIREBBE LA COLONNA DI SX NON ALLUNGANDOSI AL NORMANLE ALLUNGAMENO DELLA PAGINA*/
text-align:center;
height:100%;
padding: 28px 0px 28px 0px;
margin-bottom:0px;
background-color:;
background-image:url(../img/1/footer.png);
background-repeat:no-repeat;
color: #fff;
position:relative;
z-index:10;/* FA PASSARE SOPRA IL FOOTER SOPRA LA PAGINA*/
}
.cella_sopra_id{
padding-left:2px;
width:0px;
background-color: #CCCCCC;
color:#000000;
font-size:12px;
}
.cella_id{
padding-left:2px;
width:0px;
font-size:12px;
}

.cella_sopra_2{
padding-left:2px;
background-color: #CCCCCC;
color:#000000;
font-size:12px;
}
.cella_2{
padding-left:2px;
font-size:12px;
}

.cella_sopra_3{
padding-left:2px;
background-color: #CCCCCC;
color:#000000;
font-size:12px;
}

.cella_3{
padding-left:2px;
font-size:12px;
}

.cella_sopra_4{
padding-left:2px;
background-color: #CCCCCC;
color:#000000;
font-size:12px;
}
.cella_4{
padding-left:2px;
font-size:12px;
}
.cella_sopra_5{
padding-left:2px;
background-color: #CCCCCC;
color:#000000;
font-size:12px;
}
.cella_5{
padding-left:2px;
font-size:12px;
}

.cella_sopra_lingua{
padding-left:2px;
background-color: #CCCCCC;
text-align:left;
width:60px;
color:#000000;
font-size:12px;
}

.cella_lingua{
padding-left:2px;
text-align:left;
width:60px;
background-color:#99CC00;
font-size:12px;
}

.cella_sopra_6{
padding-left:2px;
background-color: #CCCCCC;
color:#000000;
font-size:12px;
}
.cella_6{
padding-left:2px;
font-size:12px;
}
.cella_sopra_7{
padding-left:2px;
width:0px;
font-size:12px;
}

.cella_7{
padding-left:2px;
font-size:12px;
}

/*stili generici, su header e footer*/
div#header{
height: 184px;
background-image:url(../img/1/header.png);
background-repeat:no-repeat;/*mettendo no-repeat diventa trasparente l'header!!!*/
}

h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}

/***.footer_trasparenza {***/
/* Mozilla ignores crazy MS image filters, so it will skip the following */
/*** filter

rogid

XImageTransform.Microsoft.AlphaImageLoader(enabled =true, sizingMethod=scale, src='../img/1/footer.png');
}***/
/* IE ignores styles with [attributes], so it will skip the following. */
/***.footer_trasparenza[class] {
background-image:url(../img/1/footer.png);
}***/

/*-----------------------------------------------------------------------------------------*/
/*/TRANSPARENZA/ ESEMPIO ORIGINALE/*/
/* Per utilizzarlo togliere solo i commenti con le le 3 stelline: /*** e ***/

/***.trans_box2 {
font-family:verdana;
font-weight:bold;
padding:40px;
margin:30px;
border:solid 1px #555;***/
/* Mozilla ignores crazy MS image filters, so it will skip the following */
/*** filter

rogid

XImageTransform.Microsoft.AlphaImageLoader(enabled =true, sizingMethod=scale, src='/75p_honey.png');
}***/
/* IE ignores styles with [attributes], so it will skip the following. */
/***.trans_box2[class] {
background-image:url(/75p_honey.png);
}***/

/*-----------------------------------------------------------------------------------------*/

div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

/*stili specifici per il layout*/
div#navigation{background-color:#9cf}

/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none;}
div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/
div#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #fff;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}

/*stili per la sezione extra*/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{color: #999;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}

/* FINE CSS */
------------------------------------------------------------
------------------------------------------------------------
/* CODICE PAGINA*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Monolitico</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<style type="text/css">
@import url("CSS/prova1.css");
a#viewcss{color: #00f;font-weight: bold}
</style>
</head>
<body>
<div id="container">
<div id="colonna_sx">
<div id="colonna_sx_inc">

</div>
</div>

<div id="container1">
<div id="header">

</div>
<div id="content">

<div id="colonna_sx_inc"></div>
<div id="table" class="cella"></div>

<div id="extra">
<div class="newsbox">

<h2></h2>
</div>
<div class="newsbox">
<h2></h2>
</div>
</div>

<h2></h2>
</div>
</div>
<div id="footer" class="footer_trasparenza">

</div>
</div>
</body>
</html>
/* FINE CODICE PAGINA */
-----------------------------------------------------------

**Pierhagi** · 05-11-2007, 15:50

p

**Pierhagi** · 05-11-2007, 15:51

Originariamente inviato da Pierhagi

Discussione: Posizionamento elementi

Strumenti discussione

Ricerca discussione

Visualizza

Posizionamento elementi

Permessi di invio