CODEWITHSUNDEEP
htmlcss
user5008872
user5008872

Reputation:

How can I position my logo correctly?

EDIT: The chat window should be aligned to the right, with the chat area within the chat window, like this, why isn't it?: Codepen

Should be this: enter image description here

I'm looking to make a simple site with a header and a rectangle on the side. For some reason, I cannot position my logo correctly! What I currently have:

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

What I'm trying to achieve: enter image description here

(The text input and send button aren't included in the picture.)

Upvotes: 0

Views: 77

Answers (3)

Marko Mackic
Marko Mackic

Reputation: 2333

Here is a fiddle : 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 : (you had a typo in </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 position is not good for responsivnes becuse you can't get a width or a height relative to parrent using css only :)

Anyways you asked for border line on the header : https://jsfiddle.net/5odd0q1n/3/ (you can find it here)

you only need to add 

border-bottom: 10px solid purple ;

to your #header :)

Upvotes: 0

SanchezCool
SanchezCool

Reputation: 81

you need to add img tag;

<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
}

Upvotes: 0

kiaaanabal
kiaaanabal

Reputation: 384

It looks like you need to add a width and height :) A div has a height and width of zero by default, and since there is nothing in there you need to set it!

Upvotes: 2

Related Questions