I have two buttons that need to be moved on top of image. One button should be on right side of an image, and another one on the left side. However at the moment they stick at the bottom left corner of the image, while they should be on separate sides in the middle of photo. What I am doing wrong?
HTML part:
<div class="container">
<img class="mySlides" src="images/dog1.jpg" style="width:100%">
<img class="mySlides" src="images/dog2.jpg" style="width:100%">
<img class="mySlides" src="images/dog3.jpg" style="width:100%">
<img class="mySlides" src="images/dog4.jpg" style="width:100%">
<button class="carousell-button carousell-button-black carousell-button-left" onclick="plusDivs(-1)">❮</button>
<button class="carousell-button carousell-button-black carousell-button-right" onclick="plusDivs(1)">❯</button>
</div>
CSS part:
.container carousell-button-right {
position: relative;
top: 200%px;
right: 0%;
}
.container carousell-button-left {
position: absolute;
top: 100%;
left: 0%;
}
How it looks right now:
enter image description here
since you need it in the middle then use Relative to parent and use absolute for Right as well. This will make sure it is positioned absolutely middle based on the image size.
You should also use . for the carousell class.
As mentioned in the comments above 200%px; is an invalid property value.
body {
margin: 0;
}
.container {
position: relative;
}
.container .carousell-button-right {
position: absolute;
top: 50%;
right: 0;
font-size: 30px;
}
.container .carousell-button-left {
position: absolute;
top: 50%;
left: 0;
font-size: 30px;
}
<div class="container">
<img class="mySlides" src="http://placekitten.com/301/301" style="width:100%">
<button class="carousell-button carousell-button-black carousell-button-left" onclick="plusDivs(-1)">❮</button>
<button class="carousell-button carousell-button-black carousell-button-right" onclick="plusDivs(1)">❯</button>
</div>
Look at the snippet below and try to use flex-box
div {
width: 200px;
height: 200px;
background-color: black;
display: flex;
justify-content: center;
align-items: flex-start;
}
button {
width: 50px;
height: 20px;
}
<div>
<button>btn</button>
<button>btn</button>
</div>
Related
I have three images. I want to combine them
I am referring to this link
https://www.w3schools.com/css/css_positioning.asp#:~:text=An%20element%20with%20position%3A%20absolute,moves%20along%20with%20page%20scrolling.
I am trying to achieve this three combine images
I tried static and relative position but they did not work
.object-left, .main-image {
position: absolute;
}
.object-right , .main-image{
position: absolute; //here I am using comma but not work
}
.cshtml
.object-left,
.main-image .object-right {
position: absolute;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="~/Graphics/Services Page/obj1.svg" style="width:50px;height:50px;" /> //1 image
<img class="main-image" src="~/Graphics/Services Page/Mobile app developement.svg" /> //2 image
<img class="object-right" src="~/Graphics/Services Page/obj2.svg" style="width:50px;height:50px;" /> //3 image
</div>
<div class="col-md-6" style="margin-top:100px;">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
The problem is that when you use absolute positioning, the objects start at the upper-left corner of the parent (i.e. location 0x0), so all your three images appear on top of each other. All you need to do is tell them where they should be by adding the left property. The first image can stay at left=0, so you don't need to do anything. The second image must start at the width of the first image, left=50px in my example below. The third image must start at the total width of the fist and second image, left=100px in my example below.
Also remember that since you used absolute positioning on all three images and the parent doesn't have any other content, it will collapse. So you need to give it the height of the tallest image.
.object-left {
position: absolute;
}
.main-image {
position: absolute;
left: 50px;
}
.object-right {
position: absolute;
left: 100px;
}
.image {
height: 100px;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="http://placehold.it/50x50" />
<img class="main-image" src="http://placehold.it/50x100" />
<img class="object-right" src="http://placehold.it/50x50" />
</div>
<div class="col-md-6">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
Note: in the example above, all images are placed at the top of the parent by default. If you want some images to start at a different location, then give it a top property. In the example below, I gave the third image a top=50px property to align it with the bottom of the second image:
.object-left {
position: absolute;
top: 0;
}
.main-image {
position: absolute;
left: 50px;
top: 0;
}
.object-right {
position: absolute;
left: 100px;
top: 50px;
}
.image {
height: 100px;
}
<div class="container-fluid">
<div class="col-md-4 image">
<img class="object-left" src="http://placehold.it/50x50" />
<img class="main-image" src="http://placehold.it/50x100" />
<img class="object-right" src="http://placehold.it/50x50" />
</div>
<div class="col-md-6">
<h2>Content</h2>
<p class="description">asd</p>
</div>
</div>
I think this is what you want to do. I would remove the inline style on the object- images and put that in the css. I left the top, left, right on .object- empty so that you can put where you want to place them.
Does this make sense?
.image {
position: relative;
}
.object-left {
position: absolute;
top: ;
left: ;
}
.main-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.object-right {
position: absolute;
top: ;
right: ;
}
<div class="image">
<div class="object-left"></div>
<div class="main-image"></div>
<div class="object-right"></div>
</div>
Below is my code, my goal is to prevent the div with an id "description" to overlap on the div with class name "container_display". How can I achieve this? I want the second div to show at the bottom of the image.
#container_display {
position: relative;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
}
<div id="container_display">
<img src="image1.png" />
<img src="image2.png" />
</div>
<div id="description">TEXT HERE</div>
You need to set a height for the container, because the absolutely positioned elements are not considered to occupy width or height in the container.
Details on MDN:
absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout
#container_display {
position: relative;
height: 60px;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
height: 60px;
}
<div id="container_display">
<img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
<img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>
<div id="description">TEXT HERE</div>
There is one way to "hack it", which is to place one static image there and make it visibility: hidden, which is to occupy space, but not visible, and the position back to static:
#container_display {
position: relative;
}
#container_display img {
position: absolute;
top: 0;
left: 0;
height: 60px;
}
#container_display .spacer {
visibility: hidden;
position: static;
}
<div id="container_display">
<img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
<img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
<img class="spacer" src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>
<div id="description">TEXT HERE</div>
You don't need this:
#container_display img {
position: absolute;
top: 0;
left: 0;
}
You could also add a break between both divs to create space between them, like this:
<div id="container_display">
<img src="image1.png" />
<img src="image2.png" />
</div>
<br>
<div id="description">TEXT HERE</div>
This is what I am trying to achieve:
An image positioned in between two separate div tag like facebook profile page:
I searched here but the solutions did not help much. It got positioned as I wanted but since it is bootstrap and it should responsive, when the screen size decreases the image position gets changed, which I do not want.
Here is the code(which might not be proper as I was just testing) -
HTML -
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
</div>
The CSS -
.container {
background-color: cadetblue;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -60px;
right: 200px;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
This is what I got after:
You could try to change the img-thumbnail to position: relative and use 'bottom: -60px' instead of positioning absolute, that can reposition the image without the use of absolute positioning
check it
.container {
background-color: cadetblue;
width:100%;
}
.jumbo {
margin-top:20px;
position: relative;
}
.img-thumbnail {
position: absolute;
bottom: -90px;
left:15%;
}
img {
display: block;
width: 200px;
height: 200px;
background: green;
}
.bottom-div {
height:200px;
background-color:red;}
<head>
<meta name="viewport" content="width=device-width, initial-sclae=1">
</head>
<div class="container">
<div class="jumbotron jumbo" id="custjumbo">
<h1>This is a jumbotron... </h1>
<h2>Let's see what can we make of it..</h2>
<br>
<img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger"
width="304" height="236">
</div>
<div class="bottom-div"></div>
</div>
I want 3 images on top of each other (so i can switch between them with the slider). I use the relative/absolute technique.
Strangely, the result is floating outside the div (see the picture below).
When I try to fix it with clearfix, it just cancel the superposition.
Any help ?
Here is a part of my css :
body {
img {
width: 900px;
}
#parentsuperpose {
position: relative;
}
img.superpose {
position: absolute;
top: 25px;
left: 25px;
}
#img1 {
z-index: 10;
}
#img2 {
z-index: 11;
}
#img3 {
z-index: 12;
}
Here is part of my HTML
<div class="row">
<div class="col-md-12" id="parentsuperpose">
<img src="images/mur01.jpg" class="superpose" id="img1" alt="mur01" style="visibility:visible;">
<img src="images/mur02.jpg" class="superpose" id="img2" alt="mur02" style="visibility:hidden;">
<img src="images/mur03.jpg" class="superpose" id="img3" alt="mur03" style="visibility:hidden;">
</div>
</div>
Here is the result :
enter image description here
Hi i have an <hr> line stretching across the page, but I think it keeps getting cut off by an image above it. Does anyone know how I could make it so that the <hr> line overlaps the image?
<img src=".\pncwelcome.png"
style="float:right; clear:right; margin-top:-40px;"
alt="PNC Welcome Logo"/>
<hr color="black"
style="margin-top:30px;" />
Use position: absolute;.
Check the fiddle.
Something like this should work.
The CSS:
.parent {
position: relative;
}
img {
width: 200px;
}
hr {
position: absolute;
z-index: 50;
top: 30px;
right: 0;
left: 0;
}
HTML:
<div class="parent">
<hr>
<img src="http://fanumusic.com/wp-content/uploads/2012/10/Free.jpg">
</div>
Use Z-index. In the css if you set the hr to a higher z-index value it will be layered over the image. Or since you're floating the image, float the hr too and then set a higher z-index
on it so that it will still overlap the image.
If you float the <hr> you will have to set a width on the parent element.
Use:
<img src=".\pncwelcome.png" style="z-index: 1; float:right; clear:right; margin-top:-40px;" alt="PNC Welcome Logo"/>
<hr color="black" style="z-index: 2; margin-top:30px;" />
If that doesnt' solve it use this instead:
<img src="http://placekitten.com/g/200/300" style="float:right; clear:right; margin-top:-40px; z-index:1;" alt="PNC Welcome Logo"/>
<hr color="black" style="float: left; z-index: 2; margin-top:-30px; width: 100%;" />
Building off of Savas's answer, as I experienced some rendering issues when the <img> was not also given absolute positioning...
Here is how one would create an <hr> with a graphical embellishment. The <div> is sized to the graphic being used and everything is treated like a single, spatially-defined unit on the page:
#example {
display: block;
position: relative;
width: 100%;
height: 92px;
}
#example hr {
position: absolute;
z-index: 0;
top: 46px;
bottom: 46px;
margin: 0px;
width: 100%;
border: 5px solid #8fcbf1;
}
#example img {
position: absolute;
width: 272px;
height: 92px;
z-index: 5;
left: calc(50% - 136px);
}
<div id="example">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" />
<hr />
</div>
Here is the Fiddle: https://jsfiddle.net/z517fkjx/
Also, this uses calc() for centering, which is CSS3-only.