I try to do this way but it does not work. How can I overlay on an image.
<div class="banner_img">
<img src="images/catimage.jpg" alt="It is a cat image" width="300px" height="200px"> <br/>
</div>
Edit the code to fit your needs.
CSS & HTML:
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
max-width: 300px;
}
.img{
display: block;
width: 100%;
height: auto;
}
.youroverlaydiv{
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .youroverlaydiv{
opacity: 1;
}
<div class="container">
<div class="banner_img">
<img src="https://images.unsplash.com/photo-1524749292158-7540c2494485?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="It is a cat image" width="300px" height="200px" class="img">
<div class="youroverlaydiv">This is your overlay.</div>
</div>
</div>
Related
I transferred my website code to my domain, but I don't know why my picture doesn't show on the right side. I placed my image beside index.html, so I used relative addressing:
On my directAdmin:
index.html:
Note to .right: background-image: url("IMG_۲۰۲۲۰۴۰۲_۱۲۲۲۳۰.png");:
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Arman Ebrahimi</title>
<style>
*{
box-sizing: border-box;
}
body{
background-image: linear-gradient(to right, #333, #ccc);
margin: 0;
padding: 40px 60px 0 60px;
height: 100vh;
}
.container{
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.left{
width: 70%;
height: 80%;
background-color: gold;
position: relative;
border-radius: 10px 0 0 0;
color: #333;
}
.country{
margin-left: 40px;
}
h1{
font-size: 50px;
font-family: "Times New Roman";
letter-spacing: 3px;
}
.description{
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.right{
background-image: url("IMG_۲۰۲۲۰۴۰۲_۱۲۲۲۳۰.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 150%;
width: 30%;
height: 80%;
background-color: #555;
position: relative;
border-radius: 0 10px 0 0;
}
.menu{
position: absolute;
top: 5%;
right: 5%;
font-size: 10px;
}
.menu > a{
display: inline-block;
padding: 5px 10px;
text-decoration: none;
color: white;
transition: 0.5s;
border-radius: 10px;
}
.menu > a:hover{
background-color: gold;
}
.dropdown{
padding: 5px 10px;
border-radius: 10px;
display: inline-block;
transition: 0.5s;
}
.dropdown:hover{
background-color: gold;
}
.dropbtn{
background-color: inherit;
border: none;
color: white;
font-size: inherit;
}
.dropdown-content{
background-color: #eee;
visibility: hidden;
position: absolute;
border-radius: 10px;
overflow: hidden;
}
.dropdown-content a{
display: block;
width: 100%;
font-size: 14px;
color: #222;
padding: 10px 40px 10px 10px;
text-decoration: none;
}
.dropdown-content a:hover{
background-color: gold;
}
.dropdown:hover .dropdown-content{
visibility: visible;
}
.footer{
width: 100%;
height: 15%;
background-color: #222;
display: flex;
justify-content: space-around;
align-items: center;
}
.footer a{
display: inline-block;
text-decoration: none;
color: white;
}
.footer a:hover{
color: gold;
}
.footer2{
width: 100%;
height: 5%;
background-color: gold;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<p class="country">Iran</p>
<div class="description">
<h1>ARMAN <br> EBRAHIMI</h1>
<p>//about me <br><br>I'm a Front-end(Reactjs) developer.
<br><br>I'm looking for a remote job. I'm from Iran-Birjand.</p>
</div>
</div>
<div class="right">
<div class="menu">
About
Blog
<div class="dropdown">
<button class="dropbtn">Resources
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
project1
project2
project3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Features
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Skills
Favorites
</div>
</div>
</div>
</div>
<div class="footer">
Instagram
Google
Linkedin
Git
</div>
<div class="footer2"></div>
</div>
</body>
</html>
This is my domain:
http://armaneebrahimi.ir/
When I use absolute addressing, the result is:
It works for me when I use the full URL:
.right{
width:300px;
height:300px;
background-image: url("https://armaneebrahimi.ir/IMG_%DB%B2%DB%B0%DB%B2%DB%B2%DB%B0%DB%B4%DB%B0%DB%B2_%DB%B1%DB%B2%DB%B2%DB%B2%DB%B3%DB%B0.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 150%;
background-color: #555;
position: relative;
border-radius: 0 10px 0 0;
}
<div class="right"></div>
As I read and understand, an absolute positioned element is ignored by the parent and removed from the DOM flow, but in my example (please see the code snippet) it's not behaving like that. In my opinion, the absolute positioned child element should be ignored by the parent div and thus the outer container shouldn't be expanded to contain the child. Why is that? And how should I solve that (keeping the containers scrollHeight unexpanded by the child)? Thanks in advance.
#container {
width: 300px;
height: 300px;
background-color: grey;
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: scroll;
gap: 10px;
padding: 10px 0;
}
.icon {
width: 120px;
height: 120px;
background-color: green;
position: relative;
}
#absolutePositionedChild{
position: absolute;
width: 50px;
height: 300px;
background-color: red;
top: 35px;
left: 35px;
}
<div id="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"><div id="absolutePositionedChild"></div></div>
</div>
The absolute positioned element is positioned relative to the nearest ancestor.
It means your absolute positioned element will position itself relative to the nearest parent element which has the property, position: relative
If it does not have a positioned ancestor, then it will use the document body.
#container {
width: 300px;
height: 300px;
background-color: grey;
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow-y: scroll;
gap: 10px;
padding: 10px 0;
}
.icon {
width: 120px;
height: 120px;
background-color: green;
position: relative;
}
#absolutePositionedChild{
position: absolute;
width: 50px;
height: 120px;
background-color: red;
top: 0px;
left: 35px;
}
<div id="container">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"><div id="absolutePositionedChild"></div></div>
</div>
I am new to Selenium automation as well as Javascript. I am trying to write a Selenium test that should insert some txt into an ACE editor.
The element (inspect element) looks like
<div class="editor ng-pristine ng-untouched ng-valid ng-scope ace_editor ace-chrome emacs-mode ng-empty paragraph-text--dirty" ui-ace="{ onLoad : onLoad, require : ['ace/ext/language_tools'] }" ng-model="paragraph.text" ng-class="{'paragraph-disable': paragraph.status == 'RUNNING' || paragraph.status == 'PENDING' || revisionView === true, 'paragraph-text--dirty' : dirtyText !== originalText && dirtyText !== undefined}" id="20190722-172811_773233816_editor" style="height: 16px; font-size: 9pt;">
<textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; left: 4px; height: 16px; width: 7.20117px; top: 0px;"/>
<div class="ace_gutter" aria-hidden="true" style="display: none;">
<div class="ace_layer ace_gutter-layer" style="margin-top: 0px; height: 48px; width: 34px;">
<div class="ace_gutter-cell " style="height: 16px;">1</div>
</div>
<div class="ace_gutter-active-line" style="top: 0px; height: 16px;"/>
</div>
<div class="ace_scroller" style="left: 0px; right: 0px; bottom: 0px;">
<div class="ace_content" style="margin-top: 0px; width: 1214px; height: 48px; margin-left: 0px;">
<div class="ace_layer ace_print-margin-layer">
<div class="ace_print-margin" style="left: 580px; visibility: visible;"/>
</div>
<div class="ace_layer ace_marker-layer"/>
<div class="ace_layer ace_text-layer" style="padding: 0px 4px;">
<div class="ace_line_group" style="height:16px">
<div class="ace_line" style="height:16px"/>
</div>
</div>
<div class="ace_layer ace_marker-layer"/>
<div class="ace_layer ace_cursor-layer ace_hidden-cursors">
<div class="ace_cursor" style="left: 4px; top: 0px; width: 7.20117px; height: 16px;"/>
</div>
</div>
</div>
<div class="ace_scrollbar ace_scrollbar-v" style="display: none; width: 20px; bottom: 0px;">
<div class="ace_scrollbar-inner" style="width: 20px; height: 16px;"/>
</div>
<div class="ace_scrollbar ace_scrollbar-h" style="display: none; height: 20px; left: 0px; right: 0px;">
<div class="ace_scrollbar-inner" style="height: 20px; width: 1214px;"/>
</div>
<div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: hidden;">
<div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: visible;"/>
<div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; overflow: visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</div>
</div>
I did some searching and found the way to add txt is via a JS script
20190722-172811_773233816_editor.setValue("abcd")
Is this correct?
How do I find the Id for editor in an automated way?
I tried this in Dev console and it tells me 20190722-172811_773233816_editor is not a valid name (var can't start with numbers).
Thanks!
You can try this,
var aceEditorElement = document.getElementsByClassName('ace_editor')[0].id; // Gets the Id of the ace editor; If you have multple editors in your page choose the required one from the list
var editorContainer = document.find("#" + aceEditorElement); // Gets the container through the Id
var editor = ace.edit(editorContainer ["0"]);
editor.session.setValue("Hello World"); // Sets the value into the editor
I’m using mapbox.directions v0.3.0. I have come across a bug with the Zoom Control when using Internet Explorer only. It works fine with Edge, Chrome, and Firefox. I have the following layout:
<div id="pnlMapControl">
<div id="pnlRoutePane">
<div id="divRouteInputs"></div>
<div id="divRouteErrors"></div>
<div id="divRouteDirections">
<div id="divAlternateRoutes"></div>
<div id="divRouteInstructions"></div>
</div>
</div>
<div id="pnlMap"></div>
<div id="pnlStatusBar">
<span id="lblStatus">Status</span>
<span id="lblLatLon" style="float:right">LatLon</span>
</div>
</div>
pnlMapControl is a top level container control. pnlMap is the container for the Mapbox map. pnlRoutePane is where I want to have my input controls and display the instructions. I would prefer to keep the controls separate from the map container. pnlRoutePane is positioned on the left (and its visibility is toggled on and off so it is only visible when working with a route), and pnlMap is on the right.
My issue is, in IE11, when I click the zoom control on the map, it causes the parent pnlMapControl container to move left the width of pnlRoutePane and displays the Mapbox map at left position 0. All other browsers work without this issue. Is there something that can be done so that it will also work with IE?
Thanks in advance. My CSS is below:
#pnlMapControl {
position: absolute;
left: 0px;
right: 0px;
top: 60px;
bottom: 0px;
background-color: red;
}
#pnlRoutePane {
position: absolute;
left: 0px;
width: 300px;
top: 33px;
bottom: 20px;
background-color: lightseagreen;
display: none;
}
#pnlMap {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: lightyellow;
}
#pnlStatusBar {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 20px;
background-color: lightblue;
}
#lblStatus {
margin-left: 5px;
vertical-align: middle;
}
#lblLatLon {
margin-right: 5px;
vertical-align: middle;
}
#divRouteInputs {
position: absolute;
top: 10px;
left: 10px;
width: 280px;
height: 80px;
background-color:yellow;
}
#divRouteErrors {
position: absolute;
top: 120px;
left: 10px;
padding: 10px;
border-radius: 0 0 3px 3px;
background: rgba(0,0,0,0.25);
}
#divRouteDirections {
position: absolute;
top: 120px;
left: 10px;
bottom: 0px;
overflow: auto;
background: rgba(0,0,0,0.8);
}
When checking my responsive site on my laptop it's scaling nicely using percentages, but when I check it on my iPhone it adds a huge top margin to my vertical row of images. Any ideas why? The site is here http://edharrisondesign.com/pocketpictograms/
Thanks in advance!
The HTML:
<!-- Pocket
================================================== -->
<figure>
<div class="main-pocket"><img src="images/assets/pocket.png"></div>
<div class="padding"></div>
</figure>
<!-- Icons
================================================== -->
<div class="inside-pocket">
<div class="icon-container">
<img class="pictogram" src="images/pocket-pics/pencil.png">
<img class="pictogram" src="images/pocket-pics/iphone.png">
<img class="pictogram" src="images/pocket-pics/earphones.png">
<img class="pictogram" src="images/pocket-pics/camera.png">
<img class="pictogram" src="images/pocket-pics/film.png">
<img class="pictogram" src="images/pocket-pics/scalpol.png">
<img class="pictogram" src="images/pocket-pics/paintbrush.png">
<img class="pictogram" src="images/pocket-pics/fineliner1.png">
<img class="pictogram" src="images/pocket-pics/fineliner2.png">
<img class="pictogram" src="images/pocket-pics/notepad.png">
<img class="pictogram" src="images/pocket-pics/mouse.png">
<img class="pictogram" src="images/pocket-pics/glasses.png">
<img class="pictogram" src="images/pocket-pics/lighter.png">
<img class="pictogram" src="images/pocket-pics/pipe.png">
<img class="pictogram" src="images/pocket-pics/flask.png">
<img class="pictogram" src="images/pocket-pics/matches.png">
<img class="pictogram" src="images/pocket-pics/watch.png">
<img class="pictogram" src="images/pocket-pics/pocket-watch.png">
<img class="pictogram" src="images/pocket-pics/key.png">
<img class="pictogram" src="images/pocket-pics/car-key.png">
</div>
</div>
The CSS:
figure {
z-index: 97;
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 40%;
text-align: center;
}
.padding {
z-index: 95;
position: relative;
background-color: #D2D2D2;
height: 100%;
width: 100%;
top: -50px;
overflow: hidden;
border-bottom: 50px solid #D2D2D2;
}
.main-pocket img {
z-index: 96;
position: relative;
width: 30%;
height: auto;
margin: 0 auto;
max-width: 300px;
}
.inside-pocket {
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
text-align: center;
}
.icon-container {
position: relative;
max-width: 300px;
width: 30%;
top: 37%;
margin: 0 auto;
}
.pictogram {
height: auto;
width: 100%;
margin-bottom: 200%;
}
Okay I know where I was going wrong - I should have been setting the top margin to the .inside-pocket class rather than the .icon-container class. The markup is here:
/* #Pocket
================================================== */
figure {
z-index: 97;
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 40%;
text-align: center;
}
.padding {
z-index: 95;
position: relative;
background-color: #D2D2D2;
height: 100%;
width: 100%;
top: -50px;
overflow: hidden;
border-bottom: 50px solid #D2D2D2;
}
.main-pocket img {
z-index: 96;
position: relative;
width: 30%;
height: auto;
margin: 0 auto;
max-width: 300px;
}
.inside-pocket {
width: 100%;
height: 100%;
top: 37%;
position: absolute;
margin: 0 auto;
text-align: center;
}
.icon-container {
position: relative;
max-width: 300px;
width: 30%;
margin: 0 auto;
}
.pictogram {
height: auto;
width: 100%;
margin-bottom: 200%;
}
If anyone could let me know WHY this is correct it would be great! Cheers