Вопрос Размер объекта [CSS]

[rundaniss]

Что нужно такого сделать в CSS файле худа, чтобы буква "M" была больше в размере.

 

[delmx]

Как минимум скинуть код

 

[rundaniss]

delmx написал(а):

Как минимум скинуть код

Нажмите для раскрытия...

JavaScript:

            <div class="header_hud">
                <div class="online"><img src="hud/user.png" class="user"><a class="onlinecount">{{online}}</a></div>
                <div class="id">ID {{playerId}}<br>({{personId}})</div>
                <img src="img/logo-major.png" width="80" height="80" class="logo">
            </div>

 

[Vice]

rundaniss написал(а):

Посмотреть вложение 3240

JavaScript:

            <div class="header_hud">
                <div class="online"><img src="hud/user.png" class="user"><a class="onlinecount">{{online}}</a></div>
                <div class="id">ID {{playerId}}<br>({{personId}})</div>
                <img src="img/logo-major.png" width="80" height="80" class="logo">
            </div>

Нажмите для раскрытия...

Это. Просто. Ахуенно.

 

[delmx]

rundaniss написал(а):

Посмотреть вложение 3240

JavaScript:

            <div class="header_hud">
                <div class="online"><img src="hud/user.png" class="user"><a class="onlinecount">{{online}}</a></div>
                <div class="id">ID {{playerId}}<br>({{personId}})</div>
                <img src="img/logo-major.png" width="80" height="80" class="logo">
            </div>

Нажмите для раскрытия...

а CSS? (гениально сделать онлайн через <a>)

 

[rundaniss]

delmx написал(а):

а CSS? (гениально сделать онлайн через <a>)

Нажмите для раскрытия...

Отправляю полный код :

CSS:

    @media  (max-width: 1300px)  {
        .inGameHud {zoom: 70%}
    }
    @media (min-width: 1301px) and (max-width: 1400px) {
        .inGameHud {zoom: 80%}
    }
    @media (min-width: 1401px) and (max-width: 1650px) {
        .inGameHud {zoom: 80%}
    }
    @media (min-width: 1651px) and (max-width: 2560px) {
        .inGameHud {zoom: 100%}
    }


    body {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        overflow: hidden;
        margin: 0;
    }

    p {
        margin: 0;
    }

    #effect {
        position: absolute;
        left: 0;
        top: 0;
    }

    #safezone {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .fade-enter-active, .fade-leave-active {
      transition: opacity .58s
    }
    .fade-enter, .fade-leave-to {
      opacity: 0
    }

    .inGameHud {
        position: absolute;
        margin: 0 auto;
        line-height: normal;
        color:#fff;
        width: 100%;
        height: 100%;
        -webkit-animation-name: opacity, slide;
        animation-name: opacity, slide;
        -webkit-animation-duration: .5s, .5s;
        animation-duration: .5s, .5s;
        -webkit-animation-timing-function: ease, ease;
        animation-timing-function: ease, ease;
    }
    .inGameHud .header_hud{
        position: absolute;
        top: 3%;
        width: 90px;
        height: 80px;
        display: flex;
        font-size: 16px;
        right: 0%;
    }
    .inGameHud .header_hud .logo{
        opacity: 0.8;
        position: absolute;
    }
    .inGameHud .header_hud .online{
        position: relative;
        left: -35%;
        top: 15%;
    }
    .inGameHud .header_hud .id{
        position: relative;
        left: -120%;
        opacity: 0.5;
        top: 14%;
    }
    .inGameHud .header_hud .user{
        width: 51%;
        position: relative;
    }
    .inGameHud .header_hud .onlinecount{
        position: absolute;
        top: -1%;
        left: 62%;
        letter-spacing: 0.05em;
        color: #ffffffb8;
    }
    .inGameHud .money{
        position: absolute;
        top: 101px;
        right: 59px;
        height: 80px;
        font-size: 25px;
        color: #ffffffd4;
    }
    .inGameHud .money .ico{
        width: 19px;
        position: relative;
        margin: -1px 0 0 7px;
    }
    
    
    .inGameHud .speedometer_hud{
        position: absolute;
        bottom: 1%;
        right: 1%;
    }
    .inGameHud .speedometer_hud .speedcount{
        position: relative;
        color: #ffffff52;
        display: flex;
        justify-content: center;
        width: 150%;
        margin-left: -27px;
        margin-bottom: 2%;
    }
    .inGameHud .speedometer_hud .speedcount .count{
        font-size: 3em;
        font-style: italic;
        font-weight: 300;
        color: white;
        transition: all .73s;
    }
    .inGameHud .speedometer_hud .speedcount p{
        position: absolute;
        margin-top: -13px;
        margin-left: 7px;
        letter-spacing: 0.1em;
        font-style: italic;
        transition: all .33s;
    }
    .inGameHud .speedometer_hud .fuel{
        margin-left: 57%;
        margin-bottom: 11%;
    }
    .inGameHud .speedometer_hud .fuel a{
        position: absolute;
        margin-top: 4px;
    }
    .inGameHud .speedometer_hud .fuel .fuel_ico{
        width: 28px;
        opacity: 0.4;
        margin-left: 50px;
    }
    .inGameHud .speedometer_hud .help_car{
        display: flex;
        right: 3%;
    }
    .inGameHud .speedometer_hud .help_car .helps{
        display: flex;
        margin-left: 13px;
    }
    .inGameHud .speedometer_hud .help_car .icon_help{
        padding-right: 4px;
        width: 27px;
        height: 25px;
        transition: all .33s;
    }
    .inGameHud .speedometer_hud .help_car p{
        background: #6f6f6f78;
        line-height: 1.7em;
        width: 28px;
        margin-left: 11px;
        font-weight: 100;
        font-size: 16px;
        height: 25px;
        text-align: center;
        border-radius: 50%;
    }
    .inGameHud .steet_block{
        position: absolute;
        bottom: 1%;
        /*left: 16%;*/
        width: 150px;   
    }
    .inGameHud .steet_block .crossingroad{
        color: #0082a4;
        letter-spacing: 0.03em;
        font-size: 19px;
        width: 500px;
        font-weight: 100;
        margin-bottom: 13px;
    }
    .inGameHud .steet_block .street{
        margin-left: 12px;
        width: 500px;
        font-weight: 100;
        margin-bottom: 33%;
    }
    .inGameHud .steet_block .street .marker{
        width: 13px;
        position: absolute;
        margin-left: -13px;
        margin-top: 3px;
    }
    .inGameHud .steet_block .info_table{
        display:flex;
    }
    .inGameHud .steet_block .info_table .icon{
        margin-bottom: -16px;
        width: 20px;
        margin-left: 3px;
        transition: all .33s;
        opacity: 0.6;
    }
    .inGameHud .steet_block .info_table p{
        background: #6f6f6f75;
        width: 30px;
        padding: 1%;
        line-height: 1.5em;
        text-align: center;
        margin-left: 13px;
    }
    .inGameHud .steet_block .info_table .activeP{
        background: #ffff;
        color:black;       
        width: 30px;
        padding: 1%;
        line-height: 1.5em;
        text-align: center;
        margin-left: 13px;
    }
    .inGameHud .steet_block .info_table .info{
        margin-left: 2%;
    }
    .inGameHud .stars{
        position: absolute;
        top: 145px;
        right: 59px;
        display:flex
    }
    .inGameHud .stars .ico{
        width: 25px;
        height: 25px;
        opacity: 0.4;
        margin-left: 8px;
    }
    .inGameHud .info_table .eatings {
        display: flex;
        position: absolute;
        margin-top: -34px;
        margin-left: 7px;
    }
    .inGameHud .info_table .eatings .eat {
        margin-right: 16px;
    }
    .inGameHud .info_table .eatings .icohud {
        width: 1.3vh;
    }
    .inGameHud .info_table .eatings .waterhud {
        width: 1.89vh;
    }
    .inGameHud .info_table .eatings a {
        margin-left: 4px;
        position: relative;
        top: -0.6vh;
        font-size: 1.8vh;
    }

/* Система бонусов */
.bonus {
    position: absolute;
    top: 200px;
    right: 5px;
    z-index: 999;
}
.bonus-bar {
    background: #18191D;
    border-radius: 5px;
    padding: 2px 5px;
    color: gray;
    font-size: 1.5em;
}
.bonus-block {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    height: auto;
    background-color: #18191D;
}
.bonus-block header {
    flex: 40%;
    width: 100%;
    background-color: #1D2027;
    padding: 7px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bonus-block header .fa-times {
    color: #0082a4;
}
.bonus-block .main {
    flex: 60%;
    width: 100%;
    padding: 10px;
    background-color: transparent;
}
.bonus-block .main p {
    padding: 10px 30px;
    text-align: center;
    background-color: #131316;
    box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 1);
}

 

[Vice]

delmx написал(а):

а CSS? (гениально сделать онлайн через <a>)

Нажмите для раскрытия...

Зачем, это же не ссылка

 

[delmx]

rundaniss написал(а):

Отправляю полный код :

CSS:

    @media  (max-width: 1300px)  {
        .inGameHud {zoom: 70%}
    }
    @media (min-width: 1301px) and (max-width: 1400px) {
        .inGameHud {zoom: 80%}
    }
    @media (min-width: 1401px) and (max-width: 1650px) {
        .inGameHud {zoom: 80%}
    }
    @media (min-width: 1651px) and (max-width: 2560px) {
        .inGameHud {zoom: 100%}
    }


    body {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        overflow: hidden;
        margin: 0;
    }

    p {
        margin: 0;
    }

    #effect {
        position: absolute;
        left: 0;
        top: 0;
    }

    #safezone {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .fade-enter-active, .fade-leave-active {
      transition: opacity .58s
    }
    .fade-enter, .fade-leave-to {
      opacity: 0
    }

    .inGameHud {
        position: absolute;
        margin: 0 auto;
        line-height: normal;
        color:#fff;
        width: 100%;
        height: 100%;
        -webkit-animation-name: opacity, slide;
        animation-name: opacity, slide;
        -webkit-animation-duration: .5s, .5s;
        animation-duration: .5s, .5s;
        -webkit-animation-timing-function: ease, ease;
        animation-timing-function: ease, ease;
    }
    .inGameHud .header_hud{
        position: absolute;
        top: 3%;
        width: 90px;
        height: 80px;
        display: flex;
        font-size: 16px;
        right: 0%;
    }
    .inGameHud .header_hud .logo{
        opacity: 0.8;
        position: absolute;
    }
    .inGameHud .header_hud .online{
        position: relative;
        left: -35%;
        top: 15%;
    }
    .inGameHud .header_hud .id{
        position: relative;
        left: -120%;
        opacity: 0.5;
        top: 14%;
    }
    .inGameHud .header_hud .user{
        width: 51%;
        position: relative;
    }
    .inGameHud .header_hud .onlinecount{
        position: absolute;
        top: -1%;
        left: 62%;
        letter-spacing: 0.05em;
        color: #ffffffb8;
    }
    .inGameHud .money{
        position: absolute;
        top: 101px;
        right: 59px;
        height: 80px;
        font-size: 25px;
        color: #ffffffd4;
    }
    .inGameHud .money .ico{
        width: 19px;
        position: relative;
        margin: -1px 0 0 7px;
    }
   
   
    .inGameHud .speedometer_hud{
        position: absolute;
        bottom: 1%;
        right: 1%;
    }
    .inGameHud .speedometer_hud .speedcount{
        position: relative;
        color: #ffffff52;
        display: flex;
        justify-content: center;
        width: 150%;
        margin-left: -27px;
        margin-bottom: 2%;
    }
    .inGameHud .speedometer_hud .speedcount .count{
        font-size: 3em;
        font-style: italic;
        font-weight: 300;
        color: white;
        transition: all .73s;
    }
    .inGameHud .speedometer_hud .speedcount p{
        position: absolute;
        margin-top: -13px;
        margin-left: 7px;
        letter-spacing: 0.1em;
        font-style: italic;
        transition: all .33s;
    }
    .inGameHud .speedometer_hud .fuel{
        margin-left: 57%;
        margin-bottom: 11%;
    }
    .inGameHud .speedometer_hud .fuel a{
        position: absolute;
        margin-top: 4px;
    }
    .inGameHud .speedometer_hud .fuel .fuel_ico{
        width: 28px;
        opacity: 0.4;
        margin-left: 50px;
    }
    .inGameHud .speedometer_hud .help_car{
        display: flex;
        right: 3%;
    }
    .inGameHud .speedometer_hud .help_car .helps{
        display: flex;
        margin-left: 13px;
    }
    .inGameHud .speedometer_hud .help_car .icon_help{
        padding-right: 4px;
        width: 27px;
        height: 25px;
        transition: all .33s;
    }
    .inGameHud .speedometer_hud .help_car p{
        background: #6f6f6f78;
        line-height: 1.7em;
        width: 28px;
        margin-left: 11px;
        font-weight: 100;
        font-size: 16px;
        height: 25px;
        text-align: center;
        border-radius: 50%;
    }
    .inGameHud .steet_block{
        position: absolute;
        bottom: 1%;
        /*left: 16%;*/
        width: 150px;  
    }
    .inGameHud .steet_block .crossingroad{
        color: #0082a4;
        letter-spacing: 0.03em;
        font-size: 19px;
        width: 500px;
        font-weight: 100;
        margin-bottom: 13px;
    }
    .inGameHud .steet_block .street{
        margin-left: 12px;
        width: 500px;
        font-weight: 100;
        margin-bottom: 33%;
    }
    .inGameHud .steet_block .street .marker{
        width: 13px;
        position: absolute;
        margin-left: -13px;
        margin-top: 3px;
    }
    .inGameHud .steet_block .info_table{
        display:flex;
    }
    .inGameHud .steet_block .info_table .icon{
        margin-bottom: -16px;
        width: 20px;
        margin-left: 3px;
        transition: all .33s;
        opacity: 0.6;
    }
    .inGameHud .steet_block .info_table p{
        background: #6f6f6f75;
        width: 30px;
        padding: 1%;
        line-height: 1.5em;
        text-align: center;
        margin-left: 13px;
    }
    .inGameHud .steet_block .info_table .activeP{
        background: #ffff;
        color:black;      
        width: 30px;
        padding: 1%;
        line-height: 1.5em;
        text-align: center;
        margin-left: 13px;
    }
    .inGameHud .steet_block .info_table .info{
        margin-left: 2%;
    }
    .inGameHud .stars{
        position: absolute;
        top: 145px;
        right: 59px;
        display:flex
    }
    .inGameHud .stars .ico{
        width: 25px;
        height: 25px;
        opacity: 0.4;
        margin-left: 8px;
    }
    .inGameHud .info_table .eatings {
        display: flex;
        position: absolute;
        margin-top: -34px;
        margin-left: 7px;
    }
    .inGameHud .info_table .eatings .eat {
        margin-right: 16px;
    }
    .inGameHud .info_table .eatings .icohud {
        width: 1.3vh;
    }
    .inGameHud .info_table .eatings .waterhud {
        width: 1.89vh;
    }
    .inGameHud .info_table .eatings a {
        margin-left: 4px;
        position: relative;
        top: -0.6vh;
        font-size: 1.8vh;
    }

/* Система бонусов */
.bonus {
    position: absolute;
    top: 200px;
    right: 5px;
    z-index: 999;
}
.bonus-bar {
    background: #18191D;
    border-radius: 5px;
    padding: 2px 5px;
    color: gray;
    font-size: 1.5em;
}
.bonus-block {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    height: auto;
    background-color: #18191D;
}
.bonus-block header {
    flex: 40%;
    width: 100%;
    background-color: #1D2027;
    padding: 7px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bonus-block header .fa-times {
    color: #0082a4;
}
.bonus-block .main {
    flex: 60%;
    width: 100%;
    padding: 10px;
    background-color: transparent;
}
.bonus-block .main p {
    padding: 10px 30px;
    text-align: center;
    background-color: #131316;
    box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 1);
}

Нажмите для раскрытия...

CSS:

.inGameHud .header_hud .logo{
        opacity: 0.8;
        position: absolute;
    }

тут укажи размеры и все, либо в самом <img>

Vice написал(а):

Зачем, это же не ссылка

Нажмите для раскрытия...

у меня тот же вопрос

 

[rundaniss]

delmx написал(а):

тут укажи размеры и все, либо в самом <img>

Нажмите для раскрытия...

Я совсем чайник, добавить свойство height и width?

 

[delmx]

rundaniss написал(а):

Я совсем чайник, добавить свойство height и width?

Нажмите для раскрытия...

<img src="img/logo-major.png" width="80" height="80" class="logo"> (в width и height свои значения подставь и все)

 

[rundaniss]

delmx написал(а):

<img src="img/logo-major.png" width="80" height="80" class="logo"> (в width и height свои значения подставь и все)

Нажмите для раскрытия...

Тогда иконка слезает вниз. Как ее наверх вернуть? (Квадратом выделил место где она должна быть)

 

[delmx]

rundaniss написал(а):

Посмотреть вложение 3242
Тогда иконка слезает вниз. Как ее наверх вернуть? (Квадратом выделил место где она должна быть)

Нажмите для раскрытия...

CSS:

.inGameHud .header_hud .logo{
        opacity: 0.8;
        position: absolute;
        top: 0px;
        right: 0px;
    }

со значениями top и right поиграй

 

[rundaniss]

delmx написал(а):

CSS:

.inGameHud .header_hud .logo{
        opacity: 0.8;
        position: absolute;
        top: 0px;
        right: 0px;
    }

со значениями top и right поиграй

Нажмите для раскрытия...

Проблему решил. Благодарю автора.