I am trying to build a website where I occurred this error. Where I am trying to position an h1 element,
but there is something coming between my way. Here This is the image the blue part is highlighted and coming in my way. I tried using inspect but it tells its a div called (our-team).but as per my CSS the div has height as much as the background image CSS code:-.
.our-team{
height: 500px;
}
html code:-
<div class="our-team">
<img class="background-team"
src="https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?
auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" srcset="">
<h1 class="heading-team">Our Team</h1>
<div class="team-members">
<h1 class="member-name">Lara</h1>
</div>
And when I inspect on our team it shows an image(This is the inspected image).
Thank you,
in your example, you didn't close the first div.our-team tag
Maybe that's the reason?
BTW, if I understood you correctly, maybe this one help you?
https://jsfiddle.net/Madebyspeedster/fq0emnk1/14/
Maybe try and move the margin or padding to a -25px
Related
I know this question must sound familiar, and I can see loads of people asking similar questions but none of the answers are working for me. Everyone has a fairly specific need. I want to understand the basics and I can work out the rest.
I have a simple angular/bootstrap web page. I have made a carousel component and I want to ensure the user always sees the entire image. I have seen lots of answers which suggest img-fluid, max-with, max-height etc., but nothing's working for me. It's sort-of working for landscape images but not for portrait images. I need it to always show the whole image regardless.
Here is the basic app component:
<app-nav-menu ></app-nav-menu>
<div style="padding:10px">
<router-outlet></router-outlet>
</div>
The router-outlet goes to this "about-us" component:
<div class="row">
<div class="col">
<app-carousel [slides]="slides"></app-carousel>
</div>
</div>
And the carousel component looks like this:
<div class="container">
<div class="row">
<div class="col">
<div>
<img [src]="slide.src">
<p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
{{slide.text}}
</p>
</div>
</div>
</div>
</div>
As you can see it's really simple. Right now there is no styling other than the little bit in the p tag which is to center the text in the image. This is not working properly now, because I think I've lost the container whilst trying out different solutions. I don't like CSS because I'm not used to them and I like to see the styles where they belong so I can understand better. But feel free to suggest a CSS solution if necessary.
So the question is simple: how can I make the image always fit the screen and not spill downwards?
Thanks
Did you try the object-fit property?
object-fit: cover;
If your image aspect ration is good, it shows the entire image.
object-fit: contain:
This shows the entire image, but if the aspect ratio is not good, it shows blank spaces around the image.
Thanks SureN.
I tried both of these but they didn't work. Perhaps they would do if I knew how to use them better.
In the end the following more or less worked for me, in the img tag:
style="max-width: 100%; max-height: 100vh; display: block; margin-left: auto; margin-right: auto;"
It's not perfect but it'll do for now!
I want to incorporate an image that sits on top of an existing image (and maybe straddles two different divs. In general, I would just like to see what general html structure you'd suggest -- and any CSS rules I should include. I've spent hours trying to replicate the structure I wanted -- but after inspecting elements and trying to de-construct and re-construct I was unable to produce anything close to what I wanted.
Also, in the example provided below -- I noticed the overlapping image was placed inside a span tag. Any idea why? If you could just roughly describe how you'd approach this kind of design -- that would be awesome!
This is a pretty neat effect. This is one way out of multiple you can do.
The trick is to have a fixed height on your div with background, and inside it, another div that contains the image.
I've tried to keep height/widths pretty small so you can check them correctly on the embedded snippet. I've tried to keep styles as minimal as possible to recreate what you asked for.
Let me know if something like this does the job.
.first-image{
background: #eee;
height: 250px;
}
.container{
width: 95%;
margin: 0 auto;
max-width: 400px;
}
.container--padding{
padding: 1rem 0;
}
.second-image{
margin: 2rem auto;
}
<header>
<div class="first-image">
<div class="container container--padding">
<h2>I'm the cool title headline.</h2>
<button>Download</button>
</div>
<div class="second-image">
<div class="container">
<img src="http://placehold.it/400x190" alt="placeholder" />
</div>
</div>
</div>
</header>
In the example you're referring to, the images are not <img /> tags but <div /> overlapping on top of each other. Both of these <div /> have a background image.
There are multiple solutions to make 2 <div /> overlaps, you could use absolute positioning, float, negative margins, having the background in a parent <div /> with a height greater than the height of the background image, etc.
For example, using negative margins, if I have 2 <div /> following each other like:
<div class="bg1"></div>
<div class="bg2"></div>
I could simply add a negative top margin to the second one to make it appears on top of the first one to give an illusion of overlapping like:
.bg2 {
margin-top: -40px;
}
You can check an example using negative margin on this JSFiddle.
I dont have any HTML or CSS experience, so pretty much coding illiterate.
The issue I am having is the Paypal logo that I have inserted on my Bigcommerce site, stays static in the same position as the Homepage. So if I am on a product page it creates a gap between the last line of the page and paypal logo.
http://www.mariamseddiq.com/ -> Paypal logo is in the correct position
http://www.mariamseddiq.com/bridal/ -> theres a big gap between the last line of this page and the botton of the page.
Heres the Footer code:
<div id="ContainerFooter">
<div class="Center">
<div id="FooterUpper">
<div class="Column">%%Panel.FooterCategoryList%%</div>
<div class="Column">%%Panel.SideShopByBrand%%</div>
<div class="Column">%%Panel.HomeRecentBlogs%%</div>
<div class="Column NewsletterColumn">
%%Panel.SideNewsletterBox%%
%%Panel.SocialLinks%%
</div>
</div>
<div id="Footer">
%%Panel.PagesMenu%%
<p>Copyright %%GLOBAL_Year%% %%GLOBAL_StoreName%% : %%SNIPPET_SitemapLink%%</p>
https://store-mc6v042j.mybigcommerce.com/product_images/uploaded_images/paypal-logo-transparent1.png "style="width: 150px; margin-left:750px;position:absolute; top:2100px;">
%%GLOBAL_AllPricesAreInCurrency%%
The problem is the combination of position:absolute; and top:2100px. The absolute attribute tells the browser that the item you are positioning will be positioned in a fixed position relative to it's parent. The top:2100px tells it to position it 2100 pixels from the top of the parent. Instead of positioning it this way try to position it within a box (such as a div) below the element where you want it to display.
Edit: Just by using the Chrome browser tools I disabled both of those css elements and the logo appears where it should. Try just removing position:absolute;top:2100px;
The issue is, you have 2 line break <br> and on image you have style position:absolute; top:2100px. Just remove these two line breaks, and also style position:absolute; top:2100px. and place margin-top to fix the position.
<br>
<br>
<img src=" https://store-mc6v042j.mybigcommerce.com/product_images/uploaded_images/paypal-logo-transparent1.png "
style="width: 150px; margin-left:750px;position:absolute; top:2100px;">
Change it to
<img src=" https://store-mc6v042j.mybigcommerce.com/product_images/uploaded_images/paypal-logo-transparent1.png "
style="width: 150px; margin-left:750px; margin-top: -50px;">
css changes :
position:relative; top:-90px;
try this , i meant in both the pages
Add position:relative to the footer div and set the top:2100px from the image to top:15px or what else you like.
I want to know if its possible to made appear the main content to the left and the header to the right BUT the HTML is like that
<div id="header" style="float:right; height:1000px; width:60%;">
head
</div>
<div id='main' style ="float:left; height:1000px; width: 40%;">
main
</div>
I already try that but it doesnt work
By the way, the header absolutely needs to be first.
Thank you
jsfiddle everything is working as you needed. But I would add after these blocks blank div with style clear to further avoid problems with the following blocks.
Or may be you want this? jsfiddle
I have a div i would like to make clickable. I know i need to make the div (and?) the link have a fixed width and height + display: block. I have an image inside of the div. It seems like the 'clickable' div is actually a large transparent link and this click does not play well with images as it doesnt share space. I need to right click the image and hit save as.
So how do i make the div clickable. I tried setting the img width and height but it made the img stretch.
You can set the <a> tag to fill the entire parent. Example:
<div>
<a href="..." style="display: block; height: 100%">
<img src="..." alt=".." />
</a>
</div>
and the entire <div> will be clickable.
To actually make a div into a link you have to use Javascript but from reading more into your question I'm not quite sure this is what you are asking. But if you ever do need to make a div into a link here it is.
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
It would be great if you could provide your markup so that we can see what you are seeing.
Thanks,
This answer is wrong! It doesn't pass HTML. I'm only keeping it up here so that other people can see it and know that it is not the answer to the question. (in case someone else had the same idea to this answer)
Why not just do something like
<a href="...">
<div>
<img src="..." alt="..">
</div>
</a>