Пробуем делать сами

Общее
1

Подскажите почему ширине дочернего элемента не соответствует родительскому, хотя значение стоит inherit, меня интересует class=“header”. Прилагаю HTML и CSS коды.

ТМТ-Энерго Логотип 
     <span id="about_company">О Компании</span>

CSS
body {

background-color: aquamarine;
font-size: 1.5em;
font-family: Times New Roman serif;
font-style: itali

}

.header {
position: fixed;
width: inherit;
margin: 0;
padding: 10px 15px;
background-color: #f5f5f5;
}

.header li {
display: inline;
padding-right: 30%;
}

.header li:last-child {
padding-right: 0px;
}

2

P.S. меню у меня горизонтальное.

3

html-код поправьте, не видно (кнопка </> в редакторе сообщений)

4 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>ТМТ-Энерго</title>
</head>
<body>
<ul class="header">
    <li><a  href="#about_company">О нашей компании</a></li>
    <li><a href="#products">Наши услуги</a></li>
    <li><a href="#kontakts">Контакты</a></li>
</ul>
      <img class="logo" src="images/logo.png"  width="auto"  alt="Логотип"/>
    

     <span id="about_company">О Компании</span>
  
</body>
</html>
5

Вот расскажите, какую ширину вы собираетесь сделать наследуемой? Для body ширина не задана…

6

когда я ширину боди делаю 100% он выходит за край экрана. Если ее не задавать явно то она как раз на ширину экрана. А мне надо что бы ul была шириной как боди!

7

Отступы обнулите у body.

1 лайк
8

Спасибо, попробую!

9

Я может глупости спрашиваю, но подскажите как сделать рисунок по центру body.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>ТМТ-Энерго</title>
</head>
<body>
<ul class="header">
    <li><a href="#about_company">О нашей компании</a></li>
    <li><a href="#products">Наши услуги</a></li>
    <li><a href="#kontakts">Контакты</a></li>
</ul>
<img class="logo" src="images/logo.png"  width="auto"  alt="Логотип"/>
<h1><span id="about_company">О Компании</span></h1>
</body>
</html>

body {
margin: 0px;
padding: 0 5px;
background-color: aquamarine;
font-size: 1.5em;
font-family: Times New Roman serif;
font-style: italic;
}

.header {
position: fixed;
width: inherit;
margin: 0 0 20px 0;
padding: 10px 15px;
background-color: #f5f5f5;
border: 1px solid black;
white-space: nowrap;
}

.header li {
display: inline;
padding-right: 32%;
}

.header li:last-child {
padding-right: 0px;
}

.logo {
position: relative;
top: 49px;
margin: 0 0 0 33%;
width: 30%;
}

10

без использования маргинов это вообще возможно?

11

А чем вам маргины не угодили? Величиной auto справа и слева выравнивается любой блочный элемент. Только изображение свое в блок оберните. И класс logo задайте блоку, а не изображению.

1 лайк
12

У меня снова вопрос по меню. Почему при изменении HTML кода у меня мню становится шириной всего на пол экрана? Мне приходится после этого в CSS в .header допустим в position: fixed; убираю букву d сразу ставлю ее обратно и меню становится нормальным. Код пишу в Brackets, он визуализирует в Chrome, пробовал в других браузерах открывать меню тоже на пол страницы. И может быть блок пустой перед заголовками повставлять, что бы когда переходишь по ссылкам из меню, само меню не закрывало заголовок или это не поможет?

body {
margin: 0px;
padding: 0 5px;
background-color: aquamarine;
font-size: 1.5em;
font-family: Times New Roman serif;
font-style: italic;
}

.header {
position: fixed;
width: inherit;
margin: 0 0 20px 0;
padding: 10px 15px;
background-color: #f5f5f5;
border: 1px solid black;
white-space: nowrap;
z-index: 100;
}

.header li {
display: inline;
padding-right: 32%;
}

.header li:last-child {
padding-right: 0px;
}

.logo {
position: relative;
top: 49px;
margin: 0 auto;
width: 30%
}

img {
width: 100%
}

.company {
width: inherit;
min-height: 500px;
border: 1px solid black;
background-color: bisque;
}

.product {
width: inherit;
min-height: 500px;
border: 1px solid black;
background-color: red;
}

.kontakt {
width: inherit;
min-height: 500px;
border: 1px solid black;
background-color: yellow;
}

  <!DOCTYPE html>
    <html lang="ru">
     <head>
             <meta charset="UTF-8">
             <link rel="stylesheet" href="style.css">
             <title>ТМТ-Энерго</title>
         </head>
    <body>
        <ul class="header">
        <li><a href="#about_company">О нашей компании</a></li>
        <li><a href="#products">Наши услуги</a></li>
        <li><a href="#kontakts">Контакты</a></li>
    </ul>
    <div  class="logo">
        <img src="images/logo.png"  width="auto"  alt="Логотип"/>
    </div>
    <h1><span id="about_company">О Компании</span></h1>
    <div class=company>
        
    </div>
    <h1><span id="products">Наши услуги</span></h1>
    <div class=product>
        
    </div>
    <h1><span id="kontakts">Контакты</span></h1>
    <div class=kontakt>
        
    </div>
</body>
</html>
13

А ширину для body вы так и не прописали…
Кстати, еще очень странно, что вы не спрашиваете про шрифт. Он не работает.
Честно говоря, я думала, что заметите сами.
В записи “font-family: Times New Roman, serif;” ставится запятая.
Чтобы не вставлять сюда код каждый раз, когда что-то меняется, воспользуйтесь каким-нибудь онлайн-редактором, например, codepen. А сюда будете вставлять только ссылку на код.

1 лайк
14

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

15

В адресной строке браузера, конечно. Только не забудьте сохранить.

16

Задал ширину тела автоматическое, но меню как плясало так и пляшет. И что всетаки сделать с меню что бы оно не закрывало название раздела, когда переходишь по ссылке?

[https://codepen.io/Tverdislav/pen/GZdXVO][1]
17

Ширина должна быть не auto, а 100%. Статья по второй проблеме.

1 лайк
18

Когда делаю 100% тело выходит за пределы окна и появляется ползунок горизонтальной прокрутки!

19

Может есть смысл почитать в интернете как убрать ее?

20

ААААрррррррр! Вроде нашел, сделал в брекетсе ничего не меняется. решил проверить на валидность HTML почему-то выдало ошибка

И все понеслось по новой, опять меню убегает. В кодепене то же самое.
Кстати может быть эта ошибка из-за того что тег Header стоит между head и body? хотя не должно так быть.
HTML и CSS коды