I am trying to figure out why my div is being overlapped by other div.
the markup looks like
<div class="headerCarrousel">
<img src="data/img/1_hero_carrousel/1.jpg" >
<img src="data/img/1_hero_carrousel/2.jpg" >
<img src="data/img/1_hero_carrousel/3.jpg" >
</div>
<div class="theStory">
<p>aaaa</p>
</div>
and my style I am using sass, that's why this code structure.
.headerCarrousel {
min-width: 1024px;
}
.headerCarrousel img{
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.theStory{
margin: 0 auto;
text-align: center;
}
So the div "theStory" is underneath the div headerCarrousel for some reason, being overlapped. Note that I have to have the imagery as a fluid carrousel, that's why I am using width: 100%;
link to illustrate: http://marceloduende.com/tango/
Anybody has a solution for this problem? Thanks.
Problem solved.
To fix that I had to add my height dynamically with jquery.
$('.headerCarrousel')
.css('height', $('.headerCarrousel img').height());
Thank you all.
Related
I have been trying to develop a product page for my website and I have three angles for my product images so I wanted to create a image gallery when you go to the page. The layout I am going with and the code I have so far is at this link https://jsfiddle.net/b1g2f8dh/ . My issue is I want this to be responsive so I want the .main-image img width to shrink with the page as it collapses until it gets to a min-width in which case the .angle-images div i want to shift below the main-image div and with the thumbnails laid out horizontally. My first issue is I cannot get the main image to resize despite i have width 100%. I would have thought it would scale it down as the parent container gets smaller. The second issue is I cannot figure out how to shift the second images beneath. I am getting my positions all mixed up that nothing seems to work! I plan to figure out some javascript so when you click the thumbnail it makes it the main image but thats a problem for another day ha! Any help would be appreciated. The full implementation of my code can be found here in case that helps https://www.printperry.com/home/product-page/index.php
<div class="product-images">
<div class="angle-images">
<li>
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li>
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li>
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
</div>
<div class="main-image">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</div>
</div>
.product-images{
max-height: 700px;
max-width: 700px;
width: 100%;
display: block;
}
.angle-images{
padding:5px 0px;
width: 120px;
display: inline-block;
float:left;
max-height: 700px;
}
.main-image{
width: 80%;
height: 600px;
float: left;
margin: 10px;
}
.angle-images li{
list-style: none;
padding-top: 50px;
}
.angle-images img {
width: 100px;
float: right;
margin:5px 10px;
}
.main-image img {
width: auto;
height:700px;
}
There a couple of issues with your CSS preventing it from working as you desire. The height, width, max-width, values you have are working against each other in ways that aren't immediately apparent.
It works after making the modifications below.
Using flexbox for the layout mode makes it easy to switch between column and row layouts based on a media query.
.product-images{
max-height: 700px;
max-width: 700px;
width: 100%;
display: flex;
flex-flow: column nowrap;
flex-direction: column-reverse;
}
#media (min-width: 768px) {
.product-images {
flex-flow: row nowrap;
}
}
.angle-images{
padding:5px 0px;
width: 120px;
max-height: 700px;
display: flex;
}
#media (min-width: 768px) {
.angle-images {
flex-flow: column nowrap;
}
}
.main-image{
width: 80%;
height: 600px;
margin: 10px;
}
.angle-images li{
list-style: none;
padding-top: 50px;
}
.angle-images img {
width: 100px;
margin:5px 10px;
}
.main-image img {
max-width: 100%;
}
Like Dan mentioned in his post, there were conflicting values. One of the issue I saw, was the size of the parent container, and the child container.
I am also learning as well, and one tip I would give you is try to use border-style to help you see visually, it makes problem solving more direct and easy.It really helps when you're working with multiple div container. Then play around with what you know, and try to see how to make it fit. I decided to give a stab at this, and came up with this version. You would have to use Flex unfortunately, it just made problem solving easier. The angle and main are responsive together for now unless you were trying to make just the main responsive only, please let me know so I can take some more time later and see if I further assist you, but for now this is what I have. I hope this leads you to the right path of whatever it is you're trying to achieve.
<div class="product-images">
<div class="angle-images">
<ul class="angle-ul">
<li class="angle-li angle-li-1">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li class="angle-li angle-li-2">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li class=" angle-li angle-li-3">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
</ul>
</div>
<div class="main-Image">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</div>
</div>
* {
margin: 0;
padding: 0;
}
.product-images {
height: 700px;
max-width: 700px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: warp;
border-style: dotted;
}
.angle-images {
width: 100px;
border-style: dotted;
}
.angle-ul {
}
.angle-li img {
width: 100%;
}
.main-Image img {
height: 100%;
width: 100%;
}
Here is the html and css code:
HTML:
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
CSS:
#box1 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: left;
margin-left: 100px;
}
#box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: right;
margin-right: 100px;
}
So this shows two blocks on the same horizontal line. When I minimize the browser window by dragging the window to the left, it gets to the point where the two divs touch.
Once they touch, the one on the right goes UNDER the one on the left, but not vertically aligned. Like this:
right after touch
My question is, how can I make it so that when the boxes touch, the right div goes DIRECTLY underneath the left div and stays until I arrange the window width big enough. I want it to stay like this when they touch:
want
I couldn't find a bootstrap doc for this. I want to use the two boxes to contain a dropdown select menu (I already know how to do this). Let me know if you know of a bootstrap class that can suit my needs or a way to fix the code that I provided. I'm open to suggestions in jQuery and Js. Let me know if my question wasn't clear and I will be responding. Thank you.
This is a good time to use display: flex see fiddle https://jsfiddle.net/cvnrwo13/5/
<body>
<div class="wrapper">
<div id="box1"></div>
<div id="box2"></div>
</div>
</body>
CSS
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 100px 0 100px
}
#box1, #box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
}
For this, a good option would be to use a container with a specified width and text-align: center. Then en lieu of floats, set the boxes to be display:inline-block elements. As inline elements, they will then follow whatever text alignment their parent container specifies.
HTML
<body>
<div id="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
CSS
#container{
text-align:center;
width: 100%;
}
#container .box {
width: 300px;
height: 150px;
background-color: #75A9F9;
margin-top: 50px;
border-radius: 5px;
display: inline-block;
}
https://jsfiddle.net/qacnL2yr/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to implement a panel like following images using bootstrap:
Figure 01: side bar in full state.
The left panel will have a show/hide button.
On hide, it will slide upward to its minimum state (figure 2).
the main div container would increase in size and fill the empty space in left.
All resizes need to be with transition animation.
Figure 02: Side bar in minimum state.
Any help/tips, how can achieve that?
One way would be to use float with overflow: hidden:
.parent{
overflow: hidden;
text-align: center;
}
.panel{
float: left;
width: 20%;
background-color: #EFEF66;
}
.navigation{
float: right;
width: 80%;
background-color: #EF66EF;
}
.main{
overflow: hidden;
width: auto;
clear: right;
background-color: #66EFEF;
}
<div classs="parent">
<div class="panel">Side Panel</div>
<div class="navigation">Navigation</div>
<div class="main">Main section</div>
</div>
In the above snippet, you have it as the primary state. Now if you want the panel to stretch down, just force a height for panel:
.parent{
overflow: hidden;
text-align: center;
}
.panel{
float: left;
width: 20%;
height: 50px;
background-color: #EFEF66;
}
.navigation{
float: right;
width: 80%;
background-color: #EF66EF;
}
.main{
overflow: hidden;
width: auto;
clear: right;
background-color: #66EFEF;
}
<div classs="parent">
<div class="panel">Side Panel</div>
<div class="navigation">Navigation</div>
<div class="main">Main section</div>
</div>
Given that you are not showing what you got so far I'ts really hard to help you.
Check this codepen for a little help with the HTML structure
HTML
<div class="container-fluid">
<div class="header">
<div class="col-xs-3 header-left">
Hi
</div>
<div class="col-xs-9">
</div>
</div>
<div class="app-body">
<div class="col-xs-12 inner-body"></div>
</div>
SCSS
.header{
height: 90px;
background-color: blue;
position: relative;
.header-left{
height: 290px;
position: absolute;
background-color: red;
}
}
.app-body{
height: 200px;
width: 100%;
padding-left: 25%;
.inner-body{
height: 100%;
background-color: green;
}
}
You should be able to get to what you want starting with the code I gave you. But have In mind that my code shows the slide-down state. You'll have to add animations and JS events to achieve the effect you want.
Basically I have a fixed size div that contains an <img> tag. I cannot change the structure.
Often these images are much larger than the container due to keeping them 100% width and filling the box. Most times this results in too much of the image shown at top and not cropped to the center of the image.
So using jQuery (or pure CSS if possible) I want to adjust the position of the image to move it up so the top is cropped off instead of the bottom.
Also, this should remain responsive as the viewport changes width.
Here is a fiddle
.container {
height: 200px;
width: 100%;
overflow: hidden;
margin: 0 0 30px;
}
<div class="container">
<img src="http://placekitten.com/900/500/">
</div>
<div class="container">
<img src="http://placekitten.com/901/500/">
</div>
It's doable with known height container, like your demo. We can set the container to position:relative, and set the image to position:absolute, plus some extra set ups as follows.
.container {
height: 200px;
width: 100%;
overflow: hidden;
margin: 0 0 30px;
position: relative;
}
.container img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
height: auto;
}
<div class="container">
<img src="http://placekitten.com/900/500/">
</div>
<div class="container">
<img src="http://placekitten.com/901/500/">
</div>
jsfiddle
If you are OK with using the images as the div background, you can do the following:
Option1:
HTML:
<div class="container" id="first"></div>
<div class="container" id="second"></div>
CSS:
.container {
height: 200px;
width:100%;
overflow: hidden;
margin: 0 0 30px;
border: solid;
background-position: center center;
background-repeat: no-repeat;
}
#first {
background-image: url('http://placekitten.com/901/500/');
}
#second {
background-image: url('http://placekitten.com/900/500/');
}
Update- Option2:
without using the image as background.
HTML:
<div class="container">
<img class="centered" src="http://placekitten.com/900/500/" />
</div>
<div class="container">
<img class="centered" src="http://placekitten.com/901/500/" />
</div>
CSS:
.container {
height: 200px;
width:100%;
overflow: hidden;
margin: 0 0 30px;
border: solid;
}
.centered {
object-fit: none;
object-position: center;
width: 100%;
height: inherit;
}
Please check this option1, option2
For now I'm going to use:
$("img").each(function(){
var hHeight = $(this).height()/2;
$(this).css("top", - hHeight);
});
I would love to see other solutions, especially if they are better.
Code is right now:
HTML:
<section class="sponsorSection">
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/kvadrat_logo.png" class="sponsorpicture1"/>
</div>
<div class="sponsorImageColumn">
<img src="img/small_vertical_logo.png" class="sponsorpicture2"/><br>
</div>
</div>
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/long_vertical_logo.png" class="sponsorpicture1"/>
</div>
<div class="sponsorImageColumn">
<img src="img/logo4.png" class="sponsorpicture2"/><br>
</div>
</div>
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/logo5.jpg" class="sponsorpicture1"/>
</div>
</div>
</section>
CSS:
.sponsorSection{
width: 480px;
margin-top:30px;
border:2px solid rgba(0, 0, 0, .2);
border-radius: 5px;
}
.sponsorImageRow{
height: 50px;
}
.sponsorImageColumn{
width : 50% ;
display: inline;
}
.sponsorpicture1{
padding: 10px;
max-width: 100%;
max-height: 95%;
height : auto;
margin: 0 auto;
}
.sponsorpicture2{
padding: 10px;
max-width: 100%;
max-height: 95%;
height : auto;
margin: 0 auto;
}
Though it does not look correct:
I'm not sure, if I understood your requested positioning correctly, but if I look at your code, you want your image to be horizontal centered? Since image is an inline element per default the margin:0 auto will not be considered. Try something like this:
/* keep it as a block element, not inline */
.sponsorImageColumn {
width : 50% ;
float:left;
display: block;
}
/* and image also as a block element */
.sponsorSection img {
display:block;
}
I put together a small fiddle to demonstrate.
For more complex positioning you could have a look at the css-syntax display: table, table-row and so on, to emulate a classic table with other html elements.
Make the following change to your CSS -
.sponsorImageColumn{
width : 50% ;
float : left; /*remove display property and use float as you want to set the width*/
}
hope this solves your query