Background URL, only one images works - javascript

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

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>

How can I put this make this box go below the text like in the image

I am trying to make this above layout. But unfortunately, I am not being able to put it as the above layout.
I am getting the 2nd image as my result.
Codes:
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: #fff;
background: inherit;
-webkit-background-clip: text;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
padding-left: 31% !important;
-webkit-background-clip: text;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
}
<div class="text_box_holder">
<div class="yellow_box"></div>
<h1>Consumer<br>Products<br>Consulting</h1>
LEARN MORE
</div>
Please try following code . I didn't add any back ground images . I have tried only to add 2 text with the box .
HTML
<div class="text_box_holder">
<div class="yellow_box"> </div>
<div class="text1">
<h1>Consumer<br>Products<br>Consulting</h1>
<div class="text2">LEARN MORE</div>
</div>
</div>
CSS
.text1 {
margin-top: 30px;
position:absolute;
text-align: left;
color: #bc7e09;
}
.yellow_box{
margin-left: 60px;
position: absolute;
border: 5px solid #fde428;
width: 40%;
height: 300px;
}
If you want add back ground image for whole space , you can integrate with HTML .I hope it will help you .
Demo : https://jsfiddle.net/Ltxktaad/21/
You need to provide additional wrapper divs around the the text which needs to be absolutely positioned. Here is the working example.
<div class="text_box_holder">
<div class="yellow_box"></div>
<div class="main-text-wrapper">
<h1>Consumer<br>Products<br>Consulting</h1></div><div class="link-text-wrapper">
LEARN MORE </div>
</div>
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: green;
background: inherit;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: -22px;
margin-top: 18px;
margin-bottom: 18px;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: 4px;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
margin-left: 45px;
z-index:2;
}
.main-text-wrapper {
background-color: white;
width: 40%;
height: 110px;
position:absolute;
top: 65px;
z-index: 9999;
}
.link-text-wrapper {
position:absolute;
background-color: #fff;
top: 195px;
width:40%;
height: 30px;
z-index: 9999;
}

CSS : round_div is not responsive to its parent div

I have .
when I resize my window then it looks like
It is not responsive.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 36%;
top: 20px;
}
.discussion_round_div_icon{
position: relative;
top: 18%;
font-size: 20px;
height: 25px;
color:#adadad;
}
.discussion_icon_text{
text-align: center;
font-size: 10px;
color: #3d4354;
}
.padding_30{
padding:30px !important;
}
.bg-dark{
background:#000;
}
.discussion_small_round_div {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
background: #2d3446;
bottom: 9px;
left: 15px;
float:right;
}
.discussion_small_round_div:after {
content: '\2807';
font-size: 1.5em;
color:white;
position: absolute;
left: 9px;
top: 1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading padding_30 no_border_radius bg-dark set_padding_0">
<div class="discussion_small_round_div pull-right cursor_pointer" id="pending"></div>
</div>
<div class="discussion_round_div">
<div class="text-center discussion_round_div_icon">
<span class="glyphicon glyphicon-check "></span>
<p class="discussion_icon_text">Approved</p>
</div>
</div>
</div>
PS: The round div should be in the center of panel div as per the image
Can I do it without using media query?
Any help would be great.
Thank You.
As long as you have width defined it is fairly easy:
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%; /*changed*/
top: 20px;
margin-left: -35px; /* added */
}
could you try to put :
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%;
margin-left: -35px;
top: 20px;
}
and tell us.
PD: this revision of cs is not tested
Change your css to this.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 0;
top: 20px;
right: 0;
margin: auto;
}
This will keep round div always center. Hope this helps you.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
/*position: absolute;*/
position:relative;
margin:auto ;
margin-top:-62px;
background: #FFFFFF;
/*left: 36%;*/
top: 20px;
}
.discussion_round_div_icon{
position: relative;
top: 18%;
font-size: 20px;
height: 25px;
color:#adadad;
}
.discussion_icon_text{
text-align: center;
font-size: 10px;
color: #3d4354;
}
.padding_30{
padding:30px !important;
}
.bg-dark{
background:#000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading padding_30 no_border_radius bg-dark set_padding_0">
</div>
<div class="discussion_round_div">
<div class="text-center discussion_round_div_icon">
<span class="glyphicon glyphicon-check "></span>
<p class="discussion_icon_text">Approved</p>
</div>
</div>
</div>
A good way to center an absolute positioned element is by using:
left: 50%;
transform: translateX(-50%);
This is a better version of the classic trick that uses a negative margin since you don't need to know the width of your centered element for this solution to work.
So, just add:
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%;
top: 20px;
transform: translateX(-50%);
}
This is a JSFiddle. I think is perfectly centered...
If you want the white approved element to be in the center even if you resize the browser then you can use something like:
.class{
position:absolute;
left:50%;
margin-left: -100px; // if your white approved element width is 200px then set margin to -100
}
Good luck

Positioning divs #2

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.

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

Categories