I have a web layout I have been working on today with one static column and one fluid column.
My problem is that the code suddenly broke (I'm not sure why) and it is now floating incorrectly.
My structure is this:
<div class="side-wrap">
<div class="side">
<div class="side-menu">
<ul>
<li class="brand">ProbabilityWolf</li>
<li class="active">Home<span>»</span></li>
<li>About<span>»</span></li>
<li>Contact<span>»</span></li>
</ul>
</div>
</div>
</div>
<div class="page-wrap">
<div class="page">
</div>
</div>
I am posting the CSS externally becuase there is quite a bit of it.
Here is my code (and the website): http://jsfiddle.net/QTbtA/
Since I am asking anyway, is there any way to improve my layout to make it work better? I am writing this out of my head, and I am a beginner when it comes to fluid layouts.
EDIT: I have now resolved the problem, although tips would be appreciated.
If I understand you right - it works for me in chrome if I remove margin-right:400px from your .side-wrap class.
Here is an updated jsfiddle. I hope it does what you want.
Related
I'm not sure if SO is the right place to ask such question. Let me know if it is not so.
I'm learning the BEM CSS methodology recently and I like how it solves many of the CSS problems like specificity issues. It makes our CSS more maintainable.
As I'm new to it, I'm having a hard time creating correct HTML layout with proper BEM class. I've created a module using BEM and would like experts on opinion on what could be the correct layout according to the best practices of BEM.
Here is the screenshot of what I'm trying to using BEM CSS methodology.
Here is HTML layout that I've come up with so far, please let meknow what would be right way to achieve the same.
<section class="content">
<div class="step-nav">
<div class="step-item">
<div class="step-item__left">
<div class="step-item__progress">
<div>
<i class="fa fa-lightbulb-o" aria-hidden="true"></i>
<span>Step 1</span>
</div>
<div>100%</div>
</div>
<h2 class="step-item__title">General Information</h2>
</div>
<div class="step-item__right">
<i class="fa fa-angle-right" aria-hidden="true">
<span class="screen-reader-text">Next</span>
</i>
</div>
</div>
<div class="step-item"></div>
<div class="step-item"></div>
</div>
</section>
Looks about correct, but you should have just a step-nav block, and all the subsequent child components are simply elements, i.e.:
step-item should really be step-nav__item, since item is an element of step-nav
step-item__left should really be step-nav__item--left since left is a modifier. With that in mind, you should combine them so that you will be using <div class="step-nav__item step-nav__item--left"> in the same nesting level, removing that extra unnecessary level of <div> nesting
Of course, if you think step-nav is too long of a word, you can use step instead.
I have a doubts about this HTML structure. Is it correct according to BEM approach?
<div class="boxWithBorder">
<div class="header">
<h2 class="boxWithBorder__element"></h2>
</div>
</div>
To my mind it should look like that
<div class="boxWithBorder">
<div class="header">
<h2 class="header__element"></h2>
</div>
</div>
What keeps elements encapsulated.
Generally we do components and structures, that means structures are compositions of components. It will require nesting so that part is ok. As far as your first approach that is not ok by our standards and not used. block1 should not live inside block2 but block2 has to live inside block1 as it's a nested component. Makes sense? BTW BEM is perfectly fine to use and a lot of frontend devs do it, heavyweights as well, check out csswizardry.com for instance, he got some great articles about BEM
Also I would suggest the following using BEM (or any html/css for that matter) is that skip the camleCase and use "-" instead
<div class="box-with-border">
<div class="header">
<h2 class="header__element"></h2>
</div>
</div>
<div class="hero hero--red-with-border">
<h1 class="hero__title>Title...</h1>
<p class="hero__body-text">Text...</p>
</div>
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.
I've seen lately a lot of discussions about this new concept called oocss and I was wondering if it is a bad practice to wrap your main tags in divs only for styling/page layout purposes.
I'm asking this because I see some frameworks like Twitter Bootstrap use such a method.
What are the implications of such a markup from a semantic and accessibility point of view?
For example:
<div class="container">
<div class="row">
<div class="span4">
<nav class="nav">...</nav>
</div>
<div class="span8">
...
</div>
</div>
</div>
instead of
<div class="menu">
<nav class="nav">...</nav>
...
</div>
No, it's fine. HTML is a "mark-up language", and mark-up involves styling. Besides, everyone does it. Many of the fluid multi-column layouts rest precisely on this approach.
Using unnecessary divs is not a good idea... if the HTML codes in the second box is enough to do everything that you want or need to do then don't use extra divs... secondly, HTML codes in the second box is much clear and shorter then the codes in the first box... if you keep your codes clean, short and formatted, it will help you a lot when you want or need to update your code in future...
I'm using the jQueryUI accordion widget to provide the functionality I need. I'm not that familiar with IE tweaks so the solution escapes me.
If you visit my test site, try to expand the categories using a modern browser such as Firefox, Opera or Chrome. It works as intended.
However when using IE8, the category tree moves to the left a bit, and there is even some bigger separation between the categories themselves.
What can I do to fix this bad behavior?
(Note: Forget about IE6,7 support, it just has to work, not look pretty. )
remove width from categories class, tried in ie8 and problem disappear
You have poorly formed HTML5 markup. That might not be helping. The number of list elements you have is real long so I'll just give a snippit.
<div class="widget-box">
<h1>MENÚ PRODUCTOS</h1>
<div class="content">
<div class="categories">
<h3><img src="http://i.imgur.com/TThAk.gif" />CCTV<p class="subtext">Circuito cerrado de televisión </p></h3>
<div>
<ul>
<div class="categories">
<h3><img src="http://i.imgur.com/TThAk.gif" />Camaras<p class="subtext"></p></h3>
<div>
<ul>
<div class="categories">
<h3><a class="nochild" href="/Productos/Categoria/115">Camaras Infrarrojas</a><p class="subtext nochild"></p></h3>
<div>
<ul></ul>
</div>
</div>
<div class="categories">
<h3><a class="nochild" href="/Productos/Categoria/116">Profesional</a><p class="subtext nochild"></p></h3>
<div>
<ul></ul>
</div>
</div>
On the 7th and 11th line above, you have UL tags but then proceed to use DIV tags. UL tags can only have LI elements as a child per W3. http://www.w3.org/TR/2011/WD-html-markup-20110113/ul.html
I think your HTML could be closer to this:
<div class="widget-box">
<h1>MENÚ PRODUCTOS</h1>
<div class="content">
<ul>
<li>
<h3>CCTV <b>Circuito cerrado de televisión</b></h3>
<ul>
<li>
<h3>Camaras</h3>
<ul>
<li>Camaras Infrarrojas</li>
<li>Profesional</li>
</ul>
</li>
Though, there's probably better semantic use of tags possible than what I've got here.
You can then add a little padding to the left of your H3 > a tag and use the +/- gif as a background image that can be swapped with a CSS class. That will make the swap real straight forward in jQuery to simply toggle the clicked anchor class. That will help solve the previous bug I mentioned.
I hope that helps a little as Yucel seems to have a solution for the other issue, but there might be more going on with the HTML issues.
Cheers!