Как правильно разместить логотип?

EDIT: Окно чата должно быть выровнено по правому краю, с областью чата в окне чата, как это, почему не так ли ?: Codepen Как правильно разместить логотип?

Должно быть так:

Я ищу сделать простой сайт с заголовком и прямоугольником сбоку. По какой-то причине я не могу правильно разместить свой логотип! То, что я в настоящее время:

html, 
 
body { 
 
    background-color: #333; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#overlay { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0.2; 
 
    background: #ccc; 
 
    background: -webkit-linear-gradient(right top, #8900AB, #282828); 
 
    background: -o-linear-gradient(top right, #8900AB, #282828); 
 
    background: -moz-linear-gradient(top right, #8900AB, #282828); 
 
    background: linear-gradient(to top right, #8900AB, #282828); 
 
} 
 

 
#header { 
 
    position: absolute; 
 
    background: #404040; 
 
    width: 100%; 
 
    height: 10%; 
 
} 
 

 
#logo { 
 
    position: absolute; 
 
    background-image: url(http://csgovoid.net/img/logo.png); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
}

<html> 
 

 
<body> 
 
    <div id="overlay"></div> 
 
    <div id="header"> 
 
     <div id="logo"></div> 
 
    </div> 
 
    <div id="Seperator_H01"></div> 
 
    
 
    <div id="chat_extended"> 
 
     <div id="chat_area"></div> 
 
     <input id="chat_input" type="text" placeholder="Chat..."> 
 
     <button id="send_button" onClick="send()">SEND</buttton> 
 
    </div> 
 
    <div id="Seperator_V01"></div> 
 
</body> 
 

 
</html>

CodePen

То, что я пытаюсь достичь:

(вводимый текст и отправить кнопки не включены в picture.)

источник

2016-03-30 Robinlemon

Похоже, что вам нужно добавить ширина и высота :) По умолчанию div имеет высоту и ширину нуля, и поскольку там ничего нет, вам нужно установить его!

источник

2016-03-30 16:28:46 kiaaanabal

Заголовок имеет ширину и высоту, а логотип внутри, поэтому логотип не должен соответствовать самому себе? Раньше я использовал тег img, но логотип не масштабировался, чтобы соответствовать div. – Robinlemon

Ничего, ты был прав! – Robinlemon

Извините, позвольте мне объяснить лучше! У вашего логотипа div нет ничего в нем. Он имеет фоновое изображение, но фоновое изображение не будет отображаться, если нет ширины или высоты :) Рад, что я мог бы помочь! – kiaaanabal

Вот скрипку: https://jsfiddle.net/5odd0q1n/

CSS:

html, 
body { 
    background-color: #333; 
    margin: 0; 
    padding: 0; 
    width:100%; 
    height:100%; 
} 

#overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0.2; 
    background: #ccc; 
    background: -webkit-linear-gradient(right top, #8900AB, #282828); 
    background: -o-linear-gradient(top right, #8900AB, #282828); 
    background: -moz-linear-gradient(top right, #8900AB, #282828); 
    background: linear-gradient(to top right, #8900AB, #282828); 
} 

#header { 
    position: absolute; 
    background: #404040; 
    width: 100%; 
    height: 10%; 
} 

#logo { 
    position: relative; 
    background-image: url(http://csgovoid.net/img/logo.png); 
    background-repeat: no-repeat; 
    background-size: contain; 
    height:100%; 
}

HTML: (вы были опечатка в </button>)

<html> 
<body> 
    <div id="overlay"></div> 
    <div id="header"> 
     <div id="logo"></div> 
    </div> 
    <div id="Seperator_H01"></div> 

    <div id="chat_extended"> 
     <div id="chat_area"></div> 
     <input id="chat_input" type="text" placeholder="Chat..."> 
     <button id="send_button" onClick="send()">SEND</button> 
    </div> 
    <div id="Seperator_V01"></div> 
</body> 
</html>

Absoulute позиция не подходит для responsivnes becuse вы можете 't получить ширину или высоту относительно parrent используя только css :)

В любом случае вы просили линии границы на заголовке: https://jsfiddle.net/5odd0q1n/3/ (вы можете найти его здесь)

вам нужно только добавить

border-bottom: 10px solid purple ;

к вашему #header :)

источник

2016-03-30 16:39:50

Пока я здесь, мне нужна фиолетовая строка под этим серым заголовком, поэтому я попытался использовать «margin-top: 10%», потому что высота заголовка 10%, строка 1%, но это помещает div внизу экран! [link] (http://codepen.io/Robinlemon/pen/dMzeoq) – Robinlemon

У вас это отредактировано –

Строка неправильно размещена, она должна лежать между серым ящиком и областью градиента. – Robinlemon

вам нужно добавить тег IMG ;

<div id="logo"> 
<img src="http://csgovoid.net/img/logo.png"> 
</div> 

and add following css: 

#logo img{ 
    width:2%; 
    //background stuff is removed -- not required in this case 

} 

#chat_extended 
{ text-align:center; 
    padding-top:5%; 
} 

#header { 
    position: absolute; 
    background: #404040; 
    width: 100%; 
//height is removed -- not required 
}

источник

2016-03-30 16:47:12 SanchezCool

Но если изображение не загружается, это создает ужасную коробку!Высота также требуется, потому что логотип составляет 600x600px – Robinlemon

. Не используйте абсолютное позиционирование до тех пор, пока его внешняя позиция Div относительно относительной - хорошая практика. – SanchezCool

логотип будет скорректирован в соответствии с установленным div – SanchezCool

Как правильно разместить логотип?

ответ

Смежные вопросы