HTML5 Et Css3 - Footer Overlap - - Webdesign Responsive

Je suis actuellement le stylisme d'un site Web en utilisant la technique de conception web responsive afin qu'il puisse également sembler décent lorsqu'on y accède à partir d'appareils portatifs. J'ai utilisé Bootstrap pour positionner les éléments et quelques css personnalisés pour styliser la barre de navigation, le pied de page, etc. La plupart des éléments incluent le travail de la barre de navigation, excepté le fait que mon pied de page continue à chevaucher les autres éléments lors du rétrécissement. page web verticalement. Jetez un oeil sur le code ci-dessous. Toute aide serait grandement appréciée. Merci.HTML5 Et Css3 - Footer Overlap - - Webdesign Responsive

html 
{  
    margin: 1%; 
    padding: 0; 
} 
html, body 
{ 
    height: 95%; 
} 

#body 
{ 
    height: 82%; 
} 
header, footer, nav, section 
{ 
    display: block; 
} 

footer 
{ 
    width: 100%; 
    list-style: inline-block; 
    position: static; 
    white-space: nowrap; 
    border-radius: 4px; 
    padding-top: 2px; 
    padding-left: 5px; 
    vertical-align: baseline; 
} 

footer p 
{ 
    padding: 0.2em; 
    color: White; 
} 
#image 
{ 
    padding: 0.2em; 
} 

.nav 
{ 
    position: relative; 
    margin: 20px 0; 
    width: 100%; 
    border-radius: 4px; 
} 
.nav ul 
{ 
    margin: 0; 
    padding: 0; 
} 
.nav li 
{ 
    margin: 10px 5px 10px 0; 
    padding: 0; 
    display: inline-block; 
    list-style: none; 
} 
.nav a 
{ 
    padding: 3px 12px; 
    text-decoration: none; 
    color: white; 
    line-height: 100%; 
} 
.nav a:hover 
{ 
    border: 1px solid #acdd4a;  
    font-weight: normal; 
    color: #ffffff; 
    text-decoration: none; 
} 
.nav a:active 
{ 
    border: 1px solid #acdd4a; 

    font-weight: normal; 
    color: #ffffff; 
} 
.nav .current a 
{ 
    border: 1px solid #acdd4a; 
    color: #fff; 
    border-radius: 5px; 
}

Ci-dessous mon Markup

<!DOCTYPE html> 
<html lang="en"> 
<head>  
</head> 
<body> 
    <header> 
     <div class="row-fluid"> 
      <div class="span2"> 
       <p> 
        Title of webpage 
       </p> 
      </div> 
      <div class="span8"> 
      </div> 
      <div id="image" class="span2"> 

      </div> 
     </div> 
    </header> 
    <nav class="nav"> 
      <ul> 
       <li>@Html.ActionLink("Home", "Index", "Home")</li> 
       <li><a href="#">Admin</a></li> 
       <li>@Html.ActionLink("Help", "Contact", "Home")</li> 
      </ul>  
    </nav> 
    <div class="row-fluid" id="body"> 
     <section> 
      @RenderBody() 
     </section> 
    </div> 
    <footer> 
     <div class="row-fluid"> 
      <div class="span4"> 
       <p>@User.Identity.Name</p> 
      </div> 
      <div class="span5"> 
      </div> 
      <div class="span3"> 
       <p> 
        &copy; @DateTime.Now.Year</p> 
      </div> 
     </div> 
    </footer>  
</body> 
</html>

Source

2013-03-26 Ren

Essayez ceci:

CSS:

/* Sticky footer styles 
    -------------------------------------------------- */ 

    html, 
    body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
    } 

    /* Wrapper for page content to push down footer */ 
    #wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by it's height */ 
    margin: 0 auto -60px; 
    } 

    /* Set the fixed height of the footer here */ 
    #push, 
    #footer { 
    height: 60px; 
    } 
    #footer { 
    background-color: #f5f5f5; 
    } 

    /* Lastly, apply responsive CSS fixes as necessary */ 
    @media (max-width: 767px) { 
    #footer { 
     margin-left: -20px; 
     margin-right: -20px; 
     padding-left: 20px; 
     padding-right: 20px; 
    } 
    }

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    @Styles.Render("~/Content/bootstrap") 
</head> 
<body> 
    <div id="wrap"> 
     <div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <nav class="nav-collapse collapse"> 
         <ul class="nav"> 
      <li>@Html.ActionLink("Home", "Index", "Home")</li> 
      <li><a href="#">Admin</a></li> 
      <li>@Html.ActionLink("Help", "Contact", "Home")</li> 
         </ul> 
        </nav> 
       </div> 
      </div> 
      <div class="container-fluid"> 
       <section> 
        @RenderBody() 
       </section> 
      </div> 
     </div> 
     <div id="push"></div> 
    </div> 
    <div id="footer"> 
     <div class="clearfix"> 
     <div class="pull-left"> 
      <p>@User.Identity.Name</p> 
     </div> 
     <div class="pull-right"> 
      <p>&copy; @DateTime.Now.Year</p> 
     </div> 
     </div> 
    </div> 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
</body> 
</html>

Réf: [http://twitter.github.com/bootstrap/examples/sticky-footer.html][Twitter Bootstrap Sticky Footer]

Source

2013-03-26 11:33:18

Merci. Mais cela met le pied de page immédiatement après mon contenu. J'ai besoin du pied de page au bas de ma page. Mon code fonctionne bien dans ces termes, mais échoue sur le chevauchement ... des suggestions s'il vous plaît? – Ren

Avez-vous utilisé css ci-dessus? Il va coller le pied de page au bas de la page. Utilisez la même structure html avec l'id propre des éléments, principalement #wrap, #push et #footer. –

HTML5 Et Css3 - Footer Overlap - - Webdesign Responsive

Répondre

Questions connexes