.collection {
margin-bottom: 20px;
}
.collection-content{
position: relative;
padding: 50px 143px;
background-color: #F8F8F2;
background-image: url("../img/collection-bg-img.jpg") ;
}
.collection-leafe-left{
position: absolute;
left: -150px;
top: 40px;
}
.collection-leaves-right{
position: absolute;
right: -350px;
top: 685px;
}
.collection-leafe-left-light{
position: absolute;
left: -216px;
bottom: 170px;
}
<section class="collection">
<div class="container">
<div class=" collection-content ">
<img class="collection-leafe-left" src="https://via.placeholder.com/371 " alt width="371" height="371" >
<img class="collection-leaves-right" src="https://via.placeholder.com/546/592?text=POSITION+IS+NOT+WORKING
C/O https://placeholder.com/ " alt width="546" height="592" >
<img class="collection-leafe-left-light" src="https://via.placeholder.com/314" alt width="314" height="287" >
</div>
</div>
</section>
position:absolute; is not working with collection-right-mix image. Why is that so?
Because of position:absolute; is not working with collection-right-mix image , appear scroll across horizontal.
How to effect position to the collection-right-mix image
Change padding to margin for .collection-content
position: absolute considers the padding part of the width.
Thus, .collection-content { padding: 50px 143px; } would position the absolute children the same as .collection-content { padding: 0; }.
On the other hand, position: absolute does NOT consider the margin part of the width.
So now, the absolutely position children should be positioned as you desired.
.collection {
margin-bottom: 20px;
}
.collection-content {
position: relative;
margin: 50px 143px; /* Changed */
background-color: #F8F8F2;
background-color: #ccc; /* Changed */
background-image: url("../img/collection-bg-img.jpg");
}
.collection-leafe-left {
position: absolute;
left: -150px;
top: 40px;
}
.collection-leaves-right {
position: absolute;
right: -350px;
top: 685px;
}
.collection-leafe-left-light {
position: absolute;
left: -216px;
bottom: 170px;
}
<section class="collection">
<div class="container">
<div class=" collection-content ">
<img class="collection-leafe-left" src="https://via.placeholder.com/371 " alt width="371" height="371">
<img class="collection-leaves-right" src="https://via.placeholder.com/546/592?text=POSITION+IS+NOT+WORKING" alt width="546" height="592">
<img class="collection-leafe-left-light" src="https://via.placeholder.com/314" alt width="314" height="287">
</div>
</div>
</section>
Related
Trying to format icons, inside of a circle, results in an oval being created instead. It also seems like, behaviour changes between the platforms, because, on Google Chrome, they are vertical ovals(See here - https://prnt.sc/1tb2phl)
Have made the codepen example here - https://codepen.io/raicha/pen/dyRjwwa but just in case, code is here too
.container{
position: absolute;
width:6%;
height:6%;
top: 74.63%;
border: 2px solid #E2E3E4;
border-radius: 50%;
box-sizing: border-box;
}
#facebookContainer{
position: absolute;
left: 35%;
right: 87.24%;
}
#instagramContainer {
position: absolute;
left: 45%;
right: 83.59%;
}
#twitterContainer {
position: absolute;
left: 55%;
right: 80.16%;
}
#youtubeContainer {
position: absolute;
left: 65%;
right: 76.72%;
}
#youtube{
position: absolute;
left: 65%;
right: 76.72%;
}
<a href="#">
<div id="facebookContainer" class="container">
<img src="includes\icons\facebook.png" class="social" id="facebook">
</div>
<div id="instagramContainer" class="container">
<img src="includes\icons\instagram.png" class="social" id="instagram">
</div>
<div id="twitterContainer" class="container">
<img src="includes\icons\twitter.png" class="social" id="twitter">
</div>
<div id="youtubeContainer" class="container">
<img src="includes\icons\youtube.png" class="social" id="youtube">
</div>
</a>
And also, maybe there is a better way to organise this stuff? :) Would be nice, if you let me know
You cannot specify container width to be 6% height and 6% width. it takes 6% of total height and 6% of total width which are definitely different values and for a circle you need to specify exact values. For example
height: 3rem or 50px
width: 3rem or 50 px
this code below woks now i specified width and height same on container.
<a href="#">
<div id="facebookContainer" class="container">
<img src="includes\icons\facebook.png" class="social" id="facebook">
</div>
<div id="instagramContainer" class="container">
<img src="includes\icons\instagram.png" class="social" id="instagram">
</div>
<div id="twitterContainer" class="container">
<img src="includes\icons\twitter.png" class="social" id="twitter">
</div>
<div id="youtubeContainer" class="container">
<img src="includes\icons\youtube.png" class="social" id="youtube">
</div>
</a>
<style>
.container {
position: absolute;
width: 50px;
height: 50px;
top: 74.63%;
border: 2px solid #E2E3E4;
border-radius: 50%;
box-sizing: border-box;
overflow: hidden;
}
.comntainer img {
width: 100%;
height: 100%;
}
#facebookContainer {
position: absolute;
left: 35%;
right: 87.24%;
}
#instagramContainer {
position: absolute;
left: 45%;
right: 83.59%;
}
#twitterContainer {
position: absolute;
left: 55%;
right: 80.16%;
}
#youtubeContainer {
position: absolute;
left: 65%;
right: 76.72%;
}
#youtube {
position: absolute;
left: 65%;
right: 76.72%;
}
</style>
I'm trying to create a button on my image. However, I am facing a problem that my button appears under or above it. I've tried to solve this problem with one of the w3 examples, but still same problem. Also, I have other question how to reduce height of this picture? Because if i reduce height it does not work also.
<section>
<button class="btn btn-danger">my_button</button>
<img class="sectionImage" src="images/kendall-henderson-Pj6TgpS_Vt4-unsplash.jpg" alt="Logistics transport">
</section>
.sectionImage {
filter: grayscale(70%);
max-width: 100%;
height: auto;
}
Try this code
section{
position: relative;
}
button{
position: absolute;
left: 0;
bottom: 10px;
z-index: 1;
}
.sectionImage {
filter: grayscale(70%);
max-width: 100%;
height: auto;
}
<section>
<button class="btn btn-danger">my_button</button>
<img class="sectionImage" src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Logistics transport">
</section>
you can try this :
<section>
<img class="sectionImage" src="https://images.unsplash.com/photo-1520050704800-294fd98f29e8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1296&q=60" alt="Logistics transport">
<button class="btn btn-danger">my_button</button>
</section>
with this css :
<style>
section {
position: relative;
}
.sectionImage {
width: 500px;
filter: grayscale(70%);
max-width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.btn-danger {
position: absolute;
top: 50px;
left: 50px;
}
</style>
try this for different positioning. Eg: center, top-right, bottom-left etc. Reference: https://www.w3schools.com/howto/howto_css_image_text.asp
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.sectionImage {
height: 80%;
width: 100%;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<section class="container">
<button class="bottom-left">Bottom Left</button>
<button class="top-left">Top Left</button>
<button class="top-right">Top Right</button>
<button class="bottom-right">Bottom Right</button>
<button class="centered">Centered</button>
<img class="sectionImage" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="Logistics transport">
</section>
Try putting both tags in a container, making them both position absolute, and making the button have a greater z-index. Something like this.
<div id="container" style="overflow:hidden; position:relative;">
<img src="your image" style="position:absolute; z-index:1;">
<button style="position:absolute; z-index:10;top:50px; left:50px;"> TESTING TESTING 123 </button>
</div>
From there you can edit the code for your needs and the button element should appear above the img element
I'm trying to apply absolute positioning on class car. I expect it to be placed in top-left corner inside rectangle. The current behavior is being placed in top-left corner of the page which I don't want. As far as I know absolute element must be positioned inside its ancestor.
body {
padding: 25px;
}
.car {
position: absolute;
}
#rectangle {
/* display: inline-block;
position: absolute;
top: 150px;
left:25px; */
width: 3324px;
height: 5112px;
background-color: #00b3ee;
}
#intro {
/* position: absolute;
top: 800px;
left:25px; */
border: solid 1px;
padding: 10px;
}
<body>
<div id="intro">
<p>
Floor <b><i>{{ $title }}</i></b> setup successfully finished!
Return to floors.
</p>
</div>
<div id="rectangle">
<img src="{{ url($map_image_path) }}">
<a href="#" class="car" style="position: absolute; top: 0px; left: 0px;">
<img id="dynamic" src="http://localhost/ParkingMinis/public/images/icons/car/reza1.png">
</a>
</div>
</body>
Add position: relative to the #rectangle class. Absolute positioning is relative to the first positioned ancestor.
Hey cheack this out http://learnlayout.com/position.html
#rectangle {
position : relative;
}
Here you go buddy.
body
{
padding: 25px;
}
.car
{
position: absolute;
top: 0 ;
left:0;
padding: 25px;
}
#rectangle
{
position:relative;
width: 3324px;
height: 5112px;
background-color: #00b3ee;
}
#rectangle img{
height: 50px;
}
#intro
{
/* position: absolute;
top: 800px;
left:25px; */
border: solid 1px;
padding: 10px;
}
<div id="intro">
<p>
Floor <b><i>{{ $title }}</i></b> setup successfully finished!
Return to floors.
</p>
</div>
<div id="rectangle">
<img src="{{ url($map_image_path) }}" >
<a href="#" class="car" style="position: absolute; top: 0px; left: 0px;">
<img id="dynamic" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</a>
</div>
I have a <div> which includes two <img>, one is the close button, the other one is a roommap. However, the roommap size is always different, so putting the close button in an absolute position doesnt seem to work.
Does anybody has an idea how I could achieve that the close button is based on the roommap size and always in top right corner? Also, the whole <div> is a popup which is centered in the middle of the screen.
.cont2 {
position: relative;
}
.cont2 .img2 {
position: absolute;
margin-top: 10%;
right: 10%;
z-index: 2;
}
.cont2 .img1 {
position: absolute;
margin-top: 15%;
left: 50%;
z-index: 1;
border: 4px solid black;
border-radius: 5px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-transform: translateX(-50%);
}
<div class="cont2" id="popImg">
<img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button">
<img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" />
</div>
Ok, your issue is you need a div to just hold the image and be the same size so you can position your cross relative to the image size.
Try the following (I have added an extra image-holder div but if you don't want this, just make your main cont2 div inline-block):
.cont2 {
position: relative;
}
.cont2 .img2 {
position: absolute;
top: 10%;
right: 10%;
z-index: 2;
border:1px solid red;
}
.cont2 .image-holder {
display: inline-block;
position: absolute;
margin-top: 15%;
left: 50%;
border: 4px solid black;
border-radius: 5px;
transform: translateX(-50%);
}
.cont2 .image-holder img {
display: block
}
<div class="cont2" id="popImg">
<div class="image-holder">
<img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button">
<img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" />
</div>
</div>
I had to refactor your css a little but here is a working version:
#popImg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}
img {
position: absolute;
}
#closebutton {
right: 0;
top: 0;
z-index: 2;
cursor: pointer;
}
#roomchoose {
width: 100%;
height: auto;
z-index: 1;
}
<div class="cont2" id="popImg">
<img class="img2" id="closebutton" src="http://placehold.it/50x40/ff0000/ffffff">
<img class="img1" onclick="point_it(event)" id="roomchoose" src="http://placehold.it/500x400" />
</div>
The main changes are that the #popImg is now the element that is being offset to the centre. This was the main cause of your problems before, because the #closebutton had no relationship with the #roomchoose.
Now you use block wrapper, it has width 100%. Use inline-block wrapper for your image. And don't use position absolute for main image, it doesn't make width for parent div:
.cont2 {
position: relative;
text-align:center;
}
.cont2 .img2 {
position: absolute;
margin-top: 10%;
right: 10%;
z-index: 2;
}
.cont2 .img1 {
position: relative;
margin-top: 15%;
z-index: 1;
border: 4px solid black;
border-radius: 5px;
}
.wrapper{
display:inline-block;
position:relative;
}
<div class="cont2" id="popImg">
<span class="wrapper">
<img class="img2" width="40px" id="closebutton" src="https://placehold.it/40x40&text=Button">
<img class="img1" onclick="point_it(event)" id="roomchoose" src="https://placehold.it/150x150&text=Image" />
</span>
</div>
I am trying to make a login form. So far I have managed to hardcode it but once I need to for ex. move one of the wrappers then I got to change every element position in that wrapper. How can I do it so that when moving icon, BG field and text, I only got to change position from one place?
HTML code:
<div id="user-wrapper">
<img id="userfield" src="images/fieldBG.png" alt="Username">
<img id="usericon" src="images/userIcon.png" alt="Username">
<p id="username">
Username
</p>
</div>
<div id="pw-wrapper">
<img id="pwfield" src="images/fieldBG.png" alt="Password">
<img id="pwicon" src="images/pwIcon.png" alt="Password">
<p id="pw">
Password
</p>
</div>
<div id="login-wrapper">
<img id="loginbtn" src="images/loginBtn.png" alt="Login">
<p><a id="login" href="#">
Login
</p>
</div>
CSS code:
#user-wrapper {
position: relative;
top: 100px;
width:1760px;
}
#usericon {
position: absolute;
top: 10px;
left: 740px;
}
#user-wrapper p {
position: absolute;
top: 14px;
left: 840px;
}
#pw-wrapper {
position: relative;
top: 120px;
width:1760px;
}
#pwicon {
position: absolute;
top: 10px;
left: 740px;
}
#pw-wrapper p {
position: absolute;
top: 14px;
left: 840px;
}
#login-wrapper {
position: relative;
top: 140px;
width: 1940px;
}
#login-wrapper p {
position: absolute;
top: 12px;
left: 950px;
}
The whole thing should look like this (but should be editable/positioned with an ease):
Thank You!
Only use
#usericon {
position: absolute;
top: 10px;
float: right;
left: 740px;
}
Okey, I managed to fix it myself.
Instead of width in the wrapper, I had to use left.
For ex.
#user-wrapper {
position:relative;
top:100px;
left:0px;
}
Now I can just only change wrapper parameters top/left and it moves all items inside the wrapper div.