0

Есть картинка нарисованная при помощи css + html

css

robot_logo{
    position: fixed;
  margin-top: 0px;
  float: left;
}
    .a{
  position: absolute;
  background:#C0C0C0;
  width: 200px;
  height: 90px;
  left: 130px;
  top: 130px;
}
.b {
  position: absolute;
  background:#C0C0C0;
  width: 160px;
  height: 155px;
  left: 150px;
  top: 110px;
}

html

<div class="robot_logo">
<div class="a"></div>
<div class="b"></div>
</div>

Пытаюсь разместить его в шапке сайта таким образом

html

<header>
        <div class="container">
            <div class="heading clearfix">

                <div class="robot_logo">
                    <div class="a"></div>
                    <div class="b"></div>
                </div>
                <img class="logo" src="img/logotip.png"></img>
                <nav> <ul class="menu">
                    <li><a href="#partfolio">qwerty</a></li>
                    <li><a href="">qwert</a></li>
                    <li><a href="">qwer</a></li>
                    <li><a href="">qwe</a></li>
                </ul></nav>
            </div>
            <div class="titles">
                <div class="titles__first">
                    qwertyqwertyqwertys2634871268756197856923852386598326
                </div>
                <h1 class="gradient-text">
                    qwerty1qwerty1qwerty1
                </h1>
            </div>
            <a class="button" href="">qwerty111</a>
        </div>

    </header>

css

div {
    box-sizing: border-box;
}
    body {
    font-family: Arial, sans-serif;
    padding: 0;
    margin:0;
}
.clearfix:after {
    content: '';
    display: table;
    width: 100%;
    clear: both;
}
header {
     background: url(../img/4.jpg) 100% 100% no-repeat;
     background-size: cover;
}
.heading {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.container{
    width: 60%;
    margin: 0 auto;

}
.logo {
    margin-top: 41px;
    float: left;
}
/*меню*/
nav{
    float: right;
    margin-top: 50px;
}
.menu{
    padding: 0;
    margin: 0;
    display: block;
}
.menu li{
    float: left;
    display: block;
    margin-right: 41px;
}
.menu li a{
    color: #000;
    text-decoration: none; /*убрать подчеркивания*/
    text-transform: uppercase;
    font-size: 14px;
}
.titles{
    word-wrap:break-word;
    color: #fff;
}
.titles__first {
    font-size: 40px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 180px;
    color: #fff;
}
h1 {
font-size: 75px;
color: #fff;
text-transform: uppercase;
text-align: center;
margin: 15px;
}
.button {
    background: #fed136;
    color: #484543;
    display: block;
    width: 240px;
    padding: 20px 0;
    margin: 0 auto;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
    margin-top: 50px;
    margin-bottom: 100px;
}

Пытаюсь сделать что бы этот рисунок был вместо logotip.png

но вместо этого оно выезжает за границы блока heading

1 ответ 1

0

добавь .robot-logo {top: 0; left: 0;}

Ваш ответ

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

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