Выравнивание изображения нижнего колонтитула в области содержимого - PullRequest
Новая
       3

Выравнивание изображения нижнего колонтитула в области содержимого

0 голосов
/ 31 января 2012

Я пытаюсь привести изображение нижнего колонтитула в соответствие с областью содержимого над ним, но я не уверен, как это сделать. Я просмотрел и опробовал разные вещи, такие как добавление ясно: оба, но безрезультатно

http://dota -bravery.co.cc /

Как видите, дно застряло слева

Вот часть кода с нижним колонтитулом: 

#footer {
width: 680px;
height: 100px;
margin: 0 auto;
    margin-top: -16px ! important;
padding: 30px 0 0 0;
background: url(http://i.imgur.com/q4neu.png) no-repeat;
}

#footer p {
margin: 0;
padding: 0 0 0 40px;
font-size: 77%;
color: #0F1720;
}

#footer a {
color: #0F1720;
}

У меня есть margin-top: -16px, потому что без него я получил пробел между контентом и нижним колонтитулом, который был исправлен этим. Обратите внимание, что нижний колонтитул был правильно выровнен, прежде чем я включил генератор. С тех пор, как он был слева. В случае, если это полезно, я также скопирую остальную часть: 

<body>
<div id="wrapper">
<div id="header">
<h1>{%WebsiteName%}</h1>
<p>{%WebsiteSlogan%}</p>
</div>
<!-- end header -->
<div id="menu">
<h2>Menu</h2>
<ul>
<!--{%menu_start=1%}-->
<li><a href="{%menu_href%}">{%menu_display%}</a></li>
<!--{%menu_end=1%}--> 
</ul>
</div>
<!-- end menu -->
<div id="page">
<div id="content">
<h1 class="title"><span>&nbsp;</span></h1>
<p>{%content%}</p>
</div>
<!-- end content -->
<div style="clear: both;">&nbsp;</div>
</div>
<div id="footer"></div>
<!-- end footer --></div>
<div id="wrapper"></div>
<!-- end wrapper -->
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 31 января 2012

Центрирование нижнего колонтитула: 

#footer {
    margin: 30px auto 0
}

Центрирование содержимого 

#wrapper {
    width: 680px;
}

Вам потребуется добавить дополнительный CSS, чтобы исправить внутреннюю часть страницы (ширина по сравнению с ошибками заполнения)

0 голосов
/ 31 января 2012

Этот код необходимо серьезно рассмотреть.У вас есть несколько тегов <html>, <head> и <body>.Выглядите как полноценная HTML-страница, где должен быть только основной текст.Ваша страница отформатирована таким образом, и без ее исправления не может произойти реалистичное устранение неполадок. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   ...
</head>
<body>

   ...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>

       ...
    </head>
    <body onload="generator()">
       ...
    </body>
    </html>
</body>
</html>
0 голосов
/ 31 января 2012

Есть несколько проблем с вашим кодом.

У вас есть объекты, которые имеют один и тот же идентификатор (обертка).Это не разрешеноИспользуйте классы, если вы хотите применить стили к нескольким объектам.

Чтобы решить вашу проблему, вам просто нужно переместить нижний колонтитул так, чтобы он находился внутри первого элемента оболочки (в данный момент он находится снаружи, вызакрытие div-обертки непосредственно перед div-ом fotter - я проверил его, это исправляет вашу проблему).

Кроме того, переименуйте второй wrapper в другое.

...