Выравнивание текста в div, содержащемся в нижнем колонтитуле

0

Я не могу получить текст в нижнем колонтитуле, расположенном в правильном положении, так же, как изображение ниже: Изображение 174551

Я вносил изменения в код из шаблона, и теперь текст находится в верхней части, и появляются некоторые пустые места, особенно в браузерах Chrome: Изображение 174551

Веб здесь, и это ссылки на html и css

Обновление: добавлен JSFiddle.

<footer class="aligncenter">
    <div class="wrapper" id="bottom_footer">
         <h2 class="hidden">xxxx Footer</h2>

        <section>
            <div class="left_column">
                 <h4>OFICINAS CENTRALES</h4>

                <p>xxxxxxx xxxx, 35</p>
                <P>xxxx x</p>
                <p>Tlfo xxxxx Fax xxxx</p>
            </div>
            <!-- left_column-->
            <div class="mid_column"><span class="helper"></span>
                <img src="images/eccWhite_200.png" width="400" height="120" />
            </div>
            <div class="right_column">
                 <h4> xxxxx ESTRUCTURAS SL</h4>

                <p>estructuras construcciones y contratas</p>
                <p>info@xxxx</p>
            </div>
            <!--right_column-->
        </section>
        <!-- class="container"-->
    </div>
    <!-- wrapper footer-->
</footer>

Не могли бы вы показать мне, что я делаю неправильно?

  • 0
    примечание ответ, но совет Вы должны действительно посмотреть на эти freehtml5templates.com и getbootstrap.com :)
  • 0
    Ваш сайт становится "вредоносным" под моим фильтром работ. Если вы сможете найти нижний колонтитул, я буду рад помочь!
Показать ещё 1 комментарий
Теги:
text-align
footer

5 ответов

0
Лучший ответ
<footer id="footer">
                    <h2 class="hidden">Ecomir Footer</h2>
                <div class="left_column">
                                  <h4>OFICINAS CENTRALES</h4>
                                  <span>Almirantes Matos, 35</span>
                                  <span>36002 PONTEVEDRA</span>
                                  <span>Tlfo 986869940 Fax 98685362<span>
                </div><!-- left_column--> 

                <div class="right_column">
                                  <h4> ECOMIR ESTRUCTURAS SL</h4>
                                  <span>estructuras construcciones y contratas</span>
                                  <span>[email protected]</span>
                </div><!--right_column-->
    </footer>

CSS

.hidden {
           display: none;
           visibility: hidden;
        }
#footer h4{
    line-height: 1em;
    margin:10px 0 0 0;
}
#footer{
    width: 1100px;
    height: 120px;
    position: absolute;
    bottom: 0;
    margin-left: -560px;
    left: 50%;
    background-color: #CCC;
    background-image: url(http://www.xente.mundo-r.com/turkish/ecomir_2/images/eccWhite_200.png); 
    background-repeat: no-repeat;
    background-size: 400px 120px;
    background-position: center;

}
.left_column{
    width: 200px;
    background-color: #FF0080;
    float: left;
    padding: 0 0 0 10px;
    position: absolute;
    bottom: 0;
}
.right_column{
    width: 300px;
    background-color: #FF00FF;
    right: 0;
    bottom: 0;
    position: absolute;
}
Поделиться
1

Я бы рекомендовал против использования float:left; в левой и средней колонках. Поскольку ваш контент вряд ли сильно изменится, я могу сделать одно. Дайте позицию .right-column колонтитула position:relative и расположите свою .right-column с position:absolute; bottom:0; right:0; position:absolute; bottom:0; right:0; , Это гарантирует, что ваш правый столбец находится далеко вправо и выровнен к нижней части нижнего колонтитула.

В целом, стили в нижнем колонтитуле кажутся похожими на то, что они пытаются быть "не столом" и в конечном итоге становятся грязными для него. Если вам нужна семантическая разметка, которая все еще ведет себя как таблица, попробуйте http://960.gs/.

Поделиться
0

Я проверил версию HTML, в вашем коде, который вам ненужный section использования, сначала удалите. удалив это, вы можете удалить пробел.

есть много вещей, которые необходимо исправлять.. но здесь есть работа, чтобы вертикально выровнять текст.

.right_column
{
width: 25%; /*remove this line**/
display: inline; /*remove this line**/
}
Поделиться
0

вы можете просто использовать этот FIDDLE

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

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

.footer
{
    background-color:#CCCCCC;
    width:400px;
    height:100px;
    margin-left:auto;
    margin-right:auto;
    font-size:9px;
}
Поделиться
0

Не удалось исправить это, но следующий момент вам поможет

  1. Я просмотрел ваш код не полностью, но обнаружил, что вы использовали свойство margin-left хотя ваш левый правый div равен 25%, а центр - 50%. Таким образом, для этого поля нет места. ЕСЛИ вы удаляете margin-left:10px (я полагаю, в вашем коде). Белые линии будут удалены, и вы можете выровнять текст, установив margin-top.
  2. Я не изучил весь ваш код, но не смог найти clear:both свойства были как нижние три div float. Так что сделайте это, поскольку это хорошая практика, и я думаю, что это поможет решить вашу проблему
  3. Либо набор фона раздела #ccc или использовать padding не margin

Надеюсь эта помощь.....

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню