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.
Related
Background: Ive done a few small websites using W3CSS, & get my knowledge from this website: https://www.w3schools.com/w3css/w3css_input.asp
Right now, I am starting on a brand new website & having a bit of difficulty centering an input field. (the form doesnt work as yet, i'm just trying to get it to look right).
http://clubs.kwister.com/login
Basically, you can see TWO forms asking for an email address. The first one, is CENTERED, with the input field at 50% width. However the actual input field where a person enters their email address is flushed to the left.
The second form, I have taken out the width:50% but now i see an input field taking the whole width of the screen.
Is there something i am missing, to make it look somewhat presentable & have the actual input field centered, but only 40-50% of the width ?
I see from the W3 website that theres no 'width' examples and all the input fields take up 100% of the available width.
i do want white-space on both sides (I may or may not add anything later on to fill the whitespace)
PS I could do the w3-third class (responsive section), and divide the screen into thirds, however i want the form to take up more than a third of the width of the screen.
Ive found a working solution - using INLINE BLOCK.
width: 50%; text-align: center; display: inline-block;
Number 1 of my example is working, i'll edit out the others out.
Well, There's an easy way to center an input field. There's a way you could center it by setting its position: relative; and left: 25%;, or you could set text-align: center; on the parent form. Depends on what you're after. Personally, I'd go with the relative position and left.
Hope that helps
ps. I wouldn't try to use display: inline-block; use display: block; float: left;
If You are still using w3css stylings- inside the input feild add class w3-center
This will center the input feild content.
Just add this class on div and should be centered
<div class="w3-display-container w3-col s4 w3-display-middle">
your contents here.....
</div>
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 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
I'm learning HTML/CSS and I encountered a problem. I'm currently working on goodwill.heyscout.com as a side project.
From learnlayout.org, I learned that the best way to structure a layout with a div is to give the inner a position:absolute, and the outer a position:relative. This works.
However, this throws the alignment off as soon as I add the position:absolute (I want the profile cards side-by-side). Without the position absolute, everything gets shifted if I want to alter the layout of the profile card. As you can see on the bottom two profile cards, they align as those aren't altered.
Can anybody point me in the right direction?
I also know that my code is pretty messy and that's what I really need to get better at... any other suggestions on how I can improve my code would also be useful.
You can throw a float: left onto your outer class and that should get them sitting side by side again. You may want to read up on using floats at some point as they can be very powerful (if a little hard to get your head around at first)
.outer {
width: 49%;
display: inline-block;
float: left;
}
BTW, I notice you using id="outer" multiple times. You should change this to class="outer" as an ID should be unique, whereas a class can be used multiple times. You'll see in the above CSS that I've used .outer as I'm targeting by a class name (rather than #outer which targets by ID)
Interesting problem you have found. I can't tell you exactly why it is behaving this way but it appears to be related to having text directly in the #box div or not. If you remove the "test" from the second one it aligns as you would expect. Likewise, if you put the exact same content in the second div as the first, they align.
For improvements I would start by never re-using an id (like you are doing with #outer and #box for example, these should be classes). The id attribute needs to be unique, no two DOM-elements should have the same id.
I would also suggest using a ul for #businesscards sice it represents a list of cards. This would make #outer an li. You did this in #navlist so you know what I mean.
Give just vertical-align: top; to your #outer div. The problem will be solved.
As this happens only to child elements, give something like this to solve the issue:
div > * { /* or just '*' */
vertical-align: top; /* or middle */
}
I found a way to change the background color of a menu option upon hover. However, when you hover an option, it takes up some wide space that moves all the other options to the right, its sort of annoying, i want to maintain a consistent space, so if i hover, only the color should change, not the option moving to the right. Sort of the way facebook has its menu options.
Below is the code:
<div id="menu">
home
profile
account
settings
extra
logout
</div>
CSS:
div#menu {
margin-left: 630px;
margin-top:-20px;
}
option {
margin-left: 20px;
}
#option:hover{
background: #3F2327;
padding: 10px;
}
Remove padding: 10px;
Space around an element takes up space, so if you don't want space, don't add it. If you want it all the time, add it all the time and not just for :hover
Also, unrelated to your problem, but just good practises:
If you use a browser that doesn't support CSS, has it turned off, or isn't graphical you end up with home profile account settings extra logout — you have a list of links, use list markup. There is plenty of guidance on making it pretty.
An id must be unique in a document, only use it to identify a specific element. Use the class attribute if you want to state that a bunch of elements are all members of the same class.
Avoid using class and id names that are the same as HTML elements, it just makes code confusing
1) You are missing a # on "option"
2) Why are you padding on hover? That will cause a movement when you hover above it.