Visualizzazione risultati 1 fino 13 di 13
Like Tree1Likes
  • 1 Post By LastWings

Discussione: Footer bootstrap non va rimane in fondo alla pagine

  1. #1
    socialedge non è connesso Utente giovane
    Data registrazione
    24-07-2016
    Residenza
    Aversa
    Messaggi
    60

    Predefinito Footer bootstrap non va rimane in fondo alla pagine

    Ragazzi, ho problema con footer che ho messo nel mio sito con bootstrap, questo al posto di stare in fondo alla pagina va a coprire spesso "porzioni di pagina" ho risolto aggiungere i punti e a capo con <br /> ma tanti.
    Volevo sapere se qualcuno ha una soluzione seria e non alla carlona come questa.

    Vorrei che il footer rimanesse giù e non sempre in primo piano perché è brutto così almeno a me non piace e che non coprire parole.

  2. #2
    L'avatar di darkwolf
    darkwolf non è connesso Salvatore Noschese
    Data registrazione
    18-04-2007
    Residenza
    Reggiolo (RE)
    Messaggi
    6,558

    Predefinito

    Provato a fissarlo con
    Codice HTML:
    position: absolute;
    bottom: 0;
    ?
    Ultima modifica di darkwolf : 28-05-2017 alle ore 13.51.56

  3. #3
    socialedge non è connesso Utente giovane
    Data registrazione
    24-07-2016
    Residenza
    Aversa
    Messaggi
    60

    Predefinito

    Si ma oltre a mettermelo sempre in primo piano, mi "copre" spazzi di pagina.

    senza questi mi copre i testi delle pagine non permettendomi di utilizzare lo scroll della pagina
    Codice PHP:
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <?php
    include ("page/footer.php");
    ?>
    </div>
    </body>
    </html>
    footer.php
    Codice PHP:
    <div id="fixed-footer">
    <
    div class="navbar navbar-default navbar-fixed-bottom">
    <
    div class="container">

    <
    p class="navbar-text pull-left" align="center" >© 2017
    <a href="http://www.socialedge.altervista.org" target="_blank" >SocialEdge</a>
    </
    p>

    <
    a href="aggiornamenti" class="navbar-btn btn-danger btn pull-right">
    <
    span class="glyphicon glyphicon-star"></span>*Nuove Funzioni</a>
    </
    div>
    </
    div>
    </
    div>

    .footer, .push {
    text-align: center;
    height: 30px;
    clear: both;
    position: fixed;
    }

  4. #4
    L'avatar di darkwolf
    darkwolf non è connesso Salvatore Noschese
    Data registrazione
    18-04-2007
    Residenza
    Reggiolo (RE)
    Messaggi
    6,558

    Predefinito

    Io ti avevo detto absolute (che rimane in fondo e non scorre). Tu hai fixed (scorre insieme alla pagina). Quei br, poi, nel css sono un aborto.

    Vuoi che non scorra e rimanga in basso?
    Prova con quanto ho scritto nel mio precedente messaggio (e rimuovi quei br).
    Poi vediamo che risultati ottieni e cosa eventualmente correggere

  5. #5
    socialedge non è connesso Utente giovane
    Data registrazione
    24-07-2016
    Residenza
    Aversa
    Messaggi
    60

    Predefinito

    Te lo avevo detto che avevo risolto alla carlona hahaha

    comunque non è cambiato nulla anzi levando quei <br> ho giusto l'esempio che ti voglio mostrare http://socialedge.altervista.org/aggiornamenti

    ora il codice è

    Codice PHP:

    .footer, .push {
    clear: both;
    position: absolute;
    bottom: 0;
    }
    Vai sul sito e ti mostro cosa intendevo con copre i testi..

  6. #6
    L'avatar di darkwolf
    darkwolf non è connesso Salvatore Noschese
    Data registrazione
    18-04-2007
    Residenza
    Reggiolo (RE)
    Messaggi
    6,558

    Predefinito

    Appena mi siedo al pc do un occhiata col debug. Si comporta ancora da fixed quindi ci dev'essere qualcosa che ha la priorità su quella regola.

  7. #7
    socialedge non è connesso Utente giovane
    Data registrazione
    24-07-2016
    Residenza
    Aversa
    Messaggi
    60

    Predefinito

    Aspetto tue notizie allora..

  8. #8
    L'avatar di darkwolf
    darkwolf non è connesso Salvatore Noschese
    Data registrazione
    18-04-2007
    Residenza
    Reggiolo (RE)
    Messaggi
    6,558

    Predefinito

    rimuoviamo il padding top dal wrapper, e il fixed dalla navbar del footer
    Codice HTML:
    #wrapper {
        min-height: 100%;
        height: auto !important;
        margin: 0 auto -30px;
    }
    
    .navbar-fixed-bottom, .navbar-fixed-top {
        right: 0;
        left: 0;
        z-index: 1030;
    }
    così si ottiene un risultato buono (bisogna solo posizionare i bottoni del footer, e lo fai facilmente se imposti una larghezza al footer che, attualmente, non c'è).

  9. #9
    socialedge non è connesso Utente giovane
    Data registrazione
    24-07-2016
    Residenza
    Aversa
    Messaggi
    60

    Predefinito

    Questo è tutto il mio style.css ho modificato come detto quello che avevi detto ma non è cambiato nulla..

    Codice PHP:
    *{
    margin:0;
    padding:0;
    }

    html {
    height: 100%;
    }

    body {
    overflow: scroll;
    height: 100%;
    }
    #preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99;
    }
    .
    footer, .push {
    text-align: center;
    height: 30px;
    clear: both;
    position: absolute;
    bottom: 0;
    }

    }
    #status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(assets/loader.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
    }

    #login-form {
    margin:5% auto;
    max-width:500px;
    }

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

    .
    navbar-fixed-bottom, .navbar-fixed-top {
    right: 0;
    left: 0;
    z-index: 1030;
    }

    #header-profilo{
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    }

    #profilo-img-wrapper {
    margin-right: 20px;
    width: 220px;
    height: 220px;
    text-align: center;
    float: left;
    }

    #profilo-img {
    max-width: 100%;
    max-height: 100%;
    }

    #profilo-content {
    float: left;
    }

    .
    profile-data {
    margin: 0;
    }

    .
    profile-data-first {
    margin-bottom: 0;
    }

    .
    profile-data-last {
    margin-top: 0;
    }

    #form-modifica-profilo {
    max-width: 350px;
    }

    #form-upload-foto {
    max-width: 350px;
    }

    #form-cancella-foto {
    max-width: 340px;
    }

    .
    btn-default {
    padding-top: 8.4px;
    padding-bottom: 9.2px;
    }

    .
    utenti-trovati {
    margin-bottom: 15px;
    }

    .
    ricerca-profilo{
    padding: 8px;
    border: 2px solid #eee;
    border-radius: 10px;
    height: 98px;
    margin-top: 10px;
    }

    .
    ricerca-profilo-img-wrapper {
    width: 80px;
    height: 80px;
    border: 1px solid #666;
    text-align: center;
    float: left;
    }

    .
    ricerca-profilo-img {
    max-width: 100%;
    max-height: 100%;
    }

    .
    ricerca-profilo-info {
    float: left;
    margin-left: 15px;
    }

    .
    ricerca-profilo-username {
    font-size: 30px;
    margin:0;
    }

    .
    ricerca-profilo-nome {
    font-size: 18px;
    color: #555;
    margin:0;
    }

    .
    elimina-foto {
    padding: 8px;
    border: 2px solid #eee;
    border-radius: 10px;
    height: 180px;
    width: 150px;
    margin: 10px;
    text-align: left;
    float: left;
    }

    .
    elimina-foto-anteprima-wrapper {
    width: 130px;
    height: 130px;
    border: 1px solid #666;
    text-align: center;
    float: left;
    margin-left: 0px;
    }

    .
    elimina-foto-anteprima {
    max-width: 100%;
    max-height: 100%;
    }

    .
    elimina-foto-descrizione {
    margin-left: 15px;
    width: 130px;
    text-align: center;
    }

    .
    elimina-foto-checkbox-wrapper {
    width: 130px;
    text-align: center;
    }

    .
    elimina-foto-checkbox {
    width: 20px;
    height: 20px;
    }

    .
    btn-follow {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 15pt;
    width: 200px;
    padding: 5px;
    color: #0000FF;
    border: 1.5px solid #0000DD;
    background-color: #FFFFFF;
    border-radius: 5px;
    }

    .
    btn-unfollow {
    margin-top: 10px;
    margin-left: 5px;
    font-size: 15pt;
    width: 200px;
    padding: 5px;
    color: #FFFFFF;
    border: 1.5px solid #00AA00;
    background-color: #00DD00;
    border-radius: 5px;
    }

    .
    btn-unfollow:hover {
    color: #FFFFFF;
    border: 1.5px solid #CC0000;
    background-color: #FF0000;
    }

    .
    btn-unfollow:hover span {
    display:none;
    }

    .
    btn-unfollow:hover:before {
    content:"NON SEGUIRE PIÙ!";
    }

    .
    home-wrapper {
    max-width: 600px;
    text-align: center;
    overflow: hidden;
    }

    .
    home-foto-wrapper {
    width: 100%;
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    }

    .
    home-foto-profilofoto-wrapper {
    width: 35px;
    height: 35px;
    border: 1px solid #888;
    text-align: center;
    float: left;
    margin: 17px;
    margin-bottom: 5px;
    }

    .
    home-foto-profilofoto {
    max-width: 100%;
    max-height: 100%;
    }

    .
    home-foto-username {
    float: left;
    line-height: 35px;
    height: 35px;
    margin-top: 17px;
    margin-bottom: 5px;
    }

    .
    home-foto-timeago {
    float: right;
    line-height: 35px;
    height: 35px;
    margin: 17px;
    margin-bottom: 5px;
    }

    .
    home-foto {
    width: 100%;
    }
    Ultima modifica di darkwolf : 28-05-2017 alle ore 19.45.20

  10. #10
    L'avatar di darkwolf
    darkwolf non è connesso Salvatore Noschese
    Data registrazione
    18-04-2007
    Residenza
    Reggiolo (RE)
    Messaggi
    6,558

    Predefinito

    http://socialedge.altervista.org/ass.../bootstrap.css

    Codice PHP:
    .navbar-fixed-top,
    .
    navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    }

  11. #11
    socialedge non è connesso Utente giovane
    Data registrazione
    24-07-2016
    Residenza
    Aversa
    Messaggi
    60

    Predefinito

    Domani provo e ti faccio sapere, grazie mille

  12. #12
    socialedge non è connesso Utente giovane
    Data registrazione
    24-07-2016
    Residenza
    Aversa
    Messaggi
    60

    Predefinito

    Provato, non funziona ancora.. ti giuro quasi ci rinuncio..

  13. #13
    L'avatar di LastWings
    LastWings non è connesso AlterGuru
    Data registrazione
    14-10-2006
    Messaggi
    1,628

    Predefinito

    Io ancora vedo il fixed bottom...
    togli completamente la classe .navbar-fixed-bottom al footer, se non la usi, dato che fa esattamente quello che non vuoi.

    Magari anche aggiungere il div row, con le due colonne sopra, dove metti gli aggiornamenti, usare il doctype di html5 i vari section, main, etc...
    Ultima modifica di LastWings : 29-05-2017 alle ore 15.50.43
    darkwolf likes this.
    Ecchi Paradise - Frammenti Perduti - Semplici Parole - Recensioni ed Opinioni

    Non contattatemi privatamente per ricevere supporto, per queste cose esiste il forum pubblico
    .

Tags for this Thread

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •