I'm trying to change the context of an html children element.
<div class="outer-container">
<div class="main-content">
<img class="chid-element" />
</div>
</div>
The main-contentelement is 6 columns wide and is shifted by 2.
I would like its children <img>to span from the .outer container's second column to its 11th.
Any idea? Thanks.
On chid-element you need to use #include span-columns(10 of 8) and #include shift(-1)
http://codepen.io/anon/pen/LpQZgy
Related
I'm currently working with a third party JS library that inserts content areas within the page/DOM, the library is Sir Trevor.
Now I wish to apply some custom CSS rules, for example:
.st-block:before {
#include roundedIcon(38px, $colorX, $colorY);
content: counter(mylistCounter, decimal);
counter-increment: mylistCounter;
margin-right: $margin-variable;
}
now this works great and a number is put before my divs with the .st-block class. However a DIV with this class can and some times does contain a child div with the same class, like so:
<div class="content">
<div id="st-block-16" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
<!-- here's the child... grrr!!! -->
<div id="st-block-17" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
Child Div Here...
</div>
</div>
<div id="st-block-18" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
No Child Div
</div>
<div id="st-block-19" class="st-block st-icon--add st-item-ready" data-type="listicle" data-instance="st-editor-8">
No Child Div
</div>
</div>
How can I amend my CSS/SASS class to prevent the child/nested div with the same class being affected (in the example above the one with ID id="st-block-17")? PLEASE NOTE that I have no control over the alocation of IDs
Select only the classes which are only one level deeper then the div with class="content"
.content > .st-block
I am trying to position 3 divs using Foundation 5 framework. The first two (div 1, div 2) I want them to be full height of the browser window, and the 3rd one can be just a plain div.
How should I proceed? Code examples are highly appreciated.
Try this:
<div class="row">
<div class="small-1 columns"></div>
<div class="small-2 columns"></div>
<div class="small-9 columns"></div>
</div>
its a simple use of zurbs grid layout.
for full width adjust these settings int your _settings.scss file.
$row-width: rem-calc(1000); //make this max of screen size
$column-gutter: rem-calc(0);
$total-columns: 12 ;
you can also explicitly state width:100%; with a class or id.
I believe to provide standard margin-left we can use class "Offset" in bootstrap. At the same time what is the class that can be used to provide standard margin-right?
example:
<div class="row-fluid">
<div class="offset2 span8"></div>
</div>
for some reason I need to give margin-right equivalent to offset2. Some solution will be of great help. Thank you.
There is no equivalent class to offset-x for margin-right and for good reason, it is not needed. Think of it this way, if you need a 6 column div that is offset both right and left 3 columns, you would use:
<div class="row">
<div class="span6 offset3">Your content...</div>
</div>
Also, if you have a 6 column div that needs to only be offset 2 columns BUT, the offset should be 2 columns on the right, the code would be:
<div class="row">
<div class="span6 offset4">Your content...</div>
</div>
Keep in mind you are always working in 12 columns (unless changes in variables.less) so you can use span-x AND offset-x to achieve position desired. If you are looking to tweak additional pixels, add an additional class(or ID) to your content container inside of your span. For example:
<div class="row">
<div class="span6 offset4">
<div class="tweaked-margin">Your content...</div>
</div>
</div>
The CSS:
.tweaked-margin {
margin-right: 4px; // or whatever you need
}
I've got a set of divs in my page with some images inside of them. I would like them to be arranged horizontally instead of vertically ie:
X X X X X
X X X X X
Instead of
X
X
X
...
X
I've tried using the float, position:absolute properties but when using them the elements are "unattached" from the normal flow of the document and positioned outwith the content area.
What is the best way to position elements in such a way without altering the normal flow of the document?
Edit:
<div id="content" class="column"><div class="section">
<h6 id="choose">CHOOSE WHAT YOUR PLANB IS</h6>
<div class="region region-content">
<div class="canvas-wrapper">
<div class="canvas-triangle" id="one">
<canvas id="one"></canvas>
</div>
<div class="triangle-caption">One</div>
</div>
<div class="canvas-wrapper">
<div class="canvas-triangle" id="two">
<canvas id="two"></canvas>
</div>
<div class="triangle-caption">Two</div>
</div>
//ANOTHER 8 LIKE THAT
</div>
</div>
That's the code I have that creates the divs with the images in them. What I would like to do is arrange them as indicated above. Let me know if you need any more details.
Thanks
You don't need to use position, just use float:left for the divs you want in a row. Than you can use some element with clear:left under those divs, so the divs will not overlay this element or any other element further in the code...
edit:
To understand it, try this code with and without clear:
#wrap {width: 500px; background:#ffa;}
div.row {float:left; width:150px; height:150px; background:#aff}
div.right {float:right; height:250px;}
div.clear {clear:left; width: 250px; background:#faf}
<div id="wrap">
<div class="row"><p>div</p></div>
<div class="row"><p>div</p></div>
<div class="row"><p>div</p></div>
<div class="row"><p>div</p></div>
<div class="row right"><p>right</p></div>
<div class="clear"><p>clear</p></div>
<p>Lorem ipsum dolor sit...... </p>
</div>
Also notice the difference if you use clear with value left or both in this case.
Get rid of the absolute positioning. You should give us something more to play with if that's not enough help.
EDIT: See this jsfiddle and let me know what's not clear: http://jsfiddle.net/FH7cg/.
I would like to change the style of all the entries following a certain div. See example. Is this possible with child selectors? Thanks!
<div class="wrapper">
<div class="entry">content</div>
<div class="entry">content</div>
<div class="CHANGE">content</div>
<div class="entry">content</div>
<div class="entry">content</div>
</div>
This selector :
div.CHANGE ~ div {your rules;}
For elements directly under div.wrapper.
div.wrapper > div {your rules;}