Grow your CSS skills. Land your dream job.

HTML5 And Css3 – Footer Overlap – - Responsive Web Design

  • # March 26, 2013 at 7:25 am

    I’m currently styling a website using responsive web design technique so that it could also look decent when accessed from handheld devices. I have used Bootstrap for positioning the elements and some custom css for styling the nav-bar, footer, etc. Most of the elements include the nav-bar work fine except the fact that my footer keeps overlapping the other elements when shrink the web-page vertically. Have a look at the code below. Any help would be greatly appreciated. thanks.

    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;
    }
    Below is my Markup

    < !DOCTYPE html>



    Title of webpage

    @RenderBody()

    @User.Identity.Name

    © @DateTime.Now.Year


    # March 26, 2013 at 7:25 am

    Please paste your code into http://codepen.io and give us the link.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".