Search code examples
htmlcsstwitter-bootstrapfooter

footer doesn't work correctly and break all css

I have a footer in my pre project and works fine , showed in the bottom picture: enter image description here

I want use it in an other project , but it doesn't work correctly : enter image description here

I don't know why ?! Site .css 

body {
padding-top: 0px;
padding-bottom: 0px;
width:100%;
 height:100%
}

.body-content {
padding-left: 0px;
padding-right: 0px;
}
input,
select,
textarea {
max-width: 280px;
}

.field-validation-error {
color: #b94a48;
}

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

input.input-validation-error {
border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
border: 0 none;
}

.validation-summary-errors {
color: #b94a48;
 }

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

layout.cshtml:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@RenderSection("styles", false)
</head>
<body style="width:100% !important;padding:0px;">
@*overflow-x:hidden;*@


@RenderBody()

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", false) 
</body>
</html>
<br />
<footer style="background-color:#191919; text-align:center;color:GrayText;">
<div>
    <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">text1</li>
        <li class="list-group-item"><a class="Alist" href="">text2</a></li>
        <li class="list-group-item"><a class="Alist" href="">text3</a></li>
        <li class="list-group-item"><a class="Alist" href="">text4</a></li>

    </ul>
    <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">manu</li>
        <li class="list-group-item"><a class="Alist" href="">text5</a></li>
        <li class="list-group-item"><a class="Alist" href="">text6</a></li>
        <li class="list-group-item"><a class="Alist" href="">text7</a></li>

    </ul>
    <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">text8</li>
        <li class="list-group-item">text9</li>
        <li class="list-group-item">text10</li>
        <li class="list-group-item">text11</li>
        <li class="list-group-item">tel</li>
    </ul>
    <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold; padding-bottom:10px;" class="list-group-item">follow us</li>

        <li class="list-group-item">
            <a href=""><img src="~/Images/MenuImages/facebook.png" /></a>
            &nbsp;
            <a href=""><img src="~/Images/MenuImages/twitter.png" /></a>
            &nbsp;
            <a href=""><img src="~/Images/MenuImages/youtube.png" /></a>
            &nbsp;
            <a href=""><img src="~/Images/MenuImages/instagram.png" /></a>
        </li>

    </ul>
</div>
<div>
    <hr style="width: 70%; background-color: #5d5d5d; height: 0.5px; border: 0 none; " />
</div>
<div style="text-align:center;">
    <span style="text-align:center;"> all rights reserved</span>
    <span style="text-align:center;">&copy;</span>

</div>

I have a full screen bootstrap carousel in header of the page and some picture in the body . thanks for any help .

I added clear:both to my styles of footer and it looks better but still it's not main footer that I want enter image description here

it works fine in http://jsfiddle.net/53pdf4jb/ but I don't know why in my project .....

Solution

  • As per the discussion above, here is the solution for your problem. Apply clear:both to bring your footer content into the separate line and then apply background color to your list items to remove the white background.

     footer{clear:both;}
 footer ul li{background-color:#191919;}