For responsive images, I am using the CSS properties background-image and background-size. This allows the image to automatically resize when the browser window is resized. The problem is, content below the image is not also resizing. For example, in this set up I have an image above a paragraph of text:
<div class="container">
<div class="image></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula lacinia, eleifend risus nec, adipiscing magna. Integer egestas fermentum lectus, ac bibendum diam faucibus eu.<p>
</div>
For the CSS I have:
.container {
width: 50%;
}
.image {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 100%;
height: 350px;
}
When the browser is adjusted, the image also is adjusted but since there is a set height to the image (350px), a gap forms beneath the image and the paragraph. Are there some CSS changes I can make that will allow the paragraph to stay directly under the image when the image is resized?
Here is a jsFiddle example http://jsfiddle.net/qKGt9/
You should not be using an image as a background if you want text to flow around it. Responsive design techniques will typically employ this trick to IMG elements:
/* Responsive image CSS */
img {
width: 100%;
height: auto;
}
I've forked your fiddle for a working example:
http://jsfiddle.net/WDFBR/
It requires some slight changes to your HTML structure and CSS. The main thing is that I'm using an IMG element instead of a DIV to display your image. Take a look at the goods under the hood of popular frameworks like Twitter Bootstrap and you'll learn a lot about good responsive design.
Does this fit the requirements?
.image {
background: url('http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1') no-repeat;
background-size: 100%;
padding-top: 66.667%; /* holds 3:2 aspect ratio */
}
Fiddle
<div class="container">
<div class="image>
<img src="image path" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula lacinia, eleifend risus nec, adipiscing magna. Integer egestas fermentum lectus, ac bibendum diam faucibus eu.<p>
</div>
</div>
try this..
Put the actual image in the html code, and set the universal width of img elements to fill 100% width of their parent containers:
HTML:
<div class="image">
<img src="http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1">
</div>
CSS:
img {
width: 100%;
}
Fiddle:
http://jsfiddle.net/philsinatra/qKGt9/3/
Here is your 100% solution:
Follow below URL, I have just recently answered on the same question.
Responsive CSS background image - how to make content follow
If need more help, most welcome :)
Related
I'm using the AG Grid Community for angular with Material and I'm facing the following issue with the column filter popup panel:
It's all fine when the filtered rows are more than 4 or 5 rows as the panel shows properly without cutting off. However, when the number of filtered rows gets fewer than 2 or even 3, the panel gets truncated. I have inspected the element and tried to find the selector for it but I can't seem to get the z-index set properly. I'm also hesitant to mess around with the overflow properties as the documentation sort of advises against it. The selectors I've tried to override in my styles.css (global) are ag-filter and ag-menu as well as ag-filter-body-wrapper - all to no avail.
I've read the documentation and there's no configuration for this as well. Is there some sass variable or something that I should be overriding instead?
Thanks in advance.
That behavior it is because the filter is showing within the container. Try setting the css position of the filter to fixed. This should allow to the filter to show over the container.
See this plunkr for more info
there is a div outer, like your table wrapper, and a box aka your filter:
CSS:
.box {
width: 100px;
height: 100px;
background: red;
color: white;
}
#one {
position: fixed;
top: 255px;
left: 10px;
background: blue;
}
.outer {
width: 500px;
height: 300px;
overflow: scroll;
padding-left: 150px;
}
HTML:
<div class="outer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
</p>
<div class="box" id="one">One</div>
</div>
As you can see, the div is showing over the container.
Update 2022: I had the same problem with a newer version of AG Grid, and while trying to solve it I first found this thread. Actually the solution to this problem is described in the AG Grid documentation: You can use popupParent and set it to the body Element as described here:
https://ag-grid.com/angular-data-grid/context-menu/#popup-parent
I am trying to create a zooming effect on image on screen resize that is working as on attached image example.
So first I want it to looks like the image was cut-out from the right side (but with remaining height), and then after I want to zoom-in image from all sides. Can someone suggest how can I create this effect?
I know for zooming in I should use:
transform:scale(1.5);
-ms-transform:scale(1.5); /* IE 9 */
-moz-transform:scale(1.5); /* Firefox */
-webkit-transform:scale(1.5); /* Safari and Chrome */
-o-transform:scale(1.5); /* Opera */
It doesn't have to do with zoom-in effect, it's more about responsive design. I don't think there is a perfect solution here, it'll depend on the content you will have on your page and on the image you want to use as a background. Without any media query, you take a look at my solution here: https://jsfiddle.net/9htcmus7/
HTML:
<div class="container">
<div class="content">
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat, risus vitae aliquet consequat, eros tortor tincidunt lacus, in mollis mi est id tellus. Nulla id odio nec tortor vestibulum suscipit non id metus.
</p>
</div>
</div>
CSS:
.container {
width: 100%;
box-sizing: border-box;
padding: 10vw 20vw;
background-image: url(http://weknowyourdreams.com/images/mountain/mountain-04.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center 25%;
}
.content {
font-family: sans-serif;
line-height: 2;
color: white;
width: 25em;
max-width: 100%;
}
h1 {
font-weight: 300;
}
I have a div that sits centralised on the page which has text with an image aligned to the right, as shown below. The problem I'm experiencing is getting the image to slide into view from the right when the user scrolls down and brings the region into view.
I'm able to change the opacity successfully but I'm not able to get it working for how I need, i.e. moving the image from right to left by 50 pixels.
I'm experimenting with the skrollr library. Any suggestions where I'm going wrong please?
Many thanks,
James
code example
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lorem felis, ultricies vitae justo sed, rutrum sagittis quam. Cras sodales metus odio, eu rhoncus elit commodo a
<img src="test.png" align="right" />
</div>
CSS for the div
div {
position: absolute;
left: 50%;
padding: 20px;
margin-left: -485px;
width: 970px;
}
JS
var s = skrollr.init();
you need to give your image the skrller data, something like:
<img style=opacity:0 class="skrollable unrendered" data-bottom-top=right:400px; data-top=right:0; alt="" />
Of course you'll need to adjust to your needs, but the point is that for EVERY element you need to apply the Skrller behavior, you need to give it some data
I'd like to code html+css to achieve result as shown on attached image: .
I mean the coding part with text and arrow box. Putting just position absolute is not an answer, cause I need text to float round the arrow box. Is there any way to do that?
I've alredy tried putting all kinds of floats on box and paragraf tag with text. Placing arrow box before, after and in paragraf tag. Also tried using vertical-align and position on arrow box.
Fiddle to play with:
http://jsfiddle.net/K2S5y/1/
<div class="content">
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas males elit lectus felis, malesuada ultricies. Curabitur et ligula.</p>
<div class="arrowMore">arr</div>
</div>
.content{width:170px;height:170px;border:1px solid red;}
.arrowMore{background:blue;width:70px;height:70px;}
Use clear:both ex.
<div style="float:left; width:300px">
<img/>
</div>
<div style="float:left; width:300px">
Text text text
</div>
<div style="clear:both"></div>
you can see the live example here:
http://webdesign.about.com/od/examples/l/bl-css-float-examples.htm#floating
#arrow {
float: right;
}
/* then possibly */
#arrow:after {
content: ' ';
display: block;
clear: both;
}
I have 2 divs that are side by side. They are both closable via jquery. When they are both visible, they have a fixed width, but when one is closed, I want the remaining div to expand to eat up the width that the closed div used to take up. Is there a way to do this using just CSS (aside from the close button), or do I have to resort to javascript?
The only method I could see for solving this with CSS would be to add classes to the containing element:
<div id="container" class="left|right|both">
<div class="left"></div>
<div class="right"></div>
</div>
Style the contents depending on what the parent class is. If left is the class, you give the first div a non-restricted width and hide the second div. The same goes for right and the second div. When the parent is both, you give both divs 50%.
All your JavaScript would need to do is handle which class is currently applied to the container.
You need to atleast write one line of javascript for this and then you can use css for the effect.
Using jquery, toggle a class to the parent of divs whenever you click on the close. Find the jquery code for the click on the close button and add
$("#parent").toggle("classname");
Use css like
#parent div { width: /*fixed*/100px; }
#parent.classname div { width: 100%; }
Does something like this work?
HTML:
<div id="parent">
<div class="right">div2</div>
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div>
</div>
<br />
<button id="remove">Remove Div 2</button>
CSS:
#parent {
overflow: hidden;
border: 1px solid red
}
.right {
float: right;
width: 100px;
height: 100px;
background:green;
}
.left {
overflow: hidden;
height: 100px;
background:red;
}
JS:
$('#remove').on('click', function() {
var div2 = $('.right')
//div2.hide('slow'); // you could hide it as well
div2.remove();
});
Example:
http://jsfiddle.net/9Q86Y/
Edit
You could mimic tables by using
display:table
and
display:table-cell
See: http://jsfiddle.net/DUx3W/ (hat tip: #Jimmy Breck-McKye).
My original table fiddle: http://jsfiddle.net/6KkRL/