Hi I am trying to develop a web page. In that I am supposed to place an image at the center of the page. Below that image I placed an div so that by clicking on that div certain items will be displayed.My problem is that when the size of the window reduced the image will become responsive,but not that div. I want to make both of them responsive.Here is my code
index.html
<div class="container">
<div class="row">
<div class="col-lg-12" style="top:-125px;">
<img id="i1" class="img-responsive" src="img/2.png" height="600" width="600" alt="">
<div style="padding-left:45%;top:-250px;">
<div id="triangle-up"></div>
</div>
</div>
</div>
</div>
this is my css
#triangle-up {
position: absolute;
bottom:0;
left: 46%;
padding: 5px;
width: auto;
height: auto;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 67px solid grey;
}
.container
{
position: relative;
}
Please help me to solve this issue..
Use CSS to set up width of your div to 100% and max-width as pixels amount that you don't want your div to grow any larger than.
Related
I have an image inside a div container that's inside another container like so:
<div className='container'>
<div className='imageContainer'>
<img src='whatever' />
</div>
</div>
I want the imageContainer to stay within the container, but keep the image inside that container to the same size.
I added css so now when the screen's width decreases, the image slides out of frame.
.imageContainer {
border: 1px solid black;
width: 100%;
overflow: hidden;
}
Before I added this css the image would shrink in size to fit inside the imageContainer which is fit inside the outer container.
Is it possible to have the image stay in place inside the container and not shrink in size or width, rather just be cut off on one side?
For example if I would decrease the screen width the image's lefthand side would stay in place while it's righthand side is continuously cropped.
I couldn't find anything to help with my particular css issue, so if anybody knows a solution that would be greatly appreciated.
.imageContainer {
border: 1px solid black;
width: 100%;
overflow: hidden;
}
<div class='container'>
<div class='imageContainer'>
<img src='https://via.placeholder.com/2560x1440' />
</div>
</div>
Check if you added your overflow: hidden in correct place
.imageContainer {
border: 2px solid purple;
padding: .3rem;
width: 100%;
}
.container {
max-width: 600px;
border: 2px solid red;
padding: .3rem;
}
.container--crop {
overflow: hidden; /* add overflow: hidden to upper parent container */
}
<p>Not cropped</p>
<div class='container'>
<div class='imageContainer'>
<img src='https://dummyimage.com/700x400/000/fff' />
</div>
</div>
<p>Cropped container</p>
<div class='container container--crop'>
<div class='imageContainer'>
<img src='https://dummyimage.com/700x400/000/fff' />
</div>
</div>
Add height to your css:
.imageContainer
{
border: 2px solid black;
width: 100%;
height:100px;
overflow: hidden;
}
Check the link: jsfiddle.net/majidliaquat/zfqjxd35/8
Context:
I am trying to create 3 charts on 1 row (each has a minimum width) such that on window resize, the charts should also resize and may go to next row depending on the browser total width.
Problem:
Currently, I am missing something in the css because the chart is overflowing within the demo container below. The tooltip looks fine, but only half of the chart is seen in the container and both the axes are also hidden.
Has someone implemented something similar before? I want to understand how to load the charts in the div.
P.S. In the code below, highcharts-container is the inbuilt div which contains the charts. I am using the latest version of Highcharts and Angular 7.
My current html code -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options1" [callbackFunction]="cb1">
</highcharts-chart>
</div>
</div>
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options2" [callbackFunction]="cb2">
</highcharts-chart>
</div>
</div>
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options3" [callbackFunction]="cb3">
</highcharts-chart>
</div>
</div>
</div>
</div>
My css code (The main part) -->
.container-fluid{
width:100%
}
.demo{
margin: 20px 0;
min-width: 448px;
}
.demo-container{
position: relative;
border: 1px solid transparent;
box-shadow: 0 0 20px #1793f5;
width: 100%;
height: 100%;
}
.highcharts-container{
height: 100% !important;
width: 100% !important;
display: inline-block;
vertical-align: middle;
}
You could try to include the following CSS as a part of demo-container or container-fluid... one of it should do the deal for you.
height: 100% !important;
width: 100% !important;
Update
one of the harder challenges i have encountered, but add this to the style.css
and you have your contents dynamic inside its container.
.highcharts-background, .highcharts-root, .highcharts-container {
max-height: 100%;
max-width: 100%;
}
is this what you are looking for?
This was made using images of the graphs in the links you posted. I also used flexboxes which seems to be what you are looking for.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container-fluid div {
width: auto;
border: 2px solid red;
min-width: 33%;
}
.container-fluid{
display: flex;
flex-wrap: wrap;
border: 2px solid blue;
justify-content: center;
}
<div class="container-fluid">
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
</div>
I want to make the following element.
Basically an image in top of a page layout, and then a box on top of that image, containing a header and some more text.
But, what is the most optimal way of doing this in regards to responsiveness. I imagine something like the following markup
<div class="header">
<img src="myimage.png" alt="" />
<div class="text">
<h1>Header</h1>
<p>Lorem ipsum</p>
</div>
</div>
And then set .header to position relative, img to max-width of 100%, and .text to position absolute, bottom: -50%, left: 10% etc.
But this does not scale well, and absolute position seems to me, to be a bit invalid in regards to responsiveness. Also, there is content below the element, that should move accordingly to the amount of text, in the text element. If if is positioned absolute, that gets more tricky to manage.
Any ideas to another approach?
Try this:
img {
border: 2px solid black;
}
#container {
position: relative;
}
#example {
position: absolute;
top: 10px;
left: 10px;
padding: 5px;
background-color: white;
border: 2px solid red;
}
<div id="container">
<img src="http://i34.tinypic.com/4tlkci.jpg">
<div id="example">This is my div</div>
</div>
Currently I can not find a solution that is responsive and scrollable to put text on an image. I need the height to be flexible and the width at 100%. I tried to use position:relative; and css background images with no luck. When I use position: relative; there is a space at the top of the image and the only way to delete it is negative margins which I think is not sustainable it there are multiple posts. css backgrounds does not show the full image unless you set dimensions and when is responsive you cant set dimensions. I dont think I can use position absolute because it would not scroll. so I dont not know what to use.
I have this HTML code here:
<div class="post">
<span><a>Posted By Adam</a></span>
<img width="100%" src="uimg/adam-levine-600.jpg">
</div>
Use position: absolute; and add a spacer for the nav:
http://jsfiddle.net/ryanpcmcquen/p3bes5xq/
.nav {
height: 100px;
width: 100%;
position: fixed;
background-color: #21A7F0;
text-align: center;
z-index: 10;
color: #ffffff;
}
.spacer {
height: 105px;
}
.post span {
position: absolute;
color: #ffffff;
text-shadow: 1px 1px 2px #000000;
}
.post img {
width: 100%;
}
<div class="nav">nav bar</div>
<div class="spacer"></div>
<div class="post"> <span><a>Posted By Adam</a></span>
<img src="//fillmurray.com/880/450" />
</div>
<div class="post"> <span><a>Posted By Adam</a></span>
<img src="//fillmurray.com/880/260" />
</div>
<div class="post"> <span><a>Posted By Adam</a></span>
<img src="//fillmurray.com/880/194" />
</div>
I'm working on a photo gallery that is dynamically generated, photos will be different sizes, and each photo will have a DIV overlapping the image, on the same baseline as the image, that will contain "user menu" items related to that photo. (blue box below)
I'm having trouble getting the "user menu" div to position on top of the image. This div needs to be centered, and on the same baseline as the image, regardless of image size (not sure how to do this with absolute positioning)
I've seen suggestions to use CSS background-image, but I don't see that as a good option with dynamically generated content. I've seen a suggestion to position the image absolutely, and this does work except the parent DIV collapses and makes positioning other items on the page a nightmare. There are quite a few post that I've read through on stackoverflow, but I haven't found one that addresses or solves this particular issue.
This is an example of what I'm trying to accomplish. The blue boxes are the user menus, and should be centered on the baseline of the images.
I've tried 2 things, this doesn't seem to work with parent DIVs since the images are removed from flow and spacing gets screwed up as the parent DIVS collapse. http://jsfiddle.net/3d3m1x9k/
CSS
.box1{
position:relative;
display:inline-block;
background-color:orange;
border: 4px solid black;
}
.box2{
position:relative;
top:80px;
left:80px;
margin: 0 auto;
padding: 5px;
background-color: red;
border: 2px solid red;
}
HTML
<div class="box1">
<img src="http://i60.tinypic.com/33n947o.jpg" style="position:absolute;"/>
<div class="box2">box</div>
</div>
<div class="box1">
<img src="http://i60.tinypic.com/33n947o.jpg" style="position:absolute;"/>
<div class="box2">box</div>
</div>
This works better, but I can't get the box to center properly unless I use javascript to position the "user menu" DIV since the image widths are dynamic. (javascript isn't out of the question, just trying to first find a proper way using CSS)
https://jsfiddle.net/vv5rtkqz/
CSS
.box1{
position:relative;
display:inline-block;
background-color:orange;
border: 2px solid black;
}
.box2{
position:absolute;
bottom: 0px;
margin: 0 auto;
padding: 5px;
background-color: red;
border: 2px solid red;
}
HTML
<div class="box1">
<img src="http://i60.tinypic.com/33n947o.jpg"/>
<div class="box2">Center Me</div>
</div>
<div class="box1">
<img src="http://i60.tinypic.com/33n947o.jpg"/>
<div class="box2">Center Me</div>
</div>
You can get a simple start by using absolute positioning and a 2D transform.
.container {
position: relative;
display: inline-block;
}
.info {
background: black;
color: white;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
white-space: nowarp;
}
<div class="container">
<img src="http://shakacity.com/sites/default/files/dog_0.jpg" alt="" />
<div class="info">Contains the user controls</div>
</div>