0

Всем привет. Не пойму, почему div с классом footer не отображается с новой строки, а растягивается на большую часть страницы?? Для наглядности сделал рамку 1 пиксель.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <title>Portfolio</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="btn-change-theme">
        <button class="btn-top">
            <img src="img/Medium Brightness.svg" alt="Переключить режим">
        </button>
    </div>

    <div class="profile-info">
        <div class="profile-picture"></div> 
        <div class="profile-description">
            <span class="name">Victor Alvarado</span>
            <br />
            <span class="name2">Software Engineer</span>
            <table>
                <tr>      
                    <td>
                        <img src="img/github.png" alt="github">
                    </td>
                    <td>
                        <img src="img/twitter.png" alt="twitter">
                    </td>
                    <td>
                        <img src="img/linkedin.png" alt="linkedin">
                    </td>
                    <td>
                        <img src="img/youtube.png" alt="youtube">
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="profile-facts">
        <table class="profile-facts">
            <tr class="facts">
                <td>7<br />Years of work experience</td>
                <td>50+<br /> Completed projects</td>
                <td>20+<br /> Satisfied customers</td>
            </tr>
        </table>
    </div>

    <div class="profile-buttons">
        <a class="download" href="#">Download CV</a>
        <a class="contact" href="#">Contact me</a>
    </div>

    <div class="tabsbtn">
        <button class="button">Portfolio</button>
        <button class="skills">Skills</button>
    </div>

    <div class="content">
        <img src="img/Group 3.png" alt="group" style="float:left; margin-bottom: 30px">
        <img src="img/Group 4.png" alt="group" style="float:right; margin-bottom: 30px;">
        <img src="img/Group 5.png" alt="" style="float:right; margin-bottom: 30px;">
        <img src="img/Group 6.png" alt="" style="float:left; margin-bottom: 30px;">
        <img src="img/Group 7.png" alt="" style="float:right; margin-bottom: 30px;">
        <img src="img/Group 8.png" alt="" style="float:left;">
    </div>

    <div class="footer">
         <p>Victor Alvarado. 2022 All rigths reserved</p>
    </div>
    
</body>
</html>

css стиль для этого дива:

body {
    background-color: #E5E5E5;
    font-family: 'Poppins', sans-serif;
    }

.btn-change-theme {
    width: 80px;
    margin: 0 auto 0 auto;
    }

.btn-top {
    margin: 0 auto 0 auto;
    padding: 0 0;
    border: 5px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    box-shadow: 0 5px 5px #db7878;
    }

.profile-info {
    width: 631px;
    height: 215px;
    margin: 40px auto 40px auto;
    padding: 0 0;
}

.profile-picture {
    background-image: url(../img/profile-picture.png);
    background-repeat: no-repeat;
    background-position: center;
    float: left;
    width: 215px;
    height: 222px;
}

div.profile-description {
    width: 372px;
    margin: 38px 0 38px 0;
    float: right;
    display: inline-block;
}

span.name {
    font-size: 36px;
    color: #3D3D3D;
    text-align: left;
    vertical-align: text-top;
}

span.name2 {
    font-size: 22px;
    color: #3D3D3D;
    text-align: left;
    vertical-align: middle;
}

div.profile-facts {
    width: 634px;
    padding: 20px 2px 20px 2px;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    text-align: center;
}

.profile-buttons {
    width: 618px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}
.download { 
    width: 290px;
    height: 80px;
    float: left;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
    background-color: #FBD144;
    color: #3D3D3D;
    border-radius: 10px;
    line-height: 80px;
    font-weight: 500;
}
.contact {
    width: 290px;
    height: 80px;
    float: right;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
    background-color: #FFFFFF;
    color: #3D3D3D;
    border-radius: 10px;
    line-height: 80px;
    font-weight: 500;
}
.tabsbtn {
    max-width: 760px;
    padding-left: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 180px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
    border-radius: 20px;
}
.button {
    width: 350px;
    height: 80px;
    background-color: #D7D7D7;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    border-radius: 10px;
    border: 0;
}
.skills {
        width: 385px;
        height: 80px;
        background-color: #FFFFFF;
        font-size: 22px;
        font-weight: 700;
        text-align: center;
        border-radius: 10px;
        border: 0;
}
.content {
    max-width: 757px;
    margin-top: 55px;
    margin-left: auto;
    margin-right: auto;
}
div.footer {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #575757;
    border: 1px solid red;
}

И вот скрин, что получается в итоге: footer

6
  • css всей страницы надо 28 мая 2022 в 18:34
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 28 мая 2022 в 19:34
  • Внес правку в сообщение
    – ghost3ds
    28 мая 2022 в 20:14
  • У вас все изображения расположены локально, будет сложно вам что-то подсказать
    – yspesny
    28 мая 2022 в 20:19
  • Добавил проект на гитхаб, все файлы там github.com/ghost3ds/hello-world
    – ghost3ds
    28 мая 2022 в 20:49

3 ответа 3

0

У тебя проблема с float, из-за этого пропадает высота у блока class="content"

добавить такую строчку после данного блока

<div style="clear:both"></div>`

вот скрин

https://pastenow.ru/ea23686108fc23d05d45a7e9b158ea46

4
  • Сработало, блок встал на своё место, спасибо! Нужно углубить знания со свойством float, не думал, что из-за него могут быть такие проблемы:)
    – ghost3ds
    29 мая 2022 в 13:54
  • Пожалуйста, да это его такая особенность. Сейчас его редко где применят, лучше flex или grid 29 мая 2022 в 13:55
  • 1
    вместо clear поогает также overflow:hidden, что заставляет его растягиваться, "принимая внутрь" float-элементы
    – AndryG
    29 мая 2022 в 20:22
  • @AndryG спасибо, ваш способ также работает, возьму на вооружение!
    – ghost3ds
    31 мая 2022 в 15:46
0

попробуйте принудительно сделать вот так в index.html

<div class="footer">
    <nobr>Victor Alvarado. 2022 All rigths reserved</nobr>
</div>

пример работы кода

1
  • Ваш способ работает, текст выравнивается в одну строчку, но сам блок так и остается вытянутый по высоте. Тем не менее, спасибо за комментарий!
    – ghost3ds
    29 мая 2022 в 13:57
0

Переверстал немного ваш шаблон

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <title>Portfolio</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
</head>

<body>
    <div class="btn-change-theme">
        <button class="btn-top">
            <img src="img/Medium Brightness.svg" alt="Переключить режим">
        </button>
    </div>

    <div class="profile-info">
        <div class="profile-picture"></div>
        <div class="profile-description">
            <div class="profile-name">
                <p class="name">Victor Alvarado</p>
                <p class="prof">Software Engineer</p>
            </div>

            <ul class="links">
                <li><img src="img/github.png" alt="github"></li>
                <li><img src="img/twitter.png" alt="twitter"></li>
                <li><img src="img/linkedin.png" alt="linkedin"></li>
                <li><img src="img/youtube.png" alt="youtube"></li>
            </ul>
        </div>
    </div>

    <div class="profile-facts">
        <ul>
            <li>7<br>Years of work experience</li>
            <li>50+<br>Completed projects</li>
            <li>20+<br>Satisfied customers</li>
        </ul>
    </div>

    <div class="profile-buttons">
        <a class="download" href="#">Download CV</a>
        <a class="contact" href="#">Contact me</a>
    </div>

    <div class="tabsbtn">
        <button class="button">Portfolio</button>
        <button class="skills">Skills</button>
    </div>

    <div class="content">
        <div class="content_lines">
            <div class="line">
                <img src="img/Group 3.png">
                <img src="img/Group 4.png">
            </div>
            <div class="line">
                <img src="img/Group 5.png">
                <img src="img/Group 6.png">
            </div>
            <div class="line">
                <img src="img/Group 7.png">
                <img src="img/Group 8.png">
            </div>
        </div>
    </div>

    <div class="footer">
        <p>Victor Alvarado. 2022 All rigths reserved</p>
    </div>


</body>

</html>

css

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #E5E5E5;
    font-family: 'Poppins', sans-serif;
}

.btn-change-theme {
    width: 80px;
    margin: 0 auto 0 auto;
}

.btn-top {
    margin: 0 auto 0 auto;
    padding: 0 0;
    border: 5px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    box-shadow: 0 5px 5px #db7878;
}

.profile-info {
    display: flex;
    padding-top: 35px;
    align-items: center;
    justify-content: center;
}

.profile-picture {
    background-image: url(../img/profile-picture.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 215px;
    height: 222px;
}

.profile-description {
    padding-left: 50px;
}

p.name {
    font-size: 36px;
    color: #3D3D3D;
}

p.prof {
    font-size: 22px;
    color: #3D3D3D;
}

.profile-info .links {
    list-style: none;
    display: flex;
}

.links li {
    padding-right: 5px;
}

.profile-facts ul {
    display: flex;
    font-size: 24px;
    text-align: center;
    list-style: none;
    margin-top: 50px;
    justify-content: center;
}

.profile-facts ul li {
    width: 220px;
}

.profile-buttons {
    display: flex;
    margin-top: 50px;
    justify-content: center;
}

.download {
    width: 290px;
    height: 80px;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
    background-color: #FBD144;
    color: #3D3D3D;
    border-radius: 10px;
    line-height: 80px;
    font-weight: 500;
    margin-left: 50px;
}

.contact {
    height: 80px;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
    background-color: #FFFFFF;
    color: #3D3D3D;
    border-radius: 10px;
    line-height: 80px;
    font-weight: 500;
    margin-left: 100px;
}

.tabsbtn {
    margin: 50px 0;
    display: flex;
    border-radius: 20px;
    justify-content: center
}

.button {
    height: 80px;
    width: 362px;
    background-color: #D7D7D7;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    border-radius: 10px;
    border: 0;
    margin-right: 15px;
}

.skills {
    height: 80px;
    width: 362px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    border-radius: 10px;
    border: 0;
    margin-left: 15px;
}

.content {
    display: flex;
    justify-content: center;
    margin-top: 55px;
}

.content .content_lines .line img{
    padding: 0 15px 15px 15px;
}

.footer {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #575757;
}
1
  • Спасибо, ваш код более аккуратный, чем мой. Есть куда расти, буду анализировать!
    – ghost3ds
    29 мая 2022 в 13:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.