Текст заходит на колонтитул как исправить - Исправление ошибок и поиск оптимальных решений проблем

Вы не вошли. Пожалуйста, войдите или зарегистрируйтесь.

Вставить текст за колонтитулом

Страницы 1

Чтобы отправить ответ, вы должны войти или зарегистрироваться

Сообщений [ 5 ]

1 02.06.2010 17:19:37

king1990
сержант
Неактивен

Зарегистрирован: 14.04.2010
Сообщений: 10

Тема: Вставить текст за колонтитулом

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

Отредактировано king1990 (02.06.2010 17:24:20)

2 Ответ от andrkar 02.06.2010 21:15:20

andrkar
Модератор
Неактивен

Откуда: Томск
Зарегистрирован: 10.03.2010
Сообщений: 431
Поблагодарили: 26

Re: Вставить текст за колонтитулом

На самом деле, если у вас будут дотошно проверять, то расстояние от рамки сверху и снизу до текста должно быть не менее 1 см. Визуально — у вас это расстояние меньше.
Размер колонтитула же можно уменьшить в диалоговом окне «Параметры страницы» на закладке «Источник бумаги». там как раз задаются расстояния от края до верхнего и нижнего колонтитула..

3 Ответ от king1990 02.06.2010 22:17:08

king1990
сержант
Неактивен

Зарегистрирован: 14.04.2010
Сообщений: 10

Re: Вставить текст за колонтитулом

andrkar пишет:

Размер колонтитула же можно уменьшить в диалоговом окне «Параметры страницы» на закладке «Источник бумаги». там как раз задаются расстояния от края до верхнего и нижнего колонтитула..

Просто если уменьшать размер колонтитула, он будет подниматься вверх вместе с рамкой

4 Ответ от viter.alex 03.06.2010 06:55:49

viter.alex
Модератор
Неактивен

Откуда: Харьков, Украина
Зарегистрирован: 21.12.2009
Сообщений: 884
Поблагодарили: 140

Re: Вставить текст за колонтитулом

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

Лучше день потерять — потом за пять минут долететь!

5 Ответ от andrkar 03.06.2010 16:35:54

andrkar
Модератор
Неактивен

Откуда: Томск
Зарегистрирован: 10.03.2010
Сообщений: 431
Поблагодарили: 26

Re: Вставить текст за колонтитулом

Полностью согласен с Александром. В другую сторону смотрел..

Сообщений [ 5 ]

Страницы 1

Чтобы отправить ответ, вы должны войти или зарегистрироваться

Похожие темы

Вставить текст сносок
Вставить текст сносок. 300 р.
Проблема с колонтитулом
как вставить ?
Как вставить шаблон
Как заменить жирний текст «тис. грн.» на обычний текст «тис. грн.»
Макрос. Полужирный текст оформить в <b>текст</b>
Скопировать и вставить combobox

Вставить текст за колонтитулом

Когда-то давно люди пересели с пишущих машинок за клавиатуру компьютера. И приветствовал их Microsoft Word. На портале о Microsoft Office Word вы узнаете про: изображения не отображаются word.
И дал он им жирный шрифт, полужирный, а еще курсив, множество стилей, таблиц и рисунков. Теперь те времена уже вошли в историю, а Word уходить не собирается. Наш сайт о Microsoft Office Word даст ответ про: копировать текст из pdf в word.
Наоборот он все растет, расширяется, обзаводится новыми функциями и версиями.

Хотите доступную и понятную информацию по всем тонкостям работы с этим текстовым редактором? Наш сайт о Microsoft Office Word даст ответ про: как полностью убрать интервал между строками.
Приходите на форум сайта Ворд Эксперт, в котором обсуждаются все вопросы и проблемы, связанные с различными версиями Word. На портале о Microsoft Office Word вы узнаете про: как вставить в word данные из exсel.

Если вы просто супер профессионал, то сможете предложить свои наработки в соответствующем разделе, если хотите совершенствовать свои знания, вас научат писать макросы, выбрать наиболее удобные настройки для тех операций, что часто делаете, предложат списать готовые решения или дать заявку. На портале о Microsoft Office Word вы узнаете про: как выделить поля в ворде.

Форум отличается от многих компьютерных форумов прежде всего тем, что на Ворд Эксперт ориентация идет на простого или продвинутого пользователя, а не на горстку профи, которые общаются на птичьем языке. На портале о Microsoft Office Word вы узнаете про: как поставить числитель в майкрософт офисе.
Все понятно, доступно и наглядно. А если какой-либо информации по редактору вам все-таки не хватает, оставляйте пожелание в соответствующем разделе. На портале о Microsoft Office Word вы узнаете про: как найти дробь в ворде 2003.

Источник

I’ve looked around for similar issues here and in other places, but I can’t seem to find a definitive answer. When I add enough text to a page that it would get to the footer, the footer simply overlaps the text. Same thing if I reduce the size of the browser window to force the footer and the container that holds the content to meet. Occasionally, this also manifests in the «container» aka the lighter gray part, shrinking for some reason, even though it should always be taking up 100% of the height.

This is the sort of stuff that keeps me up all night, so I’m not thinking very clearly. I’m sure it’s something stupid and easy to fix, but I’m not a professional designer and am certainly missing what the issue is.

Below is my code, and a JSFiddle that I made with all the relevant parts of a page.

html, body {
    margin: 0;
    padding: 0;
}
html, body {
    background: #252525;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    text-align: center;
}
body {
    background: #363636;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    margin: 0 22.5%;
}
#container {
    color: white;
    margin-bottom: 2em;
    min-height: 100%;
    overflow: auto;
    padding: 0 2em;
    text-align: justify;
}
#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: fixed;
    font-size: small;
    width:100%;
}

<body>
    <div id="container">
         <h1>A webpage</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.
            <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</div>
    <div id="footer">This is a footer.</div>
</body>

Here is a JSFiddle example.

TylerH

20.5k62 gold badges75 silver badges97 bronze badges

asked Sep 24, 2013 at 19:45

Change this:

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative; //changed to relative from fixed also works if position is not there
    font-size: small;
    width:100%;
}

Demo

answered Sep 24, 2013 at 19:54

Sagar GuheSagar Guhe

1,0911 gold badge11 silver badges34 bronze badges

Anyone stumbling upon this in 2017 should know that a great option was invented to alleviate layout headaches such as this, flexbox.

Essentially, all you have to do is set <body> to:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Then apply flex:1 1 auto to the «main» or middle section, in this case #container, which will make it expand vertically to fill available space, assuring the footer will stick to the bottom:

#container {
      flex: 1 1 auto;  /*grow vertically*/
}

We added align-items:center in the flex parent to handle cross-axis centering (in our case, horizontal).

Here is an example snippet of the above:

answered Jun 20, 2017 at 19:49

Scott WeaverScott Weaver

7,0562 gold badges31 silver badges43 bronze badges

See DEMO

I have made some CSS changes. Have a look. I hope it will help you.

Updated CSS

#footer {
 bottom: 0;
 color: #707070;
 height: 2em;
 left: 0;
 position: fixed; /* OldProperty */
 position: static;/* Updated Property */
 font-size: small;
 width:100%;
}

answered Oct 9, 2013 at 9:00

I believe you were looking for a sticky footer that stays while not being fixed to the bottom of the page (so no overlap).

Solution

The solution comes from Chris Bracco and I am going to detail what you need to reproduce the effect:

HTML

Your HTML be like:

<html>

<body class="body-for-sticky">
    <...> your content </...>
    <div class="footer sticky-footer"> your footer </div>
</body>

</html>

CSS

You will need to add in your css something like:

html {
    height: 100%;              /* for the page to take full window height */
    box-sizing: border-box;    /* to have the footer displayed at the bottom of the page without scrolling */
}

*,
*:before,
*:after {
    box-sizing: inherit;       /* enable the "border-box effect" everywhere */
}

.body-for-sticky {
    position: relative;        /* for the footer to move with the page size */
    min-height: 100%;          /* for the footer to be at the bottom */
    padding-bottom: 6rem;      /* Space available between last element and bottom border of the page */
}

.sticky-footer {
    position: absolute;        /* for it to disappear under last body element */
    bottom: 0;                 /* so the footer can stick to the bottom*/
}

Example

That’s like the basic you need to create the sticky footer. Here is an example (with some more CSS for better rendering).

Expand the snippet and watch the result full size to see how it works.

answered Feb 23, 2018 at 17:16

SylhareSylhare

5,2167 gold badges63 silver badges77 bronze badges

First write this code

footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:fixed;
left:0;
bottom:0;
width:100%;
}

and now set media queries

@media only screen and (max-width: 767px){
    footer {
      background-color: #000;
      color: #FFFFFF;
      font-size:.8em;
      margin-top:25px;
      padding-top: 15px;
      padding-bottom: 10px;
      position:static;
      left:0;
      bottom:0;
      width:100%;
    }
}

hope this will help you

Khasan 24-7

4462 gold badges5 silver badges18 bronze badges

answered May 12, 2017 at 12:19

 #footer {
     z-index: 1;
     position: absolute;
     right: 0;
     bottom: 0;
     left: -25%;
     padding: 1rem;
     background-color: black;
     text-align: center;
     height: 3em;
     left: 0;
     font-size: small;
     width:100%;
 }

answered Oct 21, 2016 at 6:02

Источник

Below is my code, and a JSFiddle that I made with all the relevant parts of a page.

html, body {
    margin: 0;
    padding: 0;
}
html, body {
    background: #252525;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    text-align: center;
}
body {
    background: #363636;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    margin: 0 22.5%;
}
#container {
    color: white;
    margin-bottom: 2em;
    min-height: 100%;
    overflow: auto;
    padding: 0 2em;
    text-align: justify;
}
#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: fixed;
    font-size: small;
    width:100%;
}

<body>
    <div id="container">
         <h1>A webpage</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.
            <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</div>
    <div id="footer">This is a footer.</div>
</body>

Here is a JSFiddle example.

TylerH

20.5k62 gold badges75 silver badges97 bronze badges

asked Sep 24, 2013 at 19:45

Change this:

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative; //changed to relative from fixed also works if position is not there
    font-size: small;
    width:100%;
}

Demo

answered Sep 24, 2013 at 19:54

Sagar GuheSagar Guhe

1,0911 gold badge11 silver badges34 bronze badges

Anyone stumbling upon this in 2017 should know that a great option was invented to alleviate layout headaches such as this, flexbox.

Essentially, all you have to do is set <body> to:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Then apply flex:1 1 auto to the «main» or middle section, in this case #container, which will make it expand vertically to fill available space, assuring the footer will stick to the bottom:

#container {
      flex: 1 1 auto;  /*grow vertically*/
}

We added align-items:center in the flex parent to handle cross-axis centering (in our case, horizontal).

Here is an example snippet of the above:

answered Jun 20, 2017 at 19:49

Scott WeaverScott Weaver

7,0562 gold badges31 silver badges43 bronze badges

See DEMO

I have made some CSS changes. Have a look. I hope it will help you.

Updated CSS

#footer {
 bottom: 0;
 color: #707070;
 height: 2em;
 left: 0;
 position: fixed; /* OldProperty */
 position: static;/* Updated Property */
 font-size: small;
 width:100%;
}

answered Oct 9, 2013 at 9:00

I believe you were looking for a sticky footer that stays while not being fixed to the bottom of the page (so no overlap).

Solution

The solution comes from Chris Bracco and I am going to detail what you need to reproduce the effect:

HTML

Your HTML be like:

<html>

<body class="body-for-sticky">
    <...> your content </...>
    <div class="footer sticky-footer"> your footer </div>
</body>

</html>

CSS

You will need to add in your css something like:

html {
    height: 100%;              /* for the page to take full window height */
    box-sizing: border-box;    /* to have the footer displayed at the bottom of the page without scrolling */
}

*,
*:before,
*:after {
    box-sizing: inherit;       /* enable the "border-box effect" everywhere */
}

.body-for-sticky {
    position: relative;        /* for the footer to move with the page size */
    min-height: 100%;          /* for the footer to be at the bottom */
    padding-bottom: 6rem;      /* Space available between last element and bottom border of the page */
}

.sticky-footer {
    position: absolute;        /* for it to disappear under last body element */
    bottom: 0;                 /* so the footer can stick to the bottom*/
}

Example

That’s like the basic you need to create the sticky footer. Here is an example (with some more CSS for better rendering).

Expand the snippet and watch the result full size to see how it works.

answered Feb 23, 2018 at 17:16

SylhareSylhare

5,2167 gold badges63 silver badges77 bronze badges

First write this code

footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:fixed;
left:0;
bottom:0;
width:100%;
}

and now set media queries

@media only screen and (max-width: 767px){
    footer {
      background-color: #000;
      color: #FFFFFF;
      font-size:.8em;
      margin-top:25px;
      padding-top: 15px;
      padding-bottom: 10px;
      position:static;
      left:0;
      bottom:0;
      width:100%;
    }
}

hope this will help you

Khasan 24-7

4462 gold badges5 silver badges18 bronze badges

answered May 12, 2017 at 12:19

 #footer {
     z-index: 1;
     position: absolute;
     right: 0;
     bottom: 0;
     left: -25%;
     padding: 1rem;
     background-color: black;
     text-align: center;
     height: 3em;
     left: 0;
     font-size: small;
     width:100%;
 }

answered Oct 21, 2016 at 6:02

Источник