I have an issue much like this user, but I want to take it a step further and make my image have a height that responds fluidly to its container.
I made a thing to demonstrate here.
What I want to do is to give the container div class "navcont" (the grey area) a fluid height. If I take out the height, I'm unable to stack similar divs in the same column, not to mention the lovely (but obligatory) overflow:hidden hiding everything.
Very appreciative of any and all help; thanks c:
You need to do some fixes:
.subnav img{
position:relative;top:0;right:0;bottom:0;left:0;
z-index: 1000;
}
.navcont{
margin: 20px;
position:relative;
}
Related
I'm not very good with HTML/CSS. Here is the website that I'm trying to edit. I'm unsure if this should be in WordPress Stack because even though my website is in WordPress, the problem is with the CSS. Also, I'm really sorry for bad English (I know 5 languages so its kinda hard to keep up).
The problem is that the grid (Essential Grid which displays a product catalog) and the container above it are both children of one div. When I try to change the padding of my grid, It changes the padding relative to the top of the parent div rather than instead of its sibling which is on top of it.
I'm not sure what CSS properties might be affecting this(I'm not very good at CSS) but I have posted the ones which I think might be the problem. Please visit the link and inspect element (Sorry..)
.child-on-top{
//acutal id on page is featured-111
width: 99.8936px;
height: 449px;
background-size: 100% 100%;
}
.child-below{
position: relative;
padding-top: 100px;
}
.parent{
//actual id is wrapper.
position: relative;
clear: both;
}
One solution that has worked so far is if I increase the top padding to about 500 px, that would add about 50 pixels of padding above the child element thats below. But that will only work in desktop. In mobile, you will get a lot of empty space. So it isn't really a solution.
Add folowing css and then check. Your div which have id featured-111 which take floating from class grid and because of this problem create. So write this css
#featured-111{
float:none;
}
if you could take a look for a moment at http://www.acehbus.com, you could see that the screenshot image of iPhone is fully seen in the screen. I want to know how to make the half of the image overlays the next div like in the http://sociali.st. I have tried z-index but it doesn't work. Thanks you for your help.
I got through your site, and I have two things:
1) dont use images with resolution of 649x1323. Half of that size will ok .. there are many of images of this phone, and people with slower connection will die on this. And it is still used only as smaller thumbs, so large resolutions are really not necessary.
2) You use the image as itself. Use div instead and give image as its background. See this fiddle:
https://jsfiddle.net/8xhucpx8/
div.image{
width:300px;
height:200px;
background-image:url('http://www.acehbus.com/img/search.png');
background-position:top center;
background-size:100% auto;
background-repeat:no-repeat;}
You can do that using overflow: hidden first give a fixed height to the parent element of the image in your case col-md-6. So do something like.
.col-md-6 {
height: 155px;
overflow: hidden;
}
<div class="col-md-6">
<img src="http://www.acehbus.com/img/search.png" alt="" width="200px" />
</div>
First of all, you may always inspect a site with effect you want to achieve and try to apply it's approach in your project. The markup and styles are at direct access. If you noticed in the example you've provided the overlapping effect is achieved with combination of negative margins and absolute positioning. So if you play with these properties you gonna make it. I would go for something like this:
<div class="iphone"></div>
.iphone {
bottom: -100px;
position: relative;
}
Look, I made some experiments and made this fiddle
I have the following example:
fiddle: http://jsfiddle.net/yisera/yLty3552/2/
Pen: http://codepen.io/yisera/pen/KpzbQp
Where I have a flex grid and I have elements that are also display:flex;. The problem I have is that the div.card has another div, div.od-card-action which has the actions of that card, comment, upvote, downvote. However, whenever the content of one of the cards is bigger than the others, they will stretch, making the card bigger to match the biggest one on that row.
This is a desired behaviour, but the problem is the div.od-card-action will also grow (I don't want this to happen) and make the elements seem out of order like it is shown on the first card in the fiddle.
I tried:
.od-card-action{
position: absolute;
bottom: 0;
width: 100%;
padding: 10px !important;
}
but this only makes the content from the upper div overlap with the content of the actions div.
Is there a way where I can make the div.od-card-action go all the way to the bottom regardless of the size of the card and maintain the same size (eg: 50px to say a value)?
Thanks in advance!
EDIT
Here's a picture demonstration what I want to accomplish:
See how everything is aligned horizontally despite the content of the above div not being of the same size? That's what I need to achieve.
I realised that as you're already using Flexbox in .od-card, then .card-content could be set to take as much space as possible (vertically, as the flex direction is column) using:
.card-content {
flex: 1;
}
Change the od-card-action CSS back to:
.od-card-action{
position: absolute;
bottom: 0;
width: 100%;
padding: 10px !important;
}
Add new css to card-content
.card-content{
margin-bottom:50px;
}
To have a responsive design, I made this <img> to have max-width:37%;. But when I open the jsFiddle window far enough to make it wide enough, the image extends over it's containers size and won't fit anymore.
This is a screenshot I made:
But I want the overlapping sides not to be shown, like this (photo edited):
If you want to see it in action, use my fiddle.
The image should not be seen further than the boundaries of its containers are. How can I prevent that the image is bigger than its container?
I assume that you want the entire image to stay visible. So, you need to set the max-height property to 100%.
.mbox img {
max-height: 100%;
max-width: 37%;
position: absolute;
right: 0;
z-index: -1;
}
Here is a jsfiddle.
Update: Since you want the image to keep the max-width:37% you need to hide the overflown part.
I added a div that wraps the div.mbox_content and the img. I gave to this div the class mbox_wrapper. You also need to add the z-index:2 property to the <h2>.
.mbox_wrapper {
overflow:hidden;
position:relative;
}
.mbox h2 {
z-index:2;
}
Here is an updated jsfiddle.
Just need to change the z-index property
you need to apply a max-height tag to the css..
Then the image won't be able to exceed the height of the containing div.
max-height: 100%;
This is a question similar to many that have been asked before. However, with all the previous questions, the necessary widths are known. For me, the widths are unknown.
If I have two columns (primary, secondary), how would I use css such that as primary expands and contracts, secondary fills the remaining horizontal space. I would like to achieve something like the split pane effect, where the location of the split is dictated by the size of primary.
It is imperative to understand that I do not know how many pixels or how much width primary will take up, primary's size will increase and decrease.
It could be:
|----Primary----|----------------------------Secondary---------------------------|
Or:
|-----Primary------|----------------------------Secondary------------------------|
Or even:
|-------------------------Primary------------------------|-------Secondary-------|
How would I do this using CSS? Is it even possible to make an element provisionally "greedy"?
Hmmm, if you're not adverse to using it, you could apply the display:table-cell CSS property to the columns, then use width:100% on the latter one. The HTML structure would look like this:
<div class="split-pane">
<div>
Left content
</div>
<div>
Right content
</div>
</div>
And the CSS:
.split-pane > div {
display:table-cell;
}
.split-pane > div:first-child {
white-space:nowrap;
}
.split-pane > div:last-child {
width:100%;
}
Here's a JSFiddle demonstration to show you what this achieves. Note how as you add more text in a line on the left, it'll push the boundary to the right as needed. (The white-space:nowrap; is there so that the content on the left doesn't wrap on every single word.) Be advised that this CSS will not be interpreted properly on older versions of IE, if that's of concern.
If this isn't what you were looking for, let me know and I'll be happy to help further!
It is correct you can't do this with pixels, however there are other ways to define width. I think you may want to try using % rather than px in your css.
If the content of the 'sencondary' div doesn't matter, you can make some css like this:
#primary { position: absolute;
z-index: 1; }
#secondary { position: absolute;
width: 100%;
z-index: 0; }
If there is content that needs to be moved dynamically, you can move the secondary div easily with jQuery. Here's a jsfiddle with the code: http://jsfiddle.net/LZJZU/5/