Блог

Главная - Вопросы по программированию - Как разместить мой нижний колонтитул?

Как разместить мой нижний колонтитул?

#html #css

#HTML #css

Вопрос:

У меня проблема, я всего лишь новичок, и я хотел бы улучшить свои навыки работы с CSS и HTML, поэтому, если у вас есть несколько советов, пожалуйста, опубликуйте их здесь, так что моя проблема в моем нижнем колонтитуле, он находится не в нужном месте (внизу, в центре страницы), поэтомукто-нибудь, помогите мне, пожалуйста?

мой html:

 <!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
    </head>
    <body>
        <div id="header">
            <p id="nome">João Pedro</p>
            <a href="mailto:jp_5_5@hotmail.fr"><p id="email">jp_5_5@hotmail.fr</p></a>
            <p id="imagem"><img src="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xfp1/t1.0-9/10250173_10203771744604525_8177123278861015451_n.jpg" style="width: 50px;
    height: 50px" /></p>
        </div>
        <div class="left">
            <p>Nome</p>
            <hr>
            <p>Email</p>
            <hr>
            <p>Contacto</p>
            <hr>
            <p>Sobre</p>
            <hr>
            <p>Mais</p>
            <hr>
            <p>Jogos</p>
            <hr>
            <p>Videos</p>
        </div>
        <div class="right">
            <p id=boss><img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/s720x720/564356_10200810585497398_1364591551_n.jpg" style="height: 300px"/></p>
            <div id="texto"><h3>O que é o Jejum de Jesus? -Vocês perguntam.</h3>
            <p>O Jejum de Jesus é onde nós nos santificamos a Deus para receber o Espirito Santo.</p>
            <p>Durante 40 dias iremos nos desapegar das coisas mundanas tais como:</p>
            <ul>
                <li>Internet</li>
                <li>Musica</li>
                <li>Jogos</li>
            </ul>
        </div>
        <div id="footer"></div>
    </body>
</html>

мой css:

 body {
    background-color: #e7e7e7;
}

div {
    border-radius: 5px;
}

#header {
    margin: auto;
    position: relative;
    height: 60px;
    width: 98%;
    background-color: #230f65;
    margin-bottom: 17px;
}

.left {
    float: left;
    margin-left: 14px;
    position: relative;
    background-color: #bdabf8;
    width: 10%;
    height: 400px;
    margin-bottom: 17px;
}

.right {
    float: right;
    margin-right: 14px;
    position: relative;
    background-color: #dfd7f7;
    width: 86%;
    height: 400px;
    margin-bottom: 17px;
    border: 1px solid black;    
}

.left {
    text-align: center;
    padding-top: 19px;
    margin-bottom: 17px;
}

#footer {
    position: fixed;
    bottom: 0;
    background-color: #230f65;
    width: 85%;
}

#nome {
    color: #ffffff;
    float: left;
    padding-left: 30px;
    padding-top: 5px;
    font-family: sans-serif, Verdana;
}

#email {
    float: right;
    padding-top: 3px;
    padding-right: 10px;
    font-family: sans-serif, Verdana;
    color: #ffffff;
}

a:hover {
    font-weight: bold;
}

p > img {
    border-radius: 100%;
}

#imagem {
    padding-top: 5px;
    padding-left: 140px;
}

#boss {
    padding-top: 33px;
    float: left;
    padding-left: 15px;
}

#texto {
    padding-left: 255px;
}

Комментарии:

1. Хороший способ высмеять чей-то английский.

2. Кто-нибудь хотел бы скрипку? jsfiddle.net/TT3s8

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

Ответ №1:

Вам нужно установить a height для вашего нижнего колонтитула, так как он (пока) не имеет содержимого и, следовательно, высоты.

 #footer {
    position: fixed;
    bottom: 0;
    background-color: #230f65;
    width: 85%;
    height: 100px;
}

Если вы хотите, чтобы нижний колонтитул был внизу, взгляните на http://cssstickyfooter.com

Кроме того, чтобы центрировать нижний колонтитул, в данном случае используйте left: 7.5%; , у которого есть оставшееся пространство по бокам нижнего колонтитула. (100% — 85% равно 15%, половина слева, половина справа)

Комментарии:

1. Спасибо!!! это сработало, и еще один вопрос: что, если я захочу указать «очистить: оба;»? я пытался, но он не остается внизу

2. хорошо, я проверил сайт, и это было полезно: D

3. но у меня есть еще один вопрос, почему мой нижний колонтитул не находится в центре страницы? он находится на правой стороне

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

5. @user3779775 действительно 😉

Метки: