[CSS]Posizionamento Footer

[RaouL_BennetH]

Ciao a tutti

Mi sapreste indicare cosa devo fare per avere il footer sempre posizionato in basso nelle pagine ?

attualmente nel mio file Site.css le cose stanno così:

footer, .push
#footer 
{
    background-color: #fff;
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    /*border-radius: 0 0 10px 10px;*/
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
}

Attualmente il footer mi si piazza appena dove finisce il contenuto delle pagine.

Grazie a tutti

RaouL.

[RaouL_BennetH]

ho trovato praticamente lo stesso esempio un pò ovunque ma non riesco a capire come adattarlo a ciò che già ho. Mi scuso ma è la prima volta che mi cimento con queste cose.

Leggo che si devono impostare questi valori:

html, body {   
        height: 100%;
}
#container {    
        min-height: 100%;    
        height: auto !important;    
        height: 100%;    
        margin: 0 auto -50px; 
}
#footer, #push {    
        height: 50px;     
        clear: both;}

Ma pur inserendoli nel mio .css e facendo il refresh della pagina il risultato non cambia.

Grazie

RaouL.

[krivo]

Può succedere di continuare a modificare un file,
ma di non riuscire a vederne le modifiche.
Questo succede perché la pagina visualizzare è sempre quella vecchia
memorizzata nella cache. Hai provato ad impostare la cache del browser
in modo che il file html venga ricaricato ogni volta che richiami la pagina?

In Internet Explorer:
Strumenti > Opzioni Internet > Generale > Impostazioni >
Ricerca versioni più recenti delle pagine memorizzate:
• all'apertura della pagina

In Mozilla:
Modifica > Preferenze > Avanzate > Cache >
Confronta la pagina nella cache con la pagina in rete:
• ogni volta che vedo una pagina

[RaouL_BennetH]

Originariamente inviato da krivo

Può succedere di continuare a modificare un file,
ma di non riuscire a vederne le modifiche.
Questo succede perché la pagina visualizzare è sempre quella vecchia
memorizzata nella cache. Hai provato ad impostare la cache del browser
in modo che il file html venga ricaricato ogni volta che richiami la pagina?

In Internet Explorer:
Strumenti > Opzioni Internet > Generale > Impostazioni >
Ricerca versioni più recenti delle pagine memorizzate:
• all'apertura della pagina

In Mozilla:
Modifica > Preferenze > Avanzate > Cache >
Confronta la pagina nella cache con la pagina in rete:
• ogni volta che vedo una pagina

Ciao e grazie per la risposta

Ci avevo già provato, difatti quando ho scritto che anche dopo il refresh (inteso sia come F5 sia come impostazioni dei browsers) il risultato non cambia mi riferivo al fatto che sono sicuro che sbaglio qualcosa.

Ma.. cosa ?

ad ogni modo questo è il css attuale:

body {
    
    background-color: #222B3A; /*#5c87b2;*/ 
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
    height: 100%;
}

#container {    
        min-height: 100%;    
        height: auto !important;    
        height: 100%;    
        margin: 0 auto -50px; 
}



a:link {
    color: #034af3;
    text-decoration: underline;
}

a:visited {
    color: #505abc;
}

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active {
    color: #12eb87;
}

p, ul {
    margin-bottom: 20px;
    line-height: 1.6em;
}

header,
footer,
nav,
section {
    display: block;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #000;
}

h1 {
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}

h2 {
    padding: 0 0 10px 0;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

header, #header {
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
}

header h1, #header h1 {
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
    /*text-shadow: 1px 1px 2px #111;*/
}

#main {
    position: relative;
    padding: 30px 30px 15px 30px;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
}

footer
#footer, #push
{
    
    height: 50px;
    clear: both;
    background-color: #fff;
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    /*border-radius: 0 0 10px 10px;*/
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu {
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li {
    display: inline;
    list-style: none;
}

ul#menu li#greeting {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
}

ul#menu li a:hover {
    background-color: #fff;
    text-decoration: none;
}

ul#menu li a:active {
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a {
    background-color: #fff;
    color: #000;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
    
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

input[type="text"], 
input[type="password"] {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
    width: 200px;
    border-radius: 10px 10px 10px 10px;
}

select {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
}

input[type="submit"] {
    font-size: 1.0em;
    background-color:transparent;
    padding: 5px;
    border: 0;
    border-radius: 10px 10px 10px 10px;
}

/* TABLE
----------------------------------------------------------*/

table {
    border: solid 1px #e8eef4;
    border-collapse: collapse;
}

table td {
    padding: 5px;
    border: solid 1px #e8eef4;
}

table th {
    padding: 6px 5px;
    text-align: left;
    background-color: #e8eef4;
    border: solid 1px #e8eef4;
}

/* MISC  
----------------------------------------------------------*/
.clear {
    clear: both;
}

.error {
    color: Red;
}

nav, 
#menucontainer {
    margin-top: 10px;
    
}

div#title {
    display: block;
    float: left;
    text-align: left;
}

#logindisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    margin: 10px;
    color: White;
}

#logindisplay a:link {
    color: white;
    text-decoration: underline;
}

#logindisplay a:visited {
    color: white;
    text-decoration: underline;
}

#logindisplay a:hover {
    color: white;
    text-decoration: none;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, 
.editor-label {
    margin: 1em 0 0 0;
}

.display-field, 
.editor-field {
    margin: 0.5em 0 0 0;
}

.text-box {
    width: 30em;
}

.text-box.multi-line {
    height: 6.5em;
}

.tri-state {
    width: 6em;
}

/* Styles for webgrid */
.webgrid
{
    width: 50%;
    border: 0px;
    border-collapse: collapse;
    border-radius: 10px 10px 10px 10px;
}

.webgrid a
{
    color: #000;
}

.webgrid-header
{
    padding: 6px 5px;
    text-align: center;
    background-color: #e8eef4;
    border-bottom: 2px solid #3966A2;
    height: 40px;
    
    border-top: 2px solid #D6E8FF;
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
    border-radius: 10px 10px 10px 10px;
}

.webgrid-footer
{
    padding: 6px 5px;
    text-align: center;
    background-color: #e8eef4;
    border-top: 2px solid #3966A2;
    height: 30px;
    
    border-bottom: 2px solid #D6E8FF;
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
}

.webgrid-alternating-row
{
    height: 30px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #d2d2d2;
    
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
}

.webgrid-row-style
{
    height: 30px;
    border-bottom: 1px solid #d2d2d2;
    
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
    border-radius: 10px 10px 10px 10px;
}

.webgrid-selected-row
{
    font-weight: bold;
}

e questo è il layout della pagina:

<!DOCTYPE html>
<html>
<head>
    <meta content="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>Gestione Parco Auto</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Categorie Alimentazioni", "Index", "AnagraficaAlimentazioni")</li>
                    <li>@Html.ActionLink("Categorie Veicoli", "Index", "CategoriaVeicoli")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <div id="push">
        
        <footer>
        BLABLABLBALBALBALBALBALBALBALBALBALBA
        </footer>
        </div>
        
    </div>
</body>
</html>