I have an image floated to the left of a banner area which is taller than I want the banner to be, this is to leave room for the text to grow without the image cutting off.
When I apply overflow: hidden to .banner the banner clears the image instead of cutting it off.
I understand why this happens but I have been trying to figure out a way to get the desired effect to no avail. See the desired effect below.
I have tried various things like putting the image with a div and applying overflow: hidden to that but I can't seem to get it to work.
I'm sure that the answer is staring me right in the face but I'm just not seeing it.
I have uploaded my code to a JSfiddle for you (with a much smaller image so you can see the effect in the result window)
Thanks in advance.
Here i updated your JSFiddle so you can see the result.
You have to take the image out of the Textflow with position: absolute;.
With this, the image gets cut off, if the text is not high enough to show it all.
You could do it like this, if you know the width of the image: http://codepen.io/pageaffairs/pen/EcJAK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.banner {
margin-top: 35px;
background: #f00;
overflow: hidden;
position: relative;
}
.banner img {
position: absolute; top: 0; left: 0;
}
.caption {
margin-left: 230px;
padding: 20px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="banner">
<div class="image">
<img src="http://placehold.it/220x300" alt="" />
</div>
<div class="caption">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores dicta est, iure libero molestias pariatur. Aperiam aut autem consequatur, deleniti et eum minus nihil perspiciatis provident qui repellendus veniam voluptatem. Aliquid assumenda atque consequatur cumque nesciunt sequi. Adipisci autem cumque iste itaque laudantium necessitatibus optio possimus quam sint vero!</p>
</div>
</div>
</body>
</html>
There are 2 options you could go for:
1 . Apply the float to the image's DIV instead the image itself, and limit the DIV's height to the wanted minimum height.
Example:
.image{ float:left; height:1px; }
JSfiddle example: http://jsfiddle.net/z3zfx7uv/
2 . Get rid of the image and it's DIV altogether and use background-image instead, with appropriate padding-left.
Example:
.banner {
margin-top: 35px;
background: #f00 url(http://placehold.it/220x300) top left no-repeat;
overflow: hidden;
padding-left:220px;
}
JSfiddle example: http://jsfiddle.net/b6zzbowh/
Related
Hello I have a parent flex box and 2 childs with 100% width.
<div class="wrapper">
<app-user></app-user>
<div class="text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus
laboriosam incidunt necessitatibus optio id cumque velit nam deserunt
dolorem. Dolorum asperiores corporis reiciendis veniam, porro temporibus
obcaecati distinctio illo. Nihil.
</div>
</div>
My margin in <app-user> not working , due to the 100% width of parent. I need to fix the 100% width of my .sidebar element to keep the width and also I need a margin to take .text little bit away from my first element
link to code
app-user
<div class="sidebar">
sidebar
<img
src="https://cdn.oneesports.gg/wp-content/uploads/2020/07/Dota2_InvokerHeader-1024x683.jpg"
alt=""
/>
</div>
css
.wrapper {
display: flex;
}
.sidebar {
max-width: 400px;
width: 100%;
margin-right: 32px;
}
.sidebar img {
width: 100%;
height: auto;
}
UPD 1
If I move styles from .sidebar directly to app-user in browser it works perfect , but I dont want to use :host styles in css. As in produciton I have a big project
You can use calc() function documented here :
https://developer.mozilla.org/fr/docs/Web/CSS/calc()
So you can remove the margin from your .sidebar class
and add this css lines to your app.component.css :
.wrapper .text { width: calc(100% - 32px); margin-left: 32px; }
And here is your link code that I modified
.feature {
position:relative;
left:50%;
}
<p class="feature">This is super cool feature..</p>
The above code causes the following: text gets centered, but the scrollbar appears horizontally. This makes me think that the width of feature paragraph still stays the same and that's why it goes beyond the viewport.
If I change the position to absolute, it doesn't go beyond the viewport anymore.
Why does this happen ? If we say that absolute positioning means that it's not part of the flow anymore, this answer wouldn't be enough. It mightn't be part , but still, width is the same, so it should be going beyond the viewport too as it happens for relative.
I think your problem might be resolved, if you add border to the ".feature" element. in the below you could see that when we set "position:absolute" to ".feature" tag, the width of it reduces to its content:
.feature {
position:absolute;
left:50%;
border: 3px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>positions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="feature">This is super cool feature..</p>
</body>
</html>
but you may say that if we have a longer text inside the ".feature" tag, it also does not go beyond the viewport. like this:
.feature {
position:absolute;
left:50%;
border: 3px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>positions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="feature">This is super cool feature.. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, perspiciatis aliquam deleniti atque sunt labore modi aperiam accusantium et, tempore quibusdam, nemo dolores necessitatibus nobis rerum accusamus illum asperiores quam nesciunt tenetur velit ipsa vel mollitia at assumenda? Recusandae et, molestiae totam officiis labore ab temporibus fugit odit corporis cum.</p>
</body>
</html>
in response to that I think the tag with the "position:absolut" is limited to the boundaries of its nearest parent with non-static position. so if we add a ".parent" to the html file you could understand that the ".feature" tag is always limited to it. and if the ".parent" goes beyond the view the ".feature" also goes beyond the view.
.feature {
position:absolute;
left:50%;
border: 3px solid #000;
}
.parent {
position: relative;
left: 50%;
border: 2px solid #f21;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>positions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<p class="feature">This is super cool feature.. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, perspiciatis aliquam deleniti atque sunt labore modi aperiam accusantium et, tempore quibusdam, nemo dolores necessitatibus nobis rerum accusamus illum asperiores quam nesciunt tenetur velit ipsa vel mollitia at assumenda? Recusandae et, molestiae totam officiis labore ab temporibus fugit odit corporis cum.</p>
</div>
</body>
</html>
“Absolute positioning” is just like relative positioning, but the offset is relative to the entire browser window instead of the original position of the element. Since there’s no longer any relationship with the static flow of the page, please look at normal flow
Normally, block-level elements per default take up the full available width of their container element. However, when you set position: fixed or absolute the element isn't displayed in the same sense as with the rest of the elements.
according to MDN:
A block-level element occupies the entire space of its parent element (container), thereby creating a "block."
As such, the meaning of the container for a block-level element makes alters when refering to absolute or fixed positioned elements. It makes more sense to rather call it the parent.
Since there is no container element to inherit its width, you're seeing it behave more like an inline-block-type element if you inspect it you will see my explanation coming into hand.
EDIT:
if you want to see how absolutely positioned element's width is calculated
Look at W3C
paragraph default is display:block and take 100% width. Change to position absolute or change width of this .feature
The parent of .feature has a set position in css?
Absolutely or relatively positioned elements don't occupy its initial space in the document, so other elements behave as if it wasn't there.
I need this behavior, but with a sticky element.
I hope the code explains it all:
(also have it on JSFiddle)
const myDiv = document.querySelector('#container');
const tooltip = document.querySelector('#tooltip');
let showTooltip = false;
myDiv.addEventListener('click', () => {
showTooltip = !showTooltip;
if (showTooltip) {
tooltip.classList.add('shown');
} else {
tooltip.classList.remove('shown');
}
})
#container {
height: 19rem;
overflow-y: scroll;
}
.info {
background: lightblue;
padding: .5rem;
}
#tooltip {
background: gray;
position: sticky;
bottom: 0;
margin: 0 2rem;
opacity: 0;
padding: 1rem;
}
#tooltip.shown {
opacity: 1;
}
<div id="container">
<div class="content info">
Click in this div to hide/show the tooltip.
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
</div>
<div id="tooltip">
This tooltip should not occupy its initial space at the bottom of its parent div...
<br><br><br>
But yet its space is taken into consideration. Scroll down to see...
</div>
</div>
Note: using 'display' instead of 'position' as suggested in answers also doesn't work. It does prevent the tooltip of occupying space when not displayed, but when displayed it's space is still taken in consideration...
I'm afraid I don't have a sample but I was able to achieve this with something like:
.sticky-element
{
position: sticky;
height: 0px;
overflow: visible; // not strictly needed
}
.content
{
position: relative;
top: -100%; // or calc(-20px - 100%) to add margin
}
Then:
<div class="sticky-element">
<div class="content">
....
</div>
</div>
In other words, the actual sticky element has a height of zero so it takes up no space, and you shift up the content by its own height.
The best thing about this is it doesn't require you to know the height of the sticky element.
There may be some side effects but it's working OK for my needs.
I think if you switch between
display:none;
and
display: block;
rather than opacity. Then the initial white space that is being occupied at the end will not appear.
You are using opacity: 0;
to hide your element.
Where it might sound like a cool idea, the element is still there, just transparent. Think of really polished window in real life. You might never acknowledge the window, but it is still there and is taking space, and if you are unaware you might crash into it and harm yourself really bad.
The better idea would be to just get rid of it for the time being:
#tooltip {
display: none;
}
#tooltip.shown {
display: block;
}
Here is working JSFiddle:
https://jsfiddle.net/dyabgve5/26/
EDIT:
I found out what you mean. I think you should override #container divs, because they are interfering with your sticky class divs.
Or.. you can try moving that sticky class behind container like this (it works):
</div> - end of div container
<div id="tooltip">
This tooltip should not occupy it's initial space at the bottom of it's parent div...
<br><br><br>
But yet it's space is taken in consideration. Scroll down to see...
</div>
Working JSFiddle: https://jsfiddle.net/83k1xwt5/29/
I have an absolutely positioned container that I need to make a responsive square of based on its height (not width, so the padding-bottom trick won't work).
So far I've been using a square image inside the container to keep its proportions:
https://codepen.io/Deka87/pen/xrXgoK
HTML:
<div class="relative">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores placeat eius cum non eum suscipit, facilis nulla, porro, quasi voluptate quaerat amet vitae, illum quam omnis. Placeat, fuga excepturi tempore?
<div class="absolute">
<img src="square.png" alt="..." />
</div>
</div>
SCSS:
.relative {
position: relative;
}
.absolute {
position: absolute;
top: 0; bottom: 0; left: 0;
background-color: fade-out(green, .5);
> img {
height: 100%; width: auto;
}
}
which works fine in Chrome, but NOT Firefox, which is the issue I am addressing.
For some reason Firefox ignores the content of the absolutely positioned element and sets its width equal to 0 unless different is specified (which might be even more intuitive though).
Any help would be highly appreciated!
PS: Below is a screenshot of the green rectangle I am after:
It is what it looks like in Chrome and how I was hoping it to look in Firefox (and Safari).
Google wasn't giving me anything helpful :(
I'm after a way of having an image have a 100% width, and a fixed height, say, 400px, and not stretch horribly, and instead of stretching, zoom in?
I think I'm after something not dissimilar to what backstretch does, but not for full screen backgrounds.
I think this video kind of shows what I'm after in a few instances (I think the eagle picture shows what I'm looking for) http://www.teehanlax.com/resources/img/story/medium/prototypes/feature-header.mp4
100% width picture, that's a fixed height, that shows a cropped image, and that scales with the browser.
http://jsfiddle.net/XcYfS/2/
<style>
img {
width: 100%;
height: 400px; }
h1, p {
width: 80%;
padding-left: 10%; }
</style>
<img src="http://placekitten.com/200/300" alt="">
<h1>Interesting Title!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam culpa obcaecati numquam iusto recusandae totam voluptatibus temporibus ipsum quasi. Nesciunt maiores sequi quis consectetur labore asperiores eaque hic ipsa!</p>
To avoid Distortion i think its best to use jQuery for this.
You can use jQuery Supersized plugin for this. It's one of the famous plugins mostly used on sites with grounds covering 100% of the width.
Here's the link for the site - http://buildinternet.com/project/supersized/
Try this one. Click Here for Preview
I have edited your sample code
HTML:
<div class="wrapper">
<img src="http://placekitten.com/200/300" alt="" />
</div>
<h1>Interesting Title!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam culpa obcaecati numquam iusto recusandae totam voluptatibus temporibus ipsum quasi. Nesciunt maiores sequi quis consectetur labore asperiores eaque hic ipsa!</p>
CSS:
div.wrapper{
display: inline-block;
width:500px;
height:400px;
border:1px solid red;
overflow:hidden;
}
img {
width: 100%;
height: auto;
}
h1, p {
width: 80%;
padding-left: 10%;
}
The parent element of your image should be display:inline-block; and the width will be the width of your img.
if you want to position the image, lets say you want to show the center of the image, just add a negative margin-top to the img. Click Here for Preview
img {
width: 100%;
height: auto;
margin-top:-100px;
}