1

Мне нужно сделать нечто подобное (не обращайте внимание на то, что отличается выравнивание текста на 1 и 2 картинке, это сейчас не принципиально):

То, что мне нужно

Я написал код, адаптировав его под условия своей задачи (код прикреплю ниже), вот что получилось:

То, что получилось

Проблемы: 1) блок left не прилегает к footer; 2) ссылки не должны быть такими, они должны быть белыми. Как исправить эти проблемы? Вроде тупой вопрос, но что-то не нахожу решений.

index.html:

<!DOCTYPE HTML>
<html>
<head><title>Block_Verstka</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<bodylink="white" alink="red">
<div class="all">
<div class="logo">
<img src="Lighthouse.jpg" height="100" width="250">
</div>
    <div class="top">Хедер</div>
    <div class="left">MENU<p><a></a></p> 
<p><a href="1.htm">Главная</a></p>
<p><a href="2.htm">История</a></p>
<p><a href="3.htm">Галерея</а></р>
<p><a></a></p>
</div>
    <div class="content">
<pre></pre>
<p>Существуют две основные трактовки понятия «текст»: имманентная (расширенная, философски нагруженная) и репрезентативная (более частная). Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления информации о внешней тексту действительности.</р>
<p align="center"><img src="dog.jpg" height="100" width="120"></p>
</div>
<div class="clear"></div>
    <div class="footer">Footer 
    <p>ФУтЕр</p></div>
    </div></body></html>

style.css:

body, html { 
    width: 100%;
        min-width: 1000px;
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: tahoma;
        background: #ffffff;
        color: #ffffff;
}

.all {
    width: 1000px;
        margin: 0 auto;
}

.logo {
    background: #009e9d; 
    width: 250px;
    height: 100px; 
    padding: 10px 0; 
    float: left;
}

.top {
    background: #009e9d; 
        width: 750px; 
        height: 100px; 
        float: left; 
    padding: 10px 0; 
    font-size: 30px; 
    line-height: 24px; 
    text-align: center;
    text-transform: uppercase; 
}

.left {
    background: #0010d5; 
    float: left; 
    width: 250px; 
    height: З00рх;
    font-size: 20px; 
    text-align: center; 
    text-transform: uppercase;
}

.content {
    background: #97969b; 
    float: left; 
    width: 750px; 
    height: 300рх; 
        text-indent: 20; 
        text-indent: 10 px;
        line-height: 24px;
        text-align: justify; 
    font-family: tahoma;
}

.clear { 
    clear: both;
}

.footer {
    background: #28282a; 
    padding: 100px 0; 
    padding: 50px 0; 
    font-size: 20px; 
    line-height: 24px; 
    text-align: center; 
    text-transform: uppercase;
}
1
  • flex используйте - он проще, float только для обтекания 14 мар 2021 в 13:27

2 ответа 2

3

Аналог ответа @Sevastopol' через области:

* {margin: 0; color: white;}

.container {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-template-rows: 15% 1fr 15%;
  grid-template-areas: "header header" "sidebar content" "footer footer";
  min-height: 100vh;
}

.header {
  grid-area: header;
  background: mediumseagreen;
}

.footer {
  grid-area: footer;
  background: black;
}

.sidebar {
  grid-area: sidebar;
  background: cornflowerblue;
}

.content {
  grid-area: content;
  background: darkgray;
}
<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Text</div>
  <div class="footer">Footer</div>
</div>

1
  • @Sevastopol' да я сам это начал писать только потому что выявил якобы "фатальный недостаток" написания высот у сайдбара и контента, когда они автоматом могут быть. Жаль нет свойства grid-grow как у флекса.
    – user347472
    14 мар 2021 в 13:58
1

Вот ваша разметка. Grid. Посмотрите, как всё просто, красиво, логично и эротично:

* {margin: 0; color: white;}

.container {
  display: grid; grid-template-columns: repeat(4, 1fr); min-height: 100vh;
}

.header {
  grid-column: span 4 / auto; height: 15vh; background: mediumseagreen;
}

.footer {
  grid-column: span 4 / auto; height: 15vh; background: black;
}

.sidebar {
  grid-column: span 1 / auto; min-height: 70vh; background: cornflowerblue;
}

.content {
  grid-column: span 3 / auto; min-height: 70vh; background: darkgray;
}
<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Text</div>
  <div class="footer">Footer</div>
</div>

Flex. Также всё просто, красиво, логично, но не эротично:

* {margin: 0; color: white;}

.container {min-height: 100vh;}

.header {height: 15vh; background: mediumseagreen;}
.footer {height: 15vh; background: black;}

.box {display: flex; min-height: 70vh;}

.sidebar {flex: 1 1 auto; background: cornflowerblue;}
.content {flex: 4 1 auto; background: darkgray;}
<div class="container">
  <div class="header">Header</div>
  <div class="box">
    <div class="sidebar">Sidebar</div>
    <div class="content">Text</div>
  </div>
  <div class="footer">Footer</div>
</div>

И inline-block+float. Также всё просто, вроде как красиво и логично, но уже совсем не эротично:

* {margin: 0; color: white;}

.container {min-height: 100vh;}

.header {height: 15vh; background: mediumseagreen;}
.footer {height: 15vh; background: black;}

.box {min-height: 70vh;}

.sidebar {
  float: left; display: inline-block; width: 25%; min-height: 70vh;
  background: cornflowerblue;
}
.content {
  display: inline-block; width: 75%; min-height: 70vh;
  background: darkgray;
}
<div class="container">
  <div class="header">Header</div>
  <div class="box">
    <div class="sidebar">Sidebar</div>
    <div class="content">Text</div>
  </div>
  <div class="footer">Footer</div>
</div>

2
  • Спасибо за такой развернутый ответ) Но вопрос) А можно как-то пофиксить мой пример, который чисто через float?) Просто мы все эти крутые штуки с grid, inline-block & flex даже не проходили
    – EvilBDSM
    14 мар 2021 в 16:33
  • Понял, спасибо)
    – EvilBDSM
    14 мар 2021 в 17:22

Ваш ответ

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

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