We Keep Coding

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

Make 2 divs displayed vertically to fill it's parent if one of the divs is autoresize

I have 2 divs displayed vertically inside another div with height: 100%. The bottom div is automatically resizing it's height.
It's there a way that the first div will fill the parent in it's height?
#my_app {
background-color: #ff0000;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
}
#top_container {
display: table-cell;
background-color: #00ff00;
height:auto;
width:100%;
margin-bottom: auto;
}
#container {
position: absolute;
bottom: 0;
left: 5%;
width: 90%;
background-color: #d8d8d8;
display: table-cell;
}
#edit_container {
margin: 20px;
min-height: 44px;
max-height: 80px;
width: 70%;
height: auto;
overflow: hidden;
background-color: #484040;
display: flex;
align-items: center;
}
#edit {
width: 100%;
margin: 0px 20px;
min-height: 20px;
max-height: 80px;
overflow: scroll;
line-height: 20px;
background-color: #ff5e2d;
}
#test {
position: absolute;
top: 0;
right: 20px;
bottom: 0;
width: 30%;
background-color: #ff0;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
[contentEditable=true]:empty:not(:focus):before {
content: attr(data-text);
}
[contentEditable=true]:empty:focus:before {
content: attr(data-text);
}
[contenteditable]:focus:after {
content: '';
}
<div id="my_app">
<div id="top_container">
NEW TEST
</div>
<div id="container">
<div id="edit_container">
<form>
<div id="edit" contenteditable="true" data-text="Insert text"></div>
</form>
</div>
<div id="test">
ACTION
</div>
</div>
</div>
And here is the jsfiddle: https://jsfiddle.net/RoxanaCristea/4460up4s/
Thank you in advance!

You need to specify "height: 100%;" to your body element.
Have a look at this question: How to fill 100% of remaining height?

CSS styling, how to make this button stay on the right side and be responsive

The comments button appears once someone adds a comment (ala medium.com). The p tag which holds the text is inside a bootstrap container which goes down the middle of the page. I want to keep my comments button to the right of that p paragraph.
Here's the screenshot of what I have currently.
As I make the page smaller, the button slides to the left eventually going all the way to the left side of the screen. When it comes to absolute and relative positioning I get a bit confused as I haven't worked with it much. I'm hoping you guys can guide me here.
My ultimate goal here is to keep the comments button to the right of the p tag (the paragraph) even while user is making the page smaller horizontally. If the button has to get responsively smaller, that's ok.
Here's the html and css:
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
EDIT: for more information and the html, here's a link to the github components:
https://github.com/milosbunijevac/medRails/tree/master/app/javascript/packs
and to the stylesheet:
https://github.com/milosbunijevac/medRails/blob/master/app/assets/stylesheets/main_control.scss
The only components I really used in this example are Main.jsx and SideComments.jsx

I have 3 suggestions to keep the button to the right of the p tag. But I needed add a div to wrap your 2 divs.
display: inline-block + white-space: nowrap
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
.wrapContainer {
white-space: nowrap;
}
.wrapContainer>div {
display: inline-block;
}
<div class="wrapContainer">
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
</div>
display: flex
html, body {
background-color: whitesmoke;
height: 100%;
}
.headLine {
text-align: center;
}
.highLight {
background-color: yellow
}
.editable {
position: relative;
}
.toolTip {
position: absolute;
background-color: black;
min-width: 180px;
max-width: 180px;
border-radius: 10px;
color: white
}
.buttons {
margin-top: 0.3%;
color: black;
background-color: #7D98ED;
border-radius: 5px;
}
.commentBox {
position: absolute;
border-radius: 10px;
background-color: beige;
height: 200px;
width: 300px;
}
.textAreaBox {
width: 270px;
height: 100px;
}
.buttonCommentSubmit {
text-align: center;
position: absolute;
bottom: 10px;
right: 135px;
}
.sideComment {
position: absolute;
right: 300px;
top: 125px;
}
.sideCommentView {
position: absolute;
left: 69.5%;
top: 15.7%;
background-color: beige;
min-width: 300px;
max-width: 300px;
border-radius: 10px;
}
.mainTextBody {
min-height: 100vh;
background-color: mintcream;
}
.reinsertedText {
display:inline;
}
.wrapContainer {
display: flex;
flex-flow: row nowrap;
}
.wrapContainer>div {
flex: 1;
}
.wrapContainer>div + div {
flex: 0;
}
<div class="wrapContainer">
<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
<h1 className = "headLine" >Medium Markup</h1>
<hr />
<p className='editable'>All the text here....</p>
{(this.state.showSideComments) ? <SideComments /> : ''}
</div>
<div className="sideComment">
<button id="sideButton" onClick={this.showComments}>Comments</button>
</div>
</div>
You can change the margins and positions, but it maybe is beyond your main problem.

width: 100% is not working on children div if parent div has width: calc(100% - 300px)?

I have the following arrangement:
I have parent div with class container with width: 100%; and also both html and body have width: 100%, and so far it is working as expected.
But inside div with class container, i have two divs, one div with width: 300px,
and other div with width: calc(100% - 300px),
where parent with class mainpage has width: calc(100% - 300px), and child div with class page has width: 100%;
but width: 100% is not working on this div?
even though parent div width is determinant.
code: https://jsfiddle.net/tj8k0nnw/1/
.container {
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer {
width: 300PX;
height: 2000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer {
position: relative;
width: 100%;
height: 100%;
}
.sidebar {
width: 293px;
background-color: white;
height: 700px;
top: 1px;
position: absolute;
}
.mainpage {
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page {
width: 100%;
width: 100%;
background-color: white;
}
.footer {
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
.test1 {
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 200px;
}
.test2 {
background-color: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div>
<!--
-->
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>

The code provided is working. You have not specified a height for page so the height is 0. Giving it a height causes it to become visible: https://jsfiddle.net/kvjw9vhm/
.container{
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer{
width: 300PX;
height: 2000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 293px;
background-color: white;
height: 700px;
top: 1px;
position: absolute;
}
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page{
width: 100%;
height: 100%; /* was width: 100%; */
background-color: white;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
.test1{
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 200px;
}
.test2{
background-color: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div>
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>

Above provided code is working , just add some height in page class.
.page{
width: 100%;
height:100px;
background-color: green;
}
By default height is 0 ,if there's no content .Below is demonstration, check it out:
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page{
width: 100%;
height:100px;
background-color: green;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div><!--
--><div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>

Looks like there is not much problem with your code and you did a typo by mentioning width twice in the .page class. Changing one of them to height worked fine for me and should work for you too.
Let me know if you face any problem.

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>