I have a series of post titles that visually form a list. Upon hovering over a row in the list, a <div> containing the post content becomes visible at the right edge of the row, behaving like a flyout menu. This flyout <div> has a greater height than the row (in most cases). Its height is also variable, so it is not predictable.
See here. Scroll to the bottom.
Because this flyout <div> is absolutely positioned to the right of its parent, it achieves the desired flyout effect.
But if you scroll to the bottom of the list, you can see that the last item extends below the bottom edge of #schedule-section-container's border. I would like to correct this in the cleanest way possible.
I know this is because of the positioning. But is there a way that the same flyout effect could be achieved without guesstimating a margin-bottom? I would like to use floats, but I don't know how to get the list to keep its short height while having a flyout.
With just CSS this can be a little tricky, but I think what you're looking for is this:
.hentry:last-child > .entry-content { bottom: 0; }
That will position the last child to the bottom rather than the top, giving the desired effect without exceeding the bounds of the container. Since the last few actually exceed the bounds a bit, you could also try :nth-last-child to count from the end, like this:
.hentry:nth-last-child(1) > .entry-content { bottom: 0; } /* This is last child */
.hentry:nth-last-child(2) > .entry-content { bottom: 0; } /* Second to last */
.hentry:nth-last-child(3) > .entry-content { bottom: 0; } /* Third to last, etc */
Might need to add some more specificity to the beginning to limit it to just this page since Wordpress uses .hentry in a few places, but this should give you a good jump off point. Also, if older IE support is required, you might want to consider using Selectivzr
Related
This must have been asked before, but I can't find it...
Ignoring browser compatibility, and focusing on a CSS-only solution (which discounts everything else I've read today), is it possible to use position:sticky to lock the first column of a table when the screen is scroll horizontally?
i.e. the left-most column scrolls along with the left-edge of the viewport on a horizontal scroll.
From research, I figured something like this would suffice:
tr > td:first-of-type,
tr > th:first-of-type {
position: sticky;
left: 5px;
}
In my JSFiddle though, it only works in Chrome. Firefox however is supposed to support sticky, so perhaps I've made a code mistake...?
I can implement vertical stickyness, no problem, but not horizontal.
Fiddle: https://jsfiddle.net/qtsoo4w5/2/
I'm using Flexbox to display three cards (.column-layout-card's) per row, in a container.
For every fourth card (first in the beginning of a row), I'm setting the margin-left to 0, and for each card after the first row, I'm adding margin-top: 25px. This works well, as more cards are dynamically added to the container.
Now, I'm working on a "flip" effect, where you click a button on the card and another card takes its place. This card (w/ added class .column-layout-card-instructions) will follow directly after in the markup and will be set to display: none until it's triggered by the button click.
The hidden card gets counted just like all the others in my CSS. So, for example, because it might be the first card in a row, it could get margin-left: 0 -- but because it's actually replacing the third card in the previous row, it needs to have the left margin that a third card would normally have. I've been able to fix this by creating a script that copies the margin of the current card, assigns it to the hidden card, and then toggles.
The problem is that the hidden card still messes up the order of the cards and as a result messes up the positioning of the cards around it.
CSS:
.info-cards .column-layout-card:nth-child(3n+1) {
margin-left: 0;
}
.info-cards > .column-layout-card:nth-child(n+4) {
margin-top: 25px;
}
I wasn't aware that nth-child and nth-of-type could not be applied to specific classes.
What worked for me was to instead use a section instead of a div for .column-layout-card-instructions, and then swap my CSS to:
.info-cards > div:nth-of-type(3n+1) {
margin-left: 0;
}
.info-cards > div:nth-of-type(n+4) {
margin-top: 25px;
}
It's a little bit hacky, but it does the job. If anyone has a more elegant solution, I'll hold off counting my response as correct for a while.
I am trying to figure out how to do something which is quite hard to explain. I have set up a test here
When you visit that site, you will see I have a left and right column. The left column is fixed into position, and when you scroll down, only the right column scrolls. I have put some colourful images in there to show this happening.
What I want to do on the right hand side is have two images side by side, rather than one below each other. To achieve this, I can do
.project {
float: left;
width: 50%;
}
This now displays the images how I want them to display.
However, if you scroll now, you will notice that the left section scrolls down to the bottom instead of staying fixed like it was before.
How can I make the change I am after whilst keeping the left section the same?
Thanks
Maybe instead of changing your .project, you can change the styling of the list elements that contain the project pictures.
I added display: inline-block; to the list using the browser developer tools. It looks like the effect you want.
Edit1: I also added width: 49%;.
New picture:
Edit2: If you must have no spaces between those colorful box things, then using flex is a good way to do that.
To the parent tag (<ul>), you add styling to make it a flex with row wrapping. Then you can set the child's width to 50%.
According to Chrome's developer tools, this should be added around styles.css, line 3238.
nav > ol, nav > ul {
display: flex;
flex: wrap;
}
Note: this will work for at least both inline-block and block child elements.
You have some JS that is removing the class 'title--fixed' from the left hand panel on scrolling, which means it loses the position: fixed. If you add position: fixed to
.chapter .chapter__title {
position: fixed
}
That should resolve
I have a <button> with 3 spans in it - each span containing different text. At different times, triggered by Javascript, the class of the button will change. Using CSS transitions & transform, I have one span moving out of the button, and another moving in. That all works.
The problem is that the button has grown to the full width of span 1 + span 2 + span 3. I want the width to be simply large enough to contain the largest of the spans. If all the spans could be placed one on top of the other, this would work.
I can't figure out how to get the 3 spans to sit one on top of the other.
Here's a fiddle showing the problem: http://jsfiddle.net/V9yTs/ (Click the button to see the change)
Edit Here's the final, working fiddle: http://jsfiddle.net/XW3DY/7/
A solution for layering your spans on top of each other would be to use position: relative; (which I see you already have there) and then modify the top margin of spans 2 and 3 so that they move up to the same position as the span 1.
Here's an updated version of your JSFiddle: http://jsfiddle.net/XW3DY/2/
(Please note that floated elements cannot be placed on top of each other. This is why relative positioning is generally used for placing elements of top of one another.)
Since you already use jQuery, you can just calculate the proper width and height
var w = 0;
$('.btn .msg').each(function () {
w = Math.max(w, $(this).width());
});
$('.btn').width(w);
var h = 0;
$('.btn .msg').each(function () {
h = Math.max(h, $(this).height());
});
$('.btn').height(h);
But now the .msg spans are arranged vertically. To compensate for that, depends on what you what to achieve. One solution is to use position: absolute
.btn {
position: relative;
}
.btn-status .msg {
position: absolute;
}
The .msg spans are now lying on top of each other. You must also adjust the vertical transformation.
See modified JSFiddle
I'm using section to determine different parts of my page. These sections have a bottom margin of 90px but when a section with the ID of 'clients-full' is created/put in the page, I want whatever section that appears before/above it to have a bottom margin of 0. Can I do this using CSS selectors/pseudo selectors?
Currently, this bit of code styles the section with the ID of 'clients-full' but can it be reversed so I can apply a bottom margin of 0 to the section that is before it?
section + section#clients-full {
margin-top: -90px; // Negative margin to get around this problem...not ideal.
}
In CSS as currently defined an implemented, selectors cannot be used in a manner that selects an element depending on what comes after it, only on what comes before it. Well, selectors linke :nth-last-child(...) are an exception in a sense, but they don’t help in a case like this.
Thus, a better approach is to separate the sections by setting a top margin on them, dealing with the first section as a special case if needed (no top margin on it) and perhaps the last section, using :last-ot-type (setting bottom margin on it if needed). Then you can easily handle the case described, simply with #clients-full { margin-top: 0; }.