2013-09-27 4 views
0

Я столкнулся одна проблемыделают центр выровнять нижний колонтитул в asp.net

моя сноска в странице остается вниз, но не в центре.

его выравнивание по правому краю Теперь

Я хочу, чтобы сделать его выравнивание по центру листа.

ранее он даже не оставался внизу, а затем применялся .footerContent css, о котором говорится ниже.

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

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

У меня есть экран здесь, чтобы можно было разместить нижний колонтитул. see here

Heres разметки

<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; 
} 

/колонтитула ванной d/

+0

приведенные ниже анс должны решить вашу проблему – Anobik

ответ

2

Измените ширину на 100% в .footerContent и установите ее разницу в 0 auto. Это должно сработать для вас.

+0

без изменений Ганеши. это то же самое. Я добавил изображение ошибки в описании, чтобы вы могли видеть положение нижнего колонтитула. –

+0

Хотя этот вопрос старый, но я использовал @TusharSale .footercontent и то, что сказал Ганеш Пандере, и нижний колонтитул теперь показывает в центре. – OmarBizreh

0

Я нашел этот вопрос на 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; 
} 
Смежные вопросы