Tushar Sale Ответов: 3

сделайте нижний колонтитул выровненным по центру и нижней части страницы в asp.net

Я столкнулся с одной проблемой

мой нижний колонтитул на странице остается опущенным, но не в центре. теперь он выровнен по правому краю

Я хочу, чтобы он был выровнен по центру.


раньше он даже не останавливался, а потом применил CSS .footerContent, который упоминается ниже.

после применения .footerContent. это решило мою проблему с тем, что нижний колонтитул не был нижней частью страницы. теперь он внизу, но показывает широко справа . половина нижнего колонтитула обрезается.

можете ли вы, ребята, исправить и показать мне, что не так?

вот экран ошибки

видеть здесь[]


вот разметка

<body>
    <form id="form1" runat="server">
    <div id="wrapper">
        <div id="header" runat="server">
        <%-- Menu goes here --%>
      </div>
      <div id="masterpageContent" class="footer">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
      </div>
    </div>
    <div class="footerContent">
        <div class="footerbrd">
        </div>
        <p class="clear">
        </p>
        <div class="footer">
            <div class="c1 fleft">
                Best viewed in IE8 and above with Resolution 1024x768
            </div>
            <div class="c2 fleft">
                (c) Copyright 2013
                <br />
                All Rights Reserved.
            </div>
            <div class="c3 fright">
                Site by abc Team
            </div>
            <p class="clear">
            </p>
        </div>
    </div>
    </form>
</body>




ересь css


.footerbrd {width:929px; height:1px; background:#ef0b14; margin:0px auto;}
.footer {width:929px; margin:0px auto; padding:5px 0px; color:#666666;}
.footer .c1 {width:300px; margin:0px; padding:0px;}
.footer .c2 {width:375px; margin:0px; padding:0px; text-align:center;}
.footer .c3 {width:254px; margin:0px; padding:0px 0px 0px 0px; text-align:right;}
ul.foot {list-style:none; padding: 0px 0px; margin: 0px;}
ul.foot li {list-style:none; float:left; line-height:12px;}
ul.foot li a {color:#666666; padding: 2px 10px; font-size:11px; text-decoration:none; display:block; float:left;}

.footerContent { 
	position: absolute;
    height: 50px;
    width: 929px;
    margin: auto;
    bottom: 0px;
}

3 Ответов

Рейтинг:
2

dnisko

Я нашел этот вопрос в google и нашел решение вашей проблемы (это немного поздно, но для всех, кто ищет)

Страница должна выглядеть так:

<html>
    <head runat="server">
        <title></title>

        <link rel="Stylesheet" href="../Scripts/layout.css" />

    </head>
    <body>
        <form id="form1" runat="server">
        <div id="wrapper">
            YOUR PAGE HERE      

          <div id="push">
          </div>
        </div>
    
        <div class="footer">
        YOUR FOOTER HERE    
        </div>
        </form>
    </body>
</html>

А в файле layout.css (сохраните его в папке Scripts на вашем сайте) добавьте следующее:
.wrapper 
{
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -20px;  /*the bottom margin is the negative value of the footer's height*/
}
.push
{
    height: 20px;  /*'.push' must be the same height as 'footer'*/
}
.footer
{ 
    position: absolute;
    height: 20px;
    width: 99%;
    margin: auto;
    bottom: 0px;
    text-align: center;
}

Рейтинг:
1

jaideepsinh

Используйте центральную метку, как показано ниже : 

<div class="footerContent">
<center>
        <div class="footerbrd">
        </div>
        <p class="clear">
        </p>
        <div class="footer">
            <div class="c1 fleft">
                Best viewed in IE8 and above with Resolution 1024x768
            </div>
            <div class="c2 fleft">
                (c) Copyright 2013
                <br />
                All Rights Reserved.
            </div>
            <div class="c3 fright">
                Site by abc Team
            </div>
            <p class="clear">
            </p>
        </div>
</center>
    </div>



Примите как ответ и проголосуйте, если поможет.

Tushar Sale

я поставил центральную метку, но она не изменилась.
я добавил изображение ошибки в описание, чтобы вы могли видеть положение нижнего колонтитула.

Рейтинг:
1

Murali0195

Привет..
Можете ли вы увидеть это!.
как установить нижний колонтитул только для всех страниц[^]