I've successfully displayed an image over another image like this:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="image-with-overlay">
<div class="shop-now-overlay">
<img src="img/btn_shop_now.png">
</div>
<img src="img/left_image.jpg"/>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="image-with-overlay">
<div class="shop-now-overlay">
<img src="img/btn_shop_now.png">
</div>
<img src="img/right_image.jpg"/>
</div>
</div>
</div>
And this is how my stylesheet looks like:
.image-with-overlay {
position: relative;
}
.image-with-overlay .shop-now-overlay {
position: absolute;
z-index: 10;
bottom: 0;
right: 0;
padding-bottom: 30px;
padding-right: 30px;
}
But I want my page to be responsive and of course, everytime I resize my browser smaller and the images gets displayed on a single column (col-sm-12), the overlay button displays outside the image and takes the width of the page.
Any ideas on how I can restrict the image overlay to only wrap around the image even when the screen is smaller?
Looks like the responsive.css makes it static! Can you try with !important? I won't recommend this but checking doesn't hurt.
.image-with-overlay {
position: relative !important;
.shop-now-overlay {
position: absolute !important;
z-index: 10;
bottom: 0;
right: 0;
padding-bottom: 30px;
padding-right: 30px;
}
}
Try removing the padding element and try to handle the position with left and right : 30px
.shop-now-overlay {
position: absolute;
z-index: 10;
bottom: 0;
right: 0;
}
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>
I'm trying to get a response line next to a heading
Picture above is from a pdf not the site
I tried using a Div with a border bottom but its out of place because its a border it sits lower, I then tried using a <hr And The same thing it doesnt align properly There are one's at the bottom center ect.
How do I achieve something of the sorts without having to set responsive stylings every few pixel's.
<div class="container">
<div class="we-are">
<div class="row">
<div class="col-md-4">
<h2>We are.</h2>
</div>
<div class="col-md-8 line-right">
<hr>
</div>
</div>
</div>
</div>
.line-right hr{
position: absolute;
bottom: 0;
width: 100%;
border: 0;
border-bottom: 5px #BFE2CA solid;
}
My result:
I do realize I can ofcourse do something like
marign-top:50px
But it wont be very responsive
I would suggest a different approach using pseudo-elements
Here your HTML code:
<div class="container">
<div class="we-are">
<div class="row">
<div class="parent">
<h2>We are.</h2>
</div>
</div>
</div>
</div>
And here your CSS, where the line is made by the _pseudo-element after:
h2 {
margin: 0;
}
.parent {
position: relative;
width: auto;
display: inline-block;
}
.parent:after{
display: block;
content: "";
position: absolute;
bottom: 4px;
left: calc(100% + 20px);
width: 500px; /* Or whatever you need, e.g. width: calc(100vw - 200px); */
height: 5px;
background: #BFE2CA;
}
If you want to have the line vertically aligned just change your CSS accordingly (remove bottom and add top):
top: 50%;
transform: translateY(-50%);
Here's a working live Codepen: https://codepen.io/alezuc/pen/dyYGxYY
Yous should use something like dynamic when the font or the screen varies, you have to set the line to the period symbol first and then even if you increase/decrease the font that shouldn't change the line.
you can try something like this. you can try to change the font and you see the line sticks to the same position and you just have to increase the height of the line based on font.
Snippet
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: 5px;
border: 1px solid red;
}
.parent {
position: relative;
width: auto;
display: inline-block;
font-size:3em; /* change the size and see the difference */
}
.parent:after {
content: "";
position: absolute;
bottom: 20%;
left: calc(100% + 20px);
width: 500px;
/* height is the only thing you have to change irrespective of the font. */
height: 5px;
background: #BFE2CA;
}
<div class="container">
<div class="we-are">
<div class="row">
<div class="parent">
<h2>We are.</h2>
</div>
</div>
</div>
</div>
I have a div with the ff css properties:
.header {
width: 100%;
background-color: #1cb14d;
position: fixed;
top: 0;
left:0;
border-bottom: none;
z-index: 999;
font-family:'Segoe UI Light';
color: #ffffff;
}
HTML:
<div class="header">
<div class="section_container">
<div class="col span_1_of_12">
//something here
</div>
<div class="col span_1_of_12">
//something here
</div>
<div class="col span_7_of_12">
//something here
</div>
<div class="col span_3_of_12">
//something here
</div>
</div>
</div>
I want to limit the min-width of it but it doesn't seem to work. I need to set the min-width to prevent the div from covering other contents when browser is size is adjusted. Is there a way to do it? Thanks
If the .header needs to have a min-width, you can just add it:
.header { width: 100%;
min-width: 200px; }
Otherwise, if you want the section_container to have a min-width:
.section_container { min-width: 200px; }
This will override/add the frameworks default min-width if it exists
Currently you're anchoring the element to the left and right boundry of the viewport with these directives, which supersede min-width and min-height:
left: 0;
right: 0;
Remove them and then add a min-width or a max-width directive, depending on the effect you're looking for.
I have this page:
http://avocat2.dac-proiect.ro/?page_id=17
This is my code HTML:
<div class="row sss">
<div class="row">
<div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center">
<ul class="lista-imagini" style="text-align:center;">
<li class="ion"><img src="wp-content/themes/WordPressBootstrap-master/images/b1.jpg" class="img-responsive center-block" alt="Responsive image"/><p class="qqq" style="color:white;">asdasdsa</p></li>
...//some code
</ul>
</div>
I want to put text over pictures (text is .qqq) but the image is (.ion)
I tried this solution but unfortunately spoil photos arrangement. Photos only keeps the place.
.ion {
position: relative;
width: 100%; /* for IE 6 */
}
.qqq {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
After I added the above code, the site looks like.
http://i61.tinypic.com/531a4p.jpg
How can I make pictures to be aligned just after you add these codes?
Can you help me please to solve this problem?
Thanks in advance!
this will work fine
li.ion {
position: relative;
}
.qqq {
color: white;
position: absolute;
top: 50%;
left: 50%;
margin-left: -19px;
}
There is no problem for me with your code.
I want to fix an image above the slider, I've used the below code. It gets fixed but the problem is that, if I minimize or resize the browser, the image moves from that position and takes its own place.
CSS:
.imageover{
background:transparent;
bottom: 0;
color: #FFFFFF;
left: 0;
position: absolute;
width: 100%;
z-index: 8;
opacity:1.0!important
}
HTML:
<div class="topbanner" width=1000px>
<div class ="imageover">
<img src="images/greendesign.png" width =350/>
</div>
<div id="sliderFrame">
<div id="slider">
<img src="images/slider1.png"/>
<img src="images/slider2.jpg" />
<img src="images/slider3.jpg" />
<img src="images/slider4.jpg" />
<img src="images/slider5.jpg" />
<img src="images/slider6.jpg" />
</div>
</div>
</div>
Use position: fixed; if this an image that you want fixed on a place on the page, and unaffected by scrolling.
.imageover{
background: none;
bottom: 0;
color: #FFFFFF;
left: 0;
position: fixed;
width: 100%;
z-index: 8;
opacity: 1.0 !important
}
More on the position property here.