Positioning divs #2 - javascript

I'm fairly new to web development and I'm trying to create a simple chat page using SQL. This is what I currently have: Codepen
HTML:
<body>
<div id="overlay"></div>
<div id="header">
<div id="logo">
</div>
</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>
</body>
CSS:
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%;
border-bottom: 10px solid #9800AB;
}
#logo {
position: absolute;
background-image: url(http://csgovoid.net/img/logo.png);
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
#chat_extended {
position: absolute;
background: #404040;
margin-top: 3.15%;
width: 20%;
height: 100%;
float: right;
border-left: 10px solid #9800AB;
text-align: center;
padding-top: 5%;
}
#chat_area {
position: absolute;
background: #ccc;
width: 100%;
height: 100%;
text-align: left;
}
The chat window should be aligned to the left, with the chat area within the chat window, like this:


You don't need float:right when using position: absolute, just remove that and add right: 0 to #chat-extended
#chat_extended {
position: absolute;
background: #404040;
width: 20%;
height: 100%;
border-left: 10px solid #9800AB;
text-align: center;
right: 0;
Hope this helps!


The float property does not work on absolutely positioned elements.
On #chat_extended, Replace this:
float: right;
with this:
right: 0;
Absolute positioning like that isn't really a best practice for a layout like this, so once you get more comfortable, you might want to change it.

Related

how to make container unsticky after some point

Whenever the pink container touches the bottom of green container I want to make it unsticky. Is it possible? I tried but couldn't achieve it.
here's the code
also codepen link : Click Here
.container1 {
width: 500px;
height: 400px;
background-color: lightblue;
text-align: center;
margin: 0px auto;
position: sticky;
top: 0;
z-index: -1;
}
.container2 {
width: 300px;
height: 200px;
background-color: lightgreen;
text-align: center;
margin: 0px auto;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.container3 {
width: 500px;
height: 400px;
background-color: pink;
text-align: center;
margin: 20px auto;
}
<div class="container1">
<div class="container2">
</div>
</div>
<div class="container3">
</div>

Background URL, only one images works

I am still in the process of learning HTML/CSS/Js and was following this tutorial on youtube.
https://www.youtube.com/watch?v=7MDJtw3ZF-4&t=893s
My issue is at around 20:15 time stamp, my eyes.png do not appear. I find this odd because my face.png shows up perfectly fine, which is in the same folder.
<p class="location"></p>
<div class="container">
<div class="face_body">
<div class="face">
<div class="eye_pan">
<div class="pan_area">
<div class="eye eye_l">
<div class="eye eye_r">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and my css
html,body, .container{
height: 100%;
width: 100%;
outline: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
.location{
position: fixed;
top: 0px;
right: 0px;
margin: 0px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.container{
display: table;
background: rgb(251,220,0);
background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}
.face_body{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.face{
height: 200px;
width: 200px;
margin: auto;
background: url(images/face1.1.png);
background-size: 173px 200px;
background-repeat: no-repeat;
}
.eye_pan{
display: table;
padding: 30px 50px;
}
.pan_area{
width: 70px;
height: 55px;
position: relative;
}
.eye{
height: 20px;
width: 20px;
border-radius: 5px;
position: absolute;
margin-left: 5px;
transition: .5s height ease-in-out;
border: 1px solid red;
background: url(images/eyes.png);
}
.eye_r{
top: 0px;
left: 20px;
}
.eye_l{
top: 50px;
left: 25px;
}
any reasons on why my eyes.png are not showing would be great. Thanks.

Your .eye url background is probably linking to a wrong URL file or it is simply out of the view.
Try inserting background-size: cover; or set it a background-size if the images is loding fine.
html,body, .container{
height: 100%;
width: 100%;
outline: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
.location{
position: fixed;
top: 0px;
right: 0px;
margin: 0px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.container{
display: table;
background: rgb(251,220,0);
background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}
.face_body{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.face{
height: 200px;
width: 200px;
margin: auto;
background: url(https://images.vexels.com/media/users/3/134743/isolated/preview/97ae591756f3dc69db88c09fd097319a-sad-face-emoji-emoticon-by-vexels.png);
background-size: 173px 200px;
background-repeat: no-repeat;
}
.eye_pan{
display: table;
padding: 30px 50px;
}
.pan_area{
width: 70px;
height: 55px;
position: relative;
}
.eye{
height: 20px;
width: 20px;
border-radius: 5px;
position: absolute;
margin-left: 5px;
transition: .5s height ease-in-out;
border: 1px solid red;
background: url(//cdn.playbuzz.com/cdn/e732686f-35b2-4be6-a5fa-52f388bb0d0d/3637262a-2c14-43b0-9be2-b2174055f790_560_420.jpg);
background-size:cover;
}
.eye_r{
top: 0px;
left: 20px;
}
.eye_l{
top: 50px;
left: 25px;
}
<p class="location"></p>
<div class="container">
<div class="face_body">
<div class="face">
<div class="eye_pan">
<div class="pan_area">
<div class="eye eye_l">
<div class="eye eye_r">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Check if your spellings are correct like 'eye' instead of 'eyes' also check the file format if its say 'jpg' and not 'png'.
Try clearing your browser cache just incase your browser did not load new files

Apply correct CSS syntax for background property and check whether your image path is correct or not.
background: url('images/eyes.png');
Try this and let me know if problem is still raised.
Have a nice day, Cheers !!!

Width of div taking all remaining width

I am trying to put a top bar on the right of my left menu.
I put width: 100% of my #top_bar but there is so big. I would like that my top bar take only the remaining space of the screen.
HTML:
<body>
<div id="menu_left"></div>
<div id="top_bar"></div>
</body>
CSS:
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
float: left;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
left: 200px;
height: 70px;
width: 100%;
}
Result:

#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
top: 0px;
left: 200px;
right: 0px;
height: 70px;
}

You can use the margin left for the large div
CSS :
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
float: left;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
background-color: red;
margin-left: 200px;
height: 70px;
}
HTML :
<body>
<div id="menu_left"></div>
<div id="top_bar"></div>
</body>
Working Demo

Just add this to your css:
body {
margin: 0;
width: 100%;
overflow: hidden;
}

Try to use a 100% width container around your elements.
<div class="container">
<div id="menu_left">
</div>
<div id="top_bar">
NAVIGATION
</div>
</div>
See this pen I just created: http://codepen.io/anon/pen/MwodLx

Maybe this? You could only change width: 100% to right: 0. Also float: left is unnecessary.
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
left: 200px;
right: 0;
height: 70px;
}
<div id="menu_left"></div>
<div id="top_bar"></div>

CSS Layout nested div's weird behavior

I have a webpage im trying to layout and it current looks like this.
http://imgur.com/zu4OXHu
I want the purple box to be inline w/ the pink box in the yellow box, which is in the green box. When i change the display field in css to inline-block for the two the whole green box moves down to bottom of grey box w/ height = to yellow box. Why is this happening?
CSS
div.localPlayer {
position: fixed;
bottom: 0;
width: 100%;
left:0;
height: 300px;
background: rgb(181, 181, 181);
text-align:center;
}
div.coinStatus {
position: relative;
top: 0px;
left: 0px;
display: block;
width: 100%;
height: 100px;
background-color:yellow;
}
div.coinInfo {
height: 100px;
width: 100px;
background: purple;
display: block;
}
div.coin {
width: 100px;
height: 100px;
background-size: cover;
background-color: pink;
display: block;
background-image: url('../images/6.png');
}
div.status {
postion: relative;
width: 400px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
background: green;
}
div.card {
width: 180px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
}
div.card.1 {
background-image: url('../images/1.png');
}
div.card.2 {
background-image: url('../images/2.png');
}
div.card.3 {
background-image: url('../images/3.png');
}
div.card.4 {
background-image: url('../images/4.png');
}
div.card.5 {
background-image: url('../images/5.png');
}
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/coup.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/file.js"></script>
</head>
<body>
<div> Image </div>
<div id="this" class="localPlayer">
<div id="card1" class="card 1"></div>
<div id="card2" class="card 2"></div>
<div id="status" class="status">
<div id="coinStatus" class="coinStatus">
<div class="coin"></div>
<div id="numberOfCoins" class="coinInfo"></div>
</div>
</div>
</div>
</body>
</html>

inline-block elements default alignment is vertical-align:bottom. So that it is going down to bottom. Apply vertical-align:top for your inline block elements. Hopefully it will fix the issue.
div.status {
postion: relative;
width: 400px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
background: green;
vertical-align:top;
}
div.card {
width: 180px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
vertical-align:top;
}

Please check this " adding float: left might fix this
div.localPlayer {
position: fixed;
bottom: 0;
width: 100%;
left:0;
height: 300px;
background: rgb(181, 181, 181);
text-align:center;
}
div.coinStatus {
position: relative;
top: 0px;
left: 0px;
display: block;
width: 400px;
height: 100px;
background-color:yellow;
}
div.coinInfo {
height: 100px;
width: 100px;
background: purple;
display: block;
float:left;
}
div.coin {
width: 100px;
height: 100px;
background-size: cover;
background-color: pink;
display: block;
float:left;
}
div.status {
postion: relative;
width: 400px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
background: green;
vertical-align:top;
}
div.card {
width: 180px;
height: 280px;
display: inline-block;
margin: 10px;
background-size: cover;
border-radius: 10px;
vertical-align:top;
}

fixed text on multiple section with parallax effect

I have 4 sections and all of them have a background image. The problem is that each section has some text on it in the middle. They are supposed to be fixed i.e when we scroll, the section below the first section should overlap the section above it as well as the text on it.
I have used position fixed for ext but only the first section text is visible .
The HTML
<div class="site-body">
<section id="section1">
<div class="section-text1">
Section 1
</div>
</section>
<section id="section2">
<div class="section-text2">
Section 2
</div>
</section>
<section id="section3">
<div class="section-text3">
Section 3
</div>
</section>
<section id="section4">
<div class="section-text4">
Section 4
</div>
</section>
</div>
The CSS
.page-wrapper .site-body #section1 {
position: relative;
width: 1024px;
height: 100%;
background-color: red;
background: url(../images/section1.jpg) no-repeat fixed;
background-position: center center;
z-index: 2000;
}
.page-wrapper .site-body #section1 .section-text1 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.page-wrapper .site-body #section2 {
position: relative;
width: 1024px;
height: 100%;
background-color: green;
background: url(../images/section2.jpg) no-repeat fixed;
background-position: center center;
z-index: 3000;
}
.page-wrapper .site-body #section2 .section-text2 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.page-wrapper .site-body #section3 {
position: relative;
width: 1024px;
height: 100%;
background-color: #ffff00;
background: url(../images/section3.jpg) no-repeat fixed;
background-position: center center;
z-index: 4000;
}
.page-wrapper .site-body #section3 .section-text3 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.page-wrapper .site-body #section4 {
position: relative;
width: 1024px;
height: 100%;
background-color: darkblue;
background: url(../images/section4.jpg) no-repeat fixed;
background-position: center center;
z-index: 5000;
}
.page-wrapper .site-body #section4 .section-text4 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}

The simple answer is that you can't do that.
When you make an element position:fixed, it's no longer going to be clipped by the overflow:hidden of it's parent.
However, you can fake it by not making the content fixed and by offsetting the content by the same amount of scrollTop.
It will simulate the effect of it being fixed.
Here's a DEMO - it does require jQuery
(There is no pure-CSS solution that I can think of.)

Categories