Trying to make sure that the columns are all floated to the left while not having huge gaps between the rows.
Here's the HTML:
<div class="row hide-for-small">
<div ng-repeat="module in modules">
<div class="medium-6 large-4 columns">
<div class="modBoxContainer">
<div class="modBox">
<div class="modHeading">
<h1><span class="modNumber">{{ module.part }}</span> {{ module.title }}</h1>
</div>
<ul>
<li ng-repeat="section in module.sections">
<a ng-href="#/education/{{ module.url }}/{{section.number}}/01"><strong>Part {{ section.number | number:0 }}: </strong>{{ section.title }}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
And as for css it's your average columnar layout through foundation or the like. Columns are fine until they're all different height just as in the picture. I have tried applying n-th child to .modBox and .modBoxContainer but a lot of times it won't even recognize the n-th child rule if used with :nth-child(n+smth)...
How could I assign 1 height to the first three columns and different height to the rest of them? I've tried applying height: auto, height: 100%, combined with min-height or just height rules specified.
Sorry, can't recreate much of the code in JSFiddle or such as it's a huge project I'm working on, but suggestions would be nice. But some suggestions would be great to try as I'm running dry on ideas.
Here's the screenshot of the problem:
NOTE: This solution only works for modern browsers (IE9 and up)
For selecting the first three elements, you can do
nth-of-type(-n+3)
Source
http://www.w3schools.com/cssref/sel_nth-of-type.asp
Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.
Related
I have a row class inside a col class using bootstrap 4 which looks perfect on desktop, but for mobile I want to force the row to be below it's parent row when the page is viewed on mobile. So technically I want to 'break out' of it's parent without changing the height of the parent. Here's an example of what I have currently on desktop:
And what I'm trying to achieve on mobile:
My code is just basic bootstrap with no additional CSS changes:
<div id="jumbo" class="row">
<div id="info" class="col-xl-6 col h-100">
<div class="row">
<div id="info-text" class="col offset-md-2">
<p class="display-4">Estate planning made easy</p>
<p>
Let’s get a clear plan in place for your money,<br>
property and other assets here and now.<br>
It’s never too early to protect what’s important<br>
to you and your family.
</p>
<p class="museo-sans-900">Get your free personalised report in just 20 minutes</p>
<button class="btn btn-brand-secondary">Start Now</button>
</div>
</div>
</div>
</div>
You can make two versions of the section. One like the first one and one like the second. Then put id=#desktop for the first and id=#mobile for the second . Then be sure to mark #desktop{display:none} for #media only screen and (max-width: (insert width of mobiles)), and #mobile{display: none} for min-width: (insert width of mobiles) . It s a long way, but if you don t find another easier way you can try this.
Wonder if that is correct the BEM way. Let's say I have a component/block "box".
<div class="box">
<div class="box__title">Box Title</div>
</div>
This box can be used everywhere. But then for example this box can also be used in a list ex.
<ul>
<li>
<div class="box">
<div class="box__title">Box Title</div>
</div>
</li>
</ul>
It is correct to call the DOM-Classes like that?
<ul class="box__list">
<li class="box__item">
<div class="box">
<div class="box__title">Box Title</div>
</div>
</li>
</ul>
So "box__list" and "box__item" is somehow outside of the block "box".
"box__item" then have some specific stuff.
.box__item {
margin-bottom: 20px;
}
It is "allowed" to do it this way or do I need here completly something different like "box-wrapper__list" and "box-wrapper__item".
Thanks for commenting. :)
Since the elements are outside of the .box then no, it does not make sense to give them these classes.
You have to think what your base components/blocks (think 'building blocks') are.
A component/block is something you can (ideally) place anywhere inside your layout and still have it look/behave the same way, regardles of parent or adjacent elements. The BEM naming convention tries to enforce CSS "modularity" in this sense.
To me it looks like you definitely have a .box component. If you think the list should be another component/block, then name it something else, as you would name a block and not an element.
References:
BEM key concepts
BEM naming conventions
so this makes now more sense - thanks!
<ul class="box-wrapper">
<li class="box-wrapper__item>
<div class="box">
<div class="box__title">Box Title</div>
</div>
</li>
</ul>
I completely understand the thought process behind your question and it is something I have attempted to resolve.
The solution I came up with is stopping using the __wrap naming convention and changing to __inner or content. Essentially a word that best describes the inside, rather than outside as wrap did.
From there we can create an example like so.
This does mean that you will have to change the way you apply classes slightly, but i did find that it helps encapsulate the entire block, rather than having to deal with the ambiguity haing box__wrap on the outside creates.
<div class='box'>
<div class='box__inner'>
<div class='box__head'>head</div>
<div class='box__main'>main</div>
<div class='box__foot'>foot</div>
</div>
</div>
Hopefully my answer helps you in some way,
Yes, #b_ element can be placed outside his block in DOM. Also different blocks & elements can intersections in DOM-tree: https://en.bem.info/forum/43/ (proof from authors of BEM-methodology).
But in your current case you shouldn't use that for positioning, your version with wrappers is correct.
In most HTML files I've been looking in to learn HTML I can find lots of code written like this:
<div class="lvl1">
<div class="lvl2">
<div class="lvl3">
<a>my content</a>
</div>
</div>
</div>
I was wondering if from a "my content" point of view this was strictly equivalent to following code:
<div class="lvl1 lvl2 lvl3">
<a>my content</a>
</div>
No. div is a block element. Hence, without tweaking the CSS, the first has three blocks. The last one.
A "div" with three differents CSS class is not the same as three imbricated divs.
The example code is trivial, and it's clearly nonsense to imbricate three divs if only "lvl3" contains some html. But if all the divs contains html, trying to represent this with one div is just impossible.
Using the Gumby Framework I'm encountering issues nesting divs.
I'm trying to nest a three and seven column grid within a ten column grid.
I've tried a few variations with my HTML/CSS to no avail. Figure I must be missing something fairly simple.
Site Link
HTML code example:
<div class="ten columns main_col">
<p>Text removed</p>
<div class="row">
<div class="three"><h2 class="100width">Core Services</h2></div>
<div class="seven"></div>
</div>
</div>
The framework isn't "smart". Everything is based on 12 or 16 columns. So you've got to do all the thinking for things of this nature. If you want a 3-7 centered container within a 12 column grid, the following code does just that:
<!-- 10 Columns -->
<div class="row">
<div class="three columns push_one">3 col</div>
<div class="seven columns">7 col</div>
</div>
<!-- // End 10 -->
Here's why: 10 columns = 10 of 12(for argument's sake), 3 columns and 7 columns within that container are actually a 30% of 12 column next to a 70% of 12 column residing inside a 83.333% of 12 column container. Throwing class="ten columns" on the container doesn't fire some kind of recursive function to "reset" the container as a 10 column grid system; thus, the goofy margins, padding, etc. It's actually working as expected. Hope that makes sense.
I'm creating templates for a Django project, and I need to create a three column table in HTML, using just CSS, rather than a <table> element.
The reason, apart from any ideological opposition to tables, is that the report needs to be viewed on both desktops as well as handheld devices such as BlackBerry. On handhelds, rather than trying to force three columns on a minuscule screen, the objective is to break up the table into a series of consecutive paragraphs.
Previously, I'd hacked a quick/dirty template out using the Less framework (http://lessframework.com/).
{% for category in article_list_categorised %}
<h2 class="first">{{ category.grouper }}</h2>
{% for item in category.list %}
<h3 class="two first">{{ item.firms.all|join:", " }}</h3>
<h4 class="two">{{ item.subject }}</h4>
<p class="seven">
{{ item.abstract }}
</p>
<h4 class="one">{{ item.source_publication }}</h4>
<h4 class="one">{{ item.publication_date }}</h4>
<h4 class="one">Page: {{ item.page_number }}</h4>
{% endfor %}
{% endfor %}
<footer>
<p class="four off-four">
{% now "l, jS F Y" %}
</p>
</footer>
On screen, this gives a three column table, containing a list of articles. For each article (row), we have:
First column contains the firm name
Second column contains the subject and article abstract
Third column contains the source publication, the publication date and the page number.
And when displayed on the BlackbBerry browser, it breaks up the columns in consecutive paragraphs, on top of each other.
Now, I want to move away from using Less to doing the markup/CSS from scratch.
I found another StackOverflow question asking something similar:
How to create three columns in css
and the advice from there is basically to use <ul> and <li>. I've hacked out something like this, two rows, three columns:
<ul>
<li> <!-- First row -->
<ul>
<li>Deutsche Bank, Goldman Sachs JBWere</li>
<li>Costs</li>
<li>
<p>AAP</p>
<p>June 28, 2010</p>
<p>Page: 3</p>
</li>
</ul>
</li> <!-- End of first row -->
<li> <!-- Second row -->
<ul>
<li>Deutsche Bank</li>
<li>Plans</li>
<li>
<p>Bloomberg</p>
<p>June 29, 2010</p>
<p>Page: 1</p>
</li>
</ul>
</li> <!-- End of Second row -->
</ul>
My question is, is this optimal, or is there perhaps a more streamlined hierarchy I could go for, or any tags I can strip out of the above?
Also, the article referenced in the above question talks about three columns, with one row. I need three columns, with a new row for each article.
What's a good way of CSS styling the above, to give three columns, with each set on a new row, and still have it display as consecutive paragraphs on handhelds?
Using an unordered list is not a BAD method, and the benefit of this is that devices or browsers with CSS disabled (yep, you'll be surprised) will degrade gracefully into a legible list. If you wanted the above to display in a 3 column layout with each row on a new "line" I would try something like this for your css:
First give your ul an ID attribute, so in our case we'll call it <ul id="fakeTable">, and then we can style our li elements to act as table cells:
#fakeTable, #faketable li{
list-style-type:none; //no bullets etc
margin:0;
padding:0;
}
#fakeTable{
width:800px; //you could set it to any width really, just an example
}
#fakeTable li{
display:block;
float:left;
clear:none;
width:200px;
padding:0 11px 0 11px;
}
Now assuming your <ul> is 800px wide, the <li> elements will wrap to the next line from 4 to 6, 7 to 9 etc as there is no more space to float a 4th one on each row.
If you do not have a set width, convert the widths to %, you could have the <li> width set to 33% - with no <li> padding of course - which will give you a width of 99% across 3 <li> elements, so no space for a 4th, and it will wrap to the next line!
I'd go for 3 divs, each containing one column, give them a min-width and a max-width, and display: inline-block. If the screen is large enough to accommodate them next to each other, they'll be laid out as 3 columns, otherwise, they'll stack. You'll need some extra hacks for IE 6 (maybe 7 too) because it doesn't support inline-block.
Create multi-column layout with div is very simple but you should pay attention to the followings:
Sum of width of element column (including margin and padding) must < 100% (or width of the main column in pixel).
Using float:left (or right) to ensure the column appear side-by-side
Using a clear element to ensure the margin attribute of below elements
Example:
<div id="main">
<div class="col 1st-col">
</div>
<div class="col 2nd-col">
</div>
...
<div class="clr"></div>
</div>
.col {float: left;}
.1st-col {width: 30%; margin-left: 1%}
....
.clr {background: url('empty.gif');} /* empty.gif is a gif image (1px x 1px transparent) */
This surely works on every browser. Div .clr to fix the height of div.main in FF, Chrome, IE6. The attribute display: inline-block doesn't work in IE.