I am making a presentation website, with slides. Each slide is a div.
I've made classes like: 'layout-50', 'layout-70', to serve as templates for the slides. It looks something like this:
<!----------- SLIDE 1 ----------->
<!------------------------------->
<div data-scroll-index="0" class="slide">
<div class="layout-100"></div>
</div>
<!----------- SLIDE 2 ----------->
<!------------------------------->
<div data-scroll-index="1" class="slide">
<div class="layout-70">
</div>
</div>
<!----------- SLIDE 3 ----------->
<!------------------------------->
<div data-scroll-index="2" class="slide">
<div class="layout-100">
</div>
</div>
In the CSS, I'm calling to these classes with child selectors. The problem is, I can't use nth:child(2) to select the second 'layout-100' for example. Is there anyway I could do this?
if it is not dynamic, you can check the index of the parent
.slide:nth-child(3) .layout-100 {
}
The problem in your code is there is only one child element inside the slide class div
But using nth-child will have a problem in lower than ie9 browsers
Related
I have a table inside a div that looks like this:
<div fxLayout="row" class="container" fxLayoutAlign="start center">
No related CSS -- I have tried various things but in internet explorer, where I have to use polyfills for anything to work anyway, it will simply refuse to center.
I've found a similar stackoverflow thread but the alignment of the items inside the div was different and didn't really apply to my use case.
I ended up wrapping my whole app in app.component.html like this:
<div class="container"
fxLayout="column">
<div>
<app-navigation></app-navigation>
</div>
<div fxFlexAlign="center" id="routerOutletDiv">
<router-outlet></router-outlet>
</div>
</div>
Then, in my component that I'm trying to center things, my main div where I wrap ALL other divs has the following:
<div fxFlexAlign="center" class="container" fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="15px">
Whilst most of the divs inside this 'parent' have the following:
<div fxFill class="item">
And some of them that had more items inside them, have the following:
<div fxFill fxLayoutAlign="center" class="item">
Also ended up adding fxLayoutAlign="center" to text that had icons inside it, it didn't want to center otherwise. But I did not have to add extra css or touch other properties.
Hi i have the following html
<div>
<div class='brother1'>
HELLO
<div class='item'>One</div>
<div class='item'>Two</div>
<div class='item'>Three</div>
<div class='item'>Seven</div>
</div>
<div class='brother2 button'>
BUTTON
</div>
</div>
I want to set button to be invisible if the amount of items(One,Two,Three...) is bigger that 3.
But if the amount is less then 3 i want the button to be visible.
Is this possible using css only?
If this is not possible how would you change the html structure to achieve the same behavior?
Thanks.
I have this:
<div class="block3">
<div class="surround">
<div class="s_title">
<h3>Title</h3>
</div>
<div class="block_content">
<div class="content"> </div>
</div>
</div>
</div>
In my example I can't add content directly in HTML (blocks rendered by default in PHP), so I need to add in CSS.
The hard part of this is that I need to add text only in block3 element, after <h3> (.s_title:after will affect all s_title, so it will not work for me.)
Is there any way to do this?
Just add .block3 in front of your selector like how you would limit selection of any other element to some container element:
.block3 .s_title:after
Here is my fiddle:
http://jsfiddle.net/XKs8H/1/
And here's my problem:
I'm creating a wiki using MediaWiki. I'm trying to avoid using a lot of extensions and third-party stuff in my installation.
What I'm using is a MediaWiki Template to generate the content shown in my example. Because it's a template, it renders once for every time it's called. So, for each character in the example, the template first creates a left-floating DIV for the name tab and a DIV below that for the content of the character's bio. I can make that part work with absolute positioning, but then the rest of the wiki page content shows up below the absolute div.
Example:
<div id="tab1">Tab 1</div>
<div id="bio1">Tab 1's bio</div>
<div id="tab2">Tab 2</div>
<div id="bio2">Tab 2's bio</div>
<div id="pagebody">Rest of the page's content</div>
Each tab should float next to each other. The bio should show up below the row of tab divs, and pagebody should show up below everything.
I'd recommend something like this:
<div class="tab">
<div class="tab-name">Tab 1</div>
<div class="bio">Tab 1's bio</div>
</div>
<div class="tab">
<div class="tab-name">Tab 2</div>
<div class="bio">Tab 2's bio</div>
</div>
<div class="clearfix">Rest of the page's content</div>
Where the tabs themselves are floating, and clearfix is the common float-clearing page body.
I am using the isotope plugin on my site which is in local development. I'm running into a css problem which i'm hoping someone will be able to help me with. Here's the situation.
<div class="wrapper"> //* Position is relative
<div class="portfolio1"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio2"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio3"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio4"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
</div>
This pretty much lays the portfolio items out in a grid. My problem is that I have a comment system inside which adds the comments inline. When this happens the ".portfolio" class slides underneath the remaining items on the page. Is there a way either through css or jquery that can remedy this problem? I understand that you can position the elements with relative and float them to keep them from running underneath, but as soon as you do that then the isotope plugin breaks down. Here's a screen shot of the problem as well.
Screen Shot
Cheers,
Mike
I'm guessing the comments are inserted with Ajax? Maybe there's some CSS attached to them that could be overridden to position them differently and keep them within their divs.
Just as likely, though, you shouldn't use Isotope for this. If you're using isotope just to create grid there are simpler ways to do that (you might only need to use float). Isotope does some very fancy footwork, does it differently in different browsers and really likes to work on elements with a nice, specific size. If the comments are getting added with javascript, changing the divs at the same as as Isotope is trying to calculate how it's going to move things around for the layout, you're going to run into trouble.